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:modelValue="handleUpdate">
      <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 MyPrize from './dynamic/myPrize.vue'
import { useRoute, useRouter } from 'vue-router'

const mode = import.meta.env.VITE_NODE_ENV

const tab = ref(0)
const items = shallowRef(mode === 'production' ? [
  { label: '余额充值、购买会员订单', value: 0, path: RechargeVipOrder }
] : [
  { label: '余额充值、购买会员订单', value: 0, path: RechargeVipOrder },
  { label: '商城交易订单', value: 1, path: MallOrder },
  { label: '积分兑换记录', value: 2, path: PointExchangeRecord },
  { label: '我的奖品', value: 3, path: MyPrize }
])


const route = useRoute()
const router = useRouter()
const { key } = route.query
if (key) tab.value = Number(key)

const handleUpdate = (e) => {
  router.push({ path: '/recruit/personal/personalCenter/tradeOrder', query: { key: e } })
}
</script>

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