keysass_portal/src/page/personalpage/home/userUpgrade.vue

<template>
    <div class="examku">
        <main id="main">
            <section id="profile">
                <div class="container mt30" style="margin-top: 0px">
                    <div v-if="showAlert">
                        <el-tag color="#F7F7F7">您【实名认证】的申请已提交，平台审核后会站内消息通知您。</el-tag>
                        <el-tag color="#F2A51A" style="color: #ffffff; margin-left: 17px; border: none"
                            >实名认证信息</el-tag
                        >
                    </div>
                    <div id="con_a_3">
                        <!-- 个人认证 -->
                        <div class="cona3it" v-if="certifform.applyId || (!certifform.applyId && !companyForm.applyId)">
                            <h4 style="font-weight: bold; font-size: 16px; color: #19191a; margin-top: 20px">
                                个人用户实名认证
                            </h4>
                            <div class="testuser" style="margin-bottom: 20px">
                                <div style="font-weight: 500; font-size: 14px; color: #666666; margin: 20px 0 30px 0">
                                    <p>实名认证通过后可在众包服务下报名承接测试项目</p>
                                </div>
                                <el-button v-if="testerStatus == 0" size="small" @click="x2ctChild">提交申请</el-button>
                                <el-button
                                    style="background: #f6a414"
                                    v-if="testerStatus == 1"
                                    size="small"
                                    disabled
                                    @click="x2ctChild"
                                    >实名认证审核中</el-button
                                >
                                <el-button
                                    style="background: #1cc27e"
                                    v-if="testerStatus == 2"
                                    size="small"
                                    disabled
                                    @click="x2ctChild"
                                    >查看认证信息</el-button
                                >
                                <el-button
                                    style="background: #f6a414"
                                    v-if="testerStatus == 3"
                                    size="small"
                                    disabled
                                    @click="x2ctChild"
                                    >修改实名认证</el-button
                                >
                            </div>
                            <div
                                v-if="testerStatus == 3"
                                style="color: #808080; font-size: 14px; line-height: 15px; margin: 10px 0"
                            >
                                <span>注：</span>
                                <span style="color: #fa3534"
                                    >{{ testerdata.auditOpinion ? testerdata.auditOpinion : '无' }}，</span
                                >
                                <span>审核未能通过，请完善后再提交</span>
                            </div>
                        </div>
                        <!-- 企业认证 -->
                        <div
                            class="cona3it"
                            v-if="companyForm.applyId || (!certifform.applyId && !companyForm.applyId)"
                        >
                            <h4 style="font-weight: bold; font-size: 16px; color: #19191a; margin-top: 20px">
                                企业用户资质认证
                            </h4>
                            <div class="testuser" style="margin-bottom: 20px">
                                <div style="color: #808080; font-size: 14px; line-height: 15px; margin: 20px 0 30px 0">
                                    <p>企业资质审批通过后可以在众包服务下发布测试项目</p>
                                </div>
                                <el-button v-if="!companyForm.applyId" size="small" @click="openCompanyAdd"
                                    >提交申请</el-button
                                >
                                <el-button
                                    style="background: #f6a414"
                                    v-if="companyForm.companyStatus == 0"
                                    size="small"
                                    disabled
                                    >实名认证审核中</el-button
                                >
                                <el-button
                                    style="background: #1cc27e"
                                    v-if="companyForm.companyStatus == 1"
                                    size="small"
                                    @click="lookCompanyApplyInfo"
                                    >查看认证信息</el-button
                                >
                                <el-button
                                    style="background: #f6a414"
                                    v-if="companyForm.companyStatus == 2"
                                    size="small"
                                    @click="updateCompanyAdd"
                                    >修改实名认证</el-button
                                >
                            </div>
                            <div
                                v-if="companyForm.companyStatus == 2"
                                style="color: #808080; font-size: 14px; line-height: 15px; margin: 10px 0"
                            >
                                <span>注：</span>
                                <span style="color: #fa3534">{{
                                    testerdata.auditOpinion ? testerdata.auditOpinion : ''
                                }}</span>
                                <span>审核未能通过，请完善后再提交</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>
        <el-dialog
            v-if="certification"
            :title="title"
            :visible.sync="certification"
            width="600px"
            append-to-body
            :close-on-click-modal="false"
        >
            <el-form ref="certifform" :model="certifform" :rules="certifRules" label-width="150px">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="certifform.name" :disabled="testerStatus == 2" placeholder="请输入真实姓名" />
                </el-form-item>
                <el-form-item label="身份证号码" prop="idNumber">
                    <el-input
                        v-model="certifform.idNumber"
                        :disabled="testerStatus == 2"
                        placeholder="请输入身份证号码"
                    />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <div class="submitbtn">
                    <el-button type="primary" @click="certtSubmitForm" :disabled="testerStatus == 2">确 定</el-button>
                </div>
                <el-button @click="certCancel">取 消</el-button>
            </div>
        </el-dialog>
        <el-dialog
            v-if="certificationCom"
            title="企业用户资质认证"
            :visible.sync="certificationCom"
            width="600px"
            append-to-body
            :close-on-click-modal="false"
        >
            <el-form ref="companyForm" :model="companyForm" :rules="companyRules" class="companyForm">
                <el-form-item prop="name">
                    <el-input placeholder="请输入企业名称（须与营业执照一致）" v-model="companyForm.name">
                        <img
                            slot="prefix"
                            src="/assets/personal/comicon1.png"
                            style="width: 17px; height: 17px"
                            alt=""
                        />
                    </el-input>
                </el-form-item>
                <el-form-item prop="contactName">
                    <el-input placeholder="请输入您的姓名" v-model="companyForm.contactName">
                        <img
                            slot="prefix"
                            src="/assets/personal/comicon2.png"
                            style="width: 17px; height: 17px"
                            alt=""
                        />
                    </el-input>
                </el-form-item>
                <el-form-item prop="businessLicenseUrl">
                    <div class="imgitemcon">
                        <multi-upload
                            v-model="companyForm.businessLicenseUrl"
                            @setImgPath="setImgPath"
                            fileName="技能证书"
                            :limit="1"
                        />
                        <div class="rightimgcon">
                            <div class="imgtip">
                                1.请上传营业执照清晰彩色原件扫描件或数码照
                                <br />
                                2.支持jpg、jpeg、png格式照片，大小不超过10M
                            </div>
                            <div class="lookimgdefault" @click="companyDetailOpenDefault = true">点击查看图例</div>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
            <el-button
                style="
                    width: 564px;
                    height: 44px;
                    background: linear-gradient(90deg, #5ea6fd, #1a81f9);
                    border-radius: 22px;
                    color: #ffffff;
                "
                @click="submitCompany"
                >提交认证</el-button
            >
        </el-dialog>

        <!-- 查看企业认证详情 -->
        <el-dialog
            :title="companyForm.companyName + '认证详情'"
            :visible.sync="companyDetailOpen"
            width="800px"
            append-to-body
            :close-on-click-modal="false"
        >
            <div>认证人：{{ companyForm.contactName }}</div>
            <img :src="companyForm.businessLicenseUrl" style="width: 100%" alt="" />
        </el-dialog>
        <el-dialog
            title="营业执照图例"
            :visible.sync="companyDetailOpenDefault"
            width="600px"
            append-to-body
            :close-on-click-modal="false"
        >
            <img src="/assets/home/12.png" style="width: 100%" alt="" />
        </el-dialog>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { apple_type } from '@/api/system/user'
import {
    listTesterApply,
    getTesterApplyByUid,
    delTesterApply,
    addC2CT,
    updateTesterApply,
    exportTesterApply,
    certificationStatus,
    addTesterApply,
} from '@/api/tester/TesterApply'
import {
    listCompanyApply,
    getCompanyApplyByUid,
    delCompanyApply,
    addCompanyApply,
    updateCompanyApply,
    exportCompanyApply,
    gettesterId,
    addtesterApply,
    updatetesterApply,
    companyApply,
    companyApplyUpdate,
} from '@/api/tester/CompanyApply'
import { VueCropper } from 'vue-cropper'
import MultiUpload from '@/page/common/MultiUpload'
import NonimageUpload from '@/page/common/NonimageUpload'
import { getInfo } from '@/api/system/login'
export default {
    components: {
        MultiUpload,
        NonimageUpload,
        VueCropper,
    },
    props: {
        user: {
            type: Object,
        },
    },
    computed: {
        ...mapGetters(['userinform']),
    },
    data() {
        return {
            companyDetailOpenDefault: false,
            companyDetailOpen: false,
            companyForm: {},
            companyRules: {
                name: [{ required: true, message: '企业名称不能为空', trigger: 'blur' }],
                contactName: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
                businessLicenseUrl: [{ required: true, message: '营业执照不能为空', trigger: 'blur' }],
            },
            certificationCom: false,
            bArray: [
                [true, true],
                ['升级为认证公司用户', '升级为测试认证'],
            ],
            certification: false,
            showAlert: false,
            appleTypeStr: '',
            testerApplyB: {},
            companyApplyB: {},
            // p2ct表单参数
            userInfo: {},
            testerApply: {},
            companyApply: {},
            certifform: {
                applyId: '',
                userId: '',
                name: '',
                idNumber: '',
                city: '',
                certificateUrl: [],
                testSkills: '',
                workExperience: '',
            },
            form: {},
            // 弹出层标题
            title: '',
            // 是否显示regCompany弹出层
            regCompanyOpen: false,
            // 是否显示p2pt弹出层
            p2ptOpen: false,
            // 是否显示p2ct弹出层
            p2ctOpen: false,
            // 是否显示c2ct弹出层
            c2ctOpen: false,
            rules: {},
            // 个人测试者表单校验
            certifRules: {
                name: [
                    { required: true, message: '真实姓名不能为空', trigger: 'blur' },
                    { max: 20, message: '最多输入20个中文', trigger: 'blur' },
                    {
                        pattern: /^(?:[\u4e00-\u9fa5·]{2,16})$/,
                        message: '请输入中文',
                        trigger: 'blur',
                    },
                ],
                idNumber: [
                    { required: true, message: '身份证号码能为空', trigger: 'blur' },
                    {
                        pattern:
                            /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
                        message: '请输入正确的身份证号码',
                        trigger: 'blur',
                    },
                    { max: 18, message: '身份证长度为18', trigger: 'change' },
                    { min: 18, message: '身份证长度为18', trigger: 'change' },
                ],
            },
            materialServerAddr: '',
            allFileGetFlag: false,
            testerdata: null,
            testerStatus: 0,
            baseUrl: process.env.VUE_APP_BASE_TARGET,
        }
    },
    created() {
        this.certifform.userId = this.userinform.userId
        if (this.userinform) {
            this.getcertinfor()
        }
    },
    methods: {
        getcertinfor() {
            gettesterId(this.userinform.userId).then((res) => {
                // 如果有companyApplyId，说明已经提交过审核
                if (res.data.companyApplyId) {
                    this.companyForm = {
                        name: res.data.companyName,
                        companyDesc: res.data.companyDesc,
                        companyStatus: res.data.companyStatus,
                        applyId: res.data.companyApplyId,
                        businessLicenseUrl: [this.baseUrl + res.data.companyBusinessLicense],
                        companyName: res.data.companyName,
                        contactName: res.data.companyContactName,
                    }
                    this.$emit('setTip', {dec: res.data.companyDesc,applyId: res.data.companyApplyId})
                    if (res.data.companyStatus == 1 && userinform.companyStatus !=2) {
                        getInfo().then((res) => {
                            const user = res.user
                            this.$store.commit('SET_USERINFORM', user)
                        })
                    }
                }

                this.testerdata = res.data
                if (this.testerdata) {
                    let { applyId, name, idNumber, city, certificateUrl, testSkills, workExperience, userId } =
                        this.testerdata
                    // let setidNumber=
                    let imglist = []
                    if (certificateUrl) {
                        imglist.push(certificateUrl)
                    }
                    this.certifform = {
                        applyId,
                        name,
                        idNumber,
                        city,
                        certificateUrl: imglist,
                        testSkills,
                        workExperience,
                        userId,
                    }
                    if (this.testerdata) {
                        if (this.testerdata.status == 0) {
                            this.testerStatus = 1
                            this.istest = true
                        } else if (this.testerdata.status == 1) {
                            this.testerStatus = 2
                            this.istest = true
                        } else if (this.testerdata.status == 2) {
                            this.testerStatus = 3
                        } else {
                            this.testerStatus = 0
                        }
                    }
                }
            })
        },
        x2ctChild() {
            gettesterId(this.userinform.userId).then((res) => {
                this.testerdata = res.data
                if (this.testerdata) {
                    let { applyId, name, idNumber, city, certificateUrl, testSkills, workExperience, userId } =
                        this.testerdata
                    // let setidNumber=idNumber.slice(0,2)+'************'+idNumber.slice(14)
                    let imglist = []
                    if (certificateUrl) {
                        imglist.push(certificateUrl)
                    }
                    this.certifform = {
                        applyId,
                        name,
                        idNumber,
                        city,
                        certificateUrl: imglist,
                        testSkills,
                        workExperience,
                        userId,
                    }
                    this.certification = true
                    if (this.testerdata) {
                        if (this.testerdata.status == 0) {
                            this.testerStatus = 1
                            this.istest = true
                        } else if (this.testerdata.status == 1) {
                            this.testerStatus = 2
                            this.istest = true
                        } else if (this.testerdata.status == 2) {
                            this.testerStatus = 3
                        } else {
                            this.testerStatus = 0
                        }
                    }
                } else {
                    this.certification = true
                }
            })
        },
        // 取消按钮
        certCancel() {
            this.certification = false

            this.reset()
        },
        setImgPath(value) {
            if (value) {
                this.companyForm.businessLicenseUrl = value
                // this.addeditfaform.equipModel.push(value);
            }
        },
        // 个人用户实名认证
        certtSubmitForm() {
            this.$refs['certifform'].validate((valid) => {
                if (valid) {
                    let data = {
                        applyId: this.certifform.applyId,
                        userId: this.certifform.userId,
                        name: this.certifform.name,
                        idNumber: this.certifform.idNumber,
                    }
                    // return;
                    console.log(data)
                    if (this.certifform.applyId) {
                        updatetesterApply(data)
                            .then((res) => {
                                console.log('修改', res)

                                if (res.code == 200) {
                                    this.$message.success('实名认证成功')
                                    this.getcertinfor()
                                    this.certification = false
                                } else {
                                }
                            })
                            .catch((error) => {
                                this.getcertinfor()
                            })
                    } else {
                        addtesterApply(data)
                            .then((res) => {
                                console.log('添加', res)
                                if (res.code == 200) {
                                    this.$message.success('实名认证成功')
                                    this.getcertinfor()
                                    this.certification = false
                                } else {
                                }
                            })
                            .catch((error) => {
                                this.getcertinfor()
                            })
                    }
                }
            })
        },
        // 表单重置
        reset() {
            this.form = {}
            this.resetForm('form')
        },
        // 打开公司认证审核
        openCompanyAdd() {
            this.certificationCom = true
        },
        // 公司提交认证
        submitCompany() {
            this.$refs['companyForm'].validate((valid) => {
                if (valid) {
                    if (this.companyForm.applyId) {
                        // 修改
                        let newUrl
                        if (typeof this.companyForm.businessLicenseUrl == 'string') {
                            newUrl = [this.companyForm.businessLicenseUrl]
                        } else {
                            // 没有修改图片
                            let url = this.companyForm.businessLicenseUrl[0]
                            let index = url.indexOf('/profile')
                            newUrl = [url.substring(index)]
                        }
                        const data = {
                            applyId: this.companyForm.applyId,
                            name: this.companyForm.name,
                            contactName: this.companyForm.contactName,
                            businessLicenseUrl: newUrl,
                        }
                        companyApplyUpdate(data).then((res) => {
                            if (res.code == 200) {
                                this.closeCompany()
                                this.getcertinfor()
                                this.$message.success('提交成功，请等待审核结果')
                            }
                        })
                    } else {
                        // 新增
                        const data = {
                            name: this.companyForm.name,
                            contactName: this.companyForm.contactName,
                            businessLicenseUrl: [this.companyForm.businessLicenseUrl],
                        }
                        companyApply(data).then((res) => {
                            if (res.code == 200) {
                                this.closeCompany()
                                this.getcertinfor()
                                this.$message.success('提交成功，请等待审核结果')
                            }
                        })
                    }
                }
            })
        },
        // 关闭提交弹层
        closeCompany() {
            this.certificationCom = false
            this.companyForm = {}
        },
        // 查看公司认证详情
        lookCompanyApplyInfo() {
            this.companyDetailOpen = true
        },
        // 修改公司认证
        updateCompanyAdd() {
            this.certificationCom = true
        },
    },
}
</script>
<style scoped >
.imgitemcon {
    display: flex;
    align-items: center;
}
.imgtip {
    font-weight: 500;
    font-size: 14px;
    color: #666666;
    line-height: 32px;
}
.rightimgcon {
    margin-left: 20px;
}
.lookimgdefault {
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    color: #0054a7;
    cursor: pointer;
}
.companyForm >>> .el-input__prefix {
    line-height: 45px;
}
.user-userUpgrade-span {
    text-align: center;
}
.testuser {
    /* display: flex;
    align-items: center;
    justify-content: space-between; */
}
.testuser >>> .el-button {
    background: #0054a7;
    color: #ffffff;
    border: none;
}
.dialog-footer {
    display: flex;
    text-align: right;
    margin-left: 200px;
}
.submitbtn >>> .el-button {
    background: #0054a7;
    color: #ffffff;
    margin-right: 30px;
    border: none;
}
.examku >>> .el-dialog__title {
    font-weight: bold;
    color: #0969bd;
}
#con_a_3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cona3it {
    width: 48%;
    height: 200px;
    background: #ffffff;
    box-shadow: 0px 4px 9px 1px rgba(14, 16, 18, 0.05);
    border-radius: 4px;
    border: 1px solid #ebedf0;
    padding: 0 40px;
    box-sizing: border-box;
}
</style>