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

<template>
	<view class="forget-page">
		<!-- 手机号输入框 -->
		<view class="input-item">
		  <view class="input-icon">
			  <image src="http://wuye.ckdzkj.com/images/login/phone.png" mode="" style="height: 100%;width: 100%;"></image>
		  </view>
		  <input  class="input-content native-input"  :type="inputType" v-model="phoneNumber"
		  	  	   placeholder="请输入手机号" placeholder-style="font-size:24rpx" maxlength="11"/>
					</view>
		<!-- 验证码输入 + 获取验证码按钮 -->
		<view class="input-item verify-item">
		  <view class="input-icon">
			  <image src="http://wuye.ckdzkj.com/images/login/code.png" mode="" style="height: 100%;width: 100%;"></image>
		    <!-- <uni-icons type="locked" size="24" color="#999"></uni-icons> -->
		  </view>
		  <input  class="input-content verify-input native-input"  :type="inputType" v-model="verifyCode"
		  	  	   placeholder="请输入验证码" maxlength="6" placeholder-style="font-size:24rpx"/>
		  	<button  class="get-verify-btn"    :disabled="!canGetVerify || countDown > 0"
		    @click="getVerifyCode">
		    {{ countDown > 0 ? `${countDown}s后重新获取` : '获取验证码' }}
		  </button>
		</view>
		<!-- 下一步 -->
		<button
		  class="forget-btn"
		  :disabled="!canRegister || submitting"
		  @click="handleNext"
		>
		  {{ submitting ? '校验中...' : '下一步' }}
		</button>
		
	</view>
</template>
<script setup>
import { ref, computed, onUnmounted } from 'vue';
import {getSendCode,verifySmsCode} from '../api/api.js'

// 输入框类型：统一用 text
const inputType = 'text'

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

const countDown = ref(0)
const submitting = ref(false)
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: 'none'
  		 }); 
  	  }
  }).catch(err =>{
	  uni.showToast({
	    title: err.msg || '网络异常',
	    icon: 'none'
	  });
  })

  
};
// 是否下一步
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 = () =>{
	if(!canRegister.value){
		uni.showToast({ title: '请输入正确的手机号和验证码', icon: 'none'});
		return
	}
	if(submitting.value) return
	submitting.value = true
	// 后端验证短信
	verifySmsCode({
		phone: phoneNumber.value,
		smsCode: verifyCode.value,
		scene: 'reset'
	}).then(res =>{
		//  把参数存到本地缓存
		uni.setStorageSync('tempChangePwdParams', {
		    phoneNumber:phoneNumber.value,
		    verifyCode: verifyCode.value
		  });
		uni.navigateTo({
		    url: '/pageSubPack/loginSub/change-pwd'
		});
	}).catch(err =>{
		uni.showToast({
			title: err.msg || '验证码错误',
			icon: 'none'
		});
	}).finally(() =>{
		submitting.value = false
	})
}
// 返回上一页
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 );
}	
/* 输入框通用样式 */
.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%;
}

/* 原生 input 垂直居中 */
.native-input {
  line-height: 88rpx;
}

/* 深度覆盖 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>