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

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-dialog-select');
?>
<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" :rules="rules" label-width="150px">
                        <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="status">
                                        <!-- <el-switch v-model="basic.joinpay_status" :active-value="1" :inactive-value="0"></el-switch> -->
                                        <el-radio v-model="basic.status" :label="1">开启</el-radio>
                                        <el-radio v-model="basic.status" :label="0">关闭</el-radio>
                                        <br/>
                                        <div class="tips-text" style="line-height: 24px;">
                                            开启后用户下单或者佣金提现必须要先进行实名认证
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="接口地址" prop="status">
                                        <div><a href="https://market.cloud.tencent.com/products/17684" target="_blank">https://market.cloud.tencent.com/products/17684</a></div>
                                        <br/>
                                        <div class="tips-text" style="line-height: 24px;">
                                            复制到浏览器打开登录腾讯云购买实名认证套餐
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="接口版本" prop="status">
                                        <el-radio-group v-model="basic.version" size="small">
                                            <el-radio :label="1" border>新版</el-radio>
                                            <el-radio :label="2" border>旧版</el-radio>
                                        </el-radio-group>
                                    </el-form-item>

                                    <el-form-item label="SecretID" prop="secret_id" :rules="[{required: true, message: 'SecretID不能为空', trigger: 'blur'}]">
                                        <el-input type="text" v-model="basic.secret_id" style="width: 350px;"></el-input>
                                        <br/>
                                        <div class="tips-text" style="line-height: 24px;">
                                            购买套餐后可看到
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="SecretKey" prop="secret_key" :rules="[{required: true, message: 'SecretKey不能为空', trigger: 'blur'}]">
                                        <el-input type="text" v-model="basic.secret_key" style="width: 350px;"></el-input>
                                        <br/>
                                        <div class="tips-text" style="line-height: 24px;">
                                            购买套餐后可看到
                                        </div>
                                    </el-form-item>

                                    <el-form-item label="应用场景" prop="scene">
                                        <!-- <el-switch v-model="basic.joinpay_status" :active-value="1" :inactive-value="0"></el-switch> -->
                                        <el-checkbox-group v-model="basic.scene">
                                            <el-checkbox v-for="(item, key) in scene_conf" :label="item.value" :key="key">{{ item.name }}</el-checkbox>

                                        </el-checkbox-group>
                                        <br/>
                                        <div class="tips-text" style="line-height: 24px;">
                                            选择实名认证用于哪个场景
                                        </div>
                                    </el-form-item>
                                    <el-form-item prop="goods_ids">
                                        <template v-if="basic.scene.indexOf('part_order') > -1">
                                            <div style="display:flex;justify-content:space-between;padding-bottom:10px;">
                                                <span style="color: #ff4544;">最多可添加100个商品</span>
                                                <span>
                                                    <com-dialog-select :multiple="true" @selected="goodsSelect" title="商品选择">
                                                        <el-button type="primary">选择商品</el-button>
                                                    </com-dialog-select>
                                                </span>
                                            </div>
                                            <div style="max-height: 300px;overflow-y: auto">
                                                <el-table :data="basic.goods_list" :show-header="false" border>
                                                    <el-table-column label="">
                                                        <template slot-scope="scope">
                                                            <div flex>
                                                                <div style="padding-right: 10px;flex-grow: 0">
                                                                    <com-image mode="aspectFill" :src="scope.row.cover_pic"></com-image>
                                                                </div>
                                                                <div style="flex-grow: 1;">
                                                                    <com-ellipsis :line="2">{{scope.row.name}}
                                                                    </com-ellipsis>
                                                                </div>
                                                                <div style="flex-grow: 0;">
                                                                    <el-button @click="deleteGoods(scope.$index)" type="text" circle size="mini">
                                                                        <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                                                            <img src="resources/img/mall/del.png" alt="">
                                                                        </el-tooltip>
                                                                    </el-button>
                                                                </div>
                                                            </div>
                                                        </template>
                                                    </el-table-column>
                                                </el-table>
                                            </div>
                                        </template>
                                    </el-form-item>

                                    <el-form-item label="证件号唯一性" prop="id_no_limit">
                                        <!-- <el-switch v-model="basic.joinpay_status" :active-value="1" :inactive-value="0"></el-switch> -->
                                        <el-radio v-model="basic.id_no_limit" :label="1">1个证件号码只能用于1个会员</el-radio>
                                        <el-radio v-model="basic.id_no_limit" :label="0">1个证件号码可用于多个会员</el-radio>
                                        <br/>
                                        <div class="tips-text" style="line-height: 24px;">
                                            选择一个实名认证只能绑定一个会员账号还是可以绑定多个会员账号
                                        </div>
                                    </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="setting_status">
                                        <el-radio v-model="basic.setting_status" :label="1">开启</el-radio>
                                        <el-radio v-model="basic.setting_status" :label="0">关闭</el-radio>
                                        <p class="tips-text" style="width:600px;">开启后，前端个人认证页面新增地区选择，并且开启企业认证通道</p>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <template v-if="basic.setting_status">
                                <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="business_status">
                                            <el-radio v-model="basic.business_status" :label="1">开启</el-radio>
                                            <el-radio v-model="basic.business_status" :label="0">关闭</el-radio>
                                        </el-form-item>
                                        <el-form-item style="width: 800px;" label="提示设置" prop="business_verify_time">
                                            用户提交企业信息后，工作人员将于
                                            <el-input type="text" v-model="basic.business_verify_time" style="width: 100px;"></el-input>
                                            小时内完成审核（显示给用户看）
                                        </el-form-item>
                                        <el-form-item label="应用场景" prop="business_scene">
                                            <el-checkbox-group v-model="basic.business_scene">
                                                <el-checkbox
                                                        v-for="(item, key) in business_conf"
                                                        :label="item.value"
                                                        :key="key"
                                                >{{ item.name }}</el-checkbox>
                                            </el-checkbox-group>
                                        </el-form-item>
                                        <el-form-item label="认证升级" prop="business_no_limit">
                                            <el-radio v-model="basic.business_no_limit" :label="1">开启</el-radio>
                                            <el-radio v-model="basic.business_no_limit" :label="0">关闭</el-radio>
                                            <p class="tips-text" style="width:600px;">同一手机号账户，开启个人账户升级企业账户：用户注册后先完成个人认证，企业升级入口触发升级为企业账户；升级后原有的个人账户就不存在</p>
                                        </el-form-item>
                                        <el-form-item label="证件唯一性" prop="upgrade_status">
                                            <el-radio v-model="basic.upgrade_status" :label="1">开启</el-radio>
                                            <el-radio v-model="basic.upgrade_status" :label="0">关闭</el-radio>
                                            <p class="tips-text" style="width:600px;">开启后，一个营业执照号只能用于一个会员，关闭则不限制</p>
                                        </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="upgrade_status">
                                            <el-radio v-model="basic.upgrade_status" :label="1">开启</el-radio>
                                            <el-radio v-model="basic.upgrade_status" :label="0">关闭</el-radio>
                                            <p class="tips-text" style="width:600px;">同一手机号账户，开启个人账户升级企业账户：用户注册后先完成个人认证，企业升级入口触发升级为企业账户；升级后原有的个人账户就不存在</p>
                                        </el-form-item>
                                    </div>
                                </el-col> -->
                            </template>
                        </el-row>
                    </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>
    </el-card>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                addBtn: true,
                activeName: 'basic',
                loading: false,
                btnLoading: false,
                dialogVisible: false,
                basic: {
                    status: 0,
                    secret_id: '',
                    secret_key: '',
                    scene: [],
                    goods_list: [],
                    goods_ids: [],
                    id_no_limit: 1,
                    setting_status:0,
                    business_status:0,
                    version: 2,
                    business_verify_time:0,
                    business_scene:[],
                    business_no_limit:0,
                    upgrade_status:0,
                },


                scene_conf: [],
                business_conf:[],
                rules: {

                },

            }
        },
        mounted: function() {
            this.loadData();
        },
        methods: {
            // 获取基础设置详情
            loadData() {
                this.loading = true;
                request({
                    params: {
                        r: 'real-auth/default/index',
                    },
                    method: 'get'
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        if (e.data.data) {
                            // if (JSON.stringify(e.data.data.conf) != "[]") {
                            //     this.basic = e.data.data.conf
                            // }
                            this.basic = Object.assign(this.basic, e.data.data.conf);
                            this.scene_conf = e.data.data.scene_conf;
                            this.business_conf = e.data.data.business_conf;

                        }
                    } else {
                        this.$message.error(e.data.msg)
                    }
                }).catch(e => {
                    this.loading = false;
                })
            },


            // 保存
            store(formName) {
                this.$refs[formName].validate((valid) => {

                    if (valid) {
                        var self = this
                        if (self.basic.status == 1 && !self.basic.scene.length) {
                            self.$message.error('请至少选择一种应用场景');
                            return;
                        }
                        if (self.basic.id_no_limit === '') {
                            self.$message.error('请选择证件号唯一性\n');
                            return;
                        }

                        var self = this
                        self.btnLoading = true;
                        request({
                            params: {
                                r: 'real-auth/default/save',
                            },
                            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;
                        })
                    } else {
                        console.log(valid)
                    }
                })
            },
            deleteGoods(index) {
                this.basic.goods_list.splice(index, 1);
                this.basic.goods_ids.splice(index, 1);
            },
            goodsSelect(param) {
                for (let j in param) {
                    let item = param[j];
                    if (this.basic.goods_ids.length >= 100) {
                        this.$message.error('指定商品不能大于100个');
                        return;
                    }
                    let flag = true;
                    for (let i in this.basic.goods_ids) {
                        if (this.basic.goods_ids[i] == item.id) {
                            flag = false;
                            break;
                        }
                    }
                    if (flag) {
                        if (this.basic.goods_ids.indexOf(item.id) == -1) {
                            this.basic.goods_ids.push(item.id);
                        }
                        this.basic.goods_list.push({
                            id: item.id,
                            name: item.goods_name,
                            cover_pic: item.cover_pic,
                        });
                    }
                }
            },
        },

    });
</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;
    }

    .condition .el-col-1 {
        text-align: center;
        /* margin-left: 50px !important; */
    }

    .condition .el-col-2 {
        text-align: center;
        /* margin-left: 50px !important; */
    }

    .del-condition {
        cursor: pointer;
    }

    .condition .el-form-item {
        margin-bottom: 8px !important;
    }
</style>