project init

pages/login/setCode.vue

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