Vue3电商项目实战-个人中心模块4【09-订单管理-列表渲染、10-订单管理-条件查询】

---

09-订单管理-列表渲染

目的：完成订单列表默认渲染。

大致步骤：

• 定义API接口函数
• 抽取单条订单组件
• 获取数据进行渲染

落的代码：

1.获取订单列表API借口

/*** 查询订单列表* @param {Number} orderState - 订单状态，1为待付款、2为待发货、3为待收货、4为待评价、5为已完成、6为已取消，未传该参数或0为全部* @param {Number} page - 页码* @param {Number} pageSize - 每页条数* @returns*/
export const findOrderList = ({ orderState, page, pageSize }) => {return request('/member/order', 'get', { orderState, page, pageSize })
}

2.组件初始化获取订单信息

import { reactive, ref } from 'vue'
import { findOrderList } from '@/api/order'

    // 查询订单参数const requestParams = reactive({page: 1,pageSize: 5,orderState: 0})// 订单列表const orderList = ref([])// 查询订单findOrderList(requestParams).then(data => {orderList.value = data.result.items})return { activeName, tabClick, orderTabs, orderList }

3.渲染列表
提取order-item组件 order/components/order-item.vue

<template><div class="order-item"><div class="head"><span>下单时间：{{order.createTime}}</span><span>订单编号：{{order.id}}</span><!-- 未付款，倒计时时间还有 --><span class="down-time" v-if="order.orderState===1"><i class="iconfont icon-down-time"></i><b>付款截止：{{countdownText}}</b></span><!-- 已完成 已取消 --><a v-if="[5,6].includes(order.orederState)" href="javascript:;" class="del">删除</a></div><div class="body"><div class="column goods"><ul><li v-for="goods in order.skus" :key="goods.id"><a class="image" href="javascript:;"><img :src="goods.image" alt="" /></a><div class="info"><p class="name ellipsis-2">{{goods.name}}</p><p class="attr ellipsis">{{goods.attrsText}}</p></div><div class="price">¥{{goods.realPay}}</div><div class="count">x{{goods.quantity}}</div></li></ul></div><div class="column state"><p>{{orderStatus[order.orderState].label}}</p><!-- 待收货：查看物流 --><!-- 待评价：评价商品 --><!-- 已完成：查看评价 --><p v-if="order.orderState===3"><a href="javascript:;" class="green">查看物流</a></p><p v-if="order.orderState===4"><a href="javascript:;" class="green">评价商品</a></p><p v-if="order.orderState===5"><a href="javascript:;" class="green">查看评价</a></p></div><div class="column amount"><p class="red">¥{{order.payMoney}}</p><p>（含运费：¥{{order.postFee}}）</p><p>在线支付</p></div><div class="column action"><!-- 待支付：立即付款，查看详情，取消订单 --><!-- 待发货：查看详情，再次购买 --><!-- 待收货：确认收货，查看详情，再次购买 --><!-- 待评价：查看详情，再次购买，申请售后 --><!-- 已完成：查看详情，再次购买，申请售后 --><!-- 已取消：查看详情 --><XtxButton v-if="order.orderState===1" type="primary" size="small">立即付款</XtxButton><XtxButton v-if="order.orderState===3" type="primary" size="small">确认收货</XtxButton><p><a href="javascript:;">查看详情</a></p><p v-if="order.orderState===1"><a href="javascript:;">取消订单</a></p><p v-if="[2,3,4,5].includes(order.orderState)"><a href="javascript:;">再次购买</a></p><p v-if="[4,5].includes(order.orderState)"><a href="javascript:;">申请售后</a></p></div></div></div>
</template>
<script>
import { orderStatus } from '@/api/constants'
import { ref } from 'vue'
import { usePayTime } from '@/hooks'
export default {name: 'OrderItem',props: {order: {type: Object,default: () => ({})}},setup (props) {const { start, timeText } = usePayTime()start(props.order.countdown)return { orderStatus, timeText }}
}
</script>
<style scoped lang="less">
.order-item {margin-bottom: 20px;border: 1px solid #f5f5f5;.head {height: 50px;line-height: 50px;background: #f5f5f5;padding: 0 20px;overflow: hidden;span {margin-right: 20px;&.down-time {margin-right: 0;float: right;i {vertical-align: middle;margin-right: 3px;}b {vertical-align: middle;font-weight: normal;}}}.del {margin-right: 0;float: right;color: #999;}}.body {display: flex;align-items: stretch;.column {border-left: 1px solid #f5f5f5;text-align: center;padding: 20px;> p {padding-top: 10px;}&:first-child {border-left: none;}&.goods {flex: 1;padding: 0;align-self: center;ul {li {border-bottom: 1px solid #f5f5f5;padding: 10px;display: flex;&:last-child {border-bottom: none;}.image {width: 70px;height: 70px;border: 1px solid #f5f5f5;}.info {width: 220px;text-align: left;padding: 0 10px;p {margin-bottom: 5px;&.name {height: 38px;}&.attr {color: #999;font-size: 12px;span {margin-right: 5px;}}}}.price {width: 100px;}.count {width: 80px;}}}}&.state {width: 120px;.green {color: @xtxColor;}}&.amount {width: 200px;.red {color: @priceColor;}}&.action {width: 140px;a {display: block;&:hover {color: @xtxColor;}}}}}
}
</style>

