添加实名认证

pages/frontend/real_name_cert/index.vue

@@ -0,0 +1,433 @@
+<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>

plugins/seoRouter.js

@@ -169,13 +169,18 @@ const extendRoutes = (routes, resolve) => {
     ],
 
 
-    // 切换身份
+    // 身份
     ...[
       {
         name: 'AccountChange',
         path: '/frontend/accountchange',
         component: resolve(__dirname, '../pages/frontend/account/change.vue')
-      }
+      },
+      {
+        name: 'RealNameCert',
+        path: '/frontend/name_cert',
+        component: resolve(__dirname, '../pages/frontend/real_name_cert/index.vue')
+      },
     ],
 
     // 发布需求