fashion-ssr-vue3/pages/account/orders.vue

<script lang='ts' setup>
const activeName = ref()
const router = useRouter()
const route = useRoute()

function handleClick(tab: any) {
  const tabName = tab.paneName
  activeName.value = tabName
  router.push({
    path: '/account/orders',
    query: {
      tab: tabName,
    },
  })
}
onMounted(() => {
  activeName.value = route.query.tab as string
})
</script>

<template>
  <div>
    <div class="py-18px px-24px bg-#FAFAFA b-rd-10px text-#000 text-20px fw-500 mb-20px">
      Wish Orders
    </div>
    <el-tabs v-model="activeName" class="favorite-tabs" @tab-click="handleClick">
      <el-tab-pane label="Submitted" name="submitted">
        <Business-account-orders-submitted v-if="activeName === 'submitted'" />
      </el-tab-pane>
      <el-tab-pane label="Cancelled" name="cancelled">
        <Business-account-orders-cancelled v-if="activeName === 'cancelled'" />
      </el-tab-pane>
      <el-tab-pane label="All" name="all">
        <Business-account-orders-all v-if="activeName === 'all'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style lang='less' scoped>
.favorite-tabs {
  background-color: #FAFAFA;
  border-radius: 10px;
  padding: 20px;
  padding-top: 0px;
  ::v-deep(.el-tabs__header){
    .el-tabs__item{
      color: #333;
      &.is-active {
        color: #C58C64!important;
      }
    }
    .el-tabs__active-bar{
      background-color: #C58C64!important;
    }
  }
}
</style>