feat: ✨ 封装 http 模型;页面命名统一为文件夹名
This commit is contained in:
parent
a9184c643c
commit
22e11eb542
@ -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"
|
||||
}
|
||||
|
7
src/pages/login/login.vue
Normal file
7
src/pages/login/login.vue
Normal file
@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<view class="login">login</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup></script>
|
||||
|
||||
<style lang="scss"></style>
|
@ -1,7 +0,0 @@
|
||||
<template>
|
||||
<view class="">我的</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style lang="scss"></style>
|
47
src/pages/my/my.vue
Normal file
47
src/pages/my/my.vue
Normal file
@ -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>
|
@ -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',
|
||||
})
|
||||
},
|
||||
})
|
||||
})
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user