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

53、订单查询页面（参考商品列表页面的引入tabs组件）

历史订单查询接口文档



订单查询 业务逻辑
1 标题
2 订单查询引入tabs组件
pages\goods_list\index.json——>pages\order\index.json

{
    
    
  "usingComponents": {
    
    
  // 引入tabs组件
    "Tabs":"../../components/Tabs/Tabs"
  },
  "navigationBarTitleText": "订单查询"
}

商品列表js的标题数据data：{tabs}
pages\goods_list\index.js

    tabs:[
      {
    
    
        id: 0,
        value:"综合",
        isActive: true
      },
      {
    
    
        id: 1,
        value:"销量",
        isActive: false
      },
      {
    
    
        id: 2,
        value:"价格",
        isActive: false
      },
    ],

pages\goods_list\index.js——>pages\order\index.js

// 页面的初始数据
  data: {
    
    
    tabs:[
      {
    
    
        id: 0,
        value:"全部",
        isActive: true
      },
      {
    
    
        id: 1,
        value:"待付款",
        isActive: false
      },
      {
    
    
        id: 2,
        value:"代发货",
        isActive: false
      },
      {
    
    
        id: 3,
        value:"退款/退货",
        isActive: false
      }
    ]
  },

传入组件中
pages\goods_list\index.wxml——>pages\order\index.wxml

<Tabs tabs="{
     
     {tabs}}" bindtabsItemChange="handleTabsItemChange">内容</Tabs>

定义 handleTabsItemChange 事件
pages\goods_list\index.js——>pages\order\index.js
与data：{}同层级

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