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

文章目录

• 前言
• 一、订单列表页面
  • 1. 业务逻辑
  • 2.涉及的接口数据
  • 3. 关键技术
• 二、订单列表页面代码
  • 1.页面代码
  • 2.效果

---

前言

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

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

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

一、订单列表页面

1. 业务逻辑

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

2.涉及的接口数据

1. 查询订单数据

3. 关键技术

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

二、订单列表页面代码

1.页面代码

代码语言：javascript复制

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

代码语言：javascript复制

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=0
    this.getOrders(index 1);
  }
})

代码语言：javascript复制

.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.效果

select tabs

0 人点赞