qimall/addons/Sicpay/backend/views/default/index.php

<div id="app" v-cloak>
    <el-card class="box-card" v-loading="loading" shadow="never" style="border:0;min-width: 1200px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div class="form_box">
            <template>
                <el-card>
                    <el-row :gutter="0">
                        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="140px" label-position="left">

                            <el-col :span="23">
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="商户号" prop="agencyId">
                                            <el-input v-model="formData.agencyId" placeholder="请输入商户号" clearable :style="{width: '100%'}">
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-col>
                            <el-col :span="23">
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="子商户号" prop="child_merchant_no">
                                            <el-input v-model="formData.child_merchant_no" placeholder="请输入子商户号" clearable :style="{width: '100%'}">
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-col>
                            <el-col :span="23">
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="终端号" prop="terminal_no">
                                            <el-input v-model="formData.terminal_no" placeholder="请输入终端号" clearable :style="{width: '100%'}">
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-col>
                            <el-col :span="23">
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="商户RSA私钥" prop="merRsaPrivateKey">
                                            <el-input v-model="formData.merRsaPrivateKey" type="textarea" placeholder="请输入商户RSA私钥"
                                                      :autosize="{minRows: 5, maxRows: 5}" :style="{width: '100%'}"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-col>
<!--                            <el-col :span="23">-->
<!--                                <el-row>-->
<!--                                    <el-col :span="12">-->
<!--                                        <el-form-item label="商户AES私钥" prop="merAesKey">-->
<!--                                            <el-input v-model="formData.merAesKey" type="textarea" placeholder="请输入商户AES私钥"-->
<!--                                                      :autosize="{minRows: 5, maxRows: 5}" :style="{width: '100%'}"></el-input>-->
<!--                                        </el-form-item>-->
<!--                                    </el-col>-->
<!--                                </el-row>-->
<!--                            </el-col>-->
                            <el-col :span="23">
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="平台RSA公钥" prop="rootRsaPublicKey">
                                            <el-input v-model="formData.rootRsaPublicKey" type="textarea" placeholder="请输入平台RSA公钥"
                                                      :autosize="{minRows: 5, maxRows: 5}" :style="{width: '100%'}"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-col>

                            <el-col :span="23">
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label="支付渠道" prop="pay_way">
                                            <el-checkbox-group v-model="formData.pay_way" size="medium">
                                                <el-checkbox v-for="(item, index) in pay_wayOptions" :key="index" :label="item.value"
                                                             :disabled="item.disabled">{{item.label}}</el-checkbox>
                                            </el-checkbox-group>
                                        </el-form-item>
                                        <el-form-item label="支付宝" prop="alipay">
                                            <el-checkbox-group v-model="formData.alipay" size="medium">
                                                <el-checkbox v-for="(item, index) in alipayOptions" :key="index" :label="item.value"
                                                             :disabled="item.disabled">{{item.label}}</el-checkbox>
                                            </el-checkbox-group>
                                        </el-form-item>
                                        <el-form-item label="微信" prop="wechat">
                                            <el-checkbox-group v-model="formData.wechat" size="medium">
                                                <el-checkbox v-for="(item, index) in wechatOptions" :key="index" :label="item.value"
                                                             :disabled="item.disabled">{{item.label}}</el-checkbox>
                                            </el-checkbox-group>
                                        </el-form-item>
                                        <el-form-item label="银联" prop="bank">
                                            <el-checkbox-group v-model="formData.bank" size="medium">
                                                <el-checkbox v-for="(item, index) in bankOptions" :key="index" :label="item.value"
                                                             :disabled="item.disabled">{{item.label}}</el-checkbox>
                                            </el-checkbox-group>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-col>
                            <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>
                        </el-form>
                    </el-row>

                </el-card>
            </template>
        </div>
    </el-card>
</div>

<script>
    const app = new Vue({
        el: '#app',
        components: {},
        props: [],
        data() {
            return {
                loading:false,
                formData: {
                    agencyId: undefined,
                    terminal_no: undefined,
                    child_merchant_no: undefined,
                    merRsaPrivateKey: undefined,
                    rootRsaPublicKey: undefined,
                    rootAesKey: undefined,
                    pay_way: [],
                    alipay: [],
                    wechat: [],
                    bank: [],
                },
                rules: {
                    agencyId: [{
                        required: true,
                        message: '请输入商户号',
                        trigger: 'blur'
                    }],
                    terminal_no: [{
                        required: true,
                        message: '请输入终端号',
                        trigger: 'blur'
                    }],
                    child_merchant_no: [{
                        required: true,
                        message: '请输入子商户号',
                        trigger: 'blur'
                    }],
                    merRsaPrivateKey: [{
                        required: true,
                        message: '请输入商户RSA私钥',
                        trigger: 'blur'
                    }],

                    rootRsaPublicKey: [{
                        required: true,
                        message: '请输入平台RSA公钥',
                        trigger: 'blur'
                    }],

                    pay_way: [{
                        required: true,
                        type: 'array',
                        message: '请至少选择一个支付渠道',
                        trigger: 'change'
                    }],
                    alipay: [{
                        required: false,
                        type: 'array',
                        message: '请至少选择一个支付宝',
                        trigger: 'change'
                    }],
                    wechat: [{
                        required: false,
                        type: 'array',
                        message: '请至少选择一个微信',
                        trigger: 'change'
                    }],
                    bank: [{
                        required: false,
                        type: 'array',
                        message: '请至少选择一个银联',
                        trigger: 'change'
                    }],
                },
                pay_wayOptions: [{
                    "label": "商城订单",
                    "value": 1
                }, {
                    "label": "余额充值",
                    "value": 2
                }],
                alipayOptions: [{
                    "label": "APP",
                    "value": 1
                }, {
                    "label": "H5",
                    "value": 2
                }],
                wechatOptions: [{
                    "label": "APP",
                    "value": 1
                }, {
                    "label": "H5",
                    "value": 2
                }, {
                    "label": "小程序",
                    "value": 3
                }, {
                    "label": "公众号",
                    "value": 4
                }],
                bankOptions: [{
                    "label": "快捷支付h5",
                    "value": 2
                },{
                    "label": "云闪付",
                    "value": 1
                }],
            }
        },
        computed: {},
        watch: {},
        created() {},
        mounted() {
            this.getConfig();
        },
        methods: {
            submitForm() {
                this.$refs['elForm'].validate(valid => {
                    if (!valid) return
                    // TODO 提交表单
                    request({
                        params: {
                            r: 'sicpay/default/save',
                        },
                        data:this.formData,
                        method: 'post',
                    }).then(e => {
                        if (e.data.code == 0 ) {
                            this.$message.success("操作成功");
                        }else{
                            this.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        this.$message.error(e);
                    })
                })
            },
            resetForm() {
                this.$refs['elForm'].resetFields()
            },

            getConfig(){
                request({
                    params: {
                        r: 'sicpay/default/get-config',
                    },
                    method: 'get',
                }).then(e => {
                    console.log(e.data.data)
                    console.log(e.data.data.length)
                    if (e.data.code == 0 && e.data.data) {
                        this.formData = e.data.data
                    }
                }).catch(e => {
                    self.$message.error(e);
                })
            }
        }
    })

</script>