purchase-let/pagesOrder/order/order.vue

<template>
  <view>
    <up-sticky bgColor="#fff">
      <view style="padding: 10rpx 20rpx 0 20rpx;">
        <up-search shape="round" :actionStyle="{color: '#20b128'}" ></up-search>
      </view>
      <up-tabs :current="tabsActive" :list="tablist" lineColor="#20b128" :scrollable="false" :activeStyle="	{ color: '#20b128', fontWeight: 'bold' }" @change="changeTab"></up-tabs>
    </up-sticky>

    <swiper class="swiper-box" :current="swiperCurrent" @animationfinish="animationfinish">
      <swiper-item class="swiper-item" v-for="(list, k) in orderList" :key="k">
        <scroll-view scroll-y style="height: 100%;width: 100%;">
          <view class="page-box">
            <view v-if="true" class="list">
              <good v-for="(item, index) in list" :datas="item" :key="index" :type="k"></good>
            </view>
            <view v-else style="padding-top: 100rpx;">
              <up-empty text="订单空空如也"
                icon="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/29955202404260944367594.png">
              </up-empty>
            </view>
            <view style="width: 100%;height: 200rpx;"></view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>

  </view>
</template>

<script setup>
  import { onLoad } from "@dcloudio/uni-app"
  import { ref } from 'vue';
  import good from "./component/good.vue";
  import { orderListApi } from "@/api/order.js";

  const tabsActive = ref(0)
  const changeTab = ({index}) => {
    tabsActive.value = index;
    swiperCurrent.value = index;
  }
  const tablist = ref([
    { name: '全部' },
    { name: '待付款' },
    { name: '待发货' },
    { name: '待收货' },
    // { name: '退款/售后' },
  ]);

  const swiperCurrent = ref(0);
  const animationfinish = ({ detail: { current } }) => {
    swiperCurrent.value = current;
    tabsActive.value = current;
  }
  
  // 订单
  const where = ref({
    page_no: 1,
    page_size: 25
  })
  const orderList= ref([
    [],
    [],
    [],
    [],
  ])
  const getOrderList = (type=0, status='', paid=1)=>{
    orderListApi({
      ...where.value,
      status: status,
      paid: paid
    }).then(res=>{
      orderList.value[type] = res.data.lists;
      console.log(orderList.value);
    })
  }
  
  onLoad((options)=>{
    if(options.type){
      tabsActive.value = +options.type;
      swiperCurrent.value = +options.type;
    }
    getOrderList(0);
    getOrderList(1, '', 0);
    getOrderList(2, 0);
    getOrderList(3, 1);
  })
  
</script>

<style lang="scss">
  .swiper-box {
    flex: 1;
    height: calc(100vh - var(--window-top) - 140rpx);
    /* #ifdef H5 */
    height: calc(100vh - 210rpx);
    /* #endif */
    width: 100%;

    .swiper-item {
      height: 100%;
      // background-color: pink;
    }
  }

  .page-box{
    margin: 20rpx;
    .list{
      
    }
  }
</style>