<template>
<view>
<view class="Box">
<view class="Get_the_prize">
<view class="Award_name">輸入驗證碼</view>
<view class="Award_input"></view>
</view>
<!-- 6位驗證碼第二版開始 -->
<view class="verification_frame">
<!-- 六個顯示框 -->
<view class="top_three">
<view :class="{ inb: inputVerifications[0] >= 0 ? true : false }" class="input">
<text>{{ inputVerifications[0] }}</text>
<view v-if="!inputVerifications[0]" class="fours"></view>
</view>
<view :class="{ inb: inputVerifications[1] >= 0 ? true : false }" class="input">
<text>{{ inputVerifications[1] }}</text>
<view v-if="inputVerifications[0] && !inputVerifications[1]" class="fours"></view>
</view>
<view :class="{ inb: inputVerifications[2] >= 0 ? true : false }" class="input">
<text>{{ inputVerifications[2] }}</text>
<view v-if="inputVerifications[1] && !inputVerifications[2]" class="fours"></view>
</view>
<view :class="{ inb: inputVerifications[3] >= 0 ? true : false }" class="input">
<text>{{ inputVerifications[3] }}</text>
<view v-if="inputVerifications[2] && !inputVerifications[3]" class="fours"></view>
</view>
<view :class="{ inb: inputVerifications[4] >= 0 ? true : false }" class="input">
<text>{{ inputVerifications[4] }}</text>
<view v-if="inputVerifications[3] && !inputVerifications[4]" class="fours"></view>
</view>
<view :class="{ inb: inputVerifications[5] >= 0 ? true : false }" class="input">
<text>{{ inputVerifications[5] }}</text>
<view v-if="inputVerifications[4] && !inputVerifications[5]" class="fours"></view>
</view>
</view>
<!-- 隱藏的input -->
<view class="top_four">
<input type="number" class="input_show" maxlength="6" v-model="inputVerifications" @input="inputVerification" :focus="true" style="color:transparent; " />
</view>
</view>
<!-- 6位驗證碼第二版結束 -->
<view class="getVerification">
<!-- 輸入驗證碼正確時提示 -->
<view class="Tips_box">
<view class="Verification_tips" v-if="againState">驗證碼已發送，請注意查收</view>
<view class="error_tips" v-else>驗證碼不正確</view>
<view class="Verification_tips">
<view class="Resend_box" v-if="resendStatus" style="font-weight: 600; color: #333333;" @click="ResendGetData">重新發送</view>
<view class="Resend_box" v-else>
重新發送
<span>{{ time }}</span>
s
</view>
</view>
</view>
</view>
</view>
</view>
</template>javaScript 代碼如下：
<script>
export default {
data() {
return {
isShow: true,
againState: true,
resendStatus: true, // 切換重新發送短信和倒計時的重新發送
verificationCode: '', // 獲取到的驗證碼 路由傳遞過來的
telValue: '', // 手機號碼
// 驗證碼開始
pasteResult: [1, 2, 3, 4, 5, 6], // 生成驗證碼盒子的個數
input: [], // 用戶輸入的值被分割成的陣列
inputVerifications: '', // 輸入的值
// 驗證碼結束
// 發送短信的秒數
time: 60, // 重新發送短信等待時間
realTime: null, //定時器,
ropertyConsultantId: '' // 置業顧問id
};
},
components: {},
onLoad(option) {
this.verificationCode = option.verificationCode;
this.telValue = option.valuebox;
},
onShow() {
this.forTheFirstTime();
},
mounted() {
// this.nextStep();
},
methods: {
// 開始
// 解決一個輸入框輸入多個字符
inputEvent() {
var index = e.target.dataset.index * 1;
var el = e.target;
this.$set(this.input, index, el.value.slice(0, 1));
console.log(this.pasteResult, '輸入的驗證碼');
},
// 隱藏輸入框的互動邏輯
inputVerification(e) {
let inputValue = e.target.value;
this.inputVerifications = inputValue;
this.input = inputValue.split('');
if (this.inputVerifications.length == 6) {
// this.$apiPost(`/api/estate_show/property_consultant/verification?tel=${this.telValue}&rand=${this.input.__ob__.value.join('')}`)
this.$apiPost(`/api/estate_show/property_consultant/verification?tel=${this.telValue}&rand=${this.inputVerifications}`)
.then(data => {
console.log(data, '用輸入的值去驗證 手機驗證');
if (data.identity == 'DYNATOWN') {
this.ropertyConsultantId = data.consultantId;
uni.showToast({
title: '置業顧問認證成功',
duration: 2000,
icon: 'none'
});
// 跳轉
uni.navigateTo({
url: `/pages/propertyConsultant/verificationCode?ropertyConsultantId=${this.ropertyConsultantId}`
});
}
})
.catch(err => {
console.log(err.status, '驗證失敗請重新輸入');
if (err.status == 'error') {
uni.showToast({
title: '驗證失敗，請重新獲輸入',
duration: 2000,
icon: 'none'
});
this.againState = false;
// this.inputVerifications = ''; // 驗證失敗后清空
// this.input = []; // 驗證失敗后清空
}
});
}
},
// 重新獲取驗證碼
ResendGetData() {
this.resendStatus = false;
this.againStat = true;
console.log('開啟定時');
console.log(this.telValue, '傳遞過來的手機號');
this.$apiPost(`/api/estate_show/property_consultant/authentication?tel=${this.telValue}`).then(data => {
console.log(data, '已發送手機驗證');
if (data) {
this.verificationCode = data; // 這里只是覆寫驗證碼列印臺測驗
} else {
return;
}
});
let that = this;
that.realTime = setInterval(() => {
// console.log(this.time--,'開啟定時')
if (this.time-- <= 0) {
console.log(this.time--, '清除定時');
that.clearIntervalData();
that.resendStatus = true;
this.againState = true;
that.time = 60; // 重新重置為60秒
}
}, 1000);
},
// 清除定時器
clearIntervalData() {
// clearInterva(this.setTime)
clearInterval(this.realTime); // 清除定時器
console.log('關閉定時');
},
// 第一次進來就倒計時
forTheFirstTime() {
this.resendStatus = false;
let that = this;
that.realTime = setInterval(() => {
// console.log(this.time--,'開啟定時')
if (this.time-- <= 0) {
console.log(this.time--, '清除定時');
that.clearIntervalData();
that.resendStatus = true;
this.againState = true;
that.time = 60; // 重新重置為60秒
}
}, 1000);
}
}
};
</script>css代碼如下需要用scss編譯 如下
<style lang="scss" scoped>
.Box {
background-color: #fff;
width: 100vw;
height: 100vh;
.Get_the_prize {
display: flex;
justify-content: space-between;
padding: 0rpx 30rpx;
.Award_name {
width: 50%;
height: 80rpx;
line-height: 80rpx;
font-size: 28rpx;
font-weight: 500;
color: #333333;
}
.Award_input {
width: 50%;
height: 80rpx;
line-height: 80rpx;
display: flex;
// line-height: 112rpx;
align-items: center;
}
}
// 驗證碼開始
// 第二版驗證碼
/* 六個顯示框容器 */
.verification_frame {
padding: 0 30rpx;
.top_three {
width: 80%;
height: 120rpx;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
/* 六個框顯示框 */
.input {
width: 14%;
height: 100rpx;
border-bottom: 2rpx solid #b8b8b8;
margin-right: 12rpx;
text-align: center;
line-height: 100rpx;
font-size: 50rpx;
> text {
font-size: 44rpx;
color: #333333;
}
}
/* 模擬下邊框線的焦點 */
.inb {
border-bottom: 2rpx solid #026bac;
}
/* 閃爍的假焦點豎線 */
.fours {
width: 5rpx;
height: 40rpx;
margin: auto;
background-color: #000000;
margin-top: 35rpx;
animation: show 0.8s linear infinite;
/* 模擬焦點影片 更改animation以更改影片樣式*/
@keyframes show {
from {
background-color: #000000;
}
to {
background-color: #ffffff;
}
}
}
}
/* 隱藏的inpit容器 */
.top_four {
width: 100%;
height: 100rpx;
margin: auto;
margin-top: -100rpx;
background-color: #fff;
// 隱藏的輸入框
.input_show {
position: fixed;
width: 105%;
height: 100rpx;
left: -110rpx;
top: 86rpx;
// border: 2rpx solid #aaaa7f;
opacity: 0;
text-align: left;
color: rgba(255, 255, 255, 0);
}
}
}
// 第二版結束
// 驗證碼結束
.getVerification {
margin-top: 40rpx;
padding: 0 30rpx;
.Tips_box {
display: flex;
justify-content: space-between;
height: 34rpx;
font-size: 24rpx;
font-weight: 400;
color: #999999;
line-height: 34rpx;
text-align: center;
margin-top: 20rpx;
.Verification_tips {
width: 50%;
color: #999999;
.Resend_box {
text-align: right;
color: #999999;
}
.Resend_view {
text-align: right;
color: #333333;
font-weight: 600;
}
}
// 驗證碼錯誤時
.error_tips {
color: #de3f59;
}
}
}
}
</style>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/289879.html
標籤：其他
上一篇：springboot + websocket + html(獲取centos服務器當前運行jar包的實時日志)
下一篇：基于jq的倒計時案例