店铺端资质加入删除选项

src/views/store/storeConfig/userInfo.vue

@@ -41,7 +41,15 @@
               :show-file-list="false"
               class="avatar-uploader"
             >
-              <img v-if="form.logoUrl" :src="form.logoUrl" class="avatar" width="200px">
+              <!-- 图片容器（包含图片和删除按钮，仅在有图片时显示） -->
+              <div class="avatar-wrapper" v-if="form.logoUrl">
+                <img :src="form.logoUrl" class="avatar" width="200px">
+                <!-- 悬停显示的删除按钮 -->
+                <div class="delete-mask" @click.stop="handleDeleteLogo">
+                  <i class="el-icon-delete"></i>
+                </div>
+              </div>
+              <!-- 未上传图片时显示的默认图标 -->
               <i v-else class="el-icon-plus avatar-uploader-icon"></i>
             </el-upload>
           </el-form-item>
@@ -103,7 +111,14 @@
               :show-file-list="false"
               class="avatar-uploader"
             >
-              <img v-if="form.businessLicense" :src="form.businessLicense" class="avatar" width="100px">
+              <!-- 图片容器（包含图片和删除按钮，仅在有图片时显示） -->
+              <div class="avatar-wrapper" v-if="form.businessLicense">
+                <img :src="form.businessLicense" class="avatar" width="200px">
+                <!-- 悬停显示的删除按钮 -->
+                <div class="delete-mask" @click.stop="handleDelete5">
+                  <i class="el-icon-delete"></i>
+                </div>
+              </div>
               <i v-else class="el-icon-plus avatar-uploader-icon"></i>
             </el-upload>
           </el-form-item>
@@ -145,7 +160,15 @@
                 :show-file-list="false"
                 :on-success="(response, file) => handleFileSuccess(response, file, 'drugLicense')"
                 :before-upload="beforeAvatarUpload">
-                <img v-if="form.drugLicense" :src="form.drugLicense" class="avatar" width="100px">
+                <!-- 图片容器（包含图片和删除按钮，仅在有图片时显示） -->
+                <div class="avatar-wrapper" v-if="form.drugLicense">
+                  <img :src="form.drugLicense" class="avatar" width="200px">
+                  <!-- 悬停显示的删除按钮 -->
+                  <div class="delete-mask" @click.stop="handleDelete6">
+                    <i class="el-icon-delete"></i>
+                  </div>
+                </div>
+
                 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
               </el-upload>
             </el-form-item>
@@ -185,7 +208,14 @@
                 :show-file-list="false"
                 :on-success="(response, file) => handleFileSuccess(response, file, 'medicalDevice1')"
                 :before-upload="beforeAvatarUpload">
-                <img v-if="form.medicalDevice1" :src="form.medicalDevice1" class="avatar" width="100px">
+                <!-- 图片容器（包含图片和删除按钮，仅在有图片时显示） -->
+                <div class="avatar-wrapper" v-if="form.medicalDevice1">
+                  <img :src="form.medicalDevice1" class="avatar" width="200px">
+                  <!-- 悬停显示的删除按钮 -->
+                  <div class="delete-mask" @click.stop="handleDelete1">
+                    <i class="el-icon-delete"></i>
+                  </div>
+                </div>
                 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
               </el-upload>
             </el-form-item>
@@ -225,7 +255,14 @@
                 :show-file-list="false"
                 :on-success="(response, file) => handleFileSuccess(response, file, 'medicalDevice2')"
                 :before-upload="beforeAvatarUpload">
-                <img v-if="form.medicalDevice2" :src="form.medicalDevice2" class="avatar" width="100px">
+                <!-- 图片容器（包含图片和删除按钮，仅在有图片时显示） -->
+                <div class="avatar-wrapper" v-if="form.medicalDevice2">
+                  <img :src="form.medicalDevice2" class="avatar" width="200px">
+                  <!-- 悬停显示的删除按钮 -->
+                  <div class="delete-mask" @click.stop="handleDelete7">
+                    <i class="el-icon-delete"></i>
+                  </div>
+                </div>
                 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
               </el-upload>
             </el-form-item>
