154 lines
3.8 KiB
Vue
154 lines
3.8 KiB
Vue
<script setup>
|
|
import Footer from '@/views/front-pages/front-page-footer.vue'
|
|
import Navbar from '@/views/front-pages/front-page-navbar.vue'
|
|
import AddressContent from '@/views/wizard-examples/checkout/Address.vue'
|
|
import CartContent from '@/views/wizard-examples/checkout/Cart.vue'
|
|
import ConfirmationContent from '@/views/wizard-examples/checkout/Confirmation.vue'
|
|
import PaymentContent from '@/views/wizard-examples/checkout/Payment.vue'
|
|
import googleHome from '@images/pages/google-home.png'
|
|
import iphone11 from '@images/pages/iphone-11.png'
|
|
import customAddress from '@images/svg/address.svg'
|
|
import customCart from '@images/svg/cart.svg'
|
|
import customPayment from '@images/svg/payment.svg'
|
|
import customTrending from '@images/svg/trending.svg'
|
|
|
|
definePage({ meta: { layout: 'blank' } })
|
|
|
|
const checkoutSteps = [
|
|
{
|
|
title: 'Cart',
|
|
icon: customCart,
|
|
},
|
|
{
|
|
title: 'Address',
|
|
icon: customAddress,
|
|
},
|
|
{
|
|
title: 'Payment',
|
|
icon: customPayment,
|
|
},
|
|
{
|
|
title: 'Confirmation',
|
|
icon: customTrending,
|
|
},
|
|
]
|
|
|
|
const checkoutData = ref({
|
|
cartItems: [
|
|
{
|
|
id: 1,
|
|
name: 'Google - Google Home - White',
|
|
seller: 'Google',
|
|
inStock: true,
|
|
rating: 4,
|
|
price: 299,
|
|
discountPrice: 359,
|
|
image: googleHome,
|
|
quantity: 1,
|
|
estimatedDelivery: '18th Nov 2021',
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'Apple iPhone 11 (64GB, Black)',
|
|
seller: 'Apple',
|
|
inStock: true,
|
|
rating: 4,
|
|
price: 899,
|
|
discountPrice: 999,
|
|
image: iphone11,
|
|
quantity: 1,
|
|
estimatedDelivery: '20th Nov 2021',
|
|
},
|
|
],
|
|
promoCode: '',
|
|
orderAmount: 1198,
|
|
deliveryAddress: 'home',
|
|
deliverySpeed: 'free',
|
|
deliveryCharges: 0,
|
|
addresses: [
|
|
{
|
|
title: 'John Doe (Default)',
|
|
desc: '4135 Parkway Street, Los Angeles, CA, 90017',
|
|
subtitle: '1234567890',
|
|
value: 'home',
|
|
},
|
|
{
|
|
title: 'ACME Inc.',
|
|
desc: '87 Hoffman Avenue, New York, NY, 10016',
|
|
subtitle: '1234567890',
|
|
value: 'office',
|
|
},
|
|
],
|
|
})
|
|
|
|
const currentStep = ref(0)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="checkout-page">
|
|
<Navbar />
|
|
<VContainer>
|
|
<div class="checkout-card">
|
|
<VCard>
|
|
<VCardText>
|
|
<!-- 👉 Stepper -->
|
|
<AppStepper
|
|
v-model:current-step="currentStep"
|
|
class="checkout-stepper"
|
|
:items="checkoutSteps"
|
|
:direction="$vuetify.display.mdAndUp ? 'horizontal' : 'vertical'"
|
|
align="center"
|
|
/>
|
|
</VCardText>
|
|
<VDivider />
|
|
<VCardText>
|
|
<!-- 👉 stepper content -->
|
|
<VWindow
|
|
v-model="currentStep"
|
|
class="disable-tab-transition"
|
|
:touch="false"
|
|
>
|
|
<VWindowItem>
|
|
<CartContent
|
|
v-model:current-step="currentStep"
|
|
v-model:checkout-data="checkoutData"
|
|
/>
|
|
</VWindowItem>
|
|
<VWindowItem>
|
|
<AddressContent
|
|
v-model:current-step="currentStep"
|
|
v-model:checkout-data="checkoutData"
|
|
/>
|
|
</VWindowItem>
|
|
<VWindowItem>
|
|
<PaymentContent
|
|
v-model:current-step="currentStep"
|
|
v-model:checkout-data="checkoutData"
|
|
/>
|
|
</VWindowItem>
|
|
<VWindowItem>
|
|
<ConfirmationContent v-model:checkout-data="checkoutData" />
|
|
</VWindowItem>
|
|
</VWindow>
|
|
</VCardText>
|
|
</VCard>
|
|
</div>
|
|
</VContainer>
|
|
<Footer />
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.checkout-card {
|
|
margin-block: 9.25rem 5.25rem;
|
|
}
|
|
|
|
@media (max-width: 960px) and (min-width: 600px) {
|
|
.checkout-page {
|
|
.v-container {
|
|
padding-inline: 2rem !important;
|
|
}
|
|
}
|
|
}
|
|
</style>
|