使用order-item组件 order/index.vue

+import OrderItem from './components/order-item'
export default {name: 'MemberOrder',
+  components: { OrderItem },

    <div class="order-list"><OrderItem v-for="item in orderList" :key="item.id" :order="item" /></div><div v-else class="loading"></div>

<style scoped lang="less">
.order-list {padding: 20px;
}
</style>

10-订单管理-条件查询

目的：根据状态切换，页码切换，加载数据。

大致步骤：

• 完成tab切换加载
• 完成加载中，无数据处理
• 完成分页加载

落地代码：

1.tab切换加载数据

    <!-- tabs组件 --><XtxTabs v-model="activeName" @tab-click="tabClick">

    const tabClick = (tab) => {// 此时：tab.index 就是订单的状态requestParams.orderState = tab.indexrequestParams.page = 1}

    const orderList = ref([])watch(requestParams, () => {findOrderList(requestParams).then(data => {orderList.value = data.result.items})}, { immediate: true })

2.加载状态，暂无数据

    // 订单列表const orderList = ref([])const total = ref(0)
+    const loading = ref(true)// 初始化后，查询条件更改后，查询。watch(requestParams, () => {
+      loading.value = truefindOrderList(requestParams).then(data => {orderList.value = data.result.items
+        loading.value = false})}, { immediate: true })

    <div class="order-list">
+      <div v-if="loading" class="loading"></div>
+      <div class="none" v-if="!loading && orderList.length === 0">暂无数据</div><OrderItem v-for="item in orderList" :key="item.id" :order="item" /></div>

.order-list {padding: 20px;position: relative;min-height: 400px;
}
.loading {height: 100%;width: 100%;position: absolute;left: 0;top: 0;background: rgba(255,255,255,.9) url(../../../assets/images/loading.gif) no-repeat center;
}
.none {height: 400px;text-align: center;line-height: 400px;color: #999;
}

3.分页实现

    // 订单列表const orderList = ref([])
+    const total = ref(0)const loading = ref(true)// 初始化后，查询条件更改后，查询。watch(requestParams, () => {loading.value = truefindOrderList(findOrderList).then(data => {orderList.value = data.result.items
+        total.value = data.result.countsloading.value = false})}, { immediate: true })

    <XtxPaginationv-if="total > requestParams.pageSize"@current-change="requestParams.page=$event":total="total":page-size="requestParams.pageSize":current-page="requestParams.page"  />

4.返回的数据给模版使用

  return {activeName,orderStatus,tabClick,requestParams,orderList,loading,total,changePager,}