feat:公司信息静态页面

my/renzheng/companyImg.vue

@@ -0,0 +1,485 @@
+<template>
+  <view class="switch-roles">
+    <nav-bar title="公司信息" color="#000"></nav-bar>
+    <view class="roles-content">
+      <view class="content">
+        <view class="progress-num"> <text>7</text>/8 </view>
+        <view class="title">
+          <view>展示公司照片</view>
+        </view>
+        <view class="desc">在公司主页上展示亮眼的照片，体现企业氛围与文化魅力；最多上传20张</view>
+
+        <view class="content-index">
+          <!-- 多图上传区域 -->
+          <view class="upload-section">
+            <view class="images-grid">
+              <!-- 已上传的图片 -->
+              <view
+                class="image-item"
+                v-for="(image, index) in imageList"
+                :key="index"
+                @click="previewImage(index)"
+              >
+                <image :src="image.url" mode="aspectFill" class="preview-image"></image>
+                <view class="image-mask">
+                  <u-icon name="eye" color="#fff" size="30"></u-icon>
+                </view>
+                <view class="delete-btn" @click.stop="deleteImage(index)">
+                  <u-icon name="close" color="#fff" size="20"></u-icon>
+                </view>
+              </view>
+              
+              <!-- 添加图片按钮 -->
+              <view
+                class="upload-box"
+                v-if="imageList.length < maxCount"
+                @click="chooseImage"
+              >
+                <view class="upload-placeholder">
+                  <u-icon name="plus" color="#999" size="40"></u-icon>
+                  <text class="upload-text">添加照片</text>
+                </view>
+              </view>
+            </view>
+
+            <!-- 上传计数 -->
+            <view class="upload-count" v-if="imageList.length > 0">
+              已上传 {{ imageList.length }}/{{ maxCount }} 张
+            </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: imageList.length === 0 }" @click="goJobPostingSecond"
+      >下一步</view
+    >
+  </view>
+</template>
+
+<script>
+import navBar from "@/components/nav-bar/index.vue";
+export default {
+  data() {
+    return {
+      text: "",
+      imageList: [], // 上传的图片列表
+      maxCount: 20, // 最大上传数量
+      uploading: false, // 是否正在上传
+      uploadProgress: 0, // 上传进度
+    };
+  },
+  components: {
+    navBar,
+  },
+  onLoad(options) {
+    if (options.text) {
+      this.text = options.text;
+    }
+  },
+  methods: {
+    // 选择图片
+    chooseImage() {
+      const that = this;
+      const remainingCount = this.maxCount - this.imageList.length;
+      
+      uni.chooseImage({
+        count: remainingCount, // 最多选择剩余数量
+        sizeType: ["compressed"],
+        sourceType: ["album", "camera"],
+        success: (res) => {
+          const tempFilePaths = res.tempFilePaths;
+          
+          // 批量上传图片
+          that.uploadMultipleImages(tempFilePaths);
+        },
+        fail: (error) => {
+          console.log("选择图片失败:", error);
+          uni.showToast({
+            title: "选择图片失败",
+            icon: "none",
+          });
+        },
+      });
+    },
+
+    // 批量上传图片
+    uploadMultipleImages(filePaths) {
+      const that = this;
+      that.uploading = true;
+      that.uploadProgress = 0;
+
+      // 模拟上传进度
+      const progressTimer = setInterval(() => {
+        that.uploadProgress += 10;
+        if (that.uploadProgress >= 90) {
+          clearInterval(progressTimer);
+        }
+      }, 100);
+
+      // 模拟批量上传成功
+      setTimeout(() => {
+        clearInterval(progressTimer);
+        that.uploadProgress = 100;
+
+        // 将新图片添加到列表
+        const newImages = filePaths.map(filePath => ({
+          url: filePath,
+          // 实际开发中这里应该是服务器返回的URL
+        }));
+        
+        that.imageList = [...that.imageList, ...newImages];
+
+        setTimeout(() => {
+          that.uploading = false;
+          uni.showToast({
+            title: `成功上传${newImages.length}张图片`,
+            icon: "success",
+          });
+        }, 500);
+      }, 1500);
+
+      // 实际开发中应该使用下面的代码：
+      /*
+      let uploadedCount = 0;
+      const totalCount = filePaths.length;
+      
+      filePaths.forEach((filePath, index) => {
+        uni.uploadFile({
+          url: '你的上传接口地址',
+          filePath: filePath,
+          name: 'file',
+          formData: {
+            'type': 'company_photo'
+          },
+          success: (uploadRes) => {
+            uploadedCount++;
+            const data = JSON.parse(uploadRes.data);
+            if (data.code === 200) {
+              that.imageList.push({
+                url: data.data.url
+              });
+            }
+            
+            // 更新进度
+            that.uploadProgress = Math.floor((uploadedCount / totalCount) * 100);
+            
+            // 所有图片上传完成
+            if (uploadedCount === totalCount) {
+              that.uploading = false;
+              uni.showToast({
+                title: `成功上传${uploadedCount}张图片`,
+                icon: 'success'
+              });
+            }
+          },
+          fail: (error) => {
+            uploadedCount++;
+            console.log(`第${index + 1}张图片上传失败:`, error);
+            
+            if (uploadedCount === totalCount) {
+              that.uploading = false;
+              uni.showToast({
+                title: '部分图片上传失败',
+                icon: 'none'
+              });
+            }
+          }
+        });
+      });
+      */
+    },
+
+    // 预览图片
+    previewImage(index) {
+      if (this.imageList.length > 0) {
+        const urls = this.imageList.map(item => item.url);
+        uni.previewImage({
+          urls: urls,
+          current: index,
+        });
+      }
+    },
+
+    // 删除图片
+    deleteImage(index) {
+      const that = this;
+      uni.showModal({
+        title: "提示",
+        content: "确定要删除这张照片吗？",
+        success: (res) => {
+          if (res.confirm) {
+            that.imageList.splice(index, 1);
+            uni.showToast({
+              title: "删除成功",
+              icon: "success",
+            });
+          }
+        },
+      });
+    },
+
+    // 下一步
+    goJobPostingSecond() {
+      if (this.imageList.length === 0) {
+        uni.showToast({
+          title: "请上传公司照片",
+          icon: "none",
+        });
+        return;
+      }
+
+      // 跳转到下一页，传递图片数据
+      const imageUrls = this.imageList.map(item => item.url);
+      uni.navigateTo({
+        url: "/my/renzheng/mainWorkIntro?photos=" + encodeURIComponent(JSON.stringify(imageUrls)),
+      });
+    },
+  },
+};
+</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;
+          
+          .images-grid {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 20rpx;
+            margin-bottom: 20rpx;
+            
+            .image-item {
+              width: 142rpx;
+              height: 142rpx;
+              border-radius: 8rpx;
+              position: relative;
+              overflow: hidden;
+              
+              .preview-image {
+                width: 100%;
+                height: 100%;
+              }
+              
+              .image-mask {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background: rgba(0, 0, 0, 0.3);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                opacity: 0;
+                transition: opacity 0.3s;
+              }
+              
+              .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-box {
+              width: 142rpx;
+              height: 142rpx;
+              border-radius: 8rpx;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              background: #eee;
+              
+              .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-count {
+            color: #666;
+            font-size: 24rpx;
+            text-align: center;
+            margin-bottom: 20rpx;
+          }
+
+          .upload-progress {
+            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>

my/renzheng/companyLogo.vue

@@ -0,0 +1,472 @@
+<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>

my/renzheng/editCompanyDesc.vue

@@ -47,6 +47,9 @@ export default {
     }
   },
   methods: {
+    goJobPostingSecond(){
+        uni.navigateTo({ url: '/my/renzheng/companyLogo' })
+    }
   },
 };
 </script>

my/renzheng/mainWorkIntro.vue

@@ -0,0 +1,433 @@
+<template>
+  <view class="switch-roles">
+    <nav-bar title="公司信息" color="#000"></nav-bar>
+    <view class="roles-content">
+      <view class="content">
+        <view class="progress-num"> <text>8</text>/8 </view>
+        <view class="title">
+          <view>主营业务介绍</view>
+        </view>
+        <view class="desc">
+          介绍公司主营业务及旗下的产品信息，可有效提升求职者对公司及品牌的认知
+        </view>
+        <view class="content-index">
+          <view class="content-item">
+            <view class="content-item-title">主营产品</view>
+            <view class="check-box">
+              <view
+                class="check-item"
+                :class="{ 'check-active': selectedProducts.includes(item) }"
+                v-for="(item, index) in productList"
+                :key="index"
+                @click="toggleProduct(item)"
+                >{{ item }}</view
+              >
+            </view>
+          </view>
+          <view class="content-item">
+            <view class="content-item-title">自定义</view>
+            <!-- 自定义标签显示区域 -->
+            <view class="custom-tags-box">
+              <view
+                class="check-item custom-tag"
+                :class="{ 'check-active': selectedCustomTags.includes(tag) }"
+                v-for="(tag, index) in customTags"
+                :key="'custom-' + index"
+                @click="toggleCustomTag(tag)"
+              >
+                {{ tag }}
+                <text class="delete-tag" @click.stop="deleteCustomTag(index)">×</text>
+              </view>
+              <!-- 添加按钮 -->
+              <view class="add-tag-btn" @click="showAddDialog">
+                <text class="add-text">添加</text>
+                <image
+                  class="add-icon"
+                  src="@/static/images/my/my/add.svg"
+                  mode="aspectFix"
+                />
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <view class="submit-btn" @click="goJobPostingSecond">下一步</view>
+
+    <!-- 添加标签弹框 -->
+    <u-modal
+      v-model="showDialog"
+      :show-cancel-button="true"
+      confirm-text="确定"
+      cancel-text="取消"
+      title="添加标签"
+      @confirm="confirmAddTag"
+      @cancel="cancelAddTag"
+    >
+      <view class="dialog-content">
+        <!-- <input
+          class="tag-input"
+          v-model="tempTag"
+          placeholder="请输入标签内容"
+          placeholder-class="input-placeholder"
+          maxlength="20"
+          @confirm="confirmAddTag"
+        /> -->
+        <u-input
+          v-model="tempTag"
+          type="text"
+          :border="true"
+          :clearable="true"
+          input-align="left"
+        />
+        <view class="input-tips">最多输入20个字符</view>
+      </view>
+    </u-modal>
+  </view>
+</template>
+
+<script>
+import navBar from "@/components/nav-bar/index.vue";
+export default {
+  data() {
+    return {
+      // 主营产品列表
+      productList: [
+        "3C数码",
+        "美妆日化",
+        "智能家居",
+        "宠物相机",
+        "监控摄像头",
+        "家装产品",
+        "耗材",
+        "装修材料",
+        "卫浴产品",
+      ],
+      // 选中的产品
+      selectedProducts: [],
+      // 自定义标签列表
+      customTags: [],
+      // 选中的自定义标签
+      selectedCustomTags: [],
+      // 弹框显示控制
+      showDialog: false,
+      // 临时标签输入
+      tempTag: "",
+    };
+  },
+  components: {
+    navBar,
+  },
+  onLoad(options) {
+    if (options.text) {
+      this.text = options.text;
+    }
+  },
+  methods: {
+    // 切换产品选择
+    toggleProduct(product) {
+      const index = this.selectedProducts.indexOf(product);
+      if (index > -1) {
+        this.selectedProducts.splice(index, 1);
+      } else {
+        this.selectedProducts.push(product);
+      }
+    },
+
+    // 显示添加标签弹框
+    showAddDialog() {
+      this.tempTag = "";
+      this.showDialog = true;
+      // 延迟聚焦输入框
+      setTimeout(() => {
+        const input = this.$el.querySelector(".tag-input");
+        if (input) input.focus();
+      }, 300);
+    },
+
+    // 确认添加标签
+    confirmAddTag() {
+      if (this.tempTag.trim() === "") {
+        uni.showToast({
+          title: "请输入标签内容",
+          icon: "none",
+        });
+        return;
+      }
+
+      if (this.customTags.includes(this.tempTag.trim())) {
+        uni.showToast({
+          title: "标签已存在",
+          icon: "none",
+        });
+        return;
+      }
+
+      this.customTags.push(this.tempTag.trim());
+      this.showDialog = false;
+      this.tempTag = "";
+    },
+
+    // 取消添加标签
+    cancelAddTag() {
+      this.showDialog = false;
+      this.tempTag = "";
+    },
+
+    // 切换自定义标签选择
+    toggleCustomTag(tag) {
+      const index = this.selectedCustomTags.indexOf(tag);
+      if (index > -1) {
+        this.selectedCustomTags.splice(index, 1);
+      } else {
+        this.selectedCustomTags.push(tag);
+      }
+    },
+
+    // 删除自定义标签
+    deleteCustomTag(index) {
+      const tag = this.customTags[index];
+      // 如果这个标签被选中了，先从选中列表中移除
+      const selectedIndex = this.selectedCustomTags.indexOf(tag);
+      if (selectedIndex > -1) {
+        this.selectedCustomTags.splice(selectedIndex, 1);
+      }
+      // 删除标签
+      this.customTags.splice(index, 1);
+    },
+
+    goJobPostingSecond() {
+      // 获取所有选中的标签
+      const allSelectedTags = [...this.selectedProducts, ...this.selectedCustomTags];
+
+      if (allSelectedTags.length === 0) {
+        uni.showToast({
+          title: "请至少选择一个业务标签",
+          icon: "none",
+        });
+        return;
+      }
+
+      console.log("选中的业务标签:", allSelectedTags);
+
+      // 跳转到下一页，传递选中的业务标签
+      uni.navigateTo({
+        url:
+          "/my/renzheng/editCompanyDesc?businessTags=" +
+          encodeURIComponent(JSON.stringify(allSelectedTags)),
+      });
+    },
+  },
+};
+</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;
+        padding: 20rpx 0;
+        box-sizing: border-box;
+        margin-bottom: 20rpx;
+      }
+
+      .content-index {
+        width: 100%;
+
+        .content-item {
+          margin-bottom: 40rpx;
+
+          .content-item-title {
+            color: rgba(34, 37, 42, 1);
+            font-family: DM Sans;
+            font-size: 32rpx;
+            font-weight: 400;
+            line-height: 48rpx;
+            padding-bottom: 12rpx;
+            box-sizing: border-box;
+          }
+
+          .check-box {
+            display: flex;
+            gap: 12rpx;
+            flex-wrap: wrap;
+            align-items: center;
+          }
+
+          // 自定义标签区域
+          .custom-tags-box {
+            display: flex;
+            gap: 12rpx;
+            flex-wrap: wrap;
+            align-items: center;
+
+            .custom-tag {
+              position: relative;
+              padding-right: 30rpx;
+
+              .delete-tag {
+                position: absolute;
+                right: 8rpx;
+                top: 50%;
+                transform: translateY(-50%);
+                font-size: 18rpx;
+                color: #999;
+                width: 20rpx;
+                height: 20rpx;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+              }
+            }
+
+            .add-tag-btn {
+              flex-shrink: 0;
+              padding: 8rpx 16rpx;
+              border-radius: 8rpx;
+              background: #9999991a;
+              border: 1rpx solid #9999991a;
+              box-sizing: border-box;
+              color: rgba(102, 102, 102, 1);
+              font-family: DM Sans;
+              font-size: 16rpx;
+              font-weight: 400;
+              display: flex;
+              align-items: center;
+              gap: 4rpx;
+              .add-text {
+                color: #016bf6;
+              }
+              .add-icon {
+                width: 16rpx;
+                height: 16rpx;
+              }
+            }
+          }
+        }
+      }
+      .check-item {
+        flex-shrink: 0;
+        padding: 8rpx 16rpx;
+        border-radius: 8rpx;
+        background: #9999991a;
+        border: 1rpx solid #9999991a;
+        box-sizing: border-box;
+        color: rgba(102, 102, 102, 1);
+        font-family: DM Sans;
+        font-size: 16rpx;
+        font-weight: 400;
+      }
+
+      .check-active {
+        box-sizing: border-box;
+        border: 1rpx solid #016bf6;
+        border-radius: 8rpx;
+        background: rgba(252, 233, 220, 1);
+        color: #016bf6;
+      }
+    }
+  }
+
+  .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;
+  }
+}
+
+// 弹框内容样式
+.dialog-content {
+  padding: 40rpx;
+  box-sizing: border-box;
+  .tag-input {
+    width: 100%;
+    padding: 20rpx;
+    border: 1rpx solid #ddd;
+    border-radius: 8rpx;
+    font-size: 28rpx;
+    margin-bottom: 20rpx;
+  }
+
+  .input-tips {
+    color: #999;
+    font-size: 24rpx;
+    text-align: right;
+  }
+}
+
+// 输入框placeholder样式
+.input-placeholder {
+  color: rgba(153, 153, 153, 1);
+  font-family: DM Sans;
+  font-size: 16rpx;
+  font-weight: 400;
+}
+</style>

