TelemedPro/hgh_admin
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Inshal
2024-05-29 22:34:28 +05:00
commit e63fc41a20
1470 changed files with 174828 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

271
resources/js/views/wizard-examples/checkout/Confirmation.vue Normal file
View File

@@ -0,0 +1,271 @@
<script setup>
const props = defineProps({
currentStep: {
type: Number,
required: false,
},
checkoutData: {
type: null,
required: true,
},
})
const emit = defineEmits([
'update:currentStep',
'update:checkout-data',
])
const selectedDeliveryAddress = computed(() => {
return props.checkoutData.addresses.filter(address => {
return address.value === props.checkoutData.deliveryAddress
})
})
const resolveDeliveryMethod = computed(() => {
if (props.checkoutData.deliverySpeed === 'overnight')
return {
method: 'Overnight Delivery',
desc: 'In 1 business day.',
}
else if (props.checkoutData.deliverySpeed === 'express')
return {
method: 'Express Delivery',
desc: 'Normally in 3-4 business days',
}
else
return {
method: 'Standard Delivery',
desc: 'Normally in 1 Week',
}
})
</script>
<template>
<section class="text-base">
<div class="text-center">
<h4 class="text-h4 mb-3">
Thank You! 😇
</h4>
<p class="text-body-1">
Your order <span class="text-high-emphasis font-weight-medium">#1536548131</span> has been placed!
</p>
<p class="mb-0">
We sent an email to <span class="text-high-emphasis font-weight-medium">john.doe@example.com</span> with your order confirmation and receipt.
</p>
<p>If the email hasn't arrived within two minutes, please check your spam folder to see if the email was routed there.</p>
<div class="d-flex align-center gap-2 justify-center">
<VIcon
size="20"
icon="ri-time-line"
/>
<span>Time placed: 25/05/2020 13:35pm</span>
</div>
</div>
<VRow class="border rounded ma-0 mt-5">
<VCol
cols="12"
md="4"
class="pa-5"
:class="$vuetify.display.mdAndUp ? 'border-e' : 'border-b'"
>
<div class="d-flex align-center gap-2 text-high-emphasis mb-4">
<VIcon
icon="ri-map-pin-line"
size="20"
/>
<div class="text-h6">
Shipping
</div>
</div>
<template
v-for="item in selectedDeliveryAddress"
:key="item.value"
>
<p class="mb-0">
{{ item.title }}
</p>
<p>
{{ item.desc }}
</p>
<h6 class="text-h6 text-medium-emphasis">
+{{ item.subtitle }}
</h6>
</template>
</VCol>
<VCol
cols="12"
md="4"
class="pa-5"
:class="$vuetify.display.mdAndUp ? 'border-e' : 'border-b'"
>
<div class="d-flex align-center gap-2 text-high-emphasis mb-4">
<VIcon
icon="ri-bank-card-line"
size="20"
/>
<span class="text-base font-weight-medium">
Billing Address
</span>
</div>
<template
v-for="item in selectedDeliveryAddress"
:key="item.value"
>
<p class="mb-0">
{{ item.title }}
</p>
<p>
{{ item.desc }}
</p>
<h6 class="text-h6 text-medium-emphasis">
+{{ item.subtitle }}
</h6>
</template>
</VCol>
<VCol
cols="12"
md="4"
class="pa-5"
>
<div class="d-flex align-center gap-2 text-high-emphasis mb-4">
<VIcon
icon="ri-ship-2-line"
size="20"
/>
<span class="text-base font-weight-medium">
Shipping Method
</span>
</div>
<p class="font-weight-medium">
Preferred Method:
</p>
<p class="mb-0">
{{ resolveDeliveryMethod.method }}
</p>
<p class="mb-0">
( {{ resolveDeliveryMethod.desc }} )
</p>
</VCol>
</VRow>
<VRow>
<VCol
cols="12"
md="9"
>
<!-- 👉 cart items -->
<div class="border rounded">
<template
v-for="(item, index) in props.checkoutData.cartItems"
:key="item.name"
>
<div
class="d-flex align-start gap-3 pa-5 position-relative flex-column flex-sm-row align-center"
:class="index ? 'border-t' : ''"
>
<div>
<VImg
width="80"
:src="item.image"
/>
</div>
<div
class="d-flex w-100"
:class="$vuetify.display.width <= 700 ? 'flex-column' : 'flex-row'"
>
<div>
<h6 class="text-h6 mb-2">
{{ item.name }}
</h6>
<div class="d-flex flex-column align-start text-no-wrap gap-2 text-base">
<div>
<span class="text-body-1 d-inline-block">Sold by:</span> <span class="text-primary text-body-1 d-inline-block">{{ item.seller }}</span>
</div>
<VChip
v-if="index !== props.checkoutData.cartItems.length - 1"
:color="item.inStock ? 'success' : 'error'"
size="small"
>
{{ item.inStock ? 'In Stock' : 'Out of Stock' }}
</VChip>
</div>
</div>
<VSpacer />
<div
class="d-flex flex-column justify-center"
:class="$vuetify.display.width <= 700 ? 'text-start' : 'text-end'"
>
<p class="text-base mb-0">
<span class="text-primary">${{ item.price }}</span>
<span>/</span>
<span class="text-disabled text-decoration-line-through">${{ item.discountPrice }}</span>
</p>
</div>
</div>
</div>
</template>
</div>
</VCol>
<VCol
cols="12"
md="3"
>
<div class="border rounded">
<div class="border-b pa-5">
<h6 class="text-h6 mb-4">
Price Details
</h6>
<div class="d-flex align-center justify-space-between text-sm mb-4">
<div class="text-body-1 text-high-emphasis">
Order Total
</div>
<div class="text-body-1">
${{ props.checkoutData.orderAmount }}.00
</div>
</div>
<div class="d-flex align-center justify-space-between text-sm">
<div class="text-body-1 text-high-emphasis">
Charges
</div>
<div
v-if="props.checkoutData.deliverySpeed === 'free'"
class="d-flex align-center"
>
<div class="me-2 text-body-1 text-disabled">
$5.00
</div>
<VChip
color="success"
size="small"
>
FREE
</VChip>
</div>
<div v-else>
<span>${{ props.checkoutData.deliveryCharges }}</span>
</div>
</div>
</div>
<div class="d-flex align-center justify-space-between text-h6 pa-5">
<span>Total</span>
<span>${{ props.checkoutData.orderAmount + props.checkoutData.deliveryCharges }}.00</span>
</div>
</div>
</VCol>
</VRow>
</section>
</template>