@@ -266,7 +303,14 @@
                 :show-file-list="false"
                 :on-success="(response, file) => handleFileSuccess(response, file, 'medicalDevice3')"
                 :before-upload="beforeAvatarUpload">
-                <img v-if="form.medicalDevice3" :src="form.medicalDevice3" class="avatar" width="100px">
+                <!-- 图片容器（包含图片和删除按钮，仅在有图片时显示） -->
+                <div class="avatar-wrapper" v-if="form.medicalDevice3">
+                  <img :src="form.medicalDevice3" class="avatar" width="200px">
+                  <!-- 悬停显示的删除按钮 -->
+                  <div class="delete-mask" @click.stop="handleDelete2">
+                    <i class="el-icon-delete"></i>
+                  </div>
+                </div>
                 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
               </el-upload>
             </el-form-item>
@@ -304,7 +348,14 @@
                 :show-file-list="false"
                 :on-success="(response, file) => handleFileSuccess(response, file, 'foodLicense')"
                 :before-upload="beforeAvatarUpload">
-                <img v-if="form.foodLicense" :src="form.foodLicense" class="avatar" width="100px">
+                <!-- 图片容器（包含图片和删除按钮，仅在有图片时显示） -->
+                <div class="avatar-wrapper" v-if="form.foodLicense">
+                  <img :src="form.foodLicense" class="avatar" width="200px">
+                  <!-- 悬停显示的删除按钮 -->
+                  <div class="delete-mask" @click.stop="handleDelete3">
+                    <i class="el-icon-delete"></i>
+                  </div>
+                </div>
                 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
               </el-upload>
             </el-form-item>
@@ -342,7 +393,14 @@
                 :show-file-list="false"
                 :on-success="(response, file) => handleFileSuccess(response, file, 'medicalLicense')"
                 :before-upload="beforeAvatarUpload">
-                <img v-if="form.medicalLicense" :src="form.medicalLicense" class="avatar" width="100px">
+                <!-- 图片容器（包含图片和删除按钮，仅在有图片时显示） -->
+                <div class="avatar-wrapper" v-if="form.medicalLicense">
+                  <img :src="form.medicalLicense" class="avatar" width="200px">
+                  <!-- 悬停显示的删除按钮 -->
+                  <div class="delete-mask" @click.stop="handleDelete4">
+                    <i class="el-icon-delete"></i>
+                  </div>
+                </div>
                 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
               </el-upload>
             </el-form-item>
