uniapp 倒计时获取短信验证码

在这里插入图片描述
在这里插入图片描述

代码片.

<template>
	<view>
	   <view class="item">
		 <view class="item-input-text">
			<image class="phone-icon" lazy-load="true" src="static/image/mobile-icon.png"</image>
			<input class="input" placeholder-style="color:#C5CBCE;" v-model="mobil placeholder="请输入手机号" />
		</view>         
	   </view>
	   <view class="item">
		 <view class="item-input-text item-input-code">
			<image class="phone-icon" lazy-load="true" src="static/image/code-icon.png"></image>
			<input class="input" placeholder-style="color:#C5CBCE;" v-model="code" placeholder="请输入验证码" />
		 </view>
		 <view class="item-input-text item-input-codeImg" @tap="getCodeBtn">
			  <text v-if="codeTime>0">{{(codeTime<10&&codeTime>0 )?'0'+codeTime:codeTime }}s后重新获取</text>
			  <text v-else>获取验证码</text>
		 </view>
	 </view>
	</view>
</template

<script>
	export default {
		data() {
			return {
				codeTime: 0,//初始化倒计时
				mobile: "", //手机号
				code: "", //输入验证码
			}
		},
		onShow() {},
		onLoad() {},
		methods: {
			getCodeBtn() {
				if (this.codeTime > 0) {
					return false;
				} else {
					this.codeTime = 60
					let timer = setInterval(() => {
						this.codeTime--;
						if (this.codeTime < 1) {
							clearInterval(timer);
							this.codeTime = 0
						}
					}, 1000)
				}
			}
		}
	}
</script>
Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