新增添加支付方式类型枚举

.env.development

@@ -2,6 +2,7 @@ ENV = 'development'
 
 # 接口地址
 VUE_APP_BASE_API  = 'http://192.168.2.128:8000'
+# VUE_APP_BASE_API  = 'http://192.168.2.16:8000'
 VUE_APP_WS_API = 'ws://192.168.2.128:8000'
 
 # 是否启用 babel-plugin-dynamic-import-node插件

src/views/systemMerchant/components/addPayType.vue

@@ -1,12 +1,18 @@
 <template>
     <el-dialog title="添加支付方式" :visible.sync="dialogVisible" :show-close="false" @close="reset">
         <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
-            <el-form-item label="支付方式" prop="payName">
+            <el-form-item label="支付类型" prop="payType">
-                <el-input v-model="form.payName" placeholder="请输入商户号"></el-input>
+                <el-select v-model="form.payType" placeholder="请选择支付类型" @change="typeChange">
+                    <el-option :label="item.lable" :value="item.key" v-for="item in payTypes"
+                        :key="item.key"></el-option>
+                </el-select>
             </el-form-item>
-            <el-form-item label="图标" prop="icon">
+            <el-form-item label="支付方式" prop="payName" v-if="form.payType == 'virtual'">
+                <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> -->
             <el-form-item label="是否虚拟">
                 <el-radio-group v-model="form.isIdeal">
                     <el-radio :label="1">虚拟</el-radio>
@@ -37,6 +43,8 @@
 <script>
 import uploadImg from '@/components/uploadImg'
 import { tbShopPayType } from '@/api/setting'
+import payTypes from '../payTypes'
+
 export default ({
     components: { uploadImg },
     data() {
@@ -48,6 +56,7 @@ export default ({
             }
         }
         return {
+            payTypes,
             dialogVisible: false,
             formLoading: false,
             resetForm: '',
@@ -55,6 +64,7 @@ export default ({
                 id: '',
                 icon: '',
                 shopId: localStorage.getItem('shopId'),
+                payType: '',
                 payName: '',
                 isIdeal: 1,
                 isOpenCashDrawer: 1,
@@ -62,6 +72,13 @@ export default ({
                 sorts: 0
             },
             rules: {
+                payType: [
+                    {
+                        required: true,
+                        message: ' ',
+                        triiger: 'blur'
+                    }
+                ],
                 payName: [
                     {
                         required: true,
@@ -83,6 +100,14 @@ export default ({
         this.resetForm = { ...this.form }
     },
     methods: {
+        typeChange(e) {
+            this.form.icon = payTypes.find(item => item.key == e).icon
+            if (e == 'virtual') {
+                this.form.payName = ''
+            } else {
+                this.form.payName = payTypes.find(item => item.key == e).lable
+            }
+        },
         // 保存
         submitHandle() {
             this.$refs.form.validate(async valid => {
@@ -110,7 +135,7 @@ export default ({
         },
         reset() {
             this.form = { ...this.resetForm }
-            this.$refs.uploadImg.fileList = []
+            // this.$refs.uploadImg.fileList = []
         },
         show(obj) {
             this.dialogVisible = true
@@ -123,13 +148,13 @@ export default ({
                 this.form.isDisplay = obj.isDisplay
                 this.form.sorts = obj.sorts
 
-                if (obj.icon) {
+                // if (obj.icon) {
-                    setTimeout(() => {
+                //     setTimeout(() => {
-                        this.$refs.uploadImg.fileList = [{
+                //         this.$refs.uploadImg.fileList = [{
-                            url: obj.icon
+                //             url: obj.icon
-                        }]
+                //         }]
-                    }, 100);
+                //     }, 100);
-                }
+                // }
             }
         }
     }

src/views/systemMerchant/index.vue

@@ -4,26 +4,28 @@
       <el-button type="primary" icon="el-icon-plus" @click="$refs.addPayType.show()">添加支付方式</el-button>
     </div>
     <div class="head-container">
-      <el-table :data="tableData.list" v-loading="tableData.loading">
+      <el-table :data="tableData.list" v-loading="tableData.loading"><el-table-column prop="icon" label="图标">
-        <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="payName" label="支付方式"></el-table-column>
         <el-table-column prop="payType" label="类型"></el-table-column>
         <el-table-column prop="isOpenCashDrawer" label="开钱箱权限">
+
           <template v-slot="scope">
             <el-switch v-model="scope.row.isOpenCashDrawer" :active-value="1" :inactive-value="0" disabled></el-switch>
           </template>
         </el-table-column>
         <el-table-column prop="isDisplay" label="是否生效">
+
           <template v-slot="scope">
             <el-switch v-model="scope.row.isDisplay" :active-value="1" :inactive-value="0" disabled></el-switch>
           </template>
         </el-table-column>
         <el-table-column prop="sorts" label="条件排序"></el-table-column>
         <el-table-column label="操作" width="150">
+
           <template v-slot="scope">
             <el-button type="text" icon="el-icon-edit" @click="$refs.addPayType.show(scope.row)">编辑</el-button>
           </template>

src/views/systemMerchant/payTypes.js

@@ -0,0 +1,32 @@
+export default [
+    {
+        lable: '现金',
+        key: 'cash',
+        icon: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/20240302/2dab947729d640fba7709b7c0b42bfef.png'
+    },
+    {
+        lable: '银行卡',
+        key: 'bank',
+        icon: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/20240302/14b20cf721304b7fa2f01e6e75fab403.png'
+    },
+    {
+        lable: '扫码支付',
+        key: 'scanCode',
+        icon: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/20240302/9ff08224680446c8b3978844da99bbaa.png'
+    },
+    {
+        lable: '储值卡',
+        key: 'deposit',
+        icon: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/20240302/18d40f471a924d55b4eb13e5f553734d.png'
+    },
+    {
+        lable: '挂单',
+        key: 'arrears',
+        icon: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/20240304/fcf337b999f14a12ad75f76e74fcb344.png'
+    },
+    {
+        lable: '自定义',
+        key: 'virtual',
+        icon: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/20240304/6702fbf953504f89aa6a3db1f33d49b6.png'
+    }
+]