@@ -461,6 +519,7 @@ export default {
   data() {
 
     return {
+      switchMedicalValue:false,
       dialogVisible: false,
       switchValue:false,
       drugLicenseValue:false,
@@ -826,6 +885,8 @@ export default {
           }else {
             formData.isMedicalLicenseExpiryPermanent=0;
           }
+
+
           if (formData.storeId != null) {
             updateStore(formData).then(response => {
               this.msgSuccess("修改成功");
@@ -932,6 +993,172 @@ export default {
     switchChange(){
       console.log(this.form.isBusinessLicensePermanent);
     },
+    // 修复LOGO删除逻辑：确保删除后可重新上传
+    handleDeleteLogo() {
+      this.isDeleting = true; // 临时禁用上传组件
+      this.$confirm('确定要删除这张图片吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.form.logoUrl = ''; // 清空图片URL
+        this.$message.success('图片已删除');
+      }).catch(() => {
+        this.$message.info('已取消删除');
+      }).finally(() => {
+        this.isDeleting = false; // 无论操作结果，恢复上传组件可用
+        this.$forceUpdate(); // 强制刷新确保状态同步
+      });
+    },
+    handleDelete1() {
+      this.isDeleting = true; // 临时禁用上传组件
+      this.$confirm('确定要删除这张图片吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.form.medicalDevice1 = ''; // 清空图片URL
+        this.$message.success('图片已删除');
+      }).catch(() => {
+        this.$message.info('已取消删除');
+      }).finally(() => {
+        this.isDeleting = false; // 无论操作结果，恢复上传组件可用
+        this.$forceUpdate(); // 强制刷新确保状态同步
+      });
+    },
+    handleDelete2() {
+      this.isDeleting = true; // 临时禁用上传组件
+      this.$confirm('确定要删除这张图片吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.form.medicalDevice3 = ''; // 清空图片URL
+        this.$message.success('图片已删除');
+      }).catch(() => {
+        this.$message.info('已取消删除');
+      }).finally(() => {
+        this.isDeleting = false; // 无论操作结果，恢复上传组件可用
+        this.$forceUpdate(); // 强制刷新确保状态同步
+      });
+    },
+    handleDelete3() {
+      this.isDeleting = true; // 临时禁用上传组件
+      this.$confirm('确定要删除这张图片吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.form.foodLicense = ''; // 清空图片URL
+        this.$message.success('图片已删除');
+      }).catch(() => {
+        this.$message.info('已取消删除');
+      }).finally(() => {
+        this.isDeleting = false; // 无论操作结果，恢复上传组件可用
+        this.$forceUpdate(); // 强制刷新确保状态同步
+      });
+    },
+    handleDelete4() {
+      this.isDeleting = true; // 临时禁用上传组件
+      this.$confirm('确定要删除这张图片吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.form.medicalLicense = ''; // 清空图片URL
+        this.$message.success('图片已删除');
+      }).catch(() => {
+        this.$message.info('已取消删除');
+      }).finally(() => {
+        this.isDeleting = false; // 无论操作结果，恢复上传组件可用
+        this.$forceUpdate(); // 强制刷新确保状态同步
+      });
+    }
+    , handleDelete5() {
+      this.isDeleting = true; // 临时禁用上传组件
+      this.$confirm('确定要删除这张图片吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.form.businessLicense = ''; // 清空图片URL
+        this.$message.success('图片已删除');
+      }).catch(() => {
+        this.$message.info('已取消删除');
+      }).finally(() => {
+        this.isDeleting = false; // 无论操作结果，恢复上传组件可用
+        this.$forceUpdate(); // 强制刷新确保状态同步
+      });
+    }
+    , handleDelete6() {
+      this.isDeleting = true; // 临时禁用上传组件
+      this.$confirm('确定要删除这张图片吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.form.drugLicense = ''; // 清空图片URL
+        this.$message.success('图片已删除');
+      }).catch(() => {
+        this.$message.info('已取消删除');
+      }).finally(() => {
+        this.isDeleting = false; // 无论操作结果，恢复上传组件可用
+        this.$forceUpdate(); // 强制刷新确保状态同步
+      });
+    },
+    handleDelete7() {
+      this.isDeleting = true; // 临时禁用上传组件
+      this.$confirm('确定要删除这张图片吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.form.medicalDevice2 = ''; // 清空图片URL
+        this.$message.success('图片已删除');
+      }).catch(() => {
+        this.$message.info('已取消删除');
+      }).finally(() => {
+        this.isDeleting = false; // 无论操作结果，恢复上传组件可用
+        this.$forceUpdate(); // 强制刷新确保状态同步
+      });
+    },
   }
 }
 </script>
+
+<style>
+/* LOGO上传区域样式优化 */
+.avatar-wrapper {
+  position: relative;
+  display: inline-block;
+}
+.avatar {
+  width: 200px;
+  height: 200px;
+  object-fit: cover;
+  border-radius: 4px;
+}
+.delete-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  opacity: 0;
+  cursor: pointer;
+  transition: opacity 0.3s ease;
+  border-radius: 4px;
+}
+.avatar-wrapper:hover .delete-mask {
+  opacity: 1;
+}
+.avatar-uploader {
+  display: inline-block;
+}
+</style>