微信小程序 ---- 慕尚花坊 订单列表
订单列表
本章节为课堂作业
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()}
})