yizhizan-h5/my/renzheng/companyLogo.vue

<template>
  <view class="switch-roles">
    <nav-bar title="公司信息" color="#000"></nav-bar>
    <view class="roles-content">
      <view class="content">
        <view class="progress-num"> <text>6</text>/8 </view>
        <view class="title">
          <view>添加公司LOGO</view>
        </view>
        <view class="desc">该logo将出现在公司主页及公司下展示的所有职位上</view>

        <view class="content-index">
          <!-- Logo上传区域 -->
          <view class="upload-section">
            <view
              class="upload-box"
              :class="{ 'has-image': logoImage }"
              @click="chooseImage"
            >
              <view v-if="!logoImage" class="upload-placeholder">
                <u-icon name="plus" color="#999" size="40"></u-icon>
                <text class="upload-text">添加照片</text>
              </view>
              <view v-else class="image-preview">
                <image :src="logoImage" mode="aspectFill" class="preview-image"></image>
                <view class="image-mask" @click.stop="previewImage">
                  <u-icon name="eye" color="#fff" size="40"></u-icon>
                </view>
                <view class="delete-btn" @click.stop="deleteImage">
                  <u-icon name="close" color="#fff" size="20"></u-icon>
                </view>
              </view>
            </view>

            <!-- 上传进度 -->
            <view v-if="uploading" class="upload-progress">
              <view class="progress-bar">
                <view
                  class="progress-inner"
                  :style="{ width: uploadProgress + '%' }"
                ></view>
              </view>
              <text class="progress-text">{{ uploadProgress }}%</text>
            </view>
          </view>

          <!-- 注意事项 -->
          <view class="warning-box">
            <view class="warning-title">注意事项：</view>
            <view class="warning-list">
              <view class="warning-item">1. 请上传清晰且完整的图片</view>
              <view class="warning-item"
                >2.
                请上传品牌相关的图片，含有其他内容将无法通过审核（包括但不限于含有水印、招聘信息、联系方式、二维码等相关内容）</view
              >
              <view class="warning-item"
                >3. 上传图片须符合中国相关法律法规，不得含有违法内容或不良信息</view
              >
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="submit-btn" :class="{ disabled: !logoImage }" @click="goJobPostingSecond"
      >下一步</view
    >
  </view>
</template>

