支付方式新增图标

src/views/systemMerchant/components/addPayType.vue

@@ -1,9 +1,12 @@
 <template>
     <el-dialog title="添加支付方式" :visible.sync="dialogVisible" :show-close="false" @close="reset">
-        <el-form ref="form" :model="form" label-width="120px" label-position="left">
-            <el-form-item label="支付方式" prop="">
+        <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
+            <el-form-item label="支付方式" prop="payName">
                 <el-input v-model="form.payName" placeholder="请输入商户号"></el-input>
             </el-form-item>
+            <el-form-item label="图标" prop="icon">
+                <uploadImg ref="uploadImg" :limit="9" @success="e => form.icon = e[0]" />
+            </el-form-item>
             <el-form-item label="是否虚拟">
                 <el-radio-group v-model="form.isIdeal">
                     <el-radio :label="1">虚拟</el-radio>
@@ -32,21 +35,47 @@
 </template>
 
 <script>
+import uploadImg from '@/components/uploadImg'
 import { tbShopPayType } from '@/api/setting'
 export default ({
+    components: { uploadImg },
     data() {
+        const validateIcon = (rule, value, callback) => {
+            if (!this.form.icon) {
+                callback(new Error('请上传图标'))
+            } else {
+                callback()
+            }
+        }
         return {
             dialogVisible: false,
             formLoading: false,
             resetForm: '',
             form: {
                 id: '',
+                icon: '',
                 shopId: localStorage.getItem('shopId'),
                 payName: '',
                 isIdeal: 1,
                 isOpenCashDrawer: 1,
                 isDisplay: 1,
                 sorts: 0
+            },
+            rules: {
+                payName: [
+                    {
+                        required: true,
+                        message: ' ',
+                        triiger: 'blur'
+                    }
+                ],
+                icon: [
+                    {
+                        required: true,
+                        validator: validateIcon,
+                        triiger: 'change'
+                    }
+                ]
             }
         }
     },
@@ -55,38 +84,52 @@ export default ({
     },
     methods: {
         // 保存
-        async submitHandle() {
-            this.formLoading = true
-            try {
-                await tbShopPayType(this.form, this.form.id ? 'put' : 'post')
-                this.$emit('success')
-                this.formLoading = false
-                this.$notify({
-                    title: '成功',
-                    message: `${this.form.pid ? '编辑' : '添加'}成功`,
-                    type: 'success'
-                });
-                this.close()
-            } catch (error) {
-                this.formLoading = false
-                console.log(error)
-            }
+        submitHandle() {
+            this.$refs.form.validate(async valid => {
+                if (valid) {
+                    try {
+                        this.formLoading = true
+                        await tbShopPayType(this.form, this.form.id ? 'put' : 'post')
+                        this.$emit('success')
+                        this.formLoading = false
+                        this.$notify({
+                            title: '成功',
+                            message: `${this.form.pid ? '编辑' : '添加'}成功`,
+                            type: 'success'
+                        });
+                        this.close()
+                    } catch (error) {
+                        this.formLoading = false
+                        console.log(error)
+                    }
+                }
+            })
         },
         close() {
             this.dialogVisible = false
         },
         reset() {
             this.form = { ...this.resetForm }
+            this.$refs.uploadImg.fileList = []
         },
         show(obj) {
             this.dialogVisible = true
             if (obj && obj.id) {
                 this.form.id = obj.id
+                this.form.icon = obj.icon
                 this.form.payName = obj.payName
                 this.form.isIdeal = obj.isIdeal
                 this.form.isOpenCashDrawer = obj.isOpenCashDrawer
                 this.form.isDisplay = obj.isDisplay
                 this.form.sorts = obj.sorts
+
+                if (obj.icon) {
+                    setTimeout(() => {
+                        this.$refs.uploadImg.fileList = [{
+                            url: obj.icon
+                        }]
+                    }, 100);
+                }
             }
         }
     }

src/views/systemMerchant/index.vue

@@ -6,6 +6,11 @@
     <div class="head-container">
       <el-table :data="tableData.list" v-loading="tableData.loading">
         <el-table-column prop="payName" label="支付方式"></el-table-column>
+        <el-table-column prop="icon" label="图标">
+          <template v-slot="scope">
+            <el-image :src="scope.row.icon" style="width: 40px;height: 40px;"></el-image>
+          </template>
+        </el-table-column>
         <el-table-column prop="payType" label="类型"></el-table-column>
         <el-table-column prop="isOpenCashDrawer" label="开钱箱权限">
           <template v-slot="scope">