menduner/src/views/recruit/personal/PersonalCenter/tradeOrder/index.vue

<template>
  <div class="white-bgc pa-3">
    <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#f7f8fa" @update:model-value="handleChangeTab">
      <v-tab v-for="k in items" :key="k.value" :value="k.value">{{ k.label }}</v-tab>
    </v-tabs>
    <component :is="items[tab].path" />
  </div>
</template>

<script setup>
defineOptions({name: 'tradingOrder'})
import { ref, shallowRef } from 'vue'
import RechargeVipOrder from './dynamic/rechargeVip.vue'
import MallOrder from './dynamic/mallOrder.vue'
import PointExchangeRecord from './dynamic/pointExchangeRecord.vue'
import { useRoute } from 'vue-router'

const tab = ref(0)
const items = shallowRef([
  { label: '余额充值、购买会员订单', value: 0, path: RechargeVipOrder },
  { label: '商城交易订单', value: 1, path: MallOrder },
  { label: '积分兑换记录', value: 2, path: PointExchangeRecord }
])
const route = useRoute()
const { key } = route.query
if (key) tab.value = Number(key)

// 切换
const handleChangeTab = () => {
}
</script>

<style lang="scss" scoped>
</style>