45 lines
1.6 KiB
Vue
45 lines
1.6 KiB
Vue
<template>
|
|
<div class="layout-padding">
|
|
<div class="layout-padding-auto layout-padding-view">
|
|
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
|
<div v-for="(v) in data.tabList" :key="v.id">
|
|
<el-tab-pane :label="v.label" :name="v.id">
|
|
<div></div>
|
|
</el-tab-pane>
|
|
</div>
|
|
</el-tabs>
|
|
<div class="flex justify-center">
|
|
<recharge-package v-if="activeName == 10" />
|
|
<extra-price v-if="activeName == 20" />
|
|
<refund v-if="activeName == 30" />
|
|
<Code v-if="activeName == 40" />
|
|
<off-line v-if="activeName == 50" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
|
|
const RechargePackage = defineAsyncComponent(() => import('./components/recharge-package/index.vue'));
|
|
const Code = defineAsyncComponent(() => import('./components/code/index.vue'));
|
|
const Refund = defineAsyncComponent(() => import('./components/refund/index.vue'));
|
|
const OffLine = defineAsyncComponent(() => import('./components/off-line/index.vue'));
|
|
const ExtraPrice = defineAsyncComponent(() => import('./components/extra-price/index.vue'));
|
|
|
|
const data = {
|
|
tabList: [
|
|
{ id: 10, label: "充值套餐" },
|
|
{ id: 20, label: "每餐额定金额配置" },
|
|
{ id: 30, label: "退款配置" },
|
|
{ id: 40, label: "二维码配置" },
|
|
{ id: 50, label: "离线配置" },
|
|
]
|
|
}
|
|
|
|
const activeName = ref(data.tabList[0].id)
|
|
|
|
const handleClick = (e: any) => {
|
|
}
|
|
|
|
</script> |