property-resident-side/property-uniapp-project/pageSubPack/loginSub/forget-pwd.vue

<template>
	<view class="forget-page">
		<view class="status_bar"></view>
	<!-- 	<view class="nav-bar">
		  <uni-icons type="left" size="28" color="#333" @click="goBack"></uni-icons>
		  <view class="nav-title">忘记密码</view>
		</view> -->
		<!-- 手机号输入框 -->
		<view class="input-item">
		  <view class="input-icon">
			  <image src="http://47.104.199.163:9090/images/login/phone.png" mode="" style="height: 100%;width: 100%;"></image>
		  </view>
		  <uni-easyinput  class="input-content"  type="number" v-model="phoneNumber" @input="phoneNumber = phoneNumber.replace(/\D/g, '')" trim="all"
		  	  	   placeholder="请输入手机号" :inputBorder="false" maxlength="11"  :placeholderStyle="placeholderStyle">
			</uni-easyinput>
		</view>
		<!-- 验证码输入 + 获取验证码按钮 -->
		<view class="input-item verify-item">
		  <view class="input-icon">
			  <image src="http://47.104.199.163:9090/images/login/code.png" mode="" style="height: 100%;width: 100%;"></image>
		    <!-- <uni-icons type="locked" size="24" color="#999"></uni-icons> -->
		  </view>
		  <uni-easyinput  class="input-content verify-input"  type="number" v-model="verifyCode" @input="verifyCode = verifyCode.replace(/\D/g, '')" trim="all"
		  	  	   placeholder="请输入验证码" :inputBorder="false" maxlength="6"  :placeholderStyle="placeholderStyle">
		  		</uni-easyinput>
		  <button 
		    class="get-verify-btn" 
		    :disabled="!canGetVerify || countDown > 0"
		    @click="getVerifyCode"
		  >
		    {{ countDown > 0 ? `${countDown}s后重新获取` : '获取验证码' }}
		  </button>
		</view>
		<!-- 下一步 -->
		<button 
		  class="forget-btn" 
		  :disabled="!canRegister"
		  @click="handleNext"
		>
		  下一步
		</button>
		
	</view>
</template>
<script setup>
import { ref, computed, onUnmounted } from 'vue';	
import {getSendCode} from '../api/api.js'

// ====响应式数据======
const phoneNumber = ref('')
const verifyCode = ref('')

const countDown = ref(0)
let timer = null;
const placeholderStyle = ref('font-size:24rpx')

// ========== 计算属性 ==========
// 是否可获取验证码（手机号格式正确）
const canGetVerify = computed(() => {
  const phoneReg = /^1[3-9]\d{9}$/;
  return phoneReg.test(phoneNumber.value);
});

// 获取验证码
const getVerifyCode = () => {
  if (!canGetVerify.value) return;
  let params = {
  	  phone:phoneNumber.value,
  	  scene:'reset'
  }
  getSendCode(params).then(res =>{
  	  if(res.code === 200){
  		 uni.showToast({
  		   title: '验证码已发送',
  		   icon: 'success'
  		 }); 
		// 开始60秒倒计时
		countDown.value = 60;
		timer = setInterval(() => {
		  countDown.value--;
		  if (countDown.value <= 0) {
		    clearInterval(timer);
		    timer = null;
		  }
		}, 1000); 
  		
  	  }else{
  		 uni.showToast({
  		   title: '验证码发送失败',
  		   icon: 'error'
  		 }); 
  	  }
  }).catch(err =>{
	  uni.showToast({
	    title: err.msg || '网络异常',
	    icon: 'error'
	  });
  })

  
};
// 是否下一步
const canRegister = computed(() => {
  const phoneReg = /^1[3-9]\d{9}$/; // 手机号11位
  const verifyReg = /^\d{6}$/; // 验证码6位

  return phoneReg.test(phoneNumber.value) 
    && verifyReg.test(verifyCode.value) 
});
// 下一步
const handleNext = () =>{
	  //  把参数存到本地缓存
	uni.setStorageSync('tempChangePwdParams', {
	    phoneNumber:phoneNumber.value,
	    verifyCode: verifyCode.value
	  });
	  if(!canRegister.value){
		  uni.showToast({ title: '请输入',icon: 'error'});
		  return
	  }
	uni.navigateTo({
	    url: '/pageSubPack/loginSub/change-pwd'
	});
}
// 返回上一页
const goBack = () => {
  uni.navigateBack();
};
	
</script>
<style scoped>
.forget-page{
	padding: 20rpx 40rpx 40rpx;
	height: 100vh;
	overflow: hidden;
	box-sizing: border-box;
	background: repeating-linear-gradient(180deg, #E2F0FF, #F6FAFF );
}	
.status_bar{
	width: 100%;
	height: 46px;
}
/* 顶部导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  /* height: 88rpx; */
  margin-bottom: 70rpx;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
  margin-right: 100rpx;
}
/* 输入框通用样式 */
.input-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 40rpx;
  padding: 0 30rpx;
  height: 88rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

/* 验证码输入项特殊布局 */
.verify-item {
  position: relative;
  padding-right: 220rpx;
}

/* 输入框图标 */
.input-icon {
  margin-right: 20rpx;
  color: #999;
  width: 50rpx;
  height: 50rpx;
}

/* 输入框内容 */
.input-content {
  flex: 1;
  font-size: 32rpx;
  color: #333;
  height: 100%;
}

/* 深度覆盖 uni-easyinput 内部默认样式，解决高度偏移 */
.input-content :deep(.uni-easyinput__content) {
  height: 100% !important;
  min-height: unset !important;
  padding: 0 !important;
  background-color: transparent !important;
}

.input-content :deep(.uni-easyinput__content-input) {
  height: 100% !important;
  min-height: unset !important;
  padding: 0 !important;
  line-height: 88rpx;
}

.verify-input {
  padding-right: 20rpx;
}
/* 获取验证码按钮 */
.get-verify-btn {
  position: absolute;
  right: 10rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 200rpx;
  height: 70rpx;
  line-height: 70rpx;
  background-color: #007aff;
  color: #fff;
  border-radius: 35rpx;
  font-size: 28rpx;
  padding: 0;
  margin: 0;
}

.get-verify-btn:disabled {
  background-color: #ccc;
  color: #fff;
}
.get-verify-btn::after{
	border-radius: 50px;
}
/* 下一步按钮 */
.forget-btn{
	width: 100%;
	height: 88rpx;
	line-height: 88rpx;
	background-color: #007aff;
	color: #fff;
	border-radius: 8rpx;
	font-size: 28rpx;
	margin-bottom: 40rpx;
	margin-top: 66rpx;
}
.forget-btn:disabled{
	background-color: #99c8ff;
	color: #fff;
}
/* 禁用按钮边框 */
.forget-btn:after{
	border-radius:  8px;
}

	
</style>