160 lines
3.2 KiB
Vue
160 lines
3.2 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<view class="" style="height: 100rpx;"></view>
|
||
|
|
<view class="titleText">
|
||
|
|
输入验证码
|
||
|
|
</view>
|
||
|
|
<view class="titlelabel">
|
||
|
|
4位验证码已发送至 <text>{{phone}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="codeBody">
|
||
|
|
<valid-code ref="validCode" @finish="getInpCode"></valid-code>
|
||
|
|
</view>
|
||
|
|
<view v-if="action === 'can'" class="code_time" @click="getCode">
|
||
|
|
重新发送
|
||
|
|
</view>
|
||
|
|
<view v-else-if="action === 'wait'" class="code_time nocheck">
|
||
|
|
重新发送({{codeint}})
|
||
|
|
</view>
|
||
|
|
<view v-else-if="action === 'sending'" class="code_time">
|
||
|
|
发送中...
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import validCode from '@/components/p-valid-code/p-valid-code.vue'
|
||
|
|
import {
|
||
|
|
mapGetters
|
||
|
|
} from 'vuex'
|
||
|
|
const resendTime = 120
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
validCode
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
...mapGetters(['sendTimes']),
|
||
|
|
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
phone: '',
|
||
|
|
action: 'wait',
|
||
|
|
codeint: resendTime,
|
||
|
|
defCount:5,
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad({
|
||
|
|
phone,count
|
||
|
|
}) {
|
||
|
|
this.phone = phone;
|
||
|
|
this.count=count;
|
||
|
|
this.setTimer();
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
let diffCount=this.defCount-this.count
|
||
|
|
if(this.count>=2){
|
||
|
|
uni.showToast({
|
||
|
|
title:`今日验证码已获取${this.count}次，还有${diffCount}次获取机会`,
|
||
|
|
icon:'none',
|
||
|
|
duration:3000
|
||
|
|
})
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
this.$refs.validCode.clear()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getInpCode: function(e) {
|
||
|
|
uni.$emit('setSMS', e)
|
||
|
|
},
|
||
|
|
setTimer() {
|
||
|
|
var sendCode = setInterval(() => {
|
||
|
|
this.codeint -= 1;
|
||
|
|
if (this.codeint <= 0) {
|
||
|
|
this.action = 'can'
|
||
|
|
this.codeint = resendTime;
|
||
|
|
clearInterval(sendCode);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
}, 1000)
|
||
|
|
},
|
||
|
|
getCode: function() {
|
||
|
|
if (this.action !== 'can') {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.action = 'sending';
|
||
|
|
let nextCount=this.sendTimes*1+1;
|
||
|
|
let realCount=this.defCount-nextCount
|
||
|
|
if(nextCount>1 && nextCount<=this.defCount){
|
||
|
|
uni.showToast({
|
||
|
|
title:`今日验证码已获取${nextCount}次，还有${realCount}次获取机会`,
|
||
|
|
icon:'none',
|
||
|
|
duration:3000
|
||
|
|
})
|
||
|
|
this.$store.dispatch('UpdateUserSendTimes',nextCount);
|
||
|
|
uni.$emit('accountsendValidate', () => {
|
||
|
|
this.action = 'wait';
|
||
|
|
this.setTimer()
|
||
|
|
})
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
uni.showToast({
|
||
|
|
title:`今日验证码已获取${this.defCount}次，请明日再来`,
|
||
|
|
icon:'none',
|
||
|
|
duration:3000
|
||
|
|
})
|
||
|
|
this.action='can';
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.code_time {
|
||
|
|
font-family: PingFangSC-Regular;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #1B66FF;
|
||
|
|
margin: 0 auto;
|
||
|
|
width: 80%;
|
||
|
|
margin-top: 30rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.codeBody {
|
||
|
|
|
||
|
|
width: 80%;
|
||
|
|
margin: 0 auto;
|
||
|
|
margin-top: 50rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.titlelabel text {
|
||
|
|
color: #151515;
|
||
|
|
}
|
||
|
|
|
||
|
|
.titlelabel {
|
||
|
|
font-family: PingFangSC-Regular;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #999999;
|
||
|
|
margin: 0 auto;
|
||
|
|
width: 80%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.titleText {
|
||
|
|
font-family: PingFangSC-Medium;
|
||
|
|
font-size: 46rpx;
|
||
|
|
color: #333333;
|
||
|
|
font-weight: bold;
|
||
|
|
width: 80%;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 30rpx 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nocheck {
|
||
|
|
opacity: 0.6;
|
||
|
|
}
|
||
|
|
</style>
|