feat: 1.完成密码登录功能 2.完成忘记密码功能

src/constants/regular-expressions.ts

@@ -1,3 +1,5 @@
-export const phoneRegExp = /^1[3-9]\d{9}$/
+export const phoneRegExp: RegExp = /^1[3-9]\d{9}$/
 
-export const passwordRegExp = /^(?![0-9]+$)(?![a-zA-Z]+$)(?![^0-9a-zA-Z]+$).{8,20}$/
+export const passwordRegExp: RegExp = /^(?![0-9]+$)(?![a-zA-Z]+$)(?![^0-9a-zA-Z]+$).{8,20}$/
+
+export const codeRegExp: RegExp = /^[0-9]{6}$/

src/pages/get-code/get-code.vue

@@ -62,7 +62,7 @@
       uni.hideLoading()
       if (result.errorCode === Result.Success.code) {
         await uni.navigateTo({
-          url: `/pages/code/code?phone=${phone.value}&type=reset-password`
+          url: `/pages/reset-password/reset-password?phone=${phone.value}`
         })
       } else {
         await uni.showToast({

src/pages/login/login.vue

@@ -147,7 +147,7 @@
   </Modal>
 </template>
 <script lang="ts" setup>
-  import { useBasicStore } from '@/store'
+  import { useBasicStore, useUserStore } from '@/store'
   import { passwordRegExp, phoneRegExp } from '@/constants/regular-expressions'
   import {
     getCodeApi,
@@ -159,6 +159,7 @@
   import { Result } from '@/constants/result'
 
   const $basic = useBasicStore()
+  const $user = useUserStore()
 
   const appName = import.meta.env.VITE_APP_TITLE
 
@@ -210,12 +211,14 @@
       })
       uni.hideLoading()
       if (result.errorCode === Result.Success.code) {
+        uni.setStorageSync('token', result.data.token)
+        $user.getUserInfo()
         await uni.switchTab({
           url: '/pages/home/home'
         })
         await uni.showToast({
           title: '登录成功',
-          icon: 'success'
+          icon: 'none'
         })
       } else {
         await uni.showToast({

src/pages/reset-password/reset-password.vue

@@ -9,8 +9,29 @@
 <template>
   <view>
     <TopNavigation></TopNavigation>
-    <view class="text-6 ml-4 pt-7 custom-color-black font-bold">请输入手机号</view>
+    <view class="text-6 ml-4 pt-7 custom-color-black font-bold">设置新密码</view>
+    <view class="text-3.5 ml-4 mt-2 mb-2 custom-color-grey">
+      <view>已发送验证码至{{ maskedPhone }}</view>
+    </view>
     <view class="p-5">
+      <wd-input
+        v-model="code"
+        :maxlength="6"
+        class="mt-6"
+        type="number"
+        placeholder="请输入验证码"
+        placeholderClass="text-4 custom-color-grey"
+        size="large"
+        @change="codeChange"
+        use-suffix-slot
+      >
+        <template #suffix>
+          <view v-if="countDown > 0" class="text-4 custom-color-grey">
+            {{ countDown }}s后重新获取
+          </view>
+          <view v-else class="text-4 custom-color-blue" @click="getCode">重新获取</view>
+        </template>
+      </wd-input>
       <wd-input
         v-model="password"
         :maxlength="20"
@@ -54,39 +75,105 @@
 </template>
 
 <script setup lang="ts">
-  import { passwordRegExp } from '@/constants/regular-expressions'
+  import { codeRegExp, passwordRegExp } from '@/constants/regular-expressions'
-  import { resetPasswordApi } from '@/service/user'
+  import { getCodeApi, resetPasswordApi, UserGetCodeRequest } from '@/service/user'
   import { Result } from '@/constants/result'
+  import { AccountChannel, CodeType, IResData } from '@/typings'
 
   const phone = ref<string>('')
   const code = ref<string>('')
 
   const password = ref<string>('')
   const confirmPassword = ref<string>('')
+  const countDown = ref<number>(60)
 
+  const maskedPhone = computed(() => {
+    if (phone.value.length === 11) {
+      return phone.value.slice(0, 3) + '****' + phone.value.slice(7)
+    }
+    return phone.value
+  })
+  const codePass = computed(() => codeRegExp.test(code.value))
   const passwordPass = computed(() => passwordRegExp.test(password.value))
   const confirmPasswordPass = computed(() => password.value === confirmPassword.value)
 
   onLoad(options => {
     phone.value = options.phone
-    code.value = options.code
+    startCounting()
   })
 
+  const getCode = async () => {
+    await uni.showLoading({
+      title: '加载中',
+      mask: true
+    })
+    try {
+      const result: IResData = await getCodeApi<UserGetCodeRequest>({
+        account: phone.value,
+        channel: AccountChannel.phone,
+        codeType: CodeType.reset
+      })
+      uni.hideLoading()
+      if (result.errorCode === Result.Success.code) {
+        await uni.showToast({
+          title: '验证码已发送',
+          icon: 'none'
+        })
+      } else {
+        await uni.showToast({
+          title: result.errorMsg,
+          icon: 'none'
+        })
+      }
+    } catch (err) {
+      console.log(err)
+      uni.hideLoading()
+      await uni.showToast({
+        title: '获取验证码失败，请稍后再试',
+        icon: 'none'
+      })
+    }
+  }
+
+  const startCounting = () => {
+    const timestamp: number = new Date().getTime()
+    countDown.value = 60
+    const countDownTimer = setInterval(() => {
+      if (countDown.value > 0) {
+        countDown.value = 60 - Math.floor((new Date().getTime() - timestamp) / 1000)
+      } else {
+        clearInterval(countDownTimer)
+      }
+    }, 1000)
+  }
+
   const resetPassword = async () => {
-    if (password.value === '' || confirmPassword.value === '') {
+    if (code.value === '') {
-      uni.showToast({
+      await uni.showToast({
+        title: '验证码不能为空',
+        icon: 'none'
+      })
+      return
+    } else if (!codePass.value) {
+      await uni.showToast({
+        title: '验证码格式不正确',
+        icon: 'none'
+      })
+      return
+    } else if (password.value === '' || confirmPassword.value === '') {
+      await uni.showToast({
         title: '密码不能为空',
         icon: 'none'
       })
       return
     } else if (!passwordPass.value || !confirmPasswordPass.value) {
-      uni.showToast({
+      await uni.showToast({
         title: '密码格式不正确',
         icon: 'none'
       })
       return
-    } else if (password.value !== confirmPasswordPass.value) {
+    } else if (password.value !== confirmPassword.value) {
-      uni.showToast({
+      await uni.showToast({
         title: '两次密码不一致',
         icon: 'none'
       })
@@ -107,7 +194,7 @@
         await uni.navigateBack({ delta: 2 })
         await uni.showToast({
           title: '密码重置成功',
-          icon: 'icon'
+          icon: 'none'
         })
       } else {
         await uni.showToast({
@@ -132,6 +219,10 @@
   const confirmPasswordChange = (value: string) => {
     confirmPassword.value = value
   }
+
+  const codeChange = (value: string) => {
+    code.value = value
+  }
 </script>
 
 <style scoped lang="scss"></style>