Fix:5812 【商城小程序】【商户入驻-店铺入驻】商户入驻详情页店铺图片封面及店铺logo上传位置缺少删除键

pagesInn/inn/innApply.vue

@@ -219,7 +219,6 @@ import CitySelect from "@/components/CitySelect";
 import tmUpload from '@/components/tm-upload/tm-upload.vue';
 import {getCity} from "@/api/user";
 import {chooseImage, isWeixin} from "@/utils";
-import {getHomeData} from "@/api/public";
 import {VUE_APP_API_URL} from "@/config"
 import {getHotelTypeList, postHotelApply, postHotelReApply} from "@/api/inn.js";
 
@@ -438,81 +437,8 @@ export default {
 
           that.innApplyInfo.position = that.$forceToDecimal(res.longitude, 6) + ',' + that.$forceToDecimal(res.latitude, 6);
         }
-      });
-    },
-    getIndex(value, arr) {
-      var idx = -1;
-      for (var i = 0; i < arr.length; i++) {
-        if (arr[i].n == value) {
-          idx = i;
-          break;
         }
-      }
-      return idx;
-    },
-    getCityList: function () {
-      let that = this;
-      getCity()
-          .then(res => {
-            that.district = res.data;
-            // that.ready = true;
-
-            // if(this.id){
-            //  //设置city_id
-            //  var pIdx = that.getIndex(that.address.province,that.district);
-            //  if(pIdx>-1){
-            //    var citys = that.district[pIdx].c;
-            //    var cIdx = that.getIndex(that.address.city,citys);
-            //    if(cIdx>-1){
-            //  	  var city = citys[cIdx];
-            //  	  that.address.city_id = city.v;
-            //  	  console.log('city_id:'+city.v);
-            //    }
-            //  }
-            // }
-
-          })
-          .catch(err => {
-            that.$dialog.error(err.msg);
-          });
-    },
-    chooseQrcodeImg: function () {
-      chooseImage(img => {
-        console.log(img)
-        that.$set(that.innApplyInfo, 'qrcode', img);
-
       });
-    },
-    chooseLogoImg: function () {
-      chooseImage(img => {
-        console.log(img)
-
-        that.innApplyInfo.logo = img;
-
-      });
-    },
-    chooseCoverImg: function () {
-      chooseImage(img => {
-        console.log(img)
-
-        that.innApplyInfo.cover = img;
-
-      });
-    },
-    //文件上传结果
-    uploadedImgChange: function (uploadedFilesList) {
-      this.uploadedFilesArray = uploadedFilesList;
-    },
-    submit: function () {
-
-      if (this.innApplyInfo.name.length == 0) {
-        this.$dialog.error("请输入店铺名称");
-        return;
-      }
-
-      if (this.innApplyInfo.type.length == 0) {
-        this.$dialog.error("请选择店铺类型");
-        return;
       }
 
       if (this.addressText.length == 0) {

pkg_join/views/shop.vue

@@ -77,11 +77,19 @@
                 v-if="!form.cover"
                 class="btn-upload"
               >上传图片</view>
-              <image
+              <view v-else class="img-wrap">
-                v-else
+                <image
-                :src="form.cover"
+                  :src="form.cover"
-                class="img-preview"
+                  class="img-preview"
-              />
+                />
+                <view
+                  v-if="!reviewing"
+                  class="delete-badge"
+                  @click.stop="deleteImg('cover')"
+                >
+                  x
+                </view>
+              </view>
             </view>
           </template>
         </u-cell>
@@ -143,11 +151,19 @@
                 v-if="!form.logo"
                 class="btn-upload"
               >上传图片</view>
-              <image
+              <view v-else class="img-wrap">
-                v-else
+                <image
-                :src="form.logo"
+                  :src="form.logo"
-                class="img-preview"
+                  class="img-preview"
-              />
+                />
+                <view
+                  v-if="!reviewing"
+                  class="delete-badge"
+                  @click.stop="deleteImg('logo')"
+                >
+                  x
+                </view>
+              </view>
             </view>
           </template>
         </u-cell>
@@ -796,6 +812,15 @@ export default {
         this.form[target] = img
       })
     },
