feat: 重置密码

src/api/login.ts

@@ -8,11 +8,12 @@ interface LoginParamsType {
   verifyCode?: string // 验证码
 }
 
-export const precheckAndSendEmail = (data: LoginParamsType): Promise<ApiResponse> => {
+// 发送验证码
+export const precheckEmail = (params: { email: string }): Promise<ApiResponse> => {
   return request({
-    url: '/api/auth/precheckAndSendEmail',
+    url: '/api/auth/precheckEmail',
-    method: 'post',
+    method: 'get',
-    data
+    params
   })
 }
 
@@ -35,6 +36,7 @@ export const resetPassword = (data: LoginParamsType): Promise<ApiResponse> => {
 export const checkLoginStatus = (): Promise<ApiResponse<LoginResponse>> => {
   return request({
     url: '/api/auth/checkLoginStatus',
-    method: 'get'
+    method: 'get',
+    meta: { responseAll: true }
   })
-}
+}

src/assets/css/style.less

@@ -66,10 +66,14 @@ html:root {
 	--van-notify-line-height: 10rem
 }
 
-
+.van-toast{
+	min-height: fit-content;
+	max-width: none;
+}
 .van-toast__text {
 	font-size: 4rem;
 	height: 5rem;
 	line-height: 5rem;
 	padding: 0 2rem;
+	min-height: fit-content;
 }

src/utils/request.ts

@@ -82,7 +82,8 @@ service.interceptors.response.use(
         message: res.errMsg || res.message,
         // type: 'fail',
         duration: 5000,
-        position:'top'
+        position:'top',
+        icon:'none'
       })
 
       return Promise.reject(new Error('error'))

src/views/login/ResetPage.vue

@@ -16,14 +16,14 @@
 
       <div class="login-container">
         <div class="login-form">
-          <Mail v-if="step === 'mail'" @nextStep="mailData => handleStep('verify', mailData)" />
+          <Mail v-if="step === 'mail'" @nextStep="handleSendVerifyCode" />
           <Verify
-            :email="email"
+            :email="fromData.email"
             v-else-if="step === 'verify'"
             :ct="emailCode"
-            @nextStep="handleStep('password')"
+            @nextStep="handleCheckVerifyCode"
           />
-          <Password v-else-if="step === 'password'" @sucess="handleSuccess"/>
+          <Password v-else-if="step === 'password'" @sucess="handleSuccess" />
         </div>
       </div>
     </div>
@@ -35,37 +35,67 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed } from 'vue'
+import { ref, reactive } from 'vue'
 import { useRouter } from 'vue-router'
-import { showToast } from 'vant'
 import Mail from './components/Mail.vue'
 import Verify from './components/Verify.vue'
 import Password from './components/Password.vue'
+import { showToast } from 'vant'
+import { precheckEmail, resetPassword } from '@/api/login'
 
 const router = useRouter()
 const step = ref<'mail' | 'verify' | 'password'>('mail')
 const emailCode = ref(['', '', '', '', ''])
-const email = ref('')
 
-// 加载状态
+const fromData = ref({
-const isLoading = ref(false)
+  email: '',
+  verifyCode: '',
+  password: '',
+  operationType: 'FORGET_PWD' as const
+})
 
 // 返回上一页
 const goBack = () => {
-  router.go(-1)
+  if (step.value === 'mail') {
+    router.go(-1)
+    return
+  }
+  if (step.value === 'verify') {
+    step.value = 'mail'
+    return
+  }
+  if (step.value === 'password') {
+    step.value = 'verify'
+    return
+  }
 }
 
-const handleStep = (type: 'mail' | 'verify' | 'password', data?: any) => {
+const handleStep = (type: 'mail' | 'verify' | 'password') => {
-  if (step.value === 'mail') {
-    email.value = data.email
-  }
   step.value = type
 }
 
-const handleSuccess = () => {
+const handleSendVerifyCode = (data: any) => {
-  router.push('/login')
+  fromData.value.email = data.email
+  precheckEmail({ email: data.email }).then(() => {
+    showToast('the verification code has been sent to your email')
+    handleStep('verify')
+  })
 }
 
+const handleCheckVerifyCode = (data: any) => {
+  console.log('data', data)
+  fromData.value.verifyCode = data.code
+  handleStep('password')
+}
+
+const handleSuccess = (data: any) => {
+  fromData.value.password = data.password
+  resetPassword(fromData.value).then((res) => {
+    // console.log('res', res)
+    showToast('the password has been reset')
+    router.push('/login')
+  })
+}
 </script>
 
 <style scoped lang="less">

src/views/login/components/Mail.vue

@@ -9,6 +9,7 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
+import { showToast } from 'vant'
 
 const emit = defineEmits(['nextStep'])
 
@@ -16,7 +17,19 @@ const formData = ref({
   email: ''
 })
 
+const validateEmail = () => {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  return emailRegex.test(formData.value.email)
+}
+
 const handleNext = () => {
+  if (!validateEmail()) {
+    showToast({
+      message: 'please input valid email',
+      position:'top'
+    })
+    return
+  }
   emit('nextStep', { email: formData.value.email })
 }
 </script>

src/views/login/components/Password.vue

@@ -16,7 +16,7 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
-
+import { showToast } from 'vant'
 const emit = defineEmits(['sucess'])
 const showPwd = ref(false)
 
@@ -24,8 +24,16 @@ const formData = ref({
   password: ''
 })
 
+const validatePassword = () => {
+  return formData.value.password.length >= 6
+}
+
 const handleNext = () => {
-  emit('sucess')
+  if (!validatePassword()) {
+    showToast('the password must be at least 6 characters long')
+    return
+  }
+  emit('sucess', { password: formData.value.password })
 }
 </script>
 <style lang="less" scoped>

src/views/login/components/Verify.vue

@@ -63,7 +63,7 @@ const cIndex = computed(() => {
   i = (i + ctSize.value) % ctSize.value
   return i
 })
-const lastCode = computed(() => getCtData.value[ctSize.value - 1])
+// const lastCode = computed(() => getCtData.value[ctSize.value - 1])
 
 const countdown = ref(60)
 const handleCountdown = () => {
@@ -96,18 +96,7 @@ const handleConfirmCaptcha = () => {
     showToast('please enter the correct verification code.')
     return
   }
-  // 验证验证码
+  emit('nextStep', { code: password })
-  new Promise((resolve, reject) => {
-    console.log('pwd', password)
-    resolve(true)
-  })
-    .then(() => {
-      // showToast('verification code is correct.')
-      emit('nextStep', 'password')
-    })
-    .catch(() => {
-      showToast('verification code is incorrect.')
-    })
 }
 
 // Methods