forgotPassword.vue 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330
  1. <route lang="json5" type="page">
  2. {
  3. layout: 'default',
  4. style: {
  5. navigationStyle: 'custom',
  6. },
  7. }
  8. </route>
  9. <script lang="ts" setup>
  10. import { getCode, updateUserPassword } from '@/api/login'
  11. import { goBack as goBackUtil, toPage } from '@/utils/page'
  12. import { toast } from '@/utils/toast'
  13. defineOptions({
  14. name: 'ForgotPassword', // 忘记密码
  15. })
  16. // 获取屏幕边界到安全区域距离
  17. const systemInfo = uni.getSystemInfoSync()
  18. const safeAreaInsets = systemInfo.safeAreaInsets
  19. // 步骤控制:1-输入手机号,2-重置密码
  20. const step = ref(1)
  21. // 表单数据
  22. const formData = ref({
  23. phone: '',
  24. verifyCode: '',
  25. newPwd: '',
  26. confirmPwd: '',
  27. })
  28. // 验证码倒计时
  29. const countdown = ref(0)
  30. const countdownTimer = ref<any>(null)
  31. // 获取验证码
  32. async function getVerificationCode() {
  33. // 验证手机号
  34. if (!formData.value.phone.trim()) {
  35. toast.error('Please enter phone number first')
  36. return
  37. }
  38. // 验证手机号格式
  39. const phoneRegex = /^1[3-9]\d{9}$/
  40. if (!phoneRegex.test(formData.value.phone)) {
  41. toast.error('Please enter valid phone number')
  42. return
  43. }
  44. // 防止重复点击
  45. if (countdown.value > 0) {
  46. return
  47. }
  48. try {
  49. // 显示加载状态
  50. uni.showLoading({
  51. title: 'Sending...',
  52. mask: true,
  53. })
  54. // 调用获取验证码接口
  55. await getCode(formData.value.phone)
  56. uni.hideLoading()
  57. toast.success('Verification code sent successfully')
  58. // 开始倒计时
  59. countdown.value = 60
  60. countdownTimer.value = setInterval(() => {
  61. countdown.value--
  62. if (countdown.value <= 0) {
  63. clearInterval(countdownTimer.value!)
  64. countdownTimer.value = null
  65. }
  66. }, 1000)
  67. }
  68. catch (error) {
  69. uni.hideLoading()
  70. toast.error(error.message || 'Failed to send verification code')
  71. }
  72. }
  73. // 第一步:验证手机号
  74. function handleStep1() {
  75. // 验证手机号
  76. if (!formData.value.phone.trim()) {
  77. toast.error('Please enter phone number')
  78. return
  79. }
  80. // 验证手机号格式
  81. const phoneRegex = /^1[3-9]\d{9}$/
  82. if (!phoneRegex.test(formData.value.phone)) {
  83. toast.error('Please enter valid phone number')
  84. return
  85. }
  86. // 跳转到第二步
  87. step.value = 2
  88. }
  89. // 第二步:重置密码
  90. async function handleResetPassword() {
  91. try {
  92. // 表单验证
  93. const isValid = await validateResetForm()
  94. if (!isValid)
  95. return
  96. // 显示加载状态
  97. uni.showLoading({
  98. title: 'Resetting password...',
  99. mask: true,
  100. })
  101. // 调用重置密码接口
  102. const resetData = {
  103. phoneNo: formData.value.phone,
  104. newPwd: formData.value.newPwd,
  105. verifyCode: formData.value.verifyCode,
  106. }
  107. await updateUserPassword(resetData)
  108. uni.hideLoading()
  109. toast.success('Password reset successfully')
  110. // 跳转到登录页
  111. setTimeout(() => {
  112. toPage('/pages/login/login', {}, true)
  113. }, 1500)
  114. }
  115. catch (error) {
  116. uni.hideLoading()
  117. toast.error(error.message || 'Failed to reset password')
  118. }
  119. }
  120. // 重置密码表单验证
  121. function validateResetForm() {
  122. return new Promise((resolve) => {
  123. // 验证验证码
  124. if (!formData.value.verifyCode.trim()) {
  125. toast.error('Please enter verification code')
  126. resolve(false)
  127. return
  128. }
  129. // 验证新密码
  130. if (!formData.value.newPwd.trim()) {
  131. toast.error('Please enter new password')
  132. resolve(false)
  133. return
  134. }
  135. // 验证密码长度
  136. if (formData.value.newPwd.length < 6 || formData.value.newPwd.length > 20) {
  137. toast.error('Password should be 6-20 characters')
  138. resolve(false)
  139. return
  140. }
  141. // 验证确认密码
  142. if (!formData.value.confirmPwd.trim()) {
  143. toast.error('Please confirm your password')
  144. resolve(false)
  145. return
  146. }
  147. // 验证两次密码是否一致
  148. if (formData.value.newPwd !== formData.value.confirmPwd) {
  149. toast.error('Passwords do not match')
  150. resolve(false)
  151. return
  152. }
  153. resolve(true)
  154. })
  155. }
  156. // 返回上一页
  157. function goBack() {
  158. if (step.value === 2) {
  159. step.value = 1
  160. }
  161. else {
  162. goBackUtil()
  163. }
  164. }
  165. // 页面卸载时清理定时器
  166. onUnmounted(() => {
  167. if (countdownTimer.value) {
  168. clearInterval(countdownTimer.value)
  169. }
  170. })
  171. </script>
  172. <template>
  173. <view class="forgot-password-page min-h-screen bg-white">
  174. <!-- 背景图片区域 -->
  175. <view class="auth-bg-section relative">
  176. <!-- 自定义导航栏 -->
  177. <view :style="{ paddingTop: `${safeAreaInsets?.top}px` }">
  178. <view class="h-88rpx flex items-center px-24rpx">
  179. <wd-icon name="thin-arrow-left" size="32rpx" @click="goBack" />
  180. </view>
  181. </view>
  182. <!-- Logo和标语 -->
  183. <view class="pb-60rpx pt-60rpx text-center">
  184. <view class="mb-20rpx flex items-center justify-center">
  185. <image src="/static/logo.png" class="mr-16rpx h-60rpx w-60rpx" />
  186. </view>
  187. </view>
  188. </view>
  189. <!-- 表单内容区域 -->
  190. <view class="flex flex-col px-20rpx">
  191. <view class="mb-40rpx" />
  192. <!-- 第一步:输入手机号 -->
  193. <view v-if="step === 1">
  194. <wd-form ref="form" :model="formData">
  195. <view class="mb-60rpx">
  196. <wd-input
  197. v-model="formData.phone"
  198. prop="phone"
  199. placeholder="+88 Mobile number"
  200. no-border
  201. custom-class="bandhu-auth-input-field"
  202. />
  203. </view>
  204. <!-- 重置密码按钮 -->
  205. <wd-button
  206. type="error"
  207. size="large"
  208. custom-class="mb-200rpx w-full bandhu-auth-primary-btn"
  209. @click="handleStep1"
  210. >
  211. Reset Password
  212. </wd-button>
  213. </wd-form>
  214. </view>
  215. <!-- 第二步:重置密码 -->
  216. <view v-else>
  217. <wd-form ref="form" :model="formData">
  218. <view class="mb-40rpx space-y-32rpx">
  219. <wd-input
  220. v-model="formData.phone"
  221. prop="phone"
  222. no-border
  223. readonly
  224. custom-class="bandhu-auth-input-field"
  225. />
  226. <view class="flex items-center gap-20rpx">
  227. <wd-input
  228. v-model="formData.verifyCode"
  229. prop="verifyCode"
  230. placeholder="Verification Code"
  231. no-border
  232. custom-class="flex-1 bandhu-auth-input-field"
  233. />
  234. <wd-button
  235. type="error"
  236. plain
  237. :disabled="countdown > 0"
  238. custom-class="bandhu-auth-secondary-btn"
  239. @click="getVerificationCode"
  240. >
  241. {{ countdown > 0 ? `${countdown}s` : 'Get Code' }}
  242. </wd-button>
  243. </view>
  244. <wd-input
  245. v-model="formData.newPwd"
  246. prop="newPwd"
  247. placeholder="New Password 6-20 characters"
  248. no-border show-password
  249. custom-class="bandhu-auth-input-field"
  250. />
  251. <wd-input
  252. v-model="formData.confirmPwd"
  253. prop="confirmPwd"
  254. show-password
  255. placeholder="Confirm password"
  256. no-border
  257. custom-class="bandhu-auth-input-field"
  258. />
  259. </view>
  260. <!-- 密码提示 -->
  261. <view class="mb-60rpx text-center text-24rpx text-#666">
  262. Your password must be different from previous used password
  263. </view>
  264. <!-- 重置密码按钮 -->
  265. <wd-button
  266. type="error"
  267. size="large"
  268. custom-class="mb-200rpx w-full bandhu-auth-primary-btn"
  269. @click="handleResetPassword"
  270. >
  271. Reset Password
  272. </wd-button>
  273. </wd-form>
  274. </view>
  275. <!-- 登录提示 -->
  276. <view class="text-center">
  277. <text class="text-28rpx text-#666">
  278. Already have account?
  279. </text>
  280. <text class="text-28rpx text-[var(--wot-color-theme)]" @click="toPage('/pages/login/login')">
  281. Login Now
  282. </text>
  283. </view>
  284. </view>
  285. </view>
  286. </template>
  287. <style lang="scss" scoped>
  288. // 忘记密码页面特有样式(如果有的话)
  289. </style>