微信小程序项目_秋泊优选58

54、订单查询页面_获取订单接口数据

订单查询页面的业务逻辑

1 页面被打开的时候 onShow

 onshow不同于onLoad 无法在形参上接收options参数
 判断缓存中有没有token （1  没有直接跳转到授权页面，2 有直接往下进行）
 获取url上的参数type
 根据type来决定页面标题的数组元素哪个被激活选中（在下一节实现）
 根据type去发送请求获取订单数据
 渲染页面

2 点击不同的标题重新发送请求来获取和渲染数据
历史订单查询接口文档
pages\order\index.js

// pages/order/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    tabs:[
      {
        id: 0,
        value:"全部",
        isActive: true
      },
      {
        id: 1,
        value:"待付款",
        isActive: false
      },
      {
        id: 2,
        value:"代发货",
        isActive: false
      },
      {
        id: 3,
        value:"退款/退货",
        isActive: false
      }
    ]
  },
  
  // 订单页面发送请求时先 做判断（有没有token值，有直接用 没有跳转到授权页面再取token）
  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];
    console.log(currentPage.options);
    // 3 获取url上的type参数
    const {type}=currentPage.options;
    this.getOrders(type);
  },

  // 获取订单列表的方法
  async getOrders(type){
    const res=await request({url:"/my/orders/all", data:{type}});
    console.log(res);
  },

  handleTabsItemChange(e){
    // 1 获取被点击的标题索引
    const {index}=e.detail;
    // 2 修改源数组
    let {tabs}=this.data;
    tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
    // 3 赋值到data中
    this.setData({
      tabs
    })
  }
})

pages\order\index.js
点全部订单——>调到授权页面——>点获取授权

将数组放到data中给下一步骤进行渲染

// pages/order/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];
    console.log(currentPage.options);
    // 3 获取url上的type参数
    const {type}=currentPage.options;
    this.getOrders(type);
  },

  // 获取订单列表的方法
  async getOrders(type){
    const res=await request({url:"/my/orders/all", data:{type}});
    this.setData({
      orders:res.orders
    })
  },

  handleTabsItemChange(e){
    // console.log(e);
    // 1 获取被点击的标题索引
    const {index}=e.detail;
    // 2 修改源数组
    let {tabs}=this.data;
    tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
    // 3 赋值到data中
    this.setData({
      tabs
    })
  }

})

点全部订单——>点AppData