1.会员中心-整体功能梳理和路由配置
先在views下新建Member组件,表示会员中心组件。
UserInfo--->个人中心
UserOrder-->我的订单
注意这里会员中心的二级路由,个人中心和我的订单是三级路由。
2. 会员中心-个人中心信息渲染
//src/apis/user.js
export const getLikeListAPI = ({ limit = 4 }) => {
return request({
url:'/goods/relevant',
params: {
limit
}
})
}
//src/views/Member/components/UserInfo.vue
<script setup>
import {useUserStore} from '@/stores/userStore'
import {getLikeListAPI} from '@/apis/user'
import { onMounted, ref } from 'vue'
// 导入GoodsItem组件
import GoodsItem from '@/views/Home/components/GoodsItem.vue'
const userStore = useUserStore()
// 获取猜你喜欢列表
const likeList = ref([])
const getLikeList = async () => {
const res = await getLikeListAPI({ limit: 4 })
likeList.value = res.result
}
onMounted(() => getLikeList())
</script>
然后渲染数据即可。
3.会员中心-我的订单
订单基础列表渲染
基础三个步骤
//src/apis/order.js
import request from "@/utils/http";
export const getUserOrder = (params) => {
return request({
url:'/member/order',
method:'GET',
params
})
}
//src/views/Member/components/UserOrder.vue
<script setup>
import { getUserOrder } from '@/apis/order'
import { onMounted, ref } from 'vue'
// 获取订单列表
const orderList = ref([])
const params = ref({
orderState: 0,
page: 1,
pageSize: 2
})
const getOrderList = async () => {
const res = await getUserOrder(params.value)
orderList.value = res.result.items
}
onMounted(() => getOrderList())
</script>
然后渲染
tab切换实现
重点:切换tab时修改 orderState 参数,再次发起请求获取订单列表数据
//src/views/Member/components/UserOrder.vue
<script setup>
// tab列表
const tabTypes = [
{ name: "all", label: "全部订单" },
{ name: "unpay", label: "待付款" },
{ name: "deliver", label: "待发货" },
{ name: "receive", label: "待收货" },
{ name: "comment", label: "待评价" },
{ name: "complete", label: "已完成" },
{ name: "cancel", label: "已取消" }
]
// tab切换
const tabChange = (type) => {
params.value.orderState = type
getOrderList()
}
</script>
<template>
<el-tabs @tab-change="tabChange">
<!-- 省略... -->
</el-tabs>
</template>
分页逻辑实现
//src/views/Member/components/UserOrder.vue
<script setup>
// 补充总条数
const total = ref(0)
const getOrderList = async () => {
const res = await getUserOrder(params.value)
// 存入总条数
total.value = res.result.counts
}
// 页数切换
const pageChange = (page) => {
params.value.page = page
getOrderList()
}
</script>
<template>
<el-pagination
:total="total"
@current-change="pageChange"
:page-size="params.pageSize"
background
layout="prev, pager, next" />
</template>
4.会员中心-细节优化
默认三级路由设置
效果:当路由path为二级路由路径member的时候,右侧可以显示个人中心三级路由对应的组件
//src/router/index.js
{
path: 'member',
component: Member,
children: [
{
path: '', // 置空path,表示默认页面
component: UserInfo
},
{
path: 'order',
component: UserOrder
}
]
}
订单状态显示适配
思路:根据接口文档给到的状态码和中文的对应关系进行适配
//src/views/Member/components/UserOrder.vue
<script setup>
// 创建格式化函数
const fomartPayState = (payState) => {
const stateMap = {
1: '待付款',
2: '待发货',
3: '待收货',
4: '待评价',
5: '已完成',
6: '已取消'
}
return stateMap[payState]
}
</script>
<template>
<!-- 调用函数适配显示 -->
<p>{{ fomartPayState(order.orderState)}}</p>
</template>