ylrz_scrm_uniapp/pages/auth/forgetPassword.vue

<template>
	<view style="padding-top: 40rpx;">
		<veiw class="log">
			<view class="form-items">
				<u-icon name="account" color="#666" size="24" ></u-icon>
				<input
				      type="number" 
				      v-model="phone" 
					  style="flex: 1;margin-left: 16rpx;"
				      placeholder="手机号"
				      maxlength="11"/>
			</view>
			<view class="form-items">
				<u-icon name="lock" color="#666" size="24" ></u-icon>
				<input
				      type="password" 
				      v-model="password" 
					  style="flex: 1;margin-left: 16rpx;"
				      placeholder="密码(6-15个字符)"
				      maxlength="15"/>
			</view>
			<view class="form-items codeitem">
				<view style="display: flex;justify-content: flex-start; align-items: center;">
					<u-icon name="lock" color="#666" size="24"></u-icon>
					<input
					      type="number" 
					      v-model="code" 
						  style="flex: 1;margin-left: 16rpx;"
					      placeholder="验证码"
					      maxlength="11"/>
				</view>
				<view
					class="captcha-btn"
					:disabled="countdown > 0 || !isPhoneValid"
					@click="sendSMcode"
				  >
					{{ countdown > 0 ? `${countdown}s后重试` : '获取验证码' }}
				  </view>
			</view>
			<view class="submitlog" @click="submitlogs">设置新密码</view>
		</veiw>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone:'',
				password:'',
				code: '', // 验证码
				countdown: 0,  // 倒计时
				timer: null  // 定时器
			}
		},
		 computed: {
		    // 手机号格式验证
		    isPhoneValid() {
		      return /^1[3-9]\d{9}$/.test(this.phone)
		    }
		  },
		methods: {
			// 校验密码
			validatePassword() {
			  return /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/.test(this.password);
			},
			sendSMcode(){
				if (!this.isPhoneValid) {
					return uni.showToast({ title: '手机号格式错误', icon: 'none' })
				}
				  
				// 显示加载状态
				uni.showLoading({ title: '发送中...', mask: true })
				this.startCountdown()
			},
			// 开始倒计时
			startCountdown() {
			  this.countdown = 60
			  this.timer = setInterval(() => {
				if (this.countdown <= 0) {
				  clearInterval(this.timer)
				  return
				}
				this.countdown--
				uni.hideLoading();
			  }, 1000)
			},
			// 组件销毁时清除定时器
			  beforeDestroy() {
			    if (this.timer) clearInterval(this.timer)
			  },
			  submitlogs(){
				  if(!this.phone){
					  return uni.showToast({ title: '请输入手机号', icon: 'none' })
				  }
				  if (!this.isPhoneValid) {
				  		return uni.showToast({ title: '手机号格式错误', icon: 'none' })
				   }
				   if(!this.password){
				   		 return uni.showToast({ title: '请输入密码', icon: 'none' })
				   }
				  if (!this.validatePassword()) {
				  		return uni.showToast({ title: '密码格式不正确', icon: 'none' })
				   }
				   
			  }
		}
	}
</script>

<style scoped lang="scss">
.log{
	background: #fff ;
	width: calc(100% - 20rpx);
	margin: 10rpx ;
	padding: 20rpx 0;
	border-radius: 20rpx;
	display: flex;
	flex-direction: column;
	.form-items{
		background: #fff ;
		display: flex;
		align-items: center;
		padding: 28rpx 0;
		margin: 0 20rpx;
		border-bottom: #eee solid 2rpx;
	}
}
.submitlog{
	background: linear-gradient(135deg, #38e663  0%, #018C39 100%);
	border-radius: 80rpx;
	color: #fff;
	margin: 0 auto;
	width: 80%;
	padding: 20rpx 0;
	text-align: center;
	margin-top: 40rpx;
}
.captcha-btn {
    width: 160rpx;
    height: 60rpx;
    line-height: 60rpx;
    border-radius: 8rpx;
    background: linear-gradient(135deg, #38e663  0%, #018C39 100%);
    color: #fff;
	text-align: center;
    font-size: 28rpx;

    &[disabled] {
      background-color: #a2d7ff ;
      color: #fff;
    }
  }
  .codeitem{
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  flex: 1;
  }
</style>