文章目录

• • 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

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

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

10-订单管理-条件查询

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

大致步骤：

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

落地代码：

1.tab切换加载数据

    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 })

    

+      

+      
暂无数据

.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 })

     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,}