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

订单列表

本章节为课堂作业

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

// 导入封装的接口 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: '数据加载完毕' })
+   }

  // 更新 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

// 导入封装的接口 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()
  }
})