qimall/addons/RealAuth/backend/views/user/business-detail.php

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0" class="box-card" body-style="background-color: #f3f3f3;padding: 10px 0 0;" class="box-card" v-loading="cardLoading">
        <div slot="header">
            <div flex="cross:center box:first">
                <div><span @click="$navigate({r:'real-auth/user/business'})" class="text">企业认证管理 </span>/认证详情</div>
            </div>
        </div>
        <div class="form-body" v-if="ruleForm">
            <el-form :model="ruleForm" size="small" ref="ruleForm" 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="real_name">
                            	<el-input readonly type="text" v-model="ruleForm.auth.real_name" style="width: 350px;"></el-input>
                            </el-form-item>
                            <el-form-item label="法人身份证号" prop="id_no">
                            	<el-input readonly type="text" v-model="ruleForm.auth.id_no" style="width: 350px;"></el-input>
                            </el-form-item>
                            <el-form-item label="联系电话" prop="mobile">
                            	<el-input readonly type="text" v-model="ruleForm.detail.mobile" style="width: 350px;"></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="企业名称" prop="business_name">
                            	<el-input readonly type="text" v-model="ruleForm.detail.business_name" style="width: 350px;"></el-input>
                            </el-form-item>
                            <el-form-item label="营业执照号码" prop="business_code">
                            	<el-input readonly type="text" v-model="ruleForm.detail.business_code" style="width: 350px;"></el-input>
                            </el-form-item>
                            <el-form-item label="企业经营地址" prop="address">
                            	<el-input readonly type="text" v-model="ruleForm.detail.address" style="width: 350px;"></el-input>
                            </el-form-item>
                            <el-form-item label="法人身份证人像面" prop="id_card_front">
                            	<el-image style="width: 120px; height: 100px" :src="ruleForm.detail.id_card_front" :preview-src-list="[ruleForm.detail.id_card_front]"></el-image>
                            </el-form-item>
                            <el-form-item label="法人身份证国徽面" prop="id_card_back">
                            	<el-image style="width: 120px; height: 100px" :src="ruleForm.detail.id_card_back" :preview-src-list="[ruleForm.detail.id_card_back]"></el-image>
                            </el-form-item>
                            <el-form-item label="企业营业执照" prop="business_license_url">
                            	<el-image style="width: 120px; height: 100px" :src="ruleForm.detail.business_license_url" :preview-src-list="[ruleForm.detail.business_license_url]"></el-image>
                            </el-form-item>
                            <el-form-item label="手持营业执照" prop="business_license_held">
                            	<el-image style="width: 120px; height: 100px" :src="ruleForm.detail.business_license_held" :preview-src-list="[ruleForm.detail.business_license_held]"></el-image>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <span class="dialog-footer" v-if="ruleForm.check_status == 0">
                <el-button type="primary" style="margin: 20px;" size="small"
                   @click="openDialogForm">审核</el-button>
             </span>
        </div>
    </el-card>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
        <el-form :model="batch_cash" label-width="80px">
            <el-form-item label="操作">
                <el-radio v-model="batch_cash.status" :label="1" border>同意</el-radio>
                <el-radio v-model="batch_cash.status" :label="2" border>拒绝</el-radio>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="batch_cash.content" maxlength="500"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" v-loading="dialogLoading" @click="save()">确 定</el-button>
        </span>
    </el-dialog>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                ruleForm: null,
                id:0,
                btnLoading: false,
                cardLoading: false,
                rules:[],
                dialogVisible: false,
                dialogTitle:"审核",
                batch_cash: {
                    status: null,
                    content: null,
                },
                dialogLoading:false,
            };
        },
        methods: {
            store(formName) {
                this.$refs[formName].validate((valid) => {
                    let self = this;
                    if (valid) {
                        self.btnLoading = true;
                        request({
                            params: {
                                r: 'members-card/default/edit'
                            },
                            method: 'post',
                            data: {
                                form: self.ruleForm,
                                id:self.id,
                            }
                        }).then(e => {
                            self.btnLoading = false;
                            if (e.data.code == 0) {
                                self.$message.success(e.data.msg);
                                navigateTo({
                                    r: 'members-card/default/index'
                                })
                            } else {
                                self.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            self.$message.error(e.data.msg);
                            self.btnLoading = false;
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            getDetail() {
                let self = this;
                self.cardLoading = true;
                request({
                    params: {
                        r: 'real-auth/user/business-detail',
                        id: this.id,
                    },
                    method: 'get',
                }).then(e => {
                    if (e.data.code == 0) {
                    	if(e.data.data.detail.id){
                    		self.ruleForm = e.data.data.detail;
                    		console.log(self.ruleForm);
                    	}
                    } else {
                        self.$message.error(e.data.msg);
                    }
                    self.cardLoading = false;
                }).catch(e => {
                    console.log(e);
                });
            },
            openDialogForm() {
                this.dialogVisible = true;
            },
            save(){
            	this.$confirm('是否确认审核？企业认证状态修改后无法撤回，请仔细审核。', '提示', {type: 'notice'}).then(() => {
            		this.send();
                })
            },
            send() {
                let self = this;
                let basic_params = {
                    r: 'real-auth/user/business-apply'
                };
                let params = {
                	id:this.id,
                	status:this.batch_cash.status,
                	remark:this.batch_cash.content,
                };
                this.dialogLoading = true;
                request({
                    params: basic_params,
                    method: 'post',
                    data: params
                }).then(e => {
                    if (e.data.code == 0) {
                        self.$message.success(e.data.msg);
                    } else {
                        self.$message.error(e.data.msg);
                    }
                    if (callback) callback(e.data);
                    this.dialogLoading = false;
                    this.dialogVisible = false;
                }).catch(e => {
                	this.dialogLoading = false;
                	this.dialogVisible = false;
                    console.log(e);
                });
            },
        },
        mounted: function() {
            if (getQuery('id')) {
                this.id = getQuery('id');
            }
            this.getDetail();
        }
    });
</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>