微信小程序--订单查询页面

微信小程序–订单查询页面

包含功能点：

• 订单查询

结构：order.wxml

<tabs tabList="{{tabList}}" binditemChange="handleItemChange">
 
  <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>

样式：order.less

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

逻辑：order.js文件

// pages/order/order.js
import { request } from "../../request/index.js";

Page({

  /**
   * 页面的初始数据
   */
  data: {
    "orders": [
      {
        "order_id": 428,
        "user_id": 23,
        "order_number": "HMDD20190802000000000428",
        "order_price": 13999,
        "order_pay": "0",
        "is_send": "否",
        "trade_no": "",
        "order_fapiao_title": "个人",
        "order_fapiao_company": "",
        "order_fapiao_content": "",
        "consignee_addr": "广东省广州市海珠区新港中路397号",
        "pay_status": "1",
        "create_time": 1564731518,
        "update_time": 1564731518,
        "order_detail": null,
        "goods": [
          {
            "id": 717,
            "order_id": 428,
            "goods_id": 43986,
            "goods_price": 13999,
            "goods_number": 1,
            "goods_total_price": 13999,
            "goods_name": "海信(Hisense)LED55MU9600X3DUC 55英寸 4K超高清量子点电视 ULED画质 VIDAA系统",
            "goods_small_logo": "http://image5.suning.cn/uimg/b2c/newcatentries/0000000000-000000000160455569_1_400x400.jpg"
          }
        ],
        "total_count": 1,
        "total_price": 13999
      },
      {
        "order_id": 428,
        "user_id": 23,
        "order_number": "HMDD20190802000000000428",
        "order_price": 13999,
        "order_pay": "0",
        "is_send": "否",
        "trade_no": "",
        "order_fapiao_title": "个人",
        "order_fapiao_company": "",
        "order_fapiao_content": "",
        "consignee_addr": "广东省广州市海珠区新港中路397号",
        "pay_status": "1",
        "create_time": 1564731518,
        "update_time": 1564731518,
        "order_detail": null,
        "goods": [
          {
            "id": 717,
            "order_id": 428,
            "goods_id": 43986,
            "goods_price": 13999,
            "goods_number": 1,
            "goods_total_price": 13999,
            "goods_name": "海信(Hisense)LED55MU9600X3DUC 55英寸 4K超高清量子点电视 ULED画质 VIDAA系统",
            "goods_small_logo": "http://image5.suning.cn/uimg/b2c/newcatentries/0000000000-000000000160455569_1_400x400.jpg"
          }
        ],
        "total_count": 1,
        "total_price": 13999
      },
      {
        "order_id": 428,
        "user_id": 23,
        "order_number": "HMDD20190802000000000428",
        "order_price": 13999,
        "order_pay": "0",
        "is_send": "否",
        "trade_no": "",
        "order_fapiao_title": "个人",
        "order_fapiao_company": "",
        "order_fapiao_content": "",
        "consignee_addr": "广东省广州市海珠区新港中路397号",
        "pay_status": "1",
        "create_time": 1564731518,
        "update_time": 1564731518,
        "order_detail": null,
        "goods": [
          {
            "id": 717,
            "order_id": 428,
            "goods_id": 43986,
            "goods_price": 13999,
            "goods_number": 1,
            "goods_total_price": 13999,
            "goods_name": "海信(Hisense)LED55MU9600X3DUC 55英寸 4K超高清量子点电视 ULED画质 VIDAA系统",
            "goods_small_logo": "http://image5.suning.cn/uimg/b2c/newcatentries/0000000000-000000000160455569_1_400x400.jpg"
          }
        ],
        "total_count": 1,
        "total_price": 13999
      }
    ],
    tabList: [
      {
        id: 0,
        name: "全部",
        isActive: true,
      },
      {
        id: 1,
        name: "待付款",
        isActive: false,
      },
      {
        id: 2,
        name: "待发货",
        isActive: false,
      },
      {
        id: 3,
        name: "退款/退货",
        isActive: false,
      }
    ]
  },
  /**
   * 根据标题索引来激活选中  标题数组
   * 
   * 严谨做法：重新拷贝一份数组，再对这个数组的备份进行处理
   * let tabList = JSON.parse(JSON.stringify(this.data.tabList));
   * 一般做法：let {tabList} = this.data;
   * 
   * @param {*} index 
   */
  changeTitleIndex(index) {

    // 修改源数组
    let tabList = JSON.parse(JSON.stringify(this.data.tabList));

    tabList.forEach((v, i) => {
      i === index ? v.isActive = true : v.isActive = false;
    })

    this.setData({
      tabList
    })
  },
  // 点击标题
  handleItemChange(e) {
    // 1. 获取被点击的标题索引
    const { index } = e.detail;

    // 2. 根据标题索引来激活选中效果  
    this.changeTitleIndex(index)

    // 3. 重新发送请求，获取数据  type=1时,index=0
    this.getOrders(index + 1);
  },
  // 获取订单列表的方法
  getOrders(type) {
    request({ url: "/my/orders/all", data: { type } }).then(res => {


      // console.log(res)
      // this.setData({
      //   orders: res.orders.map(v => ({ ...v, create_time_cn: (new Date(v.create_time * 1000).toLocaleString()) }))
      // })

      // 模拟数据
      this.setData({
        orders: this.data.orders.map(v => ({ ...v, create_time_cn: (new Date(v.create_time * 1000).toLocaleString()) }))
      })
    });
  },

  /**
   * 生命周期函数--监听页面显示--onShow
   * 注意：onShow 不同于onLoad  无法在形参上接收 options 参数；但是可以通过页面栈获取url上的参数
   * 
   * 首先：判断缓存中有没有token。  如果没有  直接跳转到授权页面；如果有  直接往下进行。
   * 
   * 1. 获取url上的参数type
   *    根据type决定页面标题的数组元素  哪个被激活选中
   * 2. 根据type 去发送请求获取订单数据
   * 3. 渲染页面
   * 4. 点击不同的标题，重新发送请求来获取和渲染数据
   */
  onShow: function (options) {
    // const token = wx.getStorageSync("token");
    // if (!token) {
    //   wx.navigateTo({
    //     url: '/pages/auth/auth',
    //   });
    //   return
    // }

    // 1.获取当前的小程序的页面栈-数组  长度最大是10页面
    let pages = getCurrentPages();

    // 2.数组中  索引最大的页面就是当前页面
    let currentPages = pages[pages.length - 1]

    console.log(currentPages.options)

    // 3.获取url上的type参数
    const { type } = currentPages.options;

    // 4.激活选中页面标题  当type=1时,index=0
    this.changeTitleIndex(type - 1);

    this.getOrders(type);
  }
})

页面配置文件：order.json文件

{
  "usingComponents": {
    "tabs": "../../component/tabs/tabs"
  },
  "navigationBarTitleText": "订单查询"
}