happyjob_dk/src/view/captcha/captcha.vue

<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 {getCaptchaCode} from '@/api/index'
    import {postAction} from '@/api/manage'
    import {getAppId} from '@/utils/util'

    export default {
        name: "captcha",
        data() {
            return {
                captcha: ['', '', '', '', '', ''],
                number: '',
                time_tips: '发送验证码',
                time: 60,
                TencentCaptcha: '',
                isAndroid: false,
                isiOS: false,
                can_jump: false,
            }
        },
        mounted() {
            const container = document.querySelector("body")
            container.style.background = 'transparent'
            container.addEventListener('DOMSubtreeModified', function () {
                const element = document.querySelector('#tcaptcha_transform')
                const tcaptcha_iframe = document.querySelector('#tcaptcha_iframe')
                const t_verify = document.querySelector('#t_verify')
                const mask = document.querySelector('.t-mask')
                if (tcaptcha_iframe) {
                    tcaptcha_iframe.style.background = 'transparent'
                }
                if (mask) {
                    mask.style.display = 'none'
                }
                if (t_verify) {
                    t_verify.style.border = 'transparent'
                    t_verify.style.background = 'transparent'
                }
                if (element) {
                    t_verify.style.display = 'none'
                    element.style.border = 'transparent'
                    element.style.background = 'transparent'
                }

            }, 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 (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
                    },
                }
            );
            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('发送成功');
            //                 }
            //                 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 lang="less" 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;
    }

    /deep/ #t_mask {
        background: transparent !important;
    }
</style>