<script>
import navBar from "@/components/nav-bar/index.vue";
export default {
  data() {
    return {
      text: "",
      logoImage: "", // 上传的logo图片URL
      uploading: false, // 是否正在上传
      uploadProgress: 0, // 上传进度
    };
  },
  components: {
    navBar,
  },
  onLoad(options) {
    if (options.text) {
      this.text = options.text;
    }
  },
  methods: {
    // 选择图片
    chooseImage() {
      const that = this;
      uni.chooseImage({
        count: 1,
        sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
        success: (res) => {
          // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
          const tempFilePaths = res.tempFilePaths;

          // 这里可以添加图片验证
          that.validateAndUploadImage(tempFilePaths[0]);
        },
        fail: (error) => {
          console.log("选择图片失败:", error);
          uni.showToast({
            title: "选择图片失败",
            icon: "none",
          });
        },
      });
    },

    // 验证并上传图片
    validateAndUploadImage(tempFilePath) {
      const that = this;

      // 获取图片信息
      uni.getImageInfo({
        src: tempFilePath,
        success: (imageInfo) => {
          console.log("图片信息:", imageInfo);

          // 这里可以添加图片尺寸验证
          // if (imageInfo.width < 100 || imageInfo.height < 100) {
          //   uni.showToast({
          //     title: '图片尺寸过小，建议200×200px以上',
          //     icon: 'none'
          //   });
          //   return;
          // }

          // 开始上传
          that.uploadImage(tempFilePath);
        },
        fail: (error) => {
          console.log("获取图片信息失败:", error);
          that.uploadImage(tempFilePath); // 即使获取信息失败也继续上传
        },
      });
    },

    // 上传图片到服务器
    uploadImage(filePath) {
      const that = this;
      that.uploading = true;
      that.uploadProgress = 0;

      // 模拟上传进度
      const progressTimer = setInterval(() => {
        that.uploadProgress += 10;
        if (that.uploadProgress >= 90) {
          clearInterval(progressTimer);
        }
      }, 100);

      // 这里替换为你的实际上传接口
      // uni.uploadFile({
      //   url: '你的上传接口地址',
      //   filePath: filePath,
      //   name: 'file',
      //   formData: {
      //     'type': 'company_logo'
      //   },
      //   success: (uploadRes) => {
      //     clearInterval(progressTimer);
      //     that.uploadProgress = 100;
      //
      //     const data = JSON.parse(uploadRes.data);
      //     if (data.code === 200) {
      //       that.logoImage = data.data.url;
      //       uni.showToast({
      //         title: '上传成功',
      //         icon: 'success'
      //       });
      //     } else {
      //       uni.showToast({
      //         title: data.message || '上传失败',
      //         icon: 'none'
      //       });
      //     }
      //
      //     setTimeout(() => {
      //       that.uploading = false;
      //     }, 500);
      //   },
      //   fail: (error) => {
      //     clearInterval(progressTimer);
      //     that.uploading = false;
      //     uni.showToast({
      //       title: '上传失败',
      //       icon: 'none'
      //     });
      //   }
      // });

      // 模拟上传成功（实际开发中请使用上面的上传代码）
      setTimeout(() => {
        clearInterval(progressTimer);
        that.uploadProgress = 100;
        that.logoImage = filePath; // 使用本地路径，实际开发中应该使用服务器返回的URL

        setTimeout(() => {
          that.uploading = false;
          uni.showToast({
            title: "上传成功",
            icon: "success",
          });
        }, 500);
      }, 1500);
    },

    // 预览图片
    previewImage() {
      if (this.logoImage) {
        uni.previewImage({
          urls: [this.logoImage],
          current: 0,
        });
      }
    },

    // 删除图片
    deleteImage() {
      const that = this;
      uni.showModal({
        title: "提示",
        content: "确定要删除这个LOGO吗？",
        success: (res) => {
          if (res.confirm) {
            that.logoImage = "";
            that.uploadProgress = 0;
          }
        },
      });
    },
    goJobPostingSecond() {
      if (!this.logoImage) {
        uni.showToast({
          title: "请上传公司LOGO",
          icon: "none",
        });
        return;
      }
      uni.navigateTo({
        url: "/my/renzheng/companyImg?logo=" + encodeURIComponent(this.logoImage),
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.switch-roles {
  background-color: #fff;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;

  .roles-content {
    width: 100%;
    flex: 1;
    overflow: hidden;
    overflow-y: auto;

    .content {
      padding: 40rpx;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .progress-num {
        color: #016bf6;
        font-family: DM Sans;
        font-size: 24rpx;
        font-weight: 500;
        width: 100%;
        padding-bottom: 20rpx;
        box-sizing: border-box;
        text {
          font-size: 48rpx;
          font-weight: 700;
        }
      }

      .title {
        color: #333;
        width: 100%;
        font-family: DM Sans;
        font-size: 48rpx;
        font-weight: 700;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
      }

      .desc {
        color: rgba(102, 102, 102, 1);
        width: 100%;
        font-family: DM Sans;
        font-size: 24rpx;
        font-weight: 400;
        line-height: 32rpx;
        letter-spacing: 0.5%;
        text-align: left;
        box-sizing: border-box;
        margin-bottom: 40rpx;
      }

      .content-index {
        width: 100%;

        .upload-section {
          margin-bottom: 20rpx;
          .upload-box {
            width: 142rpx;
            height: 142rpx;
            border-radius: 8rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #eee;
            position: relative;
            overflow: hidden;

            &.has-image {
              border-style: solid;
              border-color: #016bf6;
            }

            .upload-placeholder {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;

              .upload-text {
                color: #666;
                font-size: 20rpx;
                margin-top: 8rpx;
                font-family: DM Sans;
              }

              .upload-subtext {
                color: #999;
                font-size: 20rpx;
              }
            }

            .image-preview {
              width: 100%;
              height: 100%;
              position: relative;

              .preview-image {
                width: 100%;
                height: 100%;
                border-radius: 12rpx;
              }

              .image-mask {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                transition: opacity 0.3s;

                &:active {
                  opacity: 1;
                }
              }

              .delete-btn {
                position: absolute;
                top: 8rpx;
                right: 8rpx;
                width: 30rpx;
                height: 30rpx;
                background: rgba(0, 0, 0, 0.5);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
              }

              &:active .image-mask {
                opacity: 1;
              }
            }
          }

          .upload-progress {
            margin-top: 20rpx;
            display: flex;
            align-items: center;
            gap: 20rpx;

            .progress-bar {
              flex: 1;
              height: 8rpx;
              background: #f0f0f0;
              border-radius: 4rpx;
              overflow: hidden;

              .progress-inner {
                height: 100%;
                background: #016bf6;
                border-radius: 4rpx;
                transition: width 0.3s;
              }
            }

            .progress-text {
              color: #016bf6;
              font-size: 24rpx;
              min-width: 80rpx;
            }
          }
        }

        .warning-box {
          color: rgba(102, 102, 102, 1);
          font-family: DM Sans;
          font-size: 24rpx;
          font-weight: 400;
          line-height: 32rpx;
          .warning-item {
            margin-top: 8rpx;
          }
        }
      }
    }
  }

  .submit-btn {
    flex-shrink: 0;
    border-radius: 999px;
    background: #ff6600;
    color: rgba(255, 255, 255, 1);
    font-family: DM Sans;
    font-size: 32rpx;
    font-weight: 400;
    line-height: 48rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24rpx 32rpx;
    box-sizing: border-box;
    margin: 30rpx 40rpx;
    margin-top: 20rpx;

    &.disabled {
      background: #ccc;
      color: #999;
    }
  }
}
</style>