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

<?php
use common\helpers\ComponentHelper;
ComponentHelper::loadComponentView('more-merchant', __DIR__ . '/../components');
?>
<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="180px">
                        <!-- :rules="rules" -->
                        <el-tabs v-model="activeName" type="card">
                            <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="huifupay_status">
                                                <el-radio v-model="basic.huifupay_status" :label="1">开启</el-radio>
                                                <el-radio v-model="basic.huifupay_status" :label="0">关闭</el-radio>
                                            </el-form-item>
                                            <el-form-item label="汇付sys_id" prop="huifupay_sys_id" :rules="[{required: true, message: '商户sys_id不能为空', trigger: 'blur'}]">
                                                <el-input type="text" v-model="basic.huifupay_sys_id" placeholder="">
                                                </el-input>
                                            </el-form-item>

                                            <el-form-item label="汇付product_id" prop="huifupay_product_id" :rules="[{required: true, message: '汇付product_id不能为空', trigger: 'blur'}]">
                                                <el-input type="text" v-model="basic.huifupay_product_id"></el-input>
                                            </el-form-item>
                                            <el-form-item label="汇付huifu_id" prop="huifupay_huifu_id" :rules="[{required: true, message: 'huifu_id 不能为空', trigger: 'blur'}]">
                                                <el-input type="text" v-model="basic.huifupay_huifu_id"></el-input>
                                            </el-form-item>


                                            <el-form-item label="商户私钥" prop="huifupay_private_key" :rules="[{required: true, message: '商户私钥不能为空', trigger: 'blur'}]">
                                                <el-input type="textarea" :rows="5" v-model="basic.huifupay_private_key"></el-input>
                                            </el-form-item>
                                            <el-form-item label="汇付支付公钥" prop="huifupay_public_key" :rules="[{required: true, message: '汇付支付公钥不能为空', trigger: 'blur'}]">
                                                <el-input v-model="basic.huifupay_public_key" type="textarea" :rows="5">
                                                </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="支付渠道" required>
                                                <el-col :span="12">
                                                    <!-- <el-switch v-model="basic.trade_channel" :active-value="1" :inactive-value="0" active-text="是" inactive-text="否"> </el-switch> -->
                                                    <el-checkbox-group v-model="basic.huifupay_trade_channel">
                                                        <el-checkbox :key="0" :label="1">商品订单</el-checkbox>
                                                        <el-checkbox :key="1" :label="2">余额充值</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.huifupay_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.huifupay_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.huifupay_mp_wx_open_jhzs">
                                                    <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.huifupay_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.huifupay_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="basic.huifupay_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-row>
                                                    <el-col :span="5">
                                                        <span>支付名称</span>
                                                    </el-col>
                                                    <el-col :span="12">
                                                        <el-input v-model="basic.huifupay_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.huifupay_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="快捷支付" prop="huifupay_fast_pay_status">
                                                <el-radio-group v-model="basic.huifupay_fast_pay_status">
                                                    <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.huifupay_fastpay_trade_name" size="small" placeholder="汇付-快捷支付"></el-input>
                                                    </el-col>
                                                </el-row>
                                            </el-form-item>

                                            <el-form-item label="大额支付" prop="huifupay_big_pay_status">
                                                <el-radio-group v-model="basic.huifupay_big_pay_status">
                                                    <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.huifupay_big_trade_name" size="small" placeholder="汇付-大额支付"></el-input>
                                                    </el-col>
                                                </el-row>
                                            </el-form-item>






                                            <!-- <el-form-item label="余额支付" prop="huifupay_balance_pay_status">
                                                <el-radio-group v-model="basic.huifupay_balance_pay_status">
                                                    <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.huifupay_balance_trade_name" size="small"
                                                            placeholder="汇付-余额支付"></el-input>
                                                    </el-col>
                                                </el-row>
                                            </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="开启分账" prop="huifupay_ledger_status">
                                                <el-radio-group v-model="basic.huifupay_ledger_status">
                                                    <el-radio :label="0">关闭</el-radio>
                                                    <el-radio :label="1">开启</el-radio>
                                                </el-radio-group>
                                            </el-form-item>
                                            <div v-if="basic.huifupay_ledger_status">
                                                <el-form-item label="分账商户">
                                                    <div v-for="(item,key) in basic.huifupay_ledger_list" style="margin-bottom: 5px;width:1200px">
                                                        <el-input style="width:250px" v-model="item.id" @input="onInput">
                                                            <template slot="prepend">商户ID</template>
                                                        </el-input>
                                                        <el-input style="width:250px" @input="(val) => handleInput(val, key)" v-model="item.num">
                                                            <template slot="prepend">分成</template>
                                                            <template slot="append">%</template>
                                                        </el-input>
                                                        <el-button type="text" @click="handle('ledger_sub_del',key)" style="margin-left: 10px;">删除</el-button>
                                                    </div>

                                                    <el-button type="text" @click="handle('ledger_sub_add')">+添加规则
                                                    </el-button>

                                                    <div class="tips-text">所有商户比例不能超过100%</div>
                                                </el-form-item>
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-tab-pane>
                            <el-tab-pane label="多商户配置" name="merchant" v-if="is_install_tactics_pay">
                                <el-row>
                                    <el-col :span="24">
                                        <div class="title paddingTop">
                                            <span class="title-line"></span>
                                            <span>汇付支付多商户配置</span>
                                        </div>
                                        <div class="form-body" style="padding: 20px 20% 0 10px;">
                                            <el-form-item label="汇付支付多商户" prop="huifupay_more_merchant_enable">
                                                <el-switch v-model="basic.huifupay_more_merchant_enable" :active-value="1" :inactive-value="0"></el-switch>
                                            </el-form-item>
                                            <el-form-item label="商户列表" prop="huifupay_merchant" v-if="basic.huifupay_more_merchant_enable == 1">
                                                <more-merchant v-model="basic.huifupay_merchant" :fields="more_merchant_field" key="huifupay_merchant"></more-merchant>
                                            </el-form-item>
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-tab-pane>
                        </el-tabs>
                        <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>
                    </el-form>
                </el-card>
            </template>
        </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: {
                    huifupay_status: 0,
                    huifupay_sys_id: '',
                    huifupay_product_id: '',
                    huifupay_huifu_id: '',
                    huifupay_mp_wx_open: 0,
                    huifupay_mp_wx_open_jhzs: 0,
                    huifupay_balance_pay_status: 0,
                    huifupay_balance_trade_name: '汇付-余额支付',
                    huifupay_wechat_open: 0,
                    huifupay_wechat_app_open: 0,
                    huifupay_wechat_h5_open: 0,
                    huifupay_alipay_h5_open: 0,
                    huifupay_trade_channel: [],
                    huifupay_wechat_trade_name: '汇付-微信支付',
                    huifupay_alipay_trade_name: '汇付-支付宝',
                    huifupay_fast_pay_status: 0,
                    huifupay_fastpay_trade_name: '汇付-快捷支付', // 快捷支付名称
                    huifupay_big_pay_status: 0, //大额支付
                    huifupay_big_trade_name: '汇付-大额支付',
                    huifupay_private_key: '', // 汇付支付私钥
                    huifupay_public_key: '', // 支付公钥
                    huifupay_ledger_status: 0, //开启分账
                    huifupay_ledger_list: [],
                    huifupay_more_merchant_enable: 0,
                    huifupay_merchant: []
                },
                is_install_tactics_pay: 0,
                more_merchant_field: []
            }
        },
        mounted: function() {
            this.loadData();
        },
        methods: {
            // 获取基础设置详情
            loadData() {
                this.loading = true;
                request({
                    params: {
                        r: 'huifu-pay/default/index',
                    },
                    method: 'get'
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        if (e.data.data.settings) {
                            this.basic = e.data.data.settings;
                        }
                        if (!this.basic.huifupay_trade_channel) {
                            this.basic.huifupay_trade_channel = [];
                        }
                        if (!this.basic.huifupay_ledger_list) {
                            this.basic.huifupay_ledger_list = [];
                        }
                        if (!this.basic.huifupay_merchant) {
                            this.basic.huifupay_merchant = [];
                        }
                        if (!this.basic.huifupay_balance_pay_status) {
                            this.basic.huifupay_balance_pay_status = 0
                        }
                        if (!this.basic.huifupay_balance_trade_name) {
                            this.basic.huifupay_balance_trade_name = '汇付-余额支付'
                        }
                        if (e.data.data.tactics_pay_setting != undefined) {
                            if (e.data.data.tactics_pay_setting.more_merchant_field != undefined)
                                this.more_merchant_field = e.data.data.tactics_pay_setting.more_merchant_field;
                            if (e.data.data.tactics_pay_setting.is_installed != undefined)
                                this.is_install_tactics_pay = e.data.data.tactics_pay_setting.is_installed;
                        }
                    } else {
                        this.$message.error(e.data.msg)
                    }
                }).catch(e => {
                    this.loading = false;
                })
            },
            onInput() {
                this.$forceUpdate()

            },
            handleInput(val, index) { //
                let filtered = val
                    .replace(/[^0-9.]/g, '')
                    .replace(/(\..*)\./g, '$1'); // 禁止多个小数点

                // 处理以小数点开头的情况
                if (filtered.startsWith('.')) {
                    filtered = '0' + filtered;
                }
                // 分割整数和小数部分
                const parts = filtered.split('.');
                if (parts.length > 1) {
                    parts[1] = parts[1].slice(0, 2); // 限制两位小数
                    filtered = parts[0] + '.' + parts[1];
                }
                // 更新对应项的值
                this.basic.huifupay_ledger_list[index].num = filtered;
            },
            // 操作处理
            handle(type, data = null) {
                var self = this
                switch (type) {
                    case 'ledger_sub_add': // 添加
                        console.log('添加')
                        self.basic.huifupay_ledger_list.push({
                            id: "",
                            num: "0.00",
                        });
                        break;
                    case 'ledger_sub_del': // 删除
                        self.basic.huifupay_ledger_list.splice(data, 1);
                        break;
                }
                this.$forceUpdate()
            },
            store(formName) {
                var self = this
                if (self.basic.huifupay_status == 1) {
                    if (
                        !self.basic.huifupay_sys_id ||
                        !self.basic.huifupay_sys_id
                    ) {
                        self.$message.error('请完善汇付支付sys_id信息');
                        return;
                    }
                    if (
                        !self.basic.huifupay_product_id ||
                        !self.basic.huifupay_product_id
                    ) {
                        self.$message.error('请完善汇付支付product_id信息');
                        return;
                    }
                    if (!self.basic.huifupay_private_key || !self.basic.huifupay_public_key) {
                        self.$message.error('请完善汇付支付密钥信息！');
                        return;
                    }
                    if (!self.basic.huifupay_trade_channel.length) {
                        self.$message.error('请至少选择一种支付渠道，选择后才能使用汇付支付');
                        return;
                    }

                    if (self.basic.huifupay_ledger_list.length > 0) {
                        let ledgerNum = self.basic.huifupay_ledger_list.reduce((pre, cur) => {
                            return pre + parseFloat(cur.num);
                        }, 0);
                        if (ledgerNum > 100) {
                            self.$message.error('商户分账比例不能大于100%');
                            return;
                        }
                    }

                    if (!self.basic.huifupay_wechat_trade_name) {
                        self.$message.error('微信支付名称不能为空');
                        return null;
                    } else {
                        if (self.basic.huifupay_wechat_trade_name.length > 10) {
                            self.$message.error('支付名称不能超过 10 个字');
                            return;
                        }
                    }
                    if (!self.basic.huifupay_alipay_trade_name) {
                        self.$message.error('支付宝支付名称不能为空');
                        return null;
                    } else {
                        if (self.basic.huifupay_alipay_trade_name.length > 10) {
                            self.$message.error('支付名称不能超过 10 个字');
                            return;
                        }
                    }
                    if (!self.basic.huifupay_fastpay_trade_name) {
                        self.$message.error('快捷支付名称不能为空');
                        return null;
                    } else {
                        if (self.basic.huifupay_fastpay_trade_name.length > 10) {
                            self.$message.error('支付名称不能超过 10 个字');
                            return;
                        }
                    }
                    if (!self.basic.huifupay_big_trade_name) {
                        self.$message.error('大额支付名称不能为空');
                        return null;
                    } else {
                        if (self.basic.huifupay_big_trade_name.length > 10) {
                            self.$message.error('大额支付名称不能超过 10 个字');
                            return;
                        }
                    }
                }
                // console.log(self.basic, '------basic');return null;
                self.btnLoading = true;
                request({
                    params: {
                        r: 'huifu-pay/default/index',
                    },
                    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);
                    }
                    if (e.data.data.huifupay_merchant != undefined) {
                        this.basic.huifupay_merchant = e.data.data.huifupay_merchant;
                    }
                }).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>