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() {
            document.querySelector('iframe').onload = function () {
                document.querySelector('.t-mask').style.display = 'none'
            }

            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(process.env.NODE_ENV),
                function (res) {/* callback */
                    if (that.isiOS) {
                        window.webkit.messageHandlers.returnVerificationCode.postMessage(res.ret.toString());
                    }
                    if (that.isAndroid) {
                        window.hap.verificationCode(res.ret.toString());
                    }
                    if (res.ret === 0) {
                        postAction(getCaptchaCode, {
                            ticket: res.ticket,
                            randstr: res.randstr,
                            phone: that.phone
                        })
                    }
                },
                {
                    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>
    body {
        background: transparent;
    }

    .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>