qimall/addons/AvoidTax/backend/views/auth/index.php

<?php
    use common\helpers\ComponentHelper;
    ComponentHelper::loadComponentView('com-user-info');
?>
<com-list-page :crumbs="crumbs" id="application">
    <com-list-table 
        ref="table"
        :api="'avoid-tax/auth/index'"
        @selection-change="handleSelectionChange"
        :search-list="searchList"
    >
        <template slot="statistics">
            <!-- 提示 -->
            <el-col :span="24">
                <div class="notice">
                    <ul>
                        <li>
                            <i class="el-icon-info" style="color: #E6A23C"></i>
                            请勿随意修改用户支付宝账号, 仅用户填错时可修改, 修改前可用支付宝转账功能进行查证。支付宝账号必须用户认证本人的支付宝账号, 否则会转账失败。
                        </li>
                        <li>
                            <i class="el-icon-info" style="color: #E6A23C"></i>
                            解绑仅系统单方面解除会员身份绑定, 如再次签约出现已绑定的情况, 请联系税务方解除绑定。
                        </li>
                    </ul>
                </div>
            </el-col>
        </template>
        <!-- 订单信息 -->
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="id" align="center" label="ID"></el-table-column>
        <el-table-column prop="user" align="center" label="用户">
            <template slot-scope="scope">
                <com-user-info :user="scope.row.user"></com-user-info>
            </template>
        </el-table-column>
        <el-table-column prop="name" align="center" label="真实姓名"></el-table-column>
        <el-table-column prop="id_card_no" align="center" label="身份证"></el-table-column>
        <el-table-column prop="mobile" align="center" label="支付宝账号">
            <template slot-scope="scope">
                {{ scope.row.mobile }}
                <template v-if="scope.row.account">
                    <br>
                    {{ scope.row.account }}
                </template>
            </template>
        </el-table-column>
        <el-table-column prop="default" align="center" label="是否默认">
            <template slot-scope="scope">
                <i class="el-icon-circle-check" v-if="scope.row.default == 1"></i>
                <i class="el-icon-circle-close" v-if="scope.row.default == 0"></i>
            </template>
        </el-table-column>
        <el-table-column prop="created_at" align="center" label="签约时间">
            <template slot-scope="scope">
                {{ scope.row.created_at|dateTimeFormat('Y-m-d H:i:s') }}
            </template>
        </el-table-column>
        <el-table-column prop="right_btn" label="操作" align="center">
            <template slot-scope="scope">
                <el-button 
                    type="text" 
                    @click="editAuth(scope.row)" 
                >修改</el-button>
                <el-button
                    type="text" 
                    @click="unbind(scope.row.id)" 
                >解绑</el-button>
            </template>
        </el-table-column>
    </com-list-table>
    <!-- 修改 -->
    <el-dialog :visible.sync="authVisible" width="30%">
        <template slot="title">
            <h3 style="text-align: center;">修改</h3>
        </template>
        <el-form label-width="150px" :model="authForm" :rules="authRules" ref="authForm">
            <el-form-item label="真实姓名：">
                {{ auth.name }}
            </el-form-item>
            <el-form-item label="身份证号码：">
                {{ auth.id_card_no }}
            </el-form-item>
            <el-form-item label="支付宝手机号：" prop="mobile">
                <el-input 
                    v-model="authForm.mobile" 
                    style="width: 350px" 
                    placeholder="请输入支付宝手机号"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="支付宝账号：" prop="account">
                <el-input 
                    v-model="authForm.account" 
                    style="width: 350px" 
                    placeholder="请输入支付宝账号"
                >
                </el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" :loading="subLoad" @click="toChange">确 定</el-button>
        </span>
    </el-dialog>
</com-list-page>
<script>
    var checkPhone = (rule, value, callback) => {
        if (!value) {
            return callback(new Error('手机号不能为空'));
        } else {
            const reg = /^1[1-9]\d{9}$/
            if (reg.test(value)) {
                callback();
            } else {
                return callback(new Error('请输入正确的手机号'));
            }
        }
    }
    var checkAccount = (rule, value, callback) => {
        if (value) {
            const reg = /^1[1-9]\d{9}$|[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}/
            if (reg.test(value)) {
                callback();
            } else {
                return callback(new Error('请输入正确的手机号'));
            }
        }
        callback();
    }
    const application = new Vue({
        el: '#application',
        data: {
            crumbs: [
                {
                    title: '首页',
                    router: 'mall/overview/index',
                },
                {
                    title: '实名认证列表',
                }
            ],
            searchList: [
                {
                    key: 'keyword',
                    title: '会员昵称/手机号',
                    type: 'text',
                },
            ],
            authVisible: false,
            subLoad: false,
            auth: {},
            authForm: {
                mobile: undefined,
                account: undefined,
            },
            authRules: {
                mobile: [
                    {required: true, message: '支付宝账号不能为空'},
                    {validator: checkPhone, message: '支付宝账号有误'}
                ],
                account: [
                    {validator: checkAccount, message: '支付宝账号有误'}
                ],
            }
        },
        methods: {
            handleSelectionChange(val) {
                this.select_order = val
            },
            // edit
            editAuth(auth) {
                this.auth = auth
                this.authVisible = true
                this.authForm.mobile = auth.mobile
                this.authForm.account = auth.account
            },
            toChange() {
                this.$refs['authForm'].validate((valid) => {
                    if (valid) {
                        this.subLoad = true
                        request({
                            params: {
                                r: 'avoid-tax/auth/change',
                                id: this.auth.id,
                            },
                            method: 'post',
                            data: this.authForm,
                        }).then(e => {
                            if (e.data.code === 0) {
                                this.$message.success(e.data.msg)
                                setTimeout(() => {
                                    this.$refs.table.handleSearch()
                                }, 1500)
                            } else {
                                this.$message.error(e.data.msg)
                            }
                            this.authVisible = false
                            this.subLoad = false
                        }).catch(e => {
                            this.$message.error('Net Error')
                            this.subLoad = false
                        })
                    }
                })
            },
            unbind(id) {
                this.$confirm('是否确定解约，确定后需要自行向第三方申请解约', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request({
                        params: {
                            r: 'avoid-tax/auth/unbind',
                            id: id
                        },
                    }).then(e => {
                        if (e.data.code === 0) {
                            this.$message.success(e.data.msg)
                            setTimeout(() => {
                                this.$refs.table.handleSearch()
                            }, 1500)
                        } else {
                            this.$message.error(e.data.msg)
                        }
                    })
                })
            },
            convert() {
                this.$confirm('确定转换吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request({
                        params: {
                            r: 'avoid-tax/auth/convert',
                        },
                    }).then(e => {
                        this.$message.success(e.data.msg)
                    })
                })
            },
        },
    });
</script>
<style>
    .notice {
        border: 1px solid rgb(250, 236, 216);
        background: rgb(253, 246, 236);
        margin-top: 10px;
        padding: 10px;
        border-radius: 5px;
    }

    .notice li + li {
        margin-top: 5px;
    }
    
    .convert {
        position: absolute;
        right: 0;
        top: 0;
    }
</style>