qimall/addons/YunfastPay/backend/views/setting/index.php

<div id="app" v-cloak>
    <el-card
        v-loading="loading"
        style="border:0; min-width: 800px;"
        shadow="never"
        body-style="background-color: #f3f3f3;padding: 10px 0 0;"
    >
        <div slot="header">
			<span>配置</span>
		</div>
        <el-form
            :model="formData"
            ref="elForm"
            label-width="220px"
            style="position: relative"
            size="small"
            :rules="rules"
        >
            <el-row>
                <el-col :span="24">
                    <div class="form-body">
                        <!-- 银典支付配置 -->
                        <div class="title padding-top">
                            <span class="title-line"></span>
                            <span>银典支付配置</span>
                        </div>
                        <el-col :span="24">
                            <!-- 银典支付 -->
                            <el-form-item label="银典支付" prop="switch">
                                <el-switch
                                    v-model="formData.switch"
                                    :active-value="1"
                                    :inactive-value="0"
                                >
                                </el-switch>
                            </el-form-item>

                            <!-- 机构号（orgCd） -->
                            <el-form-item label="机构号（orgCd）" prop="org_cd">
                                <el-input v-model="formData.org_cd" placeholder="请输入机构号（orgCd）" 
                                    clearable :style="{width: '100%'}"></el-input>
                            </el-form-item>

                            <!-- 机构密钥（secret） -->
                            <el-form-item label="机构密钥（secret）" prop="secret">
                                <el-input v-model="formData.secret" placeholder="请输入机构密钥（secret）"
                                        :style="{width: '100%'}"></el-input>
                            </el-form-item>

                            <!-- 内管商户号（mchtCd） -->
                            <el-form-item label="线上内管商户号（mchtCd）" prop="mcht_cd">
                                <el-input v-model="formData.online_mcht_cd" placeholder="请输入内管商户号（mchtCd）"
                                        :style="{width: '100%'}"></el-input>
                            </el-form-item>

                            <!-- 内管商户号（mchtCd） -->
                            <el-form-item label="线下内管商户号（mchtCd）" prop="mcht_cd">
                                <el-input v-model="formData.mcht_cd" placeholder="请输入内管商户号（mchtCd）"
                                        :style="{width: '100%'}"></el-input>
                            </el-form-item>
                        </el-col>

                        <!-- 银典支付方式 -->
                        <div class="title padding-top">
                            <span class="title-line"></span>
                            <span>银典支付方式</span>
                        </div>
                        <el-col :span="24">
                            <!-- 支付渠道 -->
                            <el-form-item label="支付渠道" prop="trade_channel">
                                <el-checkbox-group v-model="formData.trade_channel">
                                    <el-checkbox :label="1">商品订单</el-checkbox>
                                    <el-checkbox :label="2">余额充值</el-checkbox>
                                    <el-checkbox :label="5">收银台</el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                            <!-- 微信支付名称 -->
                            <el-form-item label="微信支付名称" prop="wechat_trade_name">
                                <el-input v-model="formData.wechat_trade_name" placeholder="微信-银典支付"></el-input>
                            </el-form-item>
                            <!-- 小程序支付 -->
                            <el-form-item label="小程序支付" prop="mp_wx_open">
                                <el-switch v-model="formData.mp_wx_open"
                                    :active-value="1"
                                    :inactive-value="0"
                                >
                                </el-switch>
                            </el-form-item>
                            <!-- 公众号支付 -->
                            <el-form-item label="公众号支付" prop="wechat_open">
                                <el-switch v-model="formData.wechat_open"
                                    :active-value="1"
                                    :inactive-value="0"
                                >
                                </el-switch>
                            </el-form-item>
                            <!-- 微信H5支付 -->
                            <el-form-item label="微信H5支付" prop="wechat_h5_open">
                                <el-switch v-model="formData.wechat_h5_open"
                                    :active-value="1"
                                    :inactive-value="0"
                                >
                                </el-switch>
                            </el-form-item>
                            <!-- 微信收银台支付 -->
                            <el-form-item label="微信收银台支付" prop="wechat_scan_open">
                                <el-switch v-model="formData.wechat_scan_open"
                                    :active-value="1"
                                    :inactive-value="0"
                                >
                                </el-switch>
                            </el-form-item>
                            <!-- 微信小程序收银台支付 -->
                            <el-form-item label="微信小程序收银台支付" prop="wechat_scan_open">
                                <el-switch v-model="formData.wechat_mp_scan_open"
                                    :active-value="1"
                                    :inactive-value="0"
                                >
                                </el-switch>
                            </el-form-item>
                            <!-- 支付宝支付名称 -->
                            <el-form-item label="支付宝支付名称" prop="alipay_trade_name">
                                <el-input v-model="formData.alipay_trade_name" size="small" placeholder="支付宝-银典支付"></el-input>
                            </el-form-item>
                            <!-- 支付宝APP支付 -->
                            <el-form-item label="支付宝APP支付" prop="alipay_app_open">
                                <el-switch v-model="formData.alipay_app_open"
                                    :active-value="1"
                                    :inactive-value="0"
                                >
                                </el-switch>
                            </el-form-item>
                            <!-- 支付宝收银台支付 -->
                            <el-form-item label="支付宝收银台支付" prop="alipay_scan_open">
                                <el-switch v-model="formData.alipay_scan_open"
                                    :active-value="1"
                                    :inactive-value="0"
                                >
                                </el-switch>
                            </el-form-item>
                        </el-col>

                        <!-- 代付配置 -->
                        <div class="title padding-top">
                            <span class="title-line"></span>
                            <span>代付配置</span>
                        </div>
                        <el-col :span="24">
                            <!-- 代付开关 -->
                            <el-form-item label="代付开关" prop="alternative_open">
                                <el-switch v-model="formData.alternative_open"
                                    :active-value="1"
                                    :inactive-value="0"
                                >
                                </el-switch>
                            </el-form-item>
                        </el-col>

                        <div></div>
                        <el-col :span="24">
                            <el-form-item size="large">
                                <el-button type="primary" size="small" @click="submitForm">提交</el-button>
                                <el-button size="small" @click="resetForm">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </div>
                </el-col>
            </el-row>
        </el-form>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                submitLoading: false,
                formData: {
                    switch              : 0,
                    org_cd              : undefined,
                    secret              : undefined,
                    mcht_cd             : undefined,
                    trade_channel       : [],
                    wechat_trade_name   : '微信-银典支付',
                    wechat_open         : 0,
                    mp_wx_open          : 0,
                    alipay_trade_name   : '支付宝-银典支付',
                    wechat_h5_open      : 0,
                    wechat_scan_open    : 0,
                    wechat_mp_scan_open : 0,
                    alipay_scan_open    : 0,
                    alipay_app_open     : 0,
                    fastpay_trade_name  : '快捷支付-银典支付',
                    alternative_open    : 0,
                },
                rules: {
                    switch: [{
                        required: true,
                    }],
                    wechat_open: [{
                        required: true,
                    }],
                    mp_wx_open: [{
                        required: true,
                    }],
                    wechat_h5_open: [{
                        required: true,
                    }],
                    alipay_app_open: [{
                        required: true,
                    }],
                    wechat_scan_open: [{
                        required: true,
                    }],
                    wechat_mp_scan_open: [{
                        required: true,
                    }],
                    alipay_scan_open: [{
                        required: true,
                    }],
                    alternative_open: [{
                        required: true,
                    }],
                    org_cd: [{
                        required: true,
                        message: '请输入机构号（orgCd）',
                        trigger: 'blur'
                    }],
                    secret: [{
                        required: true,
                        message: '请输入机构密钥（secret）',
                        trigger: 'blur'
                    }],
                    mcht_cd: [{
                        required: true,
                        message: '请输入内管商户号（mchtCd）',
                        trigger: 'blur'
                    }],
                    wechat_trade_name: [{
                        required: true,
                        message: '请输入微信支付名称',
                        trigger: 'blur'
                    }],
                    alipay_trade_name: [{
                        required: true,
                        message: '请输支付宝支付名称',
                        trigger: 'blur'
                    }],
                    fastpay_trade_name: [{
                        required: true,
                        message: '请输入快捷支付名称',
                        trigger: 'blur'
                    }],
                },
            }
        },
        computed: {},
        watch: {},
        created() {
            this.readConfig()
        },
        mounted() {},
        methods: {
            submitForm() {
                this.$refs['elForm'].validate(valid => {
                    if (valid) {
                        this.submitLoading = true;
                        request({
                            params: {
                                r: 'yunfast-pay/setting/save',
                            },
                            method: 'post',
                            data: this.formData,
                        }).then(e => {
                            this.submitLoading = false
                            if (e.data.code === 0) {
                                this.$message.success(e.data.msg)
                            } else {
                                this.$message.error(e.data.msg)
                            }
                        }).catch(e => {
                        })
                    } else {
                        this.$message.error('部分参数验证不通过')
                    }
                })
            },
            resetForm() {
                this.$refs['elForm'].resetFields()
            },
            readConfig(){
                request({
                    params: {
                        r: 'yunfast-pay/setting/index',
                    },
                    method: 'get',
                }).then(e => {
                    this.submitLoading = false
                    if (e.data.code === 0 && e.data.data) {
                        this.formData = e.data.data.setting
                    }
                }).catch(e => {
                })
            },
        }
    })
</script>

<style>
    .form-body {
        padding-bottom: 5px;
        display: flex;
        flex-direction: column;
    }

    .title {
        display: flex;
        align-items: center;
        padding: 18px 20px;
        /* border-top: 1px solid #F3F3F3; */
        border-bottom: 1px solid #F3F3F3;
        background-color: #fff;
    }

    .title-line {
        width: 4px;
        height: 20px;
        background-color: #1479F0;
        margin-right: 10px;
    }

    .padding-top {
        margin-bottom: 10px;
    }
</style>