【愚公系列】2022年11月 微信小程序-优购电商项目-订单列表页面

前言

订单列表页面对于用户来说具备以下两个方面的作用：

1.交易凭证：售后、维权、发票都有据可循；针对买卖双方的争议，提供一条依据。

2.状态跟踪：交易链条较长的订单有跟踪订单状态的需求，譬如通过淘宝购买一件产品，长时间未收到货物，用户希望能看到订单及物流状态。如，待下单、待支付、运输中（相关物流信息查询）待收货、待评价等等。

一、订单列表页面

1. 业务逻辑

1. 根据不同的的状态去加载不同的订单数据
2. 点击标题紧挨着对应数据

2.涉及的接口数据

1. 查询订单数据

3. 关键技术

• ⼩程序 ⾃定义组件的 传参 ⽗向⼦动态传参 this.selectComponent(“#tabs”);
• 时间戳 格式化处理

二、订单列表页面代码

1.页面代码

<Tabs tabs="{{tabs}}" bindtabsItemChange="handleTabsItemChange" ><view class="order_main"><view wx:for="{{orders}}"wx:key="order_id"class="order_item"><view class="order_no_row"><view class="order_no_text">订单编号</view><view class="order_no_value">{{item.order_number}}</view></view><view class="order_price_row"><view class="order_price_text">订单价格</view><view class="order_price_value">￥{{item.order_price}}</view></view><view class="order_time_row"><view class="order_time_text">订单日期</view><view class="order_time_value">{{item.create_time_cn}}</view></view></view></view>
</Tabs>

import { request } from "../../request/index.js";Page({/*** 页面的初始数据*/data: {orders: [],tabs: [{id: 0,value: "全部",isActive: true},{id: 1,value: "待付款",isActive: false},{id: 2,value: "待发货",isActive: false},{id: 3,value: "退款/退货",isActive: false}]},onShow(options) {const token = wx.getStorageSync("token");if (!token) {wx.navigateTo({url: '/pages/auth/index'});return;}// 1 获取当前的小程序的页面栈-数组 长度最大是10页面 let pages = getCurrentPages();// 2 数组中 索引最大的页面就是当前页面let currentPage = pages[pages.length - 1];// 3 获取url上的type参数const { type } = currentPage.options;// 4 激活选中页面标题 当 type=1 index=0 this.changeTitleByIndex(type-1);this.getOrders(type);},// 获取订单列表的方法async getOrders(type) {const res = await request({ url: "/my/orders/all", data: { type } });this.setData({orders: res.orders.map(v=>({...v,create_time_cn:(new Date(v.create_time*1000).toLocaleString())}))})},// 根据标题索引来激活选中 标题数组changeTitleByIndex(index) {// 2 修改源数组let { tabs } = this.data;tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);// 3 赋值到data中this.setData({tabs})},handleTabsItemChange(e) {// 1 获取被点击的标题索引const { index } = e.detail;this.changeTitleByIndex(index);// 2 重新发送请求 type=1 index=0this.getOrders(index+1);}
})

.order_main .order_item {padding: 20rpx;border-bottom: 1rpx solid #ccc;color: #666;
}
.order_main .order_item .order_no_row {display: flex;padding: 10rpx 0;justify-content: space-between;
}
.order_main .order_item .order_price_row {display: flex;padding: 10rpx 0;justify-content: space-between;
}
.order_main .order_item .order_price_row .order_price_value {color: var(--themeColor);font-size: 32rpx;
}
.order_main .order_item .order_time_row {display: flex;padding: 10rpx 0;justify-content: space-between;
}

2.效果