+    // 删除单张图片（店铺图片封面 / 店铺logo）
+    deleteImg(target) {
+      if (this.reviewing) return
+      if (target === 'cover') {
+        this.form.cover = ''
+      } else if (target === 'logo') {
+        this.form.logo = ''
+      }
+    },
     chooseLogoVideo() {
       if (this.reviewing) return
       chooseVideoToUpload(path => {
@@ -1021,6 +1046,23 @@ export default {
 .font-color-red {
   font-size: 22rpx;
 }
+.img-wrap {
+  position: relative;
+  display: inline-block;
+
+  .delete-badge {
+    position: absolute;
+    top: 0;
+    right: 20rpx;
+    background: #000;
+    color: #fff;
+    padding: 2rpx 8rpx;
+    border-radius: 0 0 0 200rpx;
+    font-size: 22rpx;
+    z-index: 10;
+    text-align: center;
+  }
+}
 .video-item {
   width: 80px;
   height: 80px;

pkg_join/views/supplier.vue

@@ -59,11 +59,19 @@
                   v-if="!formSupplier.avatar"
                   class="btn-upload"
                 >上传图片</view>
-                <image
+                <view v-else class="img-wrap">
-                  v-else
+                  <image
-                  :src="formSupplier.avatar"
+                    :src="formSupplier.avatar"
-                  class="img-preview"
+                    class="img-preview"
-                />
+                  />
+                  <view
+                    v-if="!reviewing"
+                    class="delete-badge"
+                    @click.stop="deleteImg('supplier')"
+                  >
+                    x
+                  </view>
+                </view>
               </view>
             </template>
           </u-cell>
@@ -271,11 +279,19 @@
                   v-if="!form.cover"
                   class="btn-upload"
                 >上传图片</view>
-                <image
+                <view v-else class="img-wrap">
-                  v-else
+                  <image
-                  :src="form.cover"
+                    :src="form.cover"
-                  class="img-preview"
+                    class="img-preview"
-                />
+                  />
+                  <view
+                    v-if="!reviewing"
+                    class="delete-badge"
+                    @click.stop="deleteImg('cover')"
+                  >
+                    x
+                  </view>
+                </view>
               </view>
             </template>
           </u-cell>
@@ -339,11 +355,19 @@
                   v-if="!form.logo"
                   class="btn-upload"
                 >上传图片</view>
-                <image
+                <view v-else class="img-wrap">
-                  v-else
+                  <image
-                  :src="form.logo"
+                    :src="form.logo"
-                  class="img-preview"
+                    class="img-preview"
-                />
+                  />
+                  <view
+                    v-if="!reviewing"
+                    class="delete-badge"
+                    @click.stop="deleteImg('logo')"
+                  >
+                    x
+                  </view>
+                </view>
               </view>
             </template>
           </u-cell>
@@ -989,6 +1013,17 @@ export default {
         }
       })
     },
+    // 删除单张图片（供应商头像 / 店铺封面图 / 店铺logo）
+    deleteImg(target) {
+      if (this.reviewing) return
+      if (target === 'supplier') {
+        this.formSupplier.avatar = ''
+      } else if (target === 'cover') {
+        this.form.cover = ''
+      } else if (target === 'logo') {
+        this.form.logo = ''
+      }
+    },
     chooseLogoVideo() {
       if (this.reviewing) return
       chooseVideoToUpload(path => {
@@ -1245,6 +1280,23 @@ export default {
 .font-color-red {
   font-size: 22rpx;
 }
+.img-wrap {
+  position: relative;
+  display: inline-block;
+
+  .delete-badge {
+    position: absolute;
+    top: 0;
+    right: 20rpx;
+    background: #000;
+    color: #fff;
+    padding: 2rpx 8rpx;
+    border-radius: 0 0 0 200rpx;
+    font-size: 22rpx;
+    z-index: 10;
+    text-align: center;
+  }
+}
 .captcha-wrap {
   display: flex;
   align-items: center;