pet-front/pages/myOrdersManage/index.vue

<template>
  <view>
    <view class="header-buts flex flex-center">
      <view class="flex buts-box">
        <view class="buts" :class="{'buts-active':activeIndex===1}" @click="activeIndex=1">总订单</view>
        <view class="buts" :class="{'buts-active':activeIndex===2}" @click="activeIndex=2">日订单</view>
      </view>
    </view>
    <up-sticky bgColor="#fff">
      <view class="container-tabs">
        <up-tabs :list="list" lineWidth="68rpx"
                 :activeStyle="{
            color: '#FFFFFF',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }"
                 :inactiveStyle="{
            color: '#FFFFFF',
            transform: 'scale(1)'
        }"
                 :itemStyle="{height:'88rpx',padding:'0 52rpx'}"
                 lineColor="#FFFFFF"></up-tabs>
      </view>
    </up-sticky>

    <view class="container">
      <systemOrder v-if="current===0"/>
      <personOrder v-if="current===1"/>
      <lossOrder v-if="current===2"/>
    </view>
  </view>
</template>

<script setup>
import {reactive, ref} from "vue";
import systemOrder from "./components/systemOrder.vue";
import personOrder from "./components/personOrder.vue";
import lossOrder from "./components/lossOrder.vue";

const current = ref(0)
const activeIndex = ref(1)
const list = reactive([
  {
    name: '系统派单',
    badge: {
      value: 5,
    }
  },
  {
    name: '个人订单',
    badge: {
      value: 5,
    }
  },
  {
    name: '流失订单',
    badge: {
      value: 5,
    }
  },
])
</script>

<style scoped lang="scss">
@import "index.scss";

</style>