static/images/my/my/add.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8.000000" height="8.000000" fill="none">
+	<rect id="svg 40" width="8.000000" height="8.000000" x="0.000000" y="0.000000" />
+	<path id="矢量 36" d="M6.2123 7.30706L1.2843 7.30706C0.912305 7.30706 0.612305 7.00706 0.612305 6.63506L0.612305 1.71106C0.612305 1.33906 0.912305 1.03906 1.2843 1.03906L6.2083 1.03906C6.5803 1.03906 6.8803 1.33906 6.8803 1.71106L6.8803 6.63506C6.8843 7.00706 6.5843 7.30706 6.2123 7.30706L6.2123 7.30706ZM1.2843 1.38706C1.1043 1.38706 0.960305 1.53106 0.960305 1.71106L0.960305 6.63506C0.960305 6.81506 1.1043 6.95906 1.2843 6.95906L6.2083 6.95906C6.3883 6.95906 6.5323 6.81506 6.5323 6.63506L6.5323 1.71106C6.5323 1.53106 6.3883 1.38706 6.2083 1.38706L1.2843 1.38706Z" fill="rgb(1,107,246)" fill-rule="nonzero" />
+	<path id="矢量 37" d="M5.82 4.34809L1.676 4.34809C1.58 4.34809 1.5 4.27209 1.5 4.17209C1.5 4.07609 1.576 3.99609 1.676 3.99609L5.82 3.99609C5.916 3.99609 5.996 4.07209 5.996 4.17209C5.996 4.27209 5.916 4.34809 5.82 4.34809Z" fill="rgb(1,107,246)" fill-rule="nonzero" />
+	<path id="矢量 38" d="M3.74827 6.41973C3.65227 6.41973 3.57227 6.34373 3.57227 6.24373L3.57227 2.10373C3.57227 2.00773 3.64827 1.92773 3.74827 1.92773C3.84827 1.92773 3.92427 2.00373 3.92427 2.10373L3.92427 6.24773C3.92427 6.34373 3.84427 6.41973 3.74827 6.41973L3.74827 6.41973Z" fill="rgb(1,107,246)" fill-rule="nonzero" />
+</svg>