<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>
1093
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
