微信小程序 ---- 慕尚花坊 订单列表

订单列表

本章节为课堂作业

01. 封装订单列表接口 API

思路分析：

为了方便后续进行商品管理模块的开发，我们在这一节将商品管理所有的接口封装成接口 API 函数

落地代码：

➡️ api/orderpay.js

/*** @description 获取订单列表* @returns Promise*/
export const reqOrderList = (page, limit) => {return http.get(`/order/order/${page}/${limit}`)
}

02. 获取订单列表数据并渲染

思路分析：

当用户从个人中心页面点击进入订单中心的时候，就需要获取到订单中心的数据。

在页面调用 API 函数获取订单列表的数据，

在获取到数据以后，使用后端返回的数据对页面进行渲染

落地代码：

➡️ modules/orderPayModule/pages/order/list/list.js

+ // 导入封装的接口 API 函数
+ import { reqOrderList } from '@/api/orderpay'Page({// 页面的初始数据data: {orderList: [1, 2, 3], // 订单列表
+     page: 1, // 页码
+     limit: 10, // 每页展示的条数
+     total: 0 // 订单列表总条数},+   // 获取订单列表
+   async getOrderList() {
+     // 解构获取数据
+     const { page, limit } = this.data
+     // 调用接口获取订单列表数据
+     const res = await reqOrderList(page, limit)
+ 
+     if (res.code === 200) {
+       this.setData({
+         orderList: res.data.records,
+         total: res.data.total
+       })
+     }
+   },+   // 生命周期函数--监听页面加载
+   onLoad() {
+     this.getOrderList()
+   }})

➡️ modules/orderPayModule/pages/order/list/list.wxml

<!--pages/order/list/index.wxml-->
<view class="order-container container">
+   <view class="order-list" wx:if="{{ orderList.length > 0 }}">
+     <view class="order-item" wx:for="{{ orderList }}" wx:key="index">
+       <view class="order-item-header list-flex"><view class="orderno">订单号<text class="no">{{ orderList.orderNo }}</text></view>
+         <view class="order-status {{ item.orderStatus === 1 ? 'order-active' : '' }}">
+           {{ item.orderStatus === 1 ? '已支付' : '未支付'}}
+         </view></view><viewclass="goods-item list-flex"
+         wx:for="{{ item.orderDetailList }}"
+         wx:key="id"
+         wx:for-item="goods"
+         wx:for-index="goodsIndex"><view class="left">
+           <image src="{{ goods.imageUrl }}" mode="widthFix" class="img" /></view><view class="mid">
+           <view class="goods-name">{{ goods.name }}</view>
+           <view class="goods-blessing">{{ goods.blessing }}</view></view><view class="right">
+           <view class="goods-price">¥{{ goods.price }}</view>
+           <view class="goods-count">x{{ goods.count }}</view></view></view><view class="order-item-footer"><view class="total-amount list-flex"><text class="text">实付</text>
+           <text class="price"><text>¥</text>{{ item.totalAmount }}</text></view></view></view></view><van-empty wx:else description="还没有购买商品，快去购买吧～" />
</view>

03. 订单列表上拉加载更多

思路分析：

当用户进行了上拉操作时，需要在 .js 文件中声明 onReachBottom 方法，用来监听页面的上拉触底行为

当用户上拉时，需要对 page 参数进行加 1 即可，

当参数发生改变后，需要重新发送请求，拿最新的 page 向服务器要数据

在下一页的商品数据返回以后，需要将下一页的数据和之前的数据进行合并

落地代码：

➡️ modules/orderPayModule/pages/order/list/list.js

// 导入封装的接口 API 函数
import { reqOrderList } from '@/api/orderpay'Page({// 页面的初始数据data: {orderList: [1, 2, 3], // 订单列表page: 1, // 页码limit: 10, // 每页展示的条数total: 0 // 订单列表总条数},// 获取订单列表async getOrderList() {// 解构获取数据const { page, limit } = this.data// 调用接口获取订单列表数据const res = await reqOrderList(page, limit)if (res.code === 200) {this.setData({
+         orderList: [...this.data.orderList, ...res.data.records],total: res.data.total})}},+   // 页面上拉触底事件的处理函数
+   onReachBottom() {
+     // 解构数据
+     const { page } = this.data
+ 
+     // 更新 page
+     this.setData({
+       page: page + 1
+     })
+ 
+     // 重新发送请求
+     this.getOrderList()
+   },// 生命周期函数--监听页面加载onLoad() {this.getOrderList()}
})

04. 判断数据是否加载完毕

思路分析：

如何判断数据是否加载完成 ❓

可以使用后端返回的 total 和 goodsList 进行对比，如果 total 大于 goodsList ，说明订单中心数据没有加载完，可以继续上拉加载更多。

目前还没有接收 total，需要先将后台返回的 total 进行赋值到 data 中，然后使用 onReachBottom 中进行判断

落地代码：

➡️ modules/orderPayModule/pages/order/list/list.js

// 页面上拉触底事件的处理函数
onReachBottom() {
+   // 解构数据
+   const { page, total, orderList } = this.data
+ 
+   // 数据总条数 和 订单列表长度进行对比
+   if (total === orderList.length) {
+     return wx.toast({ title: '数据加载完毕' })
+   }// 更新 pagethis.setData({page: page + 1})// 重新发送请求this.getOrderList()
}

05. 节流阀进行列表节流

在用户网速很慢的情况下，如果用户在距离底部来回的进行多次滑动，可能会发送一些无意义的请求、造成请求浪费的情况，因此需要给上拉加载添加节流功能。

我们使用节流阀来给订单列表添加节流功能。

在 data 中定义节流阀状态 isLoading，默认值是 false。

在请求发送之前，将 isLoading 设置为 true，表示请求正在发送。

在请求结束以后，将 isLoading 设置为 false，表示请求已经完成。

在 onReachBottom 事件监听函数中，对 isLoading 进行判断，如果数据正在请求中，不请求下一页的数据。

落地代码：

➡️ modules/orderPayModule/pages/order/list/list.js

// 导入封装的接口 API 函数
import { reqOrderList } from '@/api/orderpay'Page({// 页面的初始数据data: {orderList: [1, 2, 3], // 订单列表page: 1, // 页码limit: 10, // 每页展示的条数total: 0, // 订单列表总条数
+     isLoading: false // 判断数据是否记载完毕},// 获取订单列表async getOrderList() {// 解构获取数据const { page, limit } = this.data+     // 数据正在请求中
+     this.data.isLoading = true// 调用接口获取订单列表数据const res = await reqOrderList(page, limit)+     // 数据加载完毕
+     this.data.isLoading = falseif (res.code === 200) {this.setData({orderList: [...this.data.orderList, ...res.data.records],total: res.data.total})}},// 页面上拉触底事件的处理函数onReachBottom() {
+     // 解构数据
+     const { page, total, orderList, isLoading } = this.data+     // 判断是否加载完毕，如果 isLoading 等于 true
+     // 说明数据还没有加载完毕，不加载下一页数据
+     if (isLoading) return// 数据总条数 和 订单列表长度进行对比if (total === orderList.length) {return wx.toast({ title: '数据加载完毕' })}// 更新 pagethis.setData({page: page + 1})// 重新发送请求this.getOrderList()},// 生命周期函数--监听页面加载onLoad() {this.getOrderList()}
})