腾讯验证码

public/index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
     <link rel="icon" href="<%= BASE_URL %>logo.png">
     <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
+    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
     <title></title>
     <script>
       window._CONFIG = {};

src/api/index.js

@@ -42,4 +42,6 @@ module.exports = {
     getIntentCompany: '/f/api/qdCheckIns/getIntentCompany',
     // 人才签到登记保存
     checkIns: '/f/api/qdCheckIns/checkIns',
+    // 获取验证码
+    getAuthCode: '/f/api/login/getAuthCode',
 };

src/router.js

@@ -132,6 +132,14 @@ const routes = [
         }
     },
     {
+        path: '/captcha/captcha',
+        name: 'captcha',
+        component: () => import('./view/captcha/captcha'),
+        meta: {
+            title: '获取验证码'
+        }
+    },
+    {
         path: '*',
         name: 'login',
         component: () => import('./view/login/index'),
@@ -158,7 +166,8 @@ const whiteList = [
     'next',
     'join',
     'xiapu',
-    'talentExchange'
+    'talentExchange',
+    'captcha'
 ]
 router.beforeEach((to, from, next) => {
     const title = to.meta && to.meta.title;

src/view/captcha/captcha.vue

@@ -0,0 +1,187 @@
+<template>
+    <div>
+        <img
+                src="https://happyjob.oss-cn-shanghai.aliyuncs.com/uploadfiles/mina/images/happyjob/login_xiaobai.png"
+                alt=""
+                class="image">
+        <div class="title">
+            <div class="tips">
+                请输入验证码
+            </div>
+            <div class="number">
+                验证码已发送至 {{number}}
+            </div>
+        </div>
+        <div class="captcha">
+            <div class="input">
+                <input
+                        v-for="(val,ind) in captcha"
+                        :key="ind"
+                        maxlength="1"
+                        type="text"
+                        :autofocus="!Boolean(ind)"
+                        placeholder=""
+                        :class="val&&'border'"
+                        v-model="captcha[ind]"
+                        @input="next(ind)"
+                >
+            </div>
+        </div>
+        <div class="time" @click="getCaptcha">
+            {{time_tips}}
+        </div>
+    </div>
+</template>
+
+<script>
+    import {getAuthCode} from '@/api/index'
+    import {postAction} from '@/api/manage'
+
+    export default {
+        name: "captcha",
+        data() {
+            return {
+                captcha: ['', '', '', '', '', ''],
+                number: '',
+                time_tips: '发送验证码',
+                time: 60,
+                TencentCaptcha: '',
+                isAndroid: false,
+                isiOS: false,
+                can_jump: false,
+            }
+        },
+        mounted() {
+            const that = this;
+            const u = navigator.userAgent;
+            this.isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
+            this.isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
+            this.phone = location.href.split('?')[1].split('=')[1];
+            this.number = this.phone.substring(0, 3) + ' ' + this.phone.substring(3, 7) + ' ' + this.phone.substring(7, 11);
+            this.TencentCaptcha = new window.TencentCaptcha(
+                '2078399419',
+                function (res) {/* callback */
+                    if (res.ret === 0) {
+                        this.can_jump = true
+                        that.countDown();
+                        postAction(getAuthCode, {ticket: res.ticket, phone: that.phone}).then(() => {
+                            this.$toast.success({message: '验证码发送成功'})
+                        }).catch((data) => {
+                            this.$toast.fail({icon: 'close', message: data.errmsg})
+                        })
+                    }
+                },
+                {
+                    enableDarkMode: true,
+                    sdkOpts: {
+                        width: 200,
+                        height: 200
+                    }
+                }
+            );
+            this.getCaptcha();
+        },
+        methods: {
+            next(index) {
+                const input = document.querySelectorAll('input');
+                if (this.captcha[index]) {
+                    if (this.captcha.length === index + 1) {
+                        if (this.can_jump) {
+                            if (this.isiOS) {
+                                window.webkit.messageHandlers.returnVerificationCode.postMessage(this.captcha.join(''));
+                            }
+                            if (this.isAndroid) {
+                                // window.webkit.messageHandlers.returnVerificationCode.postMessage(this.captcha.join(''));
+                            }
+                        }
+                    } else {
+                        input[index + 1].focus();
+                    }
+                } else {
+                    if (index > 0) {
+                        input[index - 1].focus();
+                    }
+                }
+            },
+            getCaptcha() {
+                this.can_jump = false;
+                this.TencentCaptcha.show();
+            },
+            countDown() {
+                if (this.time === 60) {
+                    this.time = --this.time;
+                    this.time_tips = `${this.time}s 后重新获取验证码`
+                    const setint = setInterval(() => {
+                        if (this.time > 0) {
+                            this.time = --this.time;
+                            this.time_tips = `${this.time}s 后重新获取验证码`
+                        } else {
+                            clearInterval(setint);
+                            this.time = 60;
+                            this.time_tips = `重新获取验证码`
+                        }
+                    }, 1000)
+                } else {
+                    this.$toast({message: '请勿重复点击'})
+                }
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .image {
+        height: 180px;
+        position: fixed;
+        right: 0;
+        top: 24px;
+    }
+
+    .title {
+        padding: 0 45px;
+    }
+
+    .tips {
+        margin-top: 113px;
+        font-size: 27px;
+        color: #000000;
+        font-family: PingFangSC-Semibold, PingFang SC;
+    }
+
+    .number {
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        margin-top: 17px;
+    }
+
+    .captcha {
+        margin-top: 38px;
+    }
+
+    .input {
+        padding: 0 45px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    input {
+        border: none;
+        font-size: 32px;
+        text-align: center;
+        padding-bottom: 10px;
+        width: 10%;
+        border-bottom: 1px solid #eee;
+    }
+
+    .border {
+        border-bottom: 1px solid #ccc;
+    }
+
+    .time {
+        font-size: 14px;
+        text-align: right;
+        padding: 0 45px;
+        margin-top: 15px;
+    }
+</style>