proginn-frontend/pages/frontend/real_name_cert/index.vue

<template>
<div :class="mobile ? 'mobileMain' : ''" :style="{
      marginTop: mainMarginTop,
      marginBottom: mobile ? '0px' : '30px !important'
    }">
    <div class="name-cert-container" v-if="!mobile && init">
        <!-- 待实名 -->
        <div class="name-cert-main" v-if="state == 'normal'">
            <div class="name-cert-title-area">
                <img class="name-cert-icon" :src="icon" />
                <h6 class="name-cert-title">实名认证</h6>
                <p class="name-cert-tips">请如实填写信息，客栈承诺保障用户的信息安</p>
            </div>
            <el-form ref="modalForm" :model="modalFormData" :rules="rules" size="medium" label-width="100px">
                <div class="name-cert-label">姓名</div>
                <el-form-item label-width="0" prop="cert_name">
                    <el-input v-model="modalFormData.cert_name" placeholder="请输入真实姓名" clearable :style="{ width: '100%' }">
                    </el-input>
                </el-form-item>
                <div class="name-cert-label">证件类型</div>
                <el-form-item label-width="0" prop="cert_type">
                    <el-select v-model="modalFormData.cert_type" placeholder="请选择证件类型" clearable :style="{ width: '100%' }">
                        <el-option v-for="(item, index) in cert_typeOptions" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
                    </el-select>
                </el-form-item>
                <div class="name-cert-label">证件号</div>
                <el-form-item label-width="0" prop="cert_no">
                    <el-input v-model="modalFormData.cert_no" placeholder="请输入证件号" clearable :style="{ width: '100%' }">
                    </el-input>
                </el-form-item>
                <el-form-item size="large">
                    <el-button type="primary" class='cert-btn' size="medium" @click="submitForm">支付宝实名认证</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 实名成功 -->
        <div class="name-cert-main" v-if="state == 'success'">
            <div class="name-cert-title-area">
                <img class="name-cert-icon" :src="iconSuccess" />
                <h6 class="name-cert-title">实名认证成功</h6>
                <p class="name-cert-tips">成为签约开发者，开启自由工作吧</p>
                <div class="name-cert-success-btn">
                    <el-button type="primary" class='cert-btn' size="medium">去签约</el-button>
                </div>
            </div>

        </div>

        <!-- 实名失败 -->
        <div class="name-cert-main" v-if="state == 'fail'">
            <div class="name-cert-title-area">
                <img class="name-cert-icon" :src="iconFail" />
                <h6 class="name-cert-title">实名认证失败</h6>
                <div class="name-cert-fail-btn">
                    <el-button type="primary" class='cert-btn' size="medium" @click="reset">重新认证</el-button>
                </div>
                <p class="name-cert-fail-tips">无法进行支付宝认证？<a href="">人工认证</a></p>
            </div>

        </div>
    </div>

    <el-dialog title="温馨提示" :visible.sync="centerDialogVisible" width="30%" center>
        <p class="qrcode-tips">请打开支付宝扫码以下二维码</p>
        <div class="qrcode-img">
            <img :src="qrcodeBase64" />
        </div>
    </el-dialog>

</div>
</template>

<script>
import {
    mapState
} from "vuex";
import qs from "qs";
import icon from "@/assets/img/account/certicon@3x.png"
import iconSuccess from "@/assets/img/account/cert_success_icon@3x.png"
import iconFail from "@/assets/img/account/cert_fail_icon@3x.png"
import QRCode from "qrcode"

