Proyecto del mini programa WeChat_Outumn Choice 58

54. Página de consulta de pedido_Obtener datos de la interfaz de pedido

Lógica empresarial de la página de consulta de pedidos

1 OnShow cuando se abre la página

 onshow不同于onLoad 无法在形参上接收options参数
 判断缓存中有没有token (1  没有直接跳转到授权页面,2 有直接往下进行)
 获取url上的参数type
 根据type去发送请求获取订单数据
 渲染页面

2 Haga clic en un título diferente para volver a enviar la solicitud para obtener y representar los datos, las páginas del
documento de la interfaz de consulta del orden histórico
\ 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
      }
    ]
  },

  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
haga clic en todos los pedidos -> transferir a la página de autorización -> haga clic en obtener autorización,
Inserte la descripción de la imagen aquí
coloque la matriz en los datos para el siguiente paso de procesamiento

// 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
    })
  }

})

Haga clic en todos los pedidos -> haga clic en AppData
Inserte la descripción de la imagen aquí

Supongo que te gusta

Origin blog.csdn.net/cpcpn/article/details/108715344
Recomendado
Clasificación