property-manager-side/wuye-manager-uniapp/pageSubPack/setting/change-phone.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="https://wuye.ckdzkj.com/images/login/phone.png"
          mode=""
          style="height: 100%; width: 100%"
        ></image>
      </view>
      <uni-easyinput
        class="input-content"
        type="number"
        v-model="phoneNumber"
        trim="all"
        placeholder="请输入手机号"
        :inputBorder="false"
        maxlength="11"
        :placeholderStyle="placeholderStyle"
      >
      </uni-easyinput>
    </view>
    <!-- 验证码输入 + 获取验证码按钮 -->
    <view class="input-item verify-item">
      <view class="input-icon">
        <image
          src="https://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>
      <uni-easyinput
        class="input-content verify-input"
        type="number"
        v-model="verifyCode"
        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="handleConfirm">确定</button>
  </view>
</template>
<script setup>
import { ref, computed, onUnmounted } from 'vue'
import { getSendCode, changePhone } 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: 'butler_login'
  }
  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'
      })
    }
  })
}
// 是否确认
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 handleConfirm = () => {
  if (!canRegister.value) {
    uni.showToast({ title: '请输入正确的手机号和验证码', icon: 'none' })
    return
  }

  uni.showLoading({ title: '提交中...' })
  changePhone({
    phone: phoneNumber.value,
    smsCode: verifyCode.value
  })
    .then(res => {
      if (res.code === 200) {
        uni.showToast({ title: '修改成功', icon: 'success' })
        //  把参数存到本地缓存
        uni.setStorageSync('tempChangePwdParams', {
          phoneNumber: phoneNumber.value
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 800)
      } else {
        uni.showToast({ title: res.msg || '修改失败', icon: 'none' })
      }
    })
    .catch(() => {
      uni.showToast({ title: '请求失败，请重试', icon: 'none' })
    })
    .finally(() => {
      uni.hideLoading()
    })
}
// 返回上一页
// const goBack = () => {
//   uni.navigateBack();
// };
</script>
<style scoped>
.forget-page {
  padding: 20rpx 40rpx 40rpx;
  min-height: 100vh;
  background-color: #f9f9f9;
  /* 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;
}
/* 输入框通用样式 */
.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;
  display: flex;
  align-items: center;
}
.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: #4d5dfa;
  color: #fff;
  border-radius: 35rpx;
  font-size: 28rpx;
  padding: 0;
  margin: 0;
}

.get-verify-btn:disabled {
  background-color: #ccc;
  color: #fff;
}
/* 按钮 */
.forget-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #4d5dfa;
  color: #fff;
  border-radius: 8rpx;
  font-size: 28rpx;
  margin-bottom: 40rpx;
}
.forget-btn:disabled {
  background-color: #99c8ff;
  color: #fff;
}
/* 禁用按钮边框 */
.get-verify-btn:after {
  border-radius: 40px;
}
</style>