源文件

src/views/systemMerchant/components/addPayType.vue

@@ -0,0 +1,163 @@
+<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="payType">
+                <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="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 label="是否虚拟">
+                <el-radio-group v-model="form.isIdeal">
+                    <el-radio :label="1">虚拟</el-radio>
+                    <el-radio :label="0">非虚拟</el-radio>
+                </el-radio-group>
+                <div class="tips">虚拟：微信、支付宝支付等。 非虚拟：现金</div>
+            </el-form-item>
+            <el-form-item label="开钱箱权限">
+                <el-switch v-model="form.isOpenCashDrawer" :active-value="1" :inactive-value="0"></el-switch>
+            </el-form-item>
+            <el-form-item label="是否生效">
+                <el-switch v-model="form.isDisplay" :active-value="1" :inactive-value="0"></el-switch>
+            </el-form-item>
+            <el-form-item label="排序">
+                <el-input-number v-model="form.sorts" controls-position="right" :min="0"></el-input-number>
+            </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+            <el-button @click="close">取消</el-button>
+            <el-button type="primary" @click="submitHandle" :loading="formLoading">
+                <span v-if="!formLoading">保存</span>
+                <span v-else>保存中...</span>
+            </el-button>
+        </div>
+    </el-dialog>
+</template>
+
+<script>
+import uploadImg from '@/components/uploadImg'
+import { tbShopPayType } from '@/api/setting'
+import payTypes from '../payTypes'
+
+export default ({
+    components: { uploadImg },
+    data() {
+        const validateIcon = (rule, value, callback) => {
+            if (!this.form.icon) {
+                callback(new Error('请上传图标'))
+            } else {
+                callback()
+            }
+        }
+        return {
+            payTypes,
+            dialogVisible: false,
+            formLoading: false,
+            resetForm: '',
+            form: {
+                id: '',
+                icon: '',
+                shopId: localStorage.getItem('shopId'),
+                payType: '',
+                payName: '',
+                isIdeal: 1,
+                isOpenCashDrawer: 1,
+                isDisplay: 1,
+                sorts: 0
+            },
+            rules: {
+                payType: [
+                    {
+                        required: true,
+                        message: ' ',
+                        triiger: 'blur'
+                    }
+                ],
+                payName: [
+                    {
+                        required: true,
+                        message: ' ',
+                        triiger: 'blur'
+                    }
+                ],
+                icon: [
+                    {
+                        required: true,
+                        validator: validateIcon,
+                        triiger: 'change'
+                    }
+                ]
+            }
+        }
+    },
+    mounted() {
+        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 => {
+                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.payType = obj.payType
+                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);
+                // }
+            }
+        }
+    }
+})
+</script>