feat: ✨ 封装 http 模型；页面命名统一为文件夹名

src/pages.json

@@ -23,23 +23,29 @@
       }
     },
     {
-      "path": "pages/category/index",
+      "path": "pages/category/category",
       "style": {
         "navigationBarTitleText": "分类"
       }
     },
     {
-      "path": "pages/cart/index",
+      "path": "pages/cart/cart",
       "style": {
         "navigationBarTitleText": "购物车"
       }
     },
     {
-      "path": "pages/my/index",
+      "path": "pages/my/my",
       "style": {
         "navigationStyle": "custom",
         "navigationBarTitleText": "我的"
       }
+    },
+    {
+      "path": "pages/login/login",
+      "style": {
+        "navigationBarTitleText": "登录"
+      }
     }
   ],
   // 全局样式
@@ -66,19 +72,19 @@
       },
       {
         "text": "分类",
-        "pagePath": "pages/category/index",
+        "pagePath": "pages/category/category",
         "iconPath": "static/tabs/category_default.png",
         "selectedIconPath": "static/tabs/category_selected.png"
       },
       {
         "text": "购物车",
-        "pagePath": "pages/cart/index",
+        "pagePath": "pages/cart/cart",
         "iconPath": "static/tabs/cart_default.png",
         "selectedIconPath": "static/tabs/cart_selected.png"
       },
       {
         "text": "我的",
-        "pagePath": "pages/my/index",
+        "pagePath": "pages/my/my",
         "iconPath": "static/tabs/user_default.png",
         "selectedIconPath": "static/tabs/user_selected.png"
       }

src/pages/login/login.vue

@@ -0,0 +1,7 @@
+<template>
+  <view class="login">login</view>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss"></style>

src/pages/my/index.vue

@@ -1,7 +0,0 @@
-<template>
-  <view class="">我的</view>
-</template>
-
-<script setup lang="ts"></script>
-
-<style lang="scss"></style>

src/pages/my/my.vue

@@ -0,0 +1,47 @@
+<template>
+  <view class="content">
+    <view class="info"> 会员信息: {{ memberStore.profile }} </view>
+    <button @tap="handleLogin">登录</button>
+    <button @tap="handleLogout">退出登录</button>
+    <button @tap="handleTestHttp">http测试</button>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { useMemberStore } from '@/stores/modules/member'
+import { http } from '@/utils/http'
+
+const memberStore = useMemberStore()
+
+const handleLogin = () => {
+  memberStore.setProfile({
+    id: 1,
+    avatar: 'https://www.baidu.com',
+    nickname: '张三',
+    account: '11111111111',
+    mobile: '11111111111',
+    token: '11111111111',
+  })
+}
+
+const handleLogout = () => {
+  memberStore.clearProfile()
+}
+
+interface BannerItem {
+  id: string
+  imgUrl: string
+  title: string
+  hrefUrl: string
+}
+
+const handleTestHttp = async () => {
+  const res = await http<BannerItem[]>({
+    url: '/member/profile',
+    method: 'GET',
+  })
+  console.log(res)
+}
+</script>
+
+<style lang="scss"></style>

src/utils/http.ts

@@ -37,3 +37,61 @@ const interceptorOptions = {
 
 uni.addInterceptor('request', interceptorOptions)
 uni.addInterceptor('uploadFile', interceptorOptions)
+
+/**
+ * 请求函数
+ * @param  UniApp.RequestOptions
+ * @returns Promise
+ *  1. 返回 Promise 对象
+ *  2. 获取数据成功
+ *    2.1 提取核心数据 res.data
+ *    2.2 添加类型，支持泛型
+ *  3. 获取数据失败
+ *    3.1 401错误  -> 清理用户信息，跳转到登录页
+ *    3.2 其他错误 -> 根据后端错误信息轻提示
+ *    3.3 网络错误 -> 提示用户换网络
+ */
+interface Data<T> {
+  code: number
+  msg: string
+  result: T
+}
+
+export const http = <T>(options: UniApp.RequestOptions) => {
+  return new Promise<Data<T>>((resolve, reject) => {
+    uni.request({
+      ...options,
+      // 1. 响应成功
+      success: (res) => {
+        if (res.statusCode >= 200 && res.statusCode < 300) {
+          // 2xx 成功, 提取核心数据 res.data
+          resolve(res.data as Data<T>)
+          return
+        }
+        if (res.statusCode === 401) {
+          // 401错误  -> 清理用户信息，跳转到登录页
+          useMemberStore().clearProfile()
+          uni.navigateTo({
+            url: '/pages/login/login',
+          })
+          reject(res.data as Data<T>)
+          return
+        }
+        // 其他错误 -> 根据后端错误信息轻提示
+        uni.showToast({
+          title: (res.data as Data<T>).msg || '请求失败',
+          icon: 'none',
+        })
+        reject(res.data as Data<T>)
+      },
+      // 2. 响应失败
+      fail: (err) => {
+        reject(err.errMsg)
+        uni.showToast({
+          title: '网络错误，请稍后再试',
+          icon: 'none',
+        })
+      },
+    })
+  })
+}