腾讯验证码

src/router.js

@@ -182,13 +182,10 @@ router.beforeEach((to, from, next) => {
             body.style.height = '100%'
         }
         if (to.name === 'captcha') {
-            var _hmt = _hmt || [];
-            (function () {
-                var hm = document.createElement("script");
-                hm.src = "https://ssl.captcha.qq.com/TCaptcha.js";
-                var s = document.getElementsByTagName("script")[0];
-                s.parentNode.appendChild(hm);
-            })();
+            var hm = document.createElement("script");
+            hm.src = "https://ssl.captcha.qq.com/TCaptcha.js";
+            var s = document.getElementsByTagName("script")[0];
+            s.parentNode.appendChild(hm);
         }
         next()
     } else {

src/view/captcha/captcha.vue

@@ -37,6 +37,7 @@
     import {getCaptchaCode} from '@/api/index'
     import {postAction} from '@/api/manage'
     import {getAppId} from '@/utils/util'
+
     export default {
         name: "captcha",
         data() {
@@ -80,56 +81,69 @@
             }, false);
             this.isAndroid = /(Android)/i.test(navigator.userAgent)
             this.isiOS = /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)
-            const that = this;
+
             this.phone = location.href.split('?')[1].split('&')[0].split('=')[1];
             this.number = this.phone.substring(0, 3) + ' ' + this.phone.substring(3, 7) + ' ' + this.phone.substring(7, 11);
-            this.TencentCaptcha = new window.TencentCaptcha(
-                getAppId(),
-                function (res) {/* callback */
-                    if (res.ret === 0) {
-                        postAction(getCaptchaCode, {
-                            ticket: res.ticket,
-                            randstr: res.randstr,
-                            phone: that.phone
-                        }).then(() => {
+            if (window.TencentCaptcha) {
+                this.getTencentCaptcha(this.getCaptcha);
+            } else {
+                const int = setInterval(() => {
+                    if (window.TencentCaptcha) {
+                        clearInterval(int);
+                        this.getTencentCaptcha(this.getCaptcha);
+                    }
+                }, 50)
+            }
+        },
+        methods: {
+            getTencentCaptcha(callback) {
+                const that = this;
+                this.TencentCaptcha = new window.TencentCaptcha(
+                    getAppId(),
+                    function (res) {/* callback */
+                        if (res.ret === 0) {
+                            postAction(getCaptchaCode, {
+                                ticket: res.ticket,
+                                randstr: res.randstr,
+                                phone: that.phone
+                            }).then(() => {
+                                if (that.isiOS) {
+                                    window.webkit.messageHandlers.returnVerificationCode.postMessage(res.ret.toString());
+                                }
+                                if (that.isAndroid) {
+                                    window.hap.verificationCode(res.ret.toString());
+                                }
+
+                            }).catch(data => {
+                                that.$toast.fail({icon: 'close', message: data.errmsg})
+                                setTimeout(function () {
+                                    if (that.isiOS) {
+                                        window.webkit.messageHandlers.returnVerificationCode.postMessage('2');
+                                    }
+                                    if (that.isAndroid) {
+                                        window.hap.verificationCode('2');
+                                    }
+                                }, 1200)
+                            })
+                        } else {
                             if (that.isiOS) {
                                 window.webkit.messageHandlers.returnVerificationCode.postMessage(res.ret.toString());
                             }
                             if (that.isAndroid) {
                                 window.hap.verificationCode(res.ret.toString());
                             }
-
-                        }).catch(data => {
-                            that.$toast.fail({icon: 'close', message: data.errmsg})
-                            setTimeout(function () {
-                                if (that.isiOS) {
-                                    window.webkit.messageHandlers.returnVerificationCode.postMessage('2');
-                                }
-                                if (that.isAndroid) {
-                                    window.hap.verificationCode('2');
-                                }
-                            }, 1200)
-                        })
-                    } else {
-                        if (that.isiOS) {
-                            window.webkit.messageHandlers.returnVerificationCode.postMessage(res.ret.toString());
                         }
-                        if (that.isAndroid) {
-                            window.hap.verificationCode(res.ret.toString());
+                    },
+                    {
+                        enableDarkMode: true,
+                        sdkOpts: {
+                            width: 0,
+                            height: 0
                         }
                     }
-                },
-                {
-                    enableDarkMode: true,
-                    sdkOpts: {
-                        width: 0,
-                        height: 0
-                    },
-                }
-            );
-            this.getCaptcha();
-        },
-        methods: {
+                );
+                callback()
+            },
             // next(index) {
             //     const input = document.querySelectorAll('input');
             //     if (this.captcha[index]) {