export default {
    name: "SeoLearnList",
    data() {
        return {
            baseUrl: "",
            mobile: false,
            isWeixinApp: true,
            icon,
            iconSuccess,
            iconFail,

            centerDialogVisible: false,
            url: "",
            certifyId: "",

            qrcodeBase64: '',
            timer: null,
            // normal 待实名   success 认证成功   fail 认证失败
            state: "normal",
            init: false,

            modalFormData: {
                cert_name: "",
                cert_type: 1,
                cert_no: ""
            },
            rules: {
                cert_name: [{
                    required: true,
                    message: "请输入真实姓名",
                    trigger: "blur"
                }],
                cert_type: [{
                    required: true,
                    message: "请选择证件类型",
                    trigger: "change"
                }],
                cert_no: [{
                    required: true,
                    message: "请输入证件号",
                    trigger: "blur"
                }]
            },
            cert_typeOptions: [{
                    label: "身份证",
                    value: 1
                },
                {
                    label: "港澳通行证",
                    value: 2
                },
                {
                    label: "台湾通行证",
                    value: 3
                },
                {
                    label: "港澳居住证",
                    value: 4
                },
                {
                    label: "台湾身份证",
                    value: 5
                }
            ]
        };
    },
    head() {
        const {
            title = "",
                keyword = "",
                description = "",
                h1 = "",
                canonical = "",
                metaLocation
        } = this.head || {};
        let obj = {
            title: title,
            meta: [{
                    name: "keywords",
                    content: keyword
                },
                {
                    name: "description",
                    content: description
                },
                {
                    name: "h1",
                    content: h1
                }
            ],
            link: [{
                rel: "canonical",
                href: canonical
            }]
        };
        if (metaLocation) {
            obj.meta.push({
                name: "location",
                content: metaLocation
            });
        }
        return obj;
    },
    computed: {
        ...mapState(["deviceType"]),
        showWxHeader() {
            return (
                !this.deviceType.app &&
                !this.isWeixinApp &&
                (this.deviceType.android || this.deviceType.ios)
            );
        },
        mainMarginTop() {
            if (this.mobile && this.showWxHeader) {
                return "64px !important";
            } else if (this.mobile) {
                return "0px !important";
            } else {
                return "20px !important";
            }
        },
        userInfo() {
            return this.$store.state.userinfo;
        }
    },

    mounted() {
        this.home_page_type = this.userInfo.home_page_type;
        this.baseUrl = this.$store.state.domainConfig.siteUrl;
        this.isWeixinApp = navigator.userAgent.indexOf("miniProgram") > -1;

        this.checkNameIsCerted()
    },
    methods: {
        submitForm() {
            this.$refs["modalForm"].validate(valid => {
                if (!valid) return;
                this.submit()
                // TODO 提交表单
            });
        },
        resetForm() {
            this.$refs["modalForm"].resetFields();
        },
        async submit() {
            const {
                cert_name,
                cert_no,
                cert_type
            } = this.modalFormData
            // 测试用
            // let res = {
            //     data: {
            //         url: "http://www.baidu.com",
            //         certifyId: "123123"
            //     }
            // }
            let res = await this.$axios.$post("/uapi/zfb/certifyIdApp", {
                cert_name,
                cert_no,
                cert_type,
                from_type: 3
            });

            if (Number(res.status) !== 1) {
                this.$message.error(res.hqinfo);
                return
            }

            const {
                url,
                certifyId
            } = res.data

            this.url = url
            this.certifyId = certifyId
            this.centerDialogVisible = true;
            this.createQrCode()
            this.startTimer()

        },
        createQrCode() {
            this.$nextTick(() => {
                const text = this.url
                let that = this;
                QRCode.toDataURL(text, {
                    errorCorrectionLevel: 'H'
                }, function (err, url) {
                    that.qrcodeBase64 = url
                })
            })
        },
        startTimer() {
            // 启动定时器查询
            if (this.timer) {
                clearInterval(this.timer)
                this.timer = null
            }

            this.timer = setInterval(async () => {
                let res = await this.$axios.$post("/uapi/zfb/return", {

                });
                if (Number(res.status) !== 1) {
                    this.$message.error(res.hqinfo);
                    return
                }
                let {
                    type
                } = res.data.type
                if (type == 1 || type == 4) {
                    if (type == 1) {
                        // 显示成功态
                        this.state = 'success'
                    } else if (type == 4) {
                        // 显示失败态
                        this.state = 'fail'
                    }

                    // 关闭弹层
                    this.centerDialogVisible = false;
                    clearInterval(this.timer);
                    this.timer = null;
                }
            },5000)
        },
        async checkNameIsCerted() {
            let res = await this.$axios.$post("/uapi/zfb/return", {

            });
            if (Number(res.status) !== 1) {
                this.$message.error(res.hqinfo);
                return
            }
            const {
                type
            } = res.data.type;
            //type == 4
            if (type == 1) {
                this.state = 'success'
            }
            this.init = true;
        },
        reset(){
            this.modalFormData = {
                cert_name: "",
                cert_type: 1,
                cert_no: ""
            }
            this.state = "normal";
        }
    }
};
</script>

<style lang="scss">
body {
    background-color: #fff;
}

.main {
    position: relative;
}

.name-cert-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.name-cert-main {
    width: 328px;
}

.name-cert-label {
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #0b121a;
    line-height: 16px;
    margin-bottom: 8px;
}

.name-cert-title-area {
    text-align: center;
    margin-bottom: 40px;
}

.name-cert-icon {
    width: 70px;
    height: 70px;
}

.name-cert-title {
    margin-top: 4px;
    margin-bottom: 8px;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #0B121A;
    line-height: 20px;
    text-align: center;
}

.name-cert-tips {
    text-align: center;
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #828C99;
    line-height: 16px
}

.qrcode-tips {
    text-align: center;
}

.qrcode-img {
    text-align: center;

    img {
        width: 80%
    }
}

.name-cert-success-btn {
    margin-top: 80px;
}

.name-cert-fail-btn {
    margin-top: 104px;
}

.name-cert-fail-tips {
    margin-top: 30px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 16px;
}

.cert-btn {
    width: 188px;
}
</style>