64 lines
1.4 KiB
Vue
64 lines
1.4 KiB
Vue
<script setup>
|
|
import ChangePassword from '@/views/pages/account-settings/ChangePassword.vue';
|
|
import DeliveryAddress from '@/views/pages/account-settings/DeliveryAddress.vue';
|
|
import MyInfo from '@/views/pages/account-settings/MyInfo.vue';
|
|
import PaymentDetails from '@/views/pages/account-settings/PaymentDetails.vue';
|
|
import { useRoute } from 'vue-router';
|
|
|
|
const route = useRoute()
|
|
const activeTab = ref(route.params.tab)
|
|
|
|
// tabs
|
|
const tabs = [
|
|
{
|
|
title: 'My Info',
|
|
tab: 'info',
|
|
},
|
|
{
|
|
title: 'Delivery Address',
|
|
tab: 'delivery',
|
|
},
|
|
{
|
|
title: 'Payment Details',
|
|
tab: 'payment',
|
|
},
|
|
{
|
|
title: 'Change Password',
|
|
tab: 'change',
|
|
}
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<VTabs v-model="activeTab" show-arrows>
|
|
<VTab v-for="item in tabs" :value="item.tab">
|
|
<VIcon size="20" start />
|
|
{{ item.title }}
|
|
</VTab>
|
|
</VTabs>
|
|
<VDivider />
|
|
|
|
<VWindow v-model="activeTab" class="mt-5 disable-tab-transition">
|
|
<!-- Account -->
|
|
<VWindowItem value="info">
|
|
<MyInfo />
|
|
</VWindowItem>
|
|
|
|
<!-- Security -->
|
|
<VWindowItem value="delivery">
|
|
<DeliveryAddress />
|
|
</VWindowItem>
|
|
|
|
<!-- Notification -->
|
|
<VWindowItem value="payment">
|
|
<PaymentDetails />
|
|
</VWindowItem>
|
|
<!-- Notification -->
|
|
<VWindowItem value="change">
|
|
<ChangePassword />
|
|
</VWindowItem>
|
|
</VWindow>
|
|
</div>
|
|
</template>
|