订单列表
本章节为课堂作业
01. 封装订单列表接口 API
思路分析:
为了方便后续进行商品管理模块的开发,我们在这一节将商品管理所有的接口封装成接口 API 函数
落地代码:
➡️ api/orderpay.js
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
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
html
<!--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>
<view
class="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
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
js
// 页面上拉触底事件的处理函数
onReachBottom() {
+ // 解构数据
+ const { page, total, orderList } = this.data
+
+ // 数据总条数 和 订单列表长度进行对比
+ if (total === orderList.length) {
+ return wx.toast({ title: '数据加载完毕' })
+ }
// 更新 page
this.setData({
page: page + 1
})
// 重新发送请求
this.getOrderList()
}
05. 节流阀进行列表节流
在用户网速很慢的情况下,如果用户在距离底部来回的进行多次滑动,可能会发送一些无意义的请求、造成请求浪费的情况,因此需要给上拉加载添加节流功能。
我们使用节流阀来给订单列表添加节流功能。
在 data
中定义节流阀状态 isLoading
,默认值是 false
。
在请求发送之前,将 isLoading
设置为 true
,表示请求正在发送。
在请求结束以后,将 isLoading
设置为 false
,表示请求已经完成。
在 onReachBottom
事件监听函数中,对 isLoading
进行判断,如果数据正在请求中,不请求下一页的数据。
落地代码:
➡️ modules/orderPayModule/pages/order/list/list.js
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 = false
if (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: '数据加载完毕' })
}
// 更新 page
this.setData({
page: page + 1
})
// 重新发送请求
this.getOrderList()
},
// 生命周期函数--监听页面加载
onLoad() {
this.getOrderList()
}
})