小程序tab选项卡请求我的订单数据筛选处理(待收货、代发货、已完成等)

1、页面

<view class="navbar">
  <lable wx:for="{
   {navbar}}" data-idx="{
   {index}}" class="item {
   {currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">
 //item在js文件里面定义数组 
    <text>{
   {
   item}}</text>
  </lable>
</view>

2、js 里面的data数据

 data: {
   
    // 顶部菜单切换
    navbar: ['全部', '代付款', "代发货", "待收货", "已完成"],
    // 默认选中菜单
    index: 0,
    currentTab:0,
    listArray:[],//显示的订单
    showOrderList:[],//获取的订单
  },

3、把所有订单请求下来

  //查询所有订单
    _selectByUserIdNormal(id) {
   
    //此请求方法是封装的，也可以用request直接请求数据
      selectByUserIdNormal(id).then(res => {
   
        console.log(res);
        this.setData({
   
          listArray : res.data.data,
          showOrderList:res.data.data
        })

      }).catch(err => {
   
        console.log(err);
      })
    },

4、处理点击事件

//顶部tab切换
    navbarTap: function (e) {
   
      console.log(e.currentTarget.dataset.idx);
      var that = this;
      that.setData({
   
        currentTab: e.currentTarget.dataset.idx
      })

      if(that.data.currentTab === 0){
   
        console.log("回到全部");
        console.log(that.data.showOrderList);
        that.setData({
   
            listArray : that.data.showOrderList
          })
      }else{
   
        let listArray = []
        for (let i = 0; i < that.data.showOrderList.length; i++) {
   
          if (that.data.showOrderList[i].status == that.data.currentTab) {
   
            console.log("筛选数据")
            listArray.push(that.data.showOrderList[i]);
          }
        }
        that.setData({
   
          listArray: listArray
        })
      }     
    }

完整js

// components/ordercpn/ordercpn.js
import {
   
  selectByUserIdNormal
} from "/../../utils/networkutils/order.js"
Component({
   
  /**
   * 组件的属性列表
   */
  properties: {
   
    innerTitle:{
   
      type:String,
      value:""
    },
    isShowSearch:{
   
      type: String,
      value: ""
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
   
    // 顶部菜单切换
    navbar: ['全部', '代付款', "代发货", "待收货", "已完成"],
    // 默认选中菜单
    index: 0,
    pick_name: "",
    currentTab:0,
    listArray:[],//显示的订单
    showOrderList:[],//获取的订单
  },

  // 初始化加载
  created: function () {
   
    var that = this;
    wx.getStorage({
   
      key: 'userinfo',
      success: function (res) {
   
        console.log(res.data);
        if (res.data) {
   
          that.setData({
   
            isLogin: true,
            list: res.data
          })
        } else {
   
          that.setData({
   
            isLogin: false
          })
        }
        that.setData({
   
          userid: res.data.id
        })
        var userid = res.data.id;
        that._selectByUserIdNormal(userid);
      }, fail: function (err) {
   

      }
    })
  },


  /**
   * 组件的方法列表
   */
  methods: {
   

    //顶部tab切换
    navbarTap: function (e) {
   
      console.log(e.currentTarget.dataset.idx);
      var that = this;
      that.setData({
   
        currentTab: e.currentTarget.dataset.idx
      }