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">
        <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 10" :key="index" :type="0"></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-item class="swiper-item">
        <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 10" :key="index" :type="1"></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-item class="swiper-item">
        <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 10" :key="index" :type="2"></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-item class="swiper-item">
        <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 10" :key="index" :type="3"></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";

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

  const swiperCurrent = ref(0);
  const animationfinish = ({ detail: { current } }) => {
    swiperCurrent.value = current;
    tabsActive.value = current;
  }
  
  onLoad((options)=>{
    if(options.type){
      tabsActive.value = +options.type;
      swiperCurrent.value = +options.type;
    }
  })
  
</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>