oms

pages/login/coments/verificationCode.vue

@@ -0,0 +1,97 @@
+<template>
+	<view>
+		<view class="form_body" style="">
+			<view class="form_body_title">
+				登陆账户<br/>
+				<text class="form_body_title_text">
+					验证码已发送至
+				</text>
+				<text style="font-weight: 600;" class="form_body_title_text">{{phone}}</text>
+			</view>
+			<view style=" background-color: #f0f2ff; border-radius: 0;" class="form_body_input">
+				<xt-verify-code style="width: 100%;" v-model="verifyCode" @confirm="confirm"></xt-verify-code>
+			</view>
+			<view class="switch">
+				<view  @tap="switchFn">密码登录</view>
+				<view style="font-size: 26rpx;color: #2866FF;" @tap="senFn">{{timer.time==0? timer.timeText:timer.time+'s'}}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props:{
+			phone:{
+				type:String,
+				default:''
+			}
+		},
+		data() {
+			return {
+				value: '',
+				timer:{
+					time:60,
+					timeText:'重新发送'
+				},
+				verifyCode:'',
+				range: [{
+					"value": 0,
+					"text": ""
+				}]
+			}
+		},
+		created() {
+			this.timerFn()
+		},
+		methods: {
+			senFn(){
+				if(this.timer.time!==0) return;
+				this.timer.time = 60
+				this.timerFn()
+			},
+			timerFn(){
+				let that = this
+				 let time = setInterval(() => {
+					 console.log('定时器启动')
+				        that.timer.time--;
+						if(that.timer.time == 0){
+							clearInterval(time)
+						}
+				      }, 1000);
+			},
+			switchFn(){
+				let that = this
+				uni.$emit('state',{
+					state:1,
+					phone:that.phone
+				})
+			},
+			confirm(e){
+				if(e){
+					console.log(e)
+				}
+				console.log(this.verifyCode,'验证码')
+			},
+			sumit(){
+				console.log(1)
+			}
+		}
+	}
+</script>
+
+<style>
+	.switch{
+		font-size: 28rpx;
+		font-weight: 500;
+		color: #000000;
+		margin-top: 21rpx;
+		margin-left:29rpx;
+		display: flex;
+		justify-content: space-between;
+	}
+.form_body_title_text{
+	font-size: 28rpx;
+	color: #333333;
+}
+</style>