|
|
@@ -1,252 +0,0 @@
|
|
|
-<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