uni-app微信小程序实现发送验证码+倒计时功能

2024-10-20 阅读：216 类型：前端分类：uni-app 标签：微信小程序 uni-app

一、效果展示：用户输入手机号，验证手机号是否正确，正确发送验证码，校验验证码。

二、uniapp前端界面代码

<template>
<view class="fixed_menban">
	<view class="fixed_c">
		<view class="colse" @click="colse">
			<image src="../../static/colse.png" ></image>
		</view>
		<view class="link">
			<view class="left_phone">
				<image src="../../static/phone.png" ></image>
			</view>
			<view class="center_link">
				<image src="../../static/link.png" ></image>
			</view>
			<view class="right_wechat">
				<image src="../../static/wechat.png"></image>
			</view>
		</view>
		<form @submit="formSubmit" @reset="formReset">
			<view class="phone_item">
				<view class="phone_item_title">手机号码</view>
				<view class="phonebox">
					<input class="phone" name="phone" placeholder="请输入手机号" v-model="formData.phone"/>
				</view>
			</view>
			<view class="yzm_item">
				<view class="yzm_item_title">验证码</view>
				<view class="yzmbox">
					<input class="yzm" name="yzm" placeholder="请输入验证码" v-model="formData.yzm"/>
					<view class="yzmbtn" @click="sendMobileCode" :disabled="counting">{{ counting ? `${count}秒后重新获取` : '获取验证码' }}</view>
				</view>
			</view>
			<view class="buttonbox">
				<button form-type="submit" class="submit" :disabled="isDisabled">确认</button>
				<button type="default" form-type="reset" class="reset">拒绝</button>
			</view>
		</form>
	</view>
</view>
</template>

三、js逻辑代码：

<script>
	export default {
		data() {
			return {
				count: 60, // 倒计时时长，单位为秒
				counting: false, // 是否正在倒计时
				formData: {
					phone: '',
					yzm: '',
				},
			}
		},
		async onShow(){

		},
		async onLoad(option) {
 
		},
 
		methods: {

			//提交校验
			async formSubmit(e) {
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				var formdata = e.detail.value
 
				let telRule = /^[1][3-9]\d{9}$|^([6|9])\d{7}$|^[0][9]\d{8}$|^[6]([8|6])\d{5}$/
				if (!telRule.test(formdata.phone)) {
				 uni.showModal({
				 	title: '提示',
				 	confirmText:'知道了',
				 	content: '请输入正确的手机号',
				 	showCancel: false
				 });
				 return false;
				}
				var that = this
				if (formdata.yzm=='') {
				 uni.showModal({
				 	title: '提示',
				 	confirmText:'知道了',
				 	content: '验证码不能为空',
				 	showCancel: false
				 });
				 return false;
				}
				//校验验证码
				var params = that.formData;
				const result2 = await that.$myRequest({
					url: '/index/Aesthetics/case_login_verfty',
					method: 'POST',
					data:{
						phone: params.phone,
						yzm: params.yzm,
					}
				})		
				if(result2.data.code==200){
					uni.showToast({
						title: result2.data.msg,
						icon: 'none'
					})	
					that.isclose = false
				}else{
					uni.showToast({
						title: result2.data.msg,
						icon: 'none'
					})
				}
 
 
			},
			formReset: function(e) {
				console.log('清空数据')
				this.isclose = false;
			},
			// 发送手机动态码
			sendMobileCode() {
				if (this.counting) return;
				var reg = /^[1][3-9]\d{9}$|^([6|9])\d{7}$|^[0][9]\d{8}$|^[6]([8|6])\d{5}$/;
				if (!reg.test(this.formData.phone)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					})
					return
				}
				this.counting = true;
				const timer = setInterval(() => {
					this.count--;
					if (this.count <= 0) {
						clearInterval(timer);
						this.counting = false;
						this.count = 60; // 重置倒计时时长
					}
				}, 1000);
				this.getCaptcha()
			},
			// 获取验证码的接口
			async getCaptcha() {
				const result = await this.$myRequest({
					url: '/index/Aesthetics/caseSms',
					method: 'POST',
					data:{
					 phone: this.formData.phone,
					}
				})		
				if(result.data.code==200){
					uni.showToast({
						title: result.data.msg,
						icon: 'none'
					})			
				}else{
					uni.showToast({
						title: result.data.msg,
						icon: 'none'
					})
				}
 
			}
		},


	}
</script>

四、样式代码：

<style>
.fixed_menban{width:100%;height:100vh;background:rgba(0,0,0,0.4);position:fixed;left:auto;right:auto;top:0rpx;z-index:999;display:grid;place-items:center}
.fixed_c{width:620rpx;background:#fff;border-radius:35rpx;padding-bottom:20rpx}
.colse{width:70rpx;height:70rpx;float:right;margin-top:50rpx;margin-right:50rpx}
.colse image{width:70rpx;height:70rpx;display:block}
.link{width:100%;float:left;margin-top:45rpx}
.left_phone{width:90rpx;height:90rpx;float:left;border-radius:50%;margin-left:130rpx;background:#f5f5f5}
.left_phone image{width:60rpx;height:50rpx;margin:20rpx auto;display:block}
.center_link{width:90rpx;height:90rpx;float:left;border-radius:50%;margin:0 40rpx}
.center_link image{width:60rpx;height:60rpx;margin:20rpx auto;display:block}
.right_wechat{width:90rpx;height:90rpx;float:left;border-radius:50%;background:#f5f5f5}
.right_wechat image{width:60rpx;height:60rpx;margin:15rpx auto;display:block}
.buttonbox{width:100%;float:left}
.buttonbox button{padding:0rpx!important;font-size:35rpx;font-weight:normal;letter-spacing:10rpx}
.submit{width:85%;background:#ff421d;color:#fff;border-radius:45rpx;border:none!important;outline:none;border:0;margin-top:50rpx}
button::after{border:none}
.reset{width:85%;background:#f5f5f5;color:#878787;border-radius:45rpx;margin-top:20rpx;margin-bottom:40rpx;border:none!important}
.phone_item{width:85%;float:left;margin-left:7.5%;margin-top:50rpx}
.phone_item_title{color:#232323;font-size:30rpx}
.phonebox{width:100%;background:#fafafa;height:100rpx;border-radius:25rpx;margin-top:25rpx}
.phonebox.phone{width:85%;height:80rpx;float:left;margin-top:10rpx;margin-left:7.5%;line-height:80rpx;letter-spacing:3rpx;color:#232323;font-size:30rpx}
.yzm_item{width:85%;float:left;margin-left:7.5%;margin-top:30rpx}
.yzm_item_title{color:#232323;font-size:30rpx;letter-spacing:3rpx}
.yzmbox{width:100%;background:#fafafa;height:100rpx;border-radius:25rpx;margin-top:25rpx}
.yzmbox.yzm{width:250rpx;height:80rpx;float:left;margin-top:10rpx;margin-left:7.5%;line-height:80rpx;letter-spacing:3rpx;color:#232323;font-size:30rpx}
.yzmbox.yzmbtn{width:235rpx;float:right;font-size:30rpx;color:#ff421d;line-height:80rpx;margin-top:10rpx;text-align:center}
</style>