123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330 |
- <route lang="json5" type="page">
- {
- layout: 'default',
- style: {
- navigationStyle: 'custom',
- },
- }
- </route>
- <script lang="ts" setup>
- import { getCode, updateUserPassword } from '@/api/login'
- import { goBack as goBackUtil, toPage } from '@/utils/page'
- import { toast } from '@/utils/toast'
- defineOptions({
- name: 'ForgotPassword', // 忘记密码
- })
- // 获取屏幕边界到安全区域距离
- const systemInfo = uni.getSystemInfoSync()
- const safeAreaInsets = systemInfo.safeAreaInsets
- // 步骤控制:1-输入手机号,2-重置密码
- const step = ref(1)
- // 表单数据
- const formData = ref({
- phone: '',
- verifyCode: '',
- newPwd: '',
- confirmPwd: '',
- })
- // 验证码倒计时
- const countdown = ref(0)
- const countdownTimer = ref<any>(null)
- // 获取验证码
- async function getVerificationCode() {
- // 验证手机号
- if (!formData.value.phone.trim()) {
- toast.error('Please enter phone number first')
- return
- }
- // 验证手机号格式
- const phoneRegex = /^1[3-9]\d{9}$/
- if (!phoneRegex.test(formData.value.phone)) {
- toast.error('Please enter valid phone number')
- return
- }
- // 防止重复点击
- if (countdown.value > 0) {
- return
- }
- try {
- // 显示加载状态
- uni.showLoading({
- title: 'Sending...',
- mask: true,
- })
- // 调用获取验证码接口
- await getCode(formData.value.phone)
- uni.hideLoading()
- toast.success('Verification code sent successfully')
- // 开始倒计时
- countdown.value = 60
- countdownTimer.value = setInterval(() => {
- countdown.value--
- if (countdown.value <= 0) {
- clearInterval(countdownTimer.value!)
- countdownTimer.value = null
- }
- }, 1000)
- }
- catch (error) {
- uni.hideLoading()
- toast.error(error.message || 'Failed to send verification code')
- }
- }
- // 第一步:验证手机号
- function handleStep1() {
- // 验证手机号
- if (!formData.value.phone.trim()) {
- toast.error('Please enter phone number')
- return
- }
- // 验证手机号格式
- const phoneRegex = /^1[3-9]\d{9}$/
- if (!phoneRegex.test(formData.value.phone)) {
- toast.error('Please enter valid phone number')
- return
- }
- // 跳转到第二步
- step.value = 2
- }
- // 第二步:重置密码
- async function handleResetPassword() {
- try {
- // 表单验证
- const isValid = await validateResetForm()
- if (!isValid)
- return
- // 显示加载状态
- uni.showLoading({
- title: 'Resetting password...',
- mask: true,
- })
- // 调用重置密码接口
- const resetData = {
- phoneNo: formData.value.phone,
- newPwd: formData.value.newPwd,
- verifyCode: formData.value.verifyCode,
- }
- await updateUserPassword(resetData)
- uni.hideLoading()
- toast.success('Password reset successfully')
- // 跳转到登录页
- setTimeout(() => {
- toPage('/pages/login/login', {}, true)
- }, 1500)
- }
- catch (error) {
- uni.hideLoading()
- toast.error(error.message || 'Failed to reset password')
- }
- }
- // 重置密码表单验证
- function validateResetForm() {
- return new Promise((resolve) => {
- // 验证验证码
- if (!formData.value.verifyCode.trim()) {
- toast.error('Please enter verification code')
- resolve(false)
- return
- }
- // 验证新密码
- if (!formData.value.newPwd.trim()) {
- toast.error('Please enter new password')
- resolve(false)
- return
- }
- // 验证密码长度
- if (formData.value.newPwd.length < 6 || formData.value.newPwd.length > 20) {
- toast.error('Password should be 6-20 characters')
- resolve(false)
- return
- }
- // 验证确认密码
- if (!formData.value.confirmPwd.trim()) {
- toast.error('Please confirm your password')
- resolve(false)
- return
- }
- // 验证两次密码是否一致
- if (formData.value.newPwd !== formData.value.confirmPwd) {
- toast.error('Passwords do not match')
- resolve(false)
- return
- }
- resolve(true)
- })
- }
- // 返回上一页
- function goBack() {
- if (step.value === 2) {
- step.value = 1
- }
- else {
- goBackUtil()
- }
- }
- // 页面卸载时清理定时器
- onUnmounted(() => {
- if (countdownTimer.value) {
- clearInterval(countdownTimer.value)
- }
- })
- </script>
- <template>
- <view class="forgot-password-page min-h-screen bg-white">
- <!-- 背景图片区域 -->
- <view class="auth-bg-section relative">
- <!-- 自定义导航栏 -->
- <view :style="{ paddingTop: `${safeAreaInsets?.top}px` }">
- <view class="h-88rpx flex items-center px-24rpx">
- <wd-icon name="thin-arrow-left" size="32rpx" @click="goBack" />
- </view>
- </view>
- <!-- Logo和标语 -->
- <view class="pb-60rpx pt-60rpx text-center">
- <view class="mb-20rpx flex items-center justify-center">
- <image src="/static/logo.png" class="mr-16rpx h-60rpx w-60rpx" />
- </view>
- </view>
- </view>
- <!-- 表单内容区域 -->
- <view class="flex flex-col px-20rpx">
- <view class="mb-40rpx" />
- <!-- 第一步:输入手机号 -->
- <view v-if="step === 1">
- <wd-form ref="form" :model="formData">
- <view class="mb-60rpx">
- <wd-input
- v-model="formData.phone"
- prop="phone"
- placeholder="+88 Mobile number"
- no-border
- custom-class="bandhu-auth-input-field"
- />
- </view>
- <!-- 重置密码按钮 -->
- <wd-button
- type="error"
- size="large"
- custom-class="mb-200rpx w-full bandhu-auth-primary-btn"
- @click="handleStep1"
- >
- Reset Password
- </wd-button>
- </wd-form>
- </view>
- <!-- 第二步:重置密码 -->
- <view v-else>
- <wd-form ref="form" :model="formData">
- <view class="mb-40rpx space-y-32rpx">
- <wd-input
- v-model="formData.phone"
- prop="phone"
- no-border
- readonly
- custom-class="bandhu-auth-input-field"
- />
- <view class="flex items-center gap-20rpx">
- <wd-input
- v-model="formData.verifyCode"
- prop="verifyCode"
- placeholder="Verification Code"
- no-border
- custom-class="flex-1 bandhu-auth-input-field"
- />
- <wd-button
- type="error"
- plain
- :disabled="countdown > 0"
- custom-class="bandhu-auth-secondary-btn"
- @click="getVerificationCode"
- >
- {{ countdown > 0 ? `${countdown}s` : 'Get Code' }}
- </wd-button>
- </view>
- <wd-input
- v-model="formData.newPwd"
- prop="newPwd"
- placeholder="New Password 6-20 characters"
- no-border show-password
- custom-class="bandhu-auth-input-field"
- />
- <wd-input
- v-model="formData.confirmPwd"
- prop="confirmPwd"
- show-password
- placeholder="Confirm password"
- no-border
- custom-class="bandhu-auth-input-field"
- />
- </view>
- <!-- 密码提示 -->
- <view class="mb-60rpx text-center text-24rpx text-#666">
- Your password must be different from previous used password
- </view>
- <!-- 重置密码按钮 -->
- <wd-button
- type="error"
- size="large"
- custom-class="mb-200rpx w-full bandhu-auth-primary-btn"
- @click="handleResetPassword"
- >
- Reset Password
- </wd-button>
- </wd-form>
- </view>
- <!-- 登录提示 -->
- <view class="text-center">
- <text class="text-28rpx text-#666">
- Already have account?
- </text>
- <text class="text-28rpx text-[var(--wot-color-theme)]" @click="toPage('/pages/login/login')">
- Login Now
- </text>
- </view>
- </view>
- </view>
- </template>
- <style lang="scss" scoped>
- // 忘记密码页面特有样式(如果有的话)
- </style>
|