|
|
@@ -0,0 +1,252 @@
|
|
|
+<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 {getAction} from '@/api/manage'
|
|
|
+ import {getAppIdLG} from '@/utils/util'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: "captchaLg",
|
|
|
+ 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) {
|
|
|
+ if (t_verify) {
|
|
|
+ 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)
|
|
|
+
|
|
|
+ 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);
|
|
|
+ if (window.TencentCaptcha) {
|
|
|
+ this.getTencentCaptcha();
|
|
|
+ } else {
|
|
|
+ const int = setInterval(() => {
|
|
|
+ if (window.TencentCaptcha) {
|
|
|
+ clearInterval(int);
|
|
|
+ this.getTencentCaptcha();
|
|
|
+ }
|
|
|
+ }, 50)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getTencentCaptcha() {
|
|
|
+ const that = this;
|
|
|
+ this.TencentCaptcha = new window.TencentCaptcha(
|
|
|
+ getAppIdLG(),
|
|
|
+ function (res) {/* callback */
|
|
|
+ if (res.ret === 0) {
|
|
|
+ getAction(getAuthCode, {
|
|
|
+ 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.TencentCaptcha.show();
|
|
|
+ },
|
|
|
+ // 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.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>
|
wangxin