qimall/addons/UnionPay/backend/views/setting/setting.php

<?php

use common\helpers\ComponentHelper;
?>
<div id="app" v-cloak>
    <el-card class="box-card" v-loading="loading" shadow="never" style="border:0;min-width: 1500px;"
             body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <div>
                <span>基础设置</span>
            </div>
        </div>
        <div class="form_box">
            <el-form :model="ruleForm"   size="small" ref="ruleForm" label-width="150px">
                <el-card shadow="never">
                    <div>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="启用" style="margin-bottom: 0">
                                    <div>
                                        <el-switch v-model="ruleForm.is_enable" :active-value="1" :inactive-value="0">
                                        </el-switch>
                                    </div>
                                </el-form-item>
                                <el-form-item prop="orgid" label="集团/代理商商户号">
                                    <el-col :span="8">
                                        <el-input v-model="ruleForm.orgid" >
                                        </el-input>
                                    </el-col>
                                </el-form-item>
                                <el-form-item prop="cusid" label="通联商户号">
                                    <el-col :span="8">
                                        <el-input v-model="ruleForm.cusid" >
                                        </el-input>
                                    </el-col>
                                </el-form-item>
                                <el-form-item prop="appid" label="应用ID">
                                    <el-col :span="8">
                                        <el-input v-model="ruleForm.appid">
                                        </el-input>
                                    </el-col>
                                </el-form-item>

                                <el-form-item prop="private_key" label="RSA私钥">
                                    <el-col :span="14">
                                        <el-input rows="5" type="textarea" v-model.trim="ruleForm.private_key"></el-input>
                                    </el-col>
                                </el-form-item>
                                <el-form-item prop="private_key" label="RSA公钥">
                                    <el-col :span="14">
                                        <el-input rows="5" type="textarea" v-model.trim="ruleForm.public_key"></el-input>
                                    </el-col>
                                </el-form-item>
                                <el-form-item prop="private_key" label="通联RSA公钥">
                                    <el-col :span="14">
                                        <el-input rows="5" type="textarea" v-model.trim="ruleForm.union_pay_public_key"></el-input>
                                    </el-col>
                                </el-form-item>
                                <el-form-item  label="微信支付名称">
                                    <el-col :span="8">
                                        <el-input v-model="ruleForm.wechat_trade_name" >
                                        </el-input>
                                    </el-col>
                                </el-form-item>
                                <el-form-item label="小程序支付" label-width="200px">
                                    <el-radio-group v-model="ruleForm.mp_wx_open">
                                        <el-radio :label="0">关闭</el-radio>
                                        <el-radio :label="1">开启</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="微信小程序收银台" label-width="200px">
                                    <el-radio-group v-model="ruleForm.mp_wx_cashier_open">
                                        <el-radio :label="0">关闭</el-radio>
                                        <el-radio :label="1">开启</el-radio>
                                    </el-radio-group>
                                    <div class="tips-text">如果公司主体注册不满一年，请使用该支付方</div>
                                </el-form-item>
                                <el-form-item label="微信H5支付收银台" label-width="200px">
                                    <el-radio-group v-model="ruleForm.wechat_h5_cashier_open">
                                        <el-radio :label="0">关闭</el-radio>
                                        <el-radio :label="1">开启</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="公众号支付" label-width="200px">
                                    <el-radio-group v-model="ruleForm.wechat_open">
                                        <el-radio :label="0">关闭</el-radio>
                                        <el-radio :label="1">开启</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="微信H5支付" label-width="200px">
                                    <el-radio-group v-model="ruleForm.wechat_h5_open">
                                        <el-radio :label="0">关闭</el-radio>
                                        <el-radio :label="1">开启</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="微信app支付" label-width="200px">
                                    <el-radio-group v-model="ruleForm.wechat_app_open">
                                        <el-radio :label="0">关闭</el-radio>
                                        <el-radio :label="1">开启</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item  label="支付宝支付名称">
                                    <el-col :span="8">
                                        <el-input v-model="ruleForm.alipay_trade_name" >
                                        </el-input>
                                    </el-col>
                                </el-form-item>
                                <el-form-item label="支付宝H5支付" label-width="200px">
                                    <el-radio-group v-model="ruleForm.alipay_h5_open">
                                        <el-radio :label="0">关闭</el-radio>
                                        <el-radio :label="1">开启</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="支付宝APP支付" label-width="200px">
                                    <el-radio-group v-model="ruleForm.alipay_app_open">
                                        <el-radio :label="0">关闭</el-radio>
                                        <el-radio :label="1">开启</el-radio>
                                    </el-radio-group>
                                </el-form-item>

                                <el-form-item  label="快捷支付名称">
                                    <el-col :span="8">
                                        <el-input v-model="ruleForm.fastpay_trade_name" >
                                        </el-input>
                                    </el-col>
                                </el-form-item>
                                <el-form-item label="快捷支付" label-width="200px">
                                    <el-radio-group v-model="ruleForm.fastpay_js_open">
                                        <el-radio :label="0">关闭</el-radio>
                                        <el-radio :label="1">开启</el-radio>
                                    </el-radio-group>
                                </el-form-item>


                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </el-form>
            <el-button :loading="btnLoading" class="button-item" type="primary" style="margin-top: 24px;"
                       @click="store('ruleForm')" size="small">保存
            </el-button>
        </div>

    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                btnLoading: false,
                ruleForm: {
                    is_enable: 0,
                    orgid: '',
                    cusid: '',
                    appid: '',
                    private_key: '',
                    public_key: '',
                    union_pay_public_key: '',
                    wechat_trade_name: '通联微信',
                    mp_wx_open: 0,
                    mp_wx_cashier_open: 0,
                    wechat_h5_cashier_open: 0,
                    wechat_open: 0,
                    wechat_h5_open: 0,
                    wechat_app_open: 0,
                    alipay_trade_name: '通联支付宝',
                    alipay_h5_open: 0,
                    alipay_app_open: 0,
                    fastpay_trade_name: '银联支付',
                    fastpay_js_open: 0,
                },
            }
        },
        mounted: function () {
            this.loadData();
        },
        methods: {
            loadData() {
                this.loading = true;
                request({
                    params: {
                        r: 'union-pay/setting/index',
                    },
                    method: 'get'
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        this.ruleForm = Object.assign(this.ruleForm, e.data.data.list);

                    }
                }).catch(e => {
                    this.loading = false;
                })
            },
            store(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.btnLoading = true;
                        request({
                            params: {
                                r: 'union-pay/setting/index',
                            },
                            method: 'post',
                            data: this.ruleForm
                        }).then(e => {
                            this.btnLoading = false;
                            if (e.data.code == 0) {
                                this.$message.success(e.data.msg);
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            this.$message.error(e);
                            this.btnLoading = false;
                        })
                    } else {
                        this.btnLoading = false;
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        }
    });
</script>
<style>
    .form_box {
        background-color: #f3f3f3;
        padding: 0 0 20px;
    }

    .button-item {
        margin-top: 12px;
        padding: 9px 25px;
    }

    .el-input-group__append {
        background-color: #fff;
        color: #353535;
    }
</style>