忘记密码

app/src/api/account.ts

@@ -10,3 +10,8 @@ export function login(data: Record<string, any>) {
 export function register(data: Record<string, any>) {
     return request.post({ url: '/login/register', data: { ...data, client } })
 }
+
+//忘记密码
+export function forgotPassword(data: Record<string, any>) {
+    return request.post({ url: '/login/forgotPassword', data })
+}

app/src/main.ts

@@ -2,7 +2,6 @@ import { createSSRApp } from 'vue'
 import App from './App.vue'
 import plugins from './plugins'
 import './styles/index.scss'
-import './router'
 export function createApp() {
     const app = createSSRApp(App)
     app.use(plugins)

app/src/pages.json

@@ -30,6 +30,12 @@
                 "navigationBarTitleText": "注册"
             }
         },
+        {
+            "path": "pages/forget_pwd/forget_pwd",
+            "style": {
+                "navigationBarTitleText": "忘记密码"
+            }
+        },
         {
             "path": "pages/customer_service/customer_service",
             "style": {

app/src/pages/forget_pwd/forget_pwd.vue

@@ -0,0 +1,108 @@
+<template>
+    <view
+        class="register bg-white min-h-full flex flex-col items-center px-[40rpx] pt-[100rpx] box-border"
+    >
+        <view class="w-full">
+            <view class="text-2xl font-medium mb-[100rpx]">忘记登录密码</view>
+            <u-form borderBottom :label-width="150">
+                <u-form-item label="手机号" borderBottom>
+                    <u-input
+                        class="flex-1"
+                        v-model="formData.mobile"
+                        :border="false"
+                        placeholder="请输入手机号码"
+                    />
+                </u-form-item>
+                <u-form-item label="验证码" borderBottom>
+                    <u-input
+                        class="flex-1"
+                        v-model="formData.code"
+                        placeholder="请输入验证码"
+                        :border="false"
+                    />
+                    <view
+                        class="border-l border-solid border-0 border-light pl-3 text-muted leading-4 ml-3 w-[180rpx]"
+                        @click="sendSms"
+                    >
+                        <u-verification-code
+                            ref="uCodeRef"
+                            :seconds="60"
+                            @change="codeChange"
+                            change-text="x秒"
+                        />
+                        {{ codeTips }}
+                    </view>
+                </u-form-item>
+                <u-form-item label="新密码" borderBottom>
+                    <u-input
+                        class="flex-1"
+                        type="password"
+                        v-model="formData.password"
+                        placeholder="6-20位数字+字母或符号组合"
+                        :border="false"
+                    />
+                </u-form-item>
+                <u-form-item label="确认密码" borderBottom>
+                    <u-input
+                        class="flex-1"
+                        type="password"
+                        v-model="formData.password2"
+                        placeholder="再次输入新密码"
+                        :border="false"
+                    />
+                </u-form-item>
+            </u-form>
+            <view class="mt-[100rpx]">
+                <u-button type="primary" shape="circle" @click="handleConfirm"> 确定 </u-button>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { forgotPassword } from '@/api/account'
+import { smsSend } from '@/api/app'
+import { SMSEnum } from '@/enums/appEnums'
+import { reactive, ref, shallowRef } from 'vue'
+
+const uCodeRef = shallowRef()
+const codeTips = ref('')
+const formData = reactive({
+    mobile: '',
+    code: '',
+    password: '',
+    password2: ''
+})
+
+const codeChange = (text: string) => {
+    codeTips.value = text
+}
+
+const sendSms = async () => {
+    if (!formData.mobile) return uni.$u.toast('请输入手机号码')
+    if (uCodeRef.value?.canGetCode) {
+        await smsSend({
+            scene: SMSEnum.FIND_PASSWORD,
+            mobile: formData.mobile
+        })
+        uni.$u.toast('发送成功')
+        uCodeRef.value?.start()
+    }
+}
+
+const handleConfirm = async () => {
+    if (!formData.mobile) return uni.$u.toast('请输入手机号码')
+    if (!formData.password) return uni.$u.toast('请输入密码')
+    if (!formData.password2) return uni.$u.toast('请输入确认密码')
+    if (formData.password != formData.password2) return uni.$u.toast('两次输入的密码不一致')
+    await forgotPassword(formData)
+    uni.$u.toast('操作成功')
+    uni.navigateBack()
+}
+</script>
+
+<style lang="scss">
+page {
+    height: 100%;
+}
+</style>

app/src/pages/login/login.vue

@@ -31,11 +31,13 @@
                             placeholder="请输入密码"
                             :border="false"
                         />
-                        <view
+                        <navigator url="/pages/forget_pwd/forget_pwd" hover-class="none">
-                            class="border-l border-solid border-0 border-light pl-3 text-muted leading-4 ml-3"
+                            <view
-                        >
+                                class="border-l border-solid border-0 border-light pl-3 text-muted leading-4 ml-3"
-                            忘记密码？
+                            >
-                        </view>
+                                忘记密码？
+                            </view>
+                        </navigator>
                     </u-form-item>
                 </template>
                 <template v-if="scene == LoginTypeEnum.MOBILE">
@@ -79,8 +81,10 @@
                 <u-checkbox v-model="isCheckAgreement" shape="circle">
                     <view class="text-xs flex">
                         已阅读并同意
-                        <navigator class="text-primary">《服务协议》</navigator>
+                        <navigator class="text-primary" hover-class="none">《服务协议》</navigator>
-                        和<navigator class="text-primary">《隐私协议》</navigator>
+                        和<navigator class="text-primary" hover-class="none">
+                            《隐私协议》
+                        </navigator>
                     </view>
                 </u-checkbox>
             </view>
@@ -97,8 +101,9 @@
                 <view v-if="scene == LoginTypeEnum.ACCOUNT" @click="scene = LoginTypeEnum.MOBILE">
                     短信验证码登录
                 </view>
-                <navigator url="/pages/register/register">注册账号</navigator>
+                <navigator url="/pages/register/register" hover-class="none">注册账号</navigator>
             </view>
+            <!-- #ifdef MP-WEIXIN -->
             <view class="mt-[80rpx]">
                 <u-divider>第三方登录</u-divider>
                 <div class="flex justify-center mt-[40rpx]">
@@ -108,6 +113,7 @@
                     </div>
                 </div>
             </view>
+            <!-- #endif -->
         </view>
     </view>
 </template>

app/src/pages/register/register.vue

@@ -66,7 +66,7 @@ const accountRegister = async () => {
     if (!accountData.password2) return uni.$u.toast('请输入确认密码')
     if (accountData.password != accountData.password2) return uni.$u.toast('两次输入的密码不一致')
     await register(accountData)
-    uni.$u.toast('组册成功')
+    uni.$u.toast('注册成功')
     uni.navigateBack()
 }
 </script>

app/src/utils/request/index.ts

@@ -3,6 +3,7 @@ import { merge } from 'lodash-es'
 import { HttpRequestOptions, RequestHooks } from './type'
 import { getToken } from '../auth'
 import { RequestCodeEnum } from '@/enums/requestEnums'
+import { useUserStore } from '@/stores/user'
 
 const requestHooks: RequestHooks = {
     requestInterceptorsHook(options, config) {
@@ -32,7 +33,7 @@ const requestHooks: RequestHooks = {
         if (!isTransformResponse) {
             return response.data
         }
-        console.log(response.data)
+        const { logout } = useUserStore()
         const { code, data, msg } = response.data as any
         switch (code) {
             case RequestCodeEnum.SUCCESS:
@@ -52,6 +53,10 @@ const requestHooks: RequestHooks = {
 
             case RequestCodeEnum.TOKEN_INVALID:
             case RequestCodeEnum.TOKEN_EMPTY:
+                logout()
+                uni.navigateTo({
+                    url: '/pages/login/login'
+                })
                 return Promise.reject()
 
             default:

app/src/utils/util.ts

@@ -4,20 +4,22 @@
  * @param  { Boolean } all 是否多选
  * @param  { ctx } context 当前组件实例
  */
-export const getRect = (selector: string, all: boolean = false, context?: any) => {
+export const getRect = (selector: string, all = false, context?: any) => {
     return new Promise((resolve, reject) => {
         let qurey = uni.createSelectorQuery()
         if (context) {
             qurey = uni.createSelectorQuery().in(context)
         }
-        qurey[all ? 'selectAll' : 'select'](selector).boundingClientRect(function(rect) {
+        qurey[all ? 'selectAll' : 'select'](selector)
-            if (all && Array.isArray(rect) && rect.length) {
+            .boundingClientRect(function (rect) {
-                return resolve(rect)
+                if (all && Array.isArray(rect) && rect.length) {
-            }
+                    return resolve(rect)
-            if (!all && rect) {
+                }
-                return resolve(rect)
+                if (!all && rect) {
-            }
+                    return resolve(rect)
-            reject('找不到元素')
+                }
-        }).exec()
+                reject('找不到元素')
+            })
+            .exec()
     })
-}
+}