<template>
|
<div>
|
<order-nav>
|
<template #left>
|
<img class="w-60 h-60" src="~@/assets/image/c2c/Group2324.png" alt="">
|
</template>
|
</order-nav>
|
<div class="mt-26 px-34 font-43 font-700" style="color:#333333">{{ $t('安全验证') }}</div>
|
<div class="flex mt-60 font-600 font-32 text-center" style="color: #B8BCC5">
|
<div class="flex-1 py-40" :class="{ 'active': activeIndex === 1 }" @click="activeIndex = 1">{{ $t('NAME/Google', {
|
'TITLE': TITLE
|
}) }}
|
</div>
|
<div class="flex-1 py-40" :class="{ 'active': activeIndex === 2 }" @click="activeIndex = 2">{{ $t('短信验证') }}
|
</div>
|
</div>
|
<van-divider />
|
<div class="px-34 mt-72">
|
<div v-show="activeIndex === 1">
|
<div class="text-grey">{{ $t('输入NAME/Google验证码', { 'TITLE': TITLE }) }}</div>
|
<div class="relative w-full mt-20 pb-46">
|
<bus-input class="w-full h-96" :placeholder="$t('NAME/谷歌验证码', { 'TITLE': TITLE })" v-model="googleCode"
|
btn-text="粘贴" :maxlength="6" />
|
</div>
|
</div>
|
<div v-show="activeIndex === 2">
|
<div class="text-grey">{{ $t('输入短信验证码') }}</div>
|
<div class="relative w-full mt-20">
|
<bus-input class="w-full h-96" :placeholder="$t('短信验证码')" v-model="googleCode" :btn-text="codeText"
|
:maxlength="6" @right-click="getMsgCode" />
|
</div>
|
<div v-show="showMsg" class="mt-18 font-24 text-grey">{{ $t('验证码已发送至您的手机183****900！') }}</div>
|
</div>
|
</div>
|
<div class="px-34 mt-46">
|
<otc-button :disabled="googleCode.length >= 6" :text="$t('提交')" />
|
</div>
|
<div class="mt-38 font-28 text-blue text-center">{{ $t('安全验证不可用？') }}</div>
|
</div>
|
</template>
|
|
<script>
|
import { Divider } from 'vant';
|
import OrderNav from "@/components/order-nav/OrderNav";
|
import BusInput from "@/page/verification-code/components/BusInput";
|
import OtcButton from "@/components/otc-button/OtcButton";
|
|
export default {
|
name: "VerificationCode",
|
data() {
|
return {
|
timer: null,
|
getCoding: false, // 获取验证码中
|
codeText: this.$t('获取验证码'),
|
showMsg: false, // 提示验证码已发送
|
second: 60,
|
activeIndex: 1,
|
googleCode: '',
|
}
|
},
|
methods: {
|
// 获取验证码
|
getMsgCode() {
|
if (!this.getCoding) {
|
//console.log('发送验证码');
|
this.getCoding = true;
|
setTimeout(() => {
|
this.showMsg = true;
|
}, 1000)
|
|
this.timer = setInterval(() => {
|
if (this.second <= 1) {
|
clearInterval(this.timer)
|
this.getCoding = false;
|
this.second = 60;
|
this.codeText = this.$t('获取验证码')
|
this.showMsg = false;
|
return;
|
}
|
this.second--;
|
|
this.codeText = this.$t('重新获取') + `（${this.second}s）`;
|
}, 1000)
|
}
|
}
|
},
|
components: {
|
[Divider.name]: Divider,
|
OrderNav,
|
BusInput,
|
OtcButton,
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep {
|
.van-divider {
|
margin: 0;
|
}
|
}
|
|
.active {
|
position: relative;
|
color: #000;
|
|
&:after {
|
content: "";
|
position: absolute;
|
left: 50%;
|
bottom: 0;
|
transform: translateX(-50%);
|
width: 96px;
|
height: 6px;
|
border-radius: 20px;
|
background: #1D91FF;
|
}
|
}
|
</style>
|
