qimall/addons/HuijuBill/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-form :model="basic" size="small" ref="ruleForm" label-width="150px">
                        <!-- :rules="rules" -->
                        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                            <el-tab-pane label="基本设置" name="basic">
                                <el-row>
                                    <el-col :span="24">
                                        <div class="title paddingTop">
                                            <span class="title-line"></span>
                                            <span>汇支付支付配置</span>
                                        </div>
                                        <div class="form-body">
                                            <el-form-item label="汇支付支付" prop="huijubill_status">
                                                <!-- <el-switch v-model="basic.huijubill_status" :active-value="1" :inactive-value="0"></el-switch> -->
                                                <el-radio v-model="basic.huijubill_status" :label="1">开启</el-radio>
                                                <el-radio v-model="basic.huijubill_status" :label="0">关闭</el-radio>
                                            </el-form-item>
                                            <el-form-item label="商户编号" prop="huijubill_merchant_no" :rules="{required: true, message: '商户编号不能为空', trigger: 'blur'}">
                                                <el-input type="text" v-model="basic.huijubill_merchant_no" placeholder=""></el-input>
                                            </el-form-item>
                                        </div>
                                    </el-col>
                                    <el-col :span="24">
                                        <div class="title paddingTop">
                                            <span class="title-line"></span>
                                            <span>汇支付支付方式</span>
                                        </div>
                                        <div class="form-body">
                                            <el-form-item label="支付渠道" :rules="{required: true, message: '支付渠道不能为空', trigger: 'blur'}">
                                                <el-col :span="12">
                                                    <el-checkbox-group v-model="basic.huijubill_trade_channel">
                                                        <el-checkbox 
                                                            v-for="item in channel"
                                                            :label="item.value"
                                                        >{{ item.name }}</el-checkbox>
                                                    </el-checkbox-group>
                                                </el-col>
                                            </el-form-item>
                                            <!-- 微信支付 -->
                                            <el-form-item label="微信支付">
                                                <el-row>
                                                    <el-col :span="5">
                                                        <span>微信支付名称</span>
                                                    </el-col>
                                                    <el-col :span="12">
                                                        <el-input v-model="basic.huijubill_wechat_trade_name" size="small" placeholder="微信-汇支付支付"></el-input>
                                                    </el-col>
                                                </el-row>
                                            </el-form-item>
                                            <el-form-item label="小程序支付" label-width="200px">
                                                <el-radio-group v-model="basic.huijubill_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="basic.huijubill_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="basic.huijubill_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="支付宝支付">
                                                <el-row>
                                                    <el-col :span="5">
                                                        <span>支付宝支付名称</span>
                                                    </el-col>
                                                    <el-col :span="12">
                                                        <el-input v-model="basic.huijubill_alipay_trade_name" size="small" placeholder="支付宝-汇支付支付"></el-input>
                                                    </el-col>
                                                </el-row>
                                            </el-form-item>
                                            <el-form-item label="支付宝H5支付" label-width="200px">
                                                <el-radio-group v-model="basic.huijubill_alipay_h5_open">
                                                    <el-radio :label="0">关闭</el-radio>
                                                    <el-radio :label="1">开启</el-radio>
                                                </el-radio-group>
                                            </el-form-item>
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-tab-pane>
                            <el-tab-pane label="账户信息" name="info">
                                <el-row>
                                    <el-col :span="24">
                                        <div class="title paddingTop">
                                            <span class="title-line"></span>
                                            <span>商户信息</span>
                                        </div>
                                        <div class="form-body">
                                            <el-form-item label="分账方全称">
                                                <el-input type="text" v-model="info.alt_mch_name" disabled></el-input>
                                            </el-form-item>
                                            <el-form-item label="商户简称">
                                                <el-input type="text" v-model="info.alt_mch_short_name" disabled></el-input>
                                            </el-form-item>
                                            <el-form-item label="联行号">
                                                <el-input type="text" v-model="info.bank_channel_no" disabled></el-input>
                                            </el-form-item>
                                            <el-form-item label="银行账号">
                                                <el-input type="text" v-model="info.bank_account_no" disabled></el-input>
                                            </el-form-item>
                                            <el-form-item label="银行账户名称">
                                                <el-input type="text" v-model="info.bank_account_name" disabled></el-input>
                                            </el-form-item>
                                            <el-form-item label="商户简称">
                                                <el-input type="text" v-model="info.alt_mch_short_name" disabled></el-input>
                                            </el-form-item>
                                            <el-form-item label="分账方商户类型">
                                                <el-input type="text" v-model="info.alt_merchant_type" disabled></el-input>
                                            </el-form-item>
                                            <el-form-item label="手续费">
                                                <el-input type="text" v-model="info.fee" disabled>
                                                    <template slot="append">%</template>
                                                </el-input>
                                            </el-form-item>
                                            <el-form-item label="签约状态">
                                                <el-input type="text" v-model="info.sign_status" disabled>
                                                </el-input>
                                            </el-form-item>
                                            <el-form-item label="结算方式">
                                                <el-input type="text" v-model="info.sett_mode" disabled></el-input>
                                            </el-form-item>
                                            <el-form-item label="余额">
                                                <el-input type="text" v-model="info.balance" disabled></el-input>
                                            </el-form-item>
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-tab-pane>
                        </el-tabs>
                    </el-form>
                </el-card>
            </template>
            <div style="border-top: 1px solid #dad9d9;">
                <el-button :loading="btnLoading" class="button-item" type="primary" style="margin-top: 10px;" @click="store('ruleForm')" size="small">保存
                </el-button>
            </div>
        </div>
        <!-- 这个是复制用的容器，已隐藏 -->
        <textarea id="inputs" style="opacity: 0;width: 0;height: 0;">复制内容</textarea>
    </el-card>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                activeName: 'basic',
                loading: false,
                btnLoading: false,
                dialogVisible: false,
                basic: {
                    huijubill_status: 0,
                    huijubill_merchant_no: '',
                    huijubill_wechat_app_id: '',
                    huijubill_mp_wx_open: 0,
                    huijubill_wechat_open: 0,
                    huijubill_wechat_h5_open: 0,
                    huijubill_alipay_h5_open: 0,
                    huijubill_trade_channel: [],
                    huijubill_wechat_trade_name: '微信-汇支付支付',
                    huijubill_alipay_trade_name: '支付宝-汇支付支付',
                    huijubill_alternative_status: 0, // 开启提现汇聚代付
                    huijubill_channel_alternative: [], // 代付渠道
                    huijubill_fastpay_trade_name: '快捷分账支付', // 快捷支付名称
                    huijubill_fast_pay_private_key: '', // 汇聚快捷支付私钥
                    huijubill_fast_pay_public_key: '', // 汇聚快捷支付公钥
                },
                // 商户信息
                info: {},
                channel: [
                    {
                        value: 1,
                        name: '商品订单',
                    },
                    {
                        value: 2,
                        name: '余额充值',
                    },
                ],
            }
        },
        mounted: function() {
            this.loadData();
        },
        methods: {
            // 获取基础设置详情
            loadData() {
                this.loading = true;
                request({
                    params: {
                        r: 'huiju-bill/default/index',
                    },
                    method: 'get'
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        if (JSON.stringify(e.data.data.settings) != '[]') {
                            this.basic = e.data.data.settings;
                        }
                    } else {
                        this.$message.error(e.data.msg)
                    }
                }).catch(e => {
                    this.loading = false;
                })
            },
            store(formName) {
                var self = this
                if (self.basic.huijubill_status == 1) {
                    if (
                        !self.basic.huijubill_merchant_no
                    ) {
                        self.$message.error('请完善汇支付支付信息！');
                        return;
                    }
                    if (!self.basic.huijubill_trade_channel.length) {
                        self.$message.error('请至少选择一种支付渠道，选择后才能使用汇支付支付');
                        return;
                    }
                    if (!self.basic.huijubill_wechat_trade_name) {
                        self.$message.error('微信支付名称不能为空');
                        return null;
                    } else {
                        if (self.basic.huijubill_wechat_trade_name.length > 10) {
                            self.$message.error('支付名称不能超过 10 个字');
                            return;
                        }
                    }
                    if (!self.basic.huijubill_alipay_trade_name) {
                        self.$message.error('支付宝支付名称不能为空');
                        return null;
                    } else {
                        if (self.basic.huijubill_alipay_trade_name.length > 10) {
                            self.$message.error('支付名称不能超过 10 个字');
                            return;
                        }
                    }
                    if (!self.basic.huijubill_fastpay_trade_name) {
                        self.$message.error('快捷支付名称不能为空');
                        return null;
                    } else {
                        if (self.basic.huijubill_fastpay_trade_name.length > 10) {
                            self.$message.error('支付名称不能超过 10 个字');
                            return;
                        }
                    }
                    if (self.basic.huijubill_alternative_status == 1 && !self.basic.huijubill_channel_alternative.length) {
                        self.$message.error('请至少选择一种支付渠道，选择后才能使用汇聚代付提醒');
                        return;
                    }
                }
                self.btnLoading = true;
                request({
                    params: {
                        r: 'huiju-bill/default/submit',
                    },
                    method: 'post',
                    data: self.basic
                }).then(e => {
                    self.btnLoading = false;
                    if (e.data.code == 0) {
                        self.$message.success(e.data.msg);
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    self.$message.error(e);
                    self.btnLoading = false;
                })
            },
            // 切换
            handleClick(tab, event) {
                if (this.activeName == 'info') {
                    if (JSON.stringify(this.info) == '{}') {
                        request({
                            params: {
                                r: 'huiju-bill/default/info',
                            },
                            method: 'get',
                        }).then(e => {
                            self.btnLoading = false;
                            if (e.data.code == 0) {
                                this.info = e.data.data
                            }
                        }).catch(e => {
                            self.$message.error(e);
                            self.btnLoading = 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;
    }

    .el-form-item {
        margin-bottom: 25px !important;
    }

    .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;
    }

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