vue3项目（十一）---会员中心

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>