Bladeren bron

feat: 添加文件删除功能,优化上传组件逻辑

Mcal 1 week geleden
bovenliggende
commit
17a5e501fd
3 gewijzigde bestanden met toevoegingen van 37 en 10 verwijderingen
  1. 7 2
      src/views/merchant/index.vue
  2. 4 0
      src/views/order/detail.vue
  3. 26 8
      src/views/store/list.vue

+ 7 - 2
src/views/merchant/index.vue

@@ -192,6 +192,8 @@
                       :auto-upload="true"
                       :headers="uploadHeader"
                       :on-success="handleUploadSuccess"
+                      :on-remove="handleRemove"
+
                     >
               <!-- <el-upload
                 :action="uploadAction"
@@ -203,7 +205,7 @@
                 :headers="uploadHeader"
                 :on-success="handleUploadSuccess"
               > -->
-                <img v-if="form.logo" :src="form.logo" class="list-img" />
+                <img v-if="form.logo" :src="uploadFiles[0]" class="list-img" />
                 <i v-if="!form.logo" class="el-icon-plus"></i>
               </el-upload>
             </el-form-item>
@@ -560,7 +562,10 @@ export default {
     },
     handleUploadSuccess(file) {
         this.form.logo = file.data.url;
-    }
+    },
+    handleRemove() {
+        this.form.logo = '';
+    },
   }
 }
 </script>

+ 4 - 0
src/views/order/detail.vue

@@ -24,6 +24,10 @@
               <span class="control-label">{{ orderInfo.typeName }}</span>
             </el-col> -->
             <el-col :span="8">
+              <span class="head">{{ $t('orderList.serviceFee') }}:</span>
+              <span class="control-label">¥{{ orderInfo.serviceFee }}</span>
+            </el-col>
+            <el-col :span="8">
               <span class="head">{{ $t('orderList.detail.orderTime') }}:</span>
               <span class="control-label">{{ orderInfo.createTime }}</span>
             </el-col>

+ 26 - 8
src/views/store/list.vue

@@ -25,8 +25,8 @@
                 clearable
                 style="width: 240px"
             >
-                <el-option :key="$t('storeList.list.enabledKey')" :label="$t('storeList.list.enabled')" :value="A" />
-                <el-option :key="$t('storeList.list.disabledKey')" :label="$t('storeList.list.disabled')" :value="N" />
+                <el-option :key="$t('storeList.list.enabledKey')" :label="$t('storeList.list.enabled')" value="A" />
+                <el-option :key="$t('storeList.list.disabledKey')" :label="$t('storeList.list.disabled')" value="N" />
             </el-select>
         </el-form-item>
         <el-form-item>
@@ -180,18 +180,31 @@
             <el-row>
                 <el-col :span="9">
                     <el-form-item :label="$t('storeList.list.merchantLogo')" prop="logo">
-                        <el-upload
+                      <el-upload
+                      class="form__head-icon-upload"
+                      :action="uploadAction"
+                      accept="image/*"
+                      :class="{ hide: hideUpload }"
+                      list-type="picture-card"
+                      :file-list="uploadFiles"
+                      :limit="1"
+                      :auto-upload="true"
+                      :headers="uploadHeader"
+                      :on-success="handleUploadSuccess"
+                      :on-remove="handleRemove"
+                    >
+                        <!-- <el-upload
                             :action="uploadAction"
                             list-type="picture-card"
                             accept="image/*"
                             :class="{ hide: hideUpload }"
                             :file-list="uploadFiles"
+                            :limit="1"
                             :auto-upload="true"
-                            :show-file-list="false"
                             :headers="uploadHeader"
                             :on-success="handleUploadSuccess"
-                        >
-                            <img v-if="form.logo" :src="imagePath + form.logo" class="list-img" />
+                        > -->
+                            <img v-if="form.logo" :src="form.logo" class="list-img" />
                             <i v-if="!form.logo" class="el-icon-plus"></i>
                         </el-upload>
                     </el-form-item>
@@ -566,12 +579,12 @@ export default {
       // 微信支付证书
       wxCertPath: "",
       // 上传地址
-      uploadAction: process.env.VUE_APP_SERVER_URL + "/backendApi/file/upload",
+      uploadAction: process.env.VUE_APP_SERVER_URL + '/backendApi/file/upload',
       // 隐藏上传
       hideUpload: false,
       // 上传文件列表
       uploadFiles: [],
-      uploadHeader: { "Access-Token": getToken() },
+      uploadHeader: { 'Access-Token': getToken() },
       merchantOptions: [],
       // 图片根目录
       imagePath: "",
@@ -807,8 +820,13 @@ export default {
           .catch(() => {});
     },
     handleUploadSuccess(file) {
+      console.log(file)
       this.form.logo = file.data.url
     },
+    // 文件删除处理
+    handleRemove(file) {
+      this.form.logo = ""
+    },
     handleUploadLicenseSuccess(file) {
       this.form.license = file.data.fileName
     },