解决冲突

wuye-manager-uniapp/pageSubPack/fault-reporting/fault-reporting.vue

@@ -51,11 +51,16 @@
       <view class="upload-wrap">
         <!-- 已上传图片 -->
         <view class="upload-item" v-for="(img, index) in form.images" :key="index">
-          <image :src="img" mode="aspectFill"></image>
-          <uni-icons type="close" size="16" @click="deleteImage(index)"></uni-icons>
+          <image :src="img" mode="aspectFill" class="upload-img"></image>
+          <image
+            src="/static/imgs/delete.png"
+            class="upload-delete"
+            @click="deleteImage(index)"
+          ></image>
+          <!-- <uni-icons type="close" size="16" @click="deleteImage(index)"></uni-icons> -->
         </view>
         <!-- 上传按钮 -->
-        <view class="upload-btn" @click="chooseImage">
+        <view class="upload-btn" @click="chooseImage" v-if="form.images.length < 3">
           <uni-icons type="plus" size="24"></uni-icons>
           <text>上传照片</text>
         </view>
@@ -99,26 +104,23 @@ const goBackSelect = () => {
 
 // 选择图片
 const chooseImage = () => {
+  // 计算还能选几张
+  const remainCount = 3 - form.value.images.length
+  if (remainCount <= 0) {
+    uni.showToast({
+      title: '最多只能上传3张图片',
+      icon: 'none'
+    })
+    return
+  }
+
   uni.chooseImage({
-    count: 3, // 最多选3张
+    count: remainCount, // 动态限制可选数量
     sizeType: ['original', 'compressed'],
     sourceType: ['album', 'camera'],
     success: res => {
-      // 临时文件路径
       const tempFilePaths = res.tempFilePaths
       form.value.images = [...form.value.images, ...tempFilePaths]
-
-      // 【可选】如果需要上传到服务器，取消下面注释
-      // tempFilePaths.forEach(path => {
-      //   uni.uploadFile({
-      //     url: '你的上传接口地址',
-      //     filePath: path,
-      //     name: 'file',
-      //     success: (uploadRes) => {
-      //       console.log('上传成功', uploadRes)
-      //     }
-      //   })
-      // })
     }
   })
 }
@@ -218,18 +220,20 @@ const submitForm = () => {
   width: 80px;
   height: 80px;
 }
-.upload-item image {
+.upload-item .upload-img {
   width: 100%;
   height: 100%;
   border-radius: 4px;
 }
-.upload-item uni-icons {
+.upload-item .upload-delete {
   position: absolute;
   top: -5px;
   right: -5px;
-  background: #ff3b30;
-  color: #fff;
-  border-radius: 50%;
+  width: 32rpx;
+  height: 32rpx;
+  /* background: #ff3b30; */
+  /* color: #fff; */
+  border-radius: 3rpx;
   padding: 2px;
 }
 .upload-btn {