feat: 路由管理

.vscode/settings.json

@@ -44,7 +44,6 @@
     "refresherrefresh",
     "scrolltolower",
     "tabbar",
-    "unibest",
     "uvui",
     "WechatMiniprogram"
   ],

index.html

@@ -14,7 +14,7 @@
           '" />',
       )
     </script>
-    <title>unibest</title>
+    <title></title>
     <!--preload-links-->
     <!--app-context-->
   </head>

pages.config.ts

@@ -3,7 +3,7 @@ import { defineUniPages } from '@uni-helper/vite-plugin-uni-pages'
 export default defineUniPages({
   globalStyle: {
     navigationStyle: 'default',
-    navigationBarTitleText: 'unibest',
+    navigationBarTitleText: '',
     navigationBarBackgroundColor: '#f8f8f8',
     navigationBarTextStyle: 'black',
     backgroundColor: '#FFFFFF',

src/App.vue

@@ -1,20 +1,37 @@
 <script setup lang="ts">
 import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'
+import { useUserStore } from './store'
+import { checkWithRedirectLogin, loginRoute } from './interceptors/route'
 
-onLaunch(() => {
+onLaunch((options) => {
-  console.log('App Launch')
+  if (checkWithRedirectLogin(options.path)) {
+    uni.reLaunch({
+      url: loginRoute,
+      query: {
+        redirect: options.path,
+      },
+    })
+  }
 })
-onShow(() => {
+
-  console.log('App Show')
+onPageNotFound(() => {
+  console.log(1)
+  uni.reLaunch({
+    url: '/',
+  })
 })
+
 onHide(() => {
   console.log('App Hide')
 })
+
+const userStore = useUserStore()
 </script>
 
 <style lang="scss">
 /* 覆盖 uniapp 自带rpx效果 */
 html {
+  font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 16px !important;
 }
 /* stylelint-disable-next-line selector-type-no-unknown */
@@ -72,4 +89,42 @@ image {
 view {
   box-sizing: border-box;
 }
+
+uni-modal {
+  .uni-modal {
+    @apply max-w-345 rounded-16;
+  }
+
+  .uni-modal__hd {
+    @apply p-0;
+  }
+
+  .uni-modal__title {
+    @apply p-16 text-left text-16 font-600;
+  }
+
+  .uni-modal__bd {
+    @apply mb-16 px-16 pt-0 text-left text-14 font-medium text-#666;
+  }
+
+  .uni-modal__btn {
+    @apply px-16 py-8 flex-none rounded-full shadow-none text-14;
+
+    &::after {
+      content: none;
+    }
+
+    &.uni-modal__btn_primary {
+      @apply ml-8 bg-gray-200 !text-black;
+    }
+  }
+
+  .uni-modal__ft {
+    @apply justify-end p-16 leading-normal;
+
+    &::after {
+      content: none;
+    }
+  }
+}
 </style>

src/interceptors/index.ts

@@ -1,3 +1,3 @@
-export { routeInterceptor } from './route'
+export { routerBeforeEachConfig } from './route'
 export { requestInterceptor } from './request'
 export { prototypeInterceptor } from './prototype'

src/interceptors/route.ts

@@ -5,10 +5,13 @@
  * 我这里应为大部分都可以随便进入，所以使用黑名单
  */
 import { useUserStore } from '@/store'
-import { getNeedLoginPages, needLoginPages as _needLoginPages } from '@/utils'
+import {
+  getNotNeedLoginPages as _getNotNeedLoginPages,
+  notNeedLoginPages as _notNeedLoginPages,
+} from '@/utils'
+import type { Router } from 'vue-router'
 
-// TODO Check
+export const loginRoute = '/pages/login/index'
-const loginRoute = '/pages/login/index'
 
 const isLogged = () => {
   const userStore = useUserStore()
@@ -23,14 +26,14 @@ const navigateToInterceptor = {
   invoke({ url }: { url: string }) {
     // console.log(url) // /pages/route-interceptor/index?name=feige&age=30
     const path = url.split('?')[0]
-    let needLoginPages: string[] = []
+    let notNeedLoginPages: string[] = []
     // 为了防止开发时出现BUG，这里每次都获取一下。生产环境可以移到函数外，性能更好
     if (isDev) {
-      needLoginPages = getNeedLoginPages()
+      notNeedLoginPages = getNotNeedLoginPages()
     } else {
-      needLoginPages = _needLoginPages
+      notNeedLoginPages = _notNeedLoginPages
     }
-    const isNeedLogin = needLoginPages.includes(path)
+    const isNeedLogin = notNeedLoginPages.includes(path)
     if (!isNeedLogin) {
       return true
     }
@@ -51,3 +54,49 @@ export const routeInterceptor = {
     uni.addInterceptor('redirectTo', navigateToInterceptor)
   },
 }
+
+export const getNotNeedLoginPages = () => {
+  let notNeedLoginPages: string[] = []
+  if (isDev) {
+    notNeedLoginPages = _getNotNeedLoginPages()
+  } else {
+    notNeedLoginPages = _notNeedLoginPages
+  }
+  return notNeedLoginPages
+}
+
+export const checkLoginUrl = (url: string) => {
+  const path = url.split('?')[0]
+  const isNotNeedLogin = getNotNeedLoginPages().includes(path)
+  return isNotNeedLogin
+}
+
+export const checkWithRedirectLogin = (url: string) => {
+  const isNotNeedLogin = checkLoginUrl(url)
+  if (!isNotNeedLogin) {
+    return !isLogged()
+  }
+  return false
+}
+
+export const checkNotFound = (url: string) => {
+  const isNotNeedLogin = checkLoginUrl(url)
+  if (!isNotNeedLogin) {
+    return !isLogged()
+  }
+  return false
+}
+
+export const routerBeforeEachConfig = (router: Router) => {
+  router.beforeEach((to, from, next) => {
+    if (checkWithRedirectLogin(to.path)) {
+      return next({
+        path: loginRoute,
+        query: {
+          redirect: to.fullPath,
+        },
+      })
+    }
+    return next()
+  })
+}

src/main.ts

@@ -1,16 +1,22 @@
 import { createSSRApp } from 'vue'
 import App from './App.vue'
 import store from './store'
-import { routeInterceptor, requestInterceptor, prototypeInterceptor } from './interceptors'
+import { requestInterceptor, prototypeInterceptor, routerBeforeEachConfig } from './interceptors'
 import 'virtual:uno.css'
 import '@/style/index.scss'
 
 export function createApp() {
   const app = createSSRApp(App)
+
   app.use(store)
-  app.use(routeInterceptor)
+  // app.use(routeInterceptor)
   app.use(requestInterceptor)
   app.use(prototypeInterceptor)
+
+  setTimeout(() => {
+    routerBeforeEachConfig((app as any).router)
+  }, 0)
+
   return {
     app,
   }

src/pages-sub/demo/index.vue

@@ -1,6 +1,5 @@
 <route lang="json5" type="page">
 {
-  needLogin: true,
   style: { navigationBarTitleText: '分包页面 标题' },
 }
 </route>

src/pages.json

@@ -1,7 +1,7 @@
 {
   "globalStyle": {
     "navigationStyle": "default",
-    "navigationBarTitleText": "unibest",
+    "navigationBarTitleText": "",
     "navigationBarBackgroundColor": "#f8f8f8",
     "navigationBarTextStyle": "black",
     "backgroundColor": "#FFFFFF"
@@ -50,14 +50,6 @@
     ]
   },
   "pages": [
-    {
-      "path": "pages/login/index",
-      "type": "home",
-      "style": {
-        "navigationBarTitleText": "登录",
-        "navigationStyle": "custom"
-      }
-    },
     {
       "path": "pages/invest/index",
       "type": "home",
@@ -82,6 +74,15 @@
         "navigationBarTitleText": "房屋"
       }
     },
+    {
+      "path": "pages/login/index",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "登录",
+        "navigationStyle": "custom"
+      },
+      "notNeedLogin": false
+    },
     {
       "path": "pages/my/index",
       "type": "page",
@@ -98,7 +99,6 @@
         {
           "path": "demo/index",
           "type": "page",
-          "needLogin": true,
           "style": {
             "navigationBarTitleText": "分包页面 标题"
           }

src/pages/login/index.vue

@@ -1,9 +1,10 @@
-<route lang="json5" type="home">
+<route lang="json5">
 {
   style: {
     navigationBarTitleText: '登录',
     navigationStyle: 'custom',
   },
+  notNeedLogin: false,
 }
 </route>
 <template>
@@ -39,6 +40,7 @@
       <view class="ml-auto mr-0 w-fit text-#04A9F9 text-14 p-15">忘记密码</view>
       <view
         class="mt-30 text-center py-12 rounded-full mx-15 text-15 text-white bg-[linear-gradient(45deg,rgba(59,129,243,0.5),rgba(55,230,236,0.51))]"
+        @click="handleLogin"
       >
         登录
       </view>
@@ -53,6 +55,23 @@
 
 <script lang="ts" setup>
 import NavBar from '@/components/NavBar.vue'
+import { useUserStore } from '@/store/user'
+
+const userStore = useUserStore()
+
+let redirect = '/'
+onLoad((options) => {
+  redirect = options.redirect ?? '/'
+})
+
+const handleLogin = () => {
+  userStore.setUserInfo({
+    token: '123456',
+  })
+  uni.reLaunch({
+    url: redirect,
+  })
+}
 </script>
 
 <style lang="scss">

src/pages/my/index.vue

@@ -84,6 +84,7 @@
 
     <view
       class="mt-50 mx-auto w-294 bg-[linear-gradient(45deg,#3B81F3,#37E6EC)] rounded-full text-center text-14 text-white py-15 mt-15"
+      @click="handleLogout"
     >
       退出登录
     </view>
@@ -93,6 +94,17 @@
 <script lang="ts" setup>
 import Avatar from '@/components/Avatar.vue'
 import NavBar from '@/components/NavBar.vue'
+import { loginRoute } from '@/interceptors/route'
+import { useUserStore } from '@/store/user'
+
+const userStore = useUserStore()
+
+const handleLogout = () => {
+  userStore.clearUserInfo()
+  uni.reLaunch({
+    url: loginRoute,
+  })
+}
 </script>
 
 <style lang="scss" scoped>

src/store/user.ts

@@ -15,10 +15,7 @@ export const useUserStore = defineStore(
     const clearUserInfo = () => {
       userInfo.value = { ...initState }
     }
-    // 一般没有reset需求，不需要的可以删除
+
-    const reset = () => {
-      userInfo.value = { ...initState }
-    }
     const isLogged = computed(() => !!userInfo.value.token)
 
     return {
@@ -26,7 +23,6 @@ export const useUserStore = defineStore(
       setUserInfo,
       clearUserInfo,
       isLogged,
-      reset,
     }
   },
   {

src/types/uni-pages.d.ts

@@ -4,10 +4,10 @@
 // Generated by vite-plugin-uni-pages
 
 interface NavigateToOptions {
-  url: "/pages/login/index" |
+  url: "/pages/invest/index" |
-       "/pages/invest/index" |
        "/pages/index/index" |
        "/pages/house/index" |
+       "/pages/login/index" |
        "/pages/my/index" |
        "/pages-sub/demo/index";
 }

src/utils/index.ts

@@ -74,14 +74,17 @@ export const getUrlObj = (url: string) => {
 }
 /**
  * 得到所有的需要登录的pages，包括主包和分包的
- * 这里设计得通用一点，可以传递key作为判断依据，默认是 needLogin, 与 route-block 配对使用
+ * 这里设计得通用一点，可以传递key作为判断依据，默认是 notNeedLogin, 与 route-block 配对使用
  * 如果没有传 key，则表示所有的pages，如果传递了 key, 则表示通过 key 过滤
  */
-export const getAllPages = (key = 'needLogin') => {
+export const getAllPages = (key = 'notNeedLogin') => {
   // 这里处理主包
   const mainPages = [
     ...pages
-      .filter((page) => !key || page[key])
+      .filter((page) => {
+        if (!key) return false
+        return page[key] === false
+      })
       .map((page) => ({
         ...page,
         path: `/${page.path}`,
@@ -103,7 +106,6 @@ export const getAllPages = (key = 'needLogin') => {
       })
   })
   const result = [...mainPages, ...subPages]
-  console.log(subPackages)
   // console.log(`getAllPages by ${key} result: `, result)
   return result
 }
@@ -112,13 +114,14 @@ export const getAllPages = (key = 'needLogin') => {
  * 得到所有的需要登录的pages，包括主包和分包的
  * 只得到 path 数组
  */
-export const getNeedLoginPages = (): string[] => getAllPages('needLogin').map((page) => page.path)
+export const getNotNeedLoginPages = (): string[] =>
+  getAllPages('notNeedLogin').map((page) => page.path)
 
 /**
  * 得到所有的需要登录的pages，包括主包和分包的
  * 只得到 path 数组
  */
-export const needLoginPages: string[] = getAllPages('needLogin').map((page) => page.path)
+export const notNeedLoginPages: string[] = getAllPages('notNeedLogin').map((page) => page.path)
 
 /**
  * 根据微信小程序当前环境，判断应该获取的BaseUrl
@@ -177,3 +180,30 @@ export const getEnvBaseUploadUrl = () => {
 
   return baseUploadUrl
 }
+
+export function mergeStep(wrapped: (...rest: any[]) => Promise<any>) {
+  let _mergeStepRequestInstance: any = null
+  return async function (...args) {
+    if (this?._mergeStepRequestInstance ?? _mergeStepRequestInstance)
+      return this?._mergeStepRequestInstance ?? _mergeStepRequestInstance
+    if (this) {
+      this._mergeStepRequestInstance = wrapped.apply(this, args)
+    } else {
+      _mergeStepRequestInstance = wrapped(...args)
+    }
+    if (
+      Object.prototype.toString.call(
+        this?._mergeStepRequestInstance ?? _mergeStepRequestInstance,
+      ) === '[object Promise]'
+    ) {
+      ;(this?._mergeStepRequestInstance ?? _mergeStepRequestInstance).finally(() => {
+        if (this?._mergeStepRequestInstance) {
+          this._mergeStepRequestInstance = null
+        } else {
+          _mergeStepRequestInstance = null
+        }
+      })
+    }
+    return _mergeStepRequestInstance
+  }
+}

tsconfig.json

@@ -5,7 +5,7 @@
     "module": "ESNext",
     "moduleResolution": "Node",
     "resolveJsonModule": true,
-    "noImplicitThis": true,
+    "noImplicitThis": false,
     "allowSyntheticDefaultImports": true,
     "allowJs": true,
     "sourceMap": true,