first commit
This commit is contained in:
Inshal
293
resources/js/views/wizard-examples/checkout/Address.vue
Normal file
293
resources/js/views/wizard-examples/checkout/Address.vue
Normal file
@@ -0,0 +1,293 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
currentStep: {
|
||||
type: Number,
|
||||
required: false,
|
||||
},
|
||||
checkoutData: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits([
|
||||
'update:currentStep',
|
||||
'update:checkout-data',
|
||||
])
|
||||
|
||||
const checkoutAddressDataLocal = ref(props.checkoutData)
|
||||
const isEditAddressDialogVisible = ref(false)
|
||||
|
||||
const deliveryOptions = [
|
||||
{
|
||||
icon: 'ri-user-line',
|
||||
title: 'Standard',
|
||||
desc: 'Get your product in 1 Week.',
|
||||
value: 'free',
|
||||
},
|
||||
{
|
||||
icon: 'ri-star-smile-line',
|
||||
title: 'Express',
|
||||
desc: 'Get your product in 3-4 days.',
|
||||
value: 'express',
|
||||
},
|
||||
{
|
||||
icon: 'ri-vip-crown-line',
|
||||
title: 'Overnight',
|
||||
desc: 'Get your product in 1 day.',
|
||||
value: 'overnight',
|
||||
},
|
||||
]
|
||||
|
||||
const resolveAddressBadgeColor = {
|
||||
home: 'primary',
|
||||
office: 'success',
|
||||
}
|
||||
|
||||
const resolveDeliveryBadgeData = {
|
||||
free: {
|
||||
color: 'success',
|
||||
price: 'Free',
|
||||
},
|
||||
express: {
|
||||
color: 'secondary',
|
||||
price: 10,
|
||||
},
|
||||
overnight: {
|
||||
color: 'secondary',
|
||||
price: 15,
|
||||
},
|
||||
}
|
||||
|
||||
const totalPriceWithDeliveryCharges = computed(() => {
|
||||
checkoutAddressDataLocal.value.deliveryCharges = 0
|
||||
if (checkoutAddressDataLocal.value.deliverySpeed !== 'free')
|
||||
checkoutAddressDataLocal.value.deliveryCharges = resolveDeliveryBadgeData[checkoutAddressDataLocal.value.deliverySpeed].price
|
||||
|
||||
return checkoutAddressDataLocal.value.orderAmount + checkoutAddressDataLocal.value.deliveryCharges
|
||||
})
|
||||
|
||||
const updateAddressData = () => {
|
||||
emit('update:checkout-data', checkoutAddressDataLocal.value)
|
||||
}
|
||||
|
||||
const nextStep = () => {
|
||||
updateAddressData()
|
||||
emit('update:currentStep', props.currentStep ? props.currentStep + 1 : 1)
|
||||
}
|
||||
|
||||
watch(() => props.currentStep, updateAddressData)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="8"
|
||||
>
|
||||
<!-- 👉 Address options -->
|
||||
<div class="text-body-1 text-high-emphasis font-weight-medium mb-4">
|
||||
Select your preferable address
|
||||
</div>
|
||||
|
||||
<!-- 👉 Address custom input -->
|
||||
<CustomRadios
|
||||
v-model:selected-radio="checkoutAddressDataLocal.deliveryAddress"
|
||||
:radio-content="checkoutAddressDataLocal.addresses"
|
||||
:grid-column="{ cols: '12', sm: '6' }"
|
||||
>
|
||||
<template #default="{ item }">
|
||||
<div class="w-100">
|
||||
<div class="d-flex justify-space-between mb-4">
|
||||
<div class="text-body-1 text-high-emphasis">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
|
||||
<VChip
|
||||
:color="resolveAddressBadgeColor[item.value]"
|
||||
size="small"
|
||||
class="text-capitalize"
|
||||
>
|
||||
{{ item.value }}
|
||||
</VChip>
|
||||
</div>
|
||||
|
||||
<p class="text-body-2 mb-0">
|
||||
{{ item.desc }}
|
||||
</p>
|
||||
<p class="text-body-2 mb-0">
|
||||
Mobile: {{ item.subtitle }}
|
||||
</p>
|
||||
<p class="text-body-2 mb-3">
|
||||
Cash/Card on delivery available
|
||||
</p>
|
||||
|
||||
<VDivider class="pb-2" />
|
||||
|
||||
<div class="d-flex gap-x-4 py-2">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="text-base"
|
||||
>Edit</a>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="text-base"
|
||||
>Remove</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</CustomRadios>
|
||||
|
||||
<!-- 👉 Add New Address -->
|
||||
<VBtn
|
||||
variant="outlined"
|
||||
class="mt-4 mb-6"
|
||||
size="small"
|
||||
@click="isEditAddressDialogVisible = !isEditAddressDialogVisible"
|
||||
>
|
||||
Add New Address
|
||||
</VBtn>
|
||||
|
||||
<!-- 👉 Delivery options -->
|
||||
<div class="text-body-1 text-high-emphasis font-weight-medium mb-4">
|
||||
Choose Delivery Speed
|
||||
</div>
|
||||
|
||||
<!-- 👉 Delivery options custom input -->
|
||||
<CustomRadiosWithIcon
|
||||
v-model:selected-radio="checkoutAddressDataLocal.deliverySpeed"
|
||||
:radio-content="deliveryOptions"
|
||||
:grid-column="{ cols: '12', sm: '4' }"
|
||||
>
|
||||
<template #default="{ item }">
|
||||
<div class="d-flex flex-column align-center gap-2 w-100">
|
||||
<div class="d-flex justify-end w-100 mb-n3">
|
||||
<VChip
|
||||
:color="resolveDeliveryBadgeData[item.value].color"
|
||||
size="small"
|
||||
>
|
||||
{{
|
||||
resolveDeliveryBadgeData[item.value].price === 'Free'
|
||||
? resolveDeliveryBadgeData[item.value].price : `$${resolveDeliveryBadgeData[item.value].price}`
|
||||
}}
|
||||
</VChip>
|
||||
</div>
|
||||
|
||||
<VIcon
|
||||
size="28"
|
||||
:icon="item.icon"
|
||||
class="text-high-emphasis"
|
||||
/>
|
||||
|
||||
<h6 class="text-h6">
|
||||
{{ item.title }}
|
||||
</h6>
|
||||
<p class="text-body-2 mb-0">
|
||||
{{ item.desc }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</CustomRadiosWithIcon>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<VCard
|
||||
flat
|
||||
variant="outlined"
|
||||
>
|
||||
<!-- 👉 Delivery estimate date -->
|
||||
<VCardText>
|
||||
<h6 class="text-h6 mb-4">
|
||||
Estimated Delivery Date
|
||||
</h6>
|
||||
|
||||
<VList class="card-list">
|
||||
<VListItem
|
||||
v-for="product in checkoutAddressDataLocal.cartItems"
|
||||
:key="product.name"
|
||||
>
|
||||
<template #prepend>
|
||||
<VImg
|
||||
width="54"
|
||||
height="70"
|
||||
:src="product.image"
|
||||
class="me-2"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<div class="text-body-1">
|
||||
{{ product.name }}
|
||||
</div>
|
||||
<div class="text-body-1 font-weight-medium">
|
||||
{{ product.estimatedDelivery }}
|
||||
</div>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<!-- 👉 Price details -->
|
||||
<VCardText>
|
||||
<h6 class="text-h6 mb-4">
|
||||
Price Details
|
||||
</h6>
|
||||
|
||||
<div class="d-flex align-center justify-space-between text-sm mb-2">
|
||||
<div class="text-high-emphasis text-body-1">
|
||||
Order Total
|
||||
</div>
|
||||
<div class="text-body-1">
|
||||
${{ checkoutAddressDataLocal.orderAmount }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-space-between">
|
||||
<div class="text-body-1 text-high-emphasis">
|
||||
Delivery Charges
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-x-2">
|
||||
<div class="text-body-1 text-disabled">
|
||||
$5.00
|
||||
</div>
|
||||
<VChip
|
||||
size="small"
|
||||
color="success"
|
||||
>
|
||||
Free
|
||||
</VChip>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<VCardText class="d-flex align-center justify-space-between text-high-emphasis">
|
||||
<span class="text-base font-weight-medium">Total</span>
|
||||
<span class="text-base font-weight-medium">
|
||||
${{ totalPriceWithDeliveryCharges }}
|
||||
</span>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<VBtn
|
||||
block
|
||||
class="mt-4"
|
||||
@click="nextStep"
|
||||
>
|
||||
Place Order
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
<AddEditAddressDialog v-model:isDialogVisible="isEditAddressDialogVisible" />
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
--v-card-list-gap: 16px;
|
||||
}
|
||||
</style>
|
||||
320
resources/js/views/wizard-examples/checkout/Cart.vue
Normal file
320
resources/js/views/wizard-examples/checkout/Cart.vue
Normal file
@@ -0,0 +1,320 @@
|
||||
<script setup>
|
||||
import emptyCartImg from '@images/pages/empty-cart.png'
|
||||
|
||||
const props = defineProps({
|
||||
currentStep: {
|
||||
type: Number,
|
||||
required: false,
|
||||
},
|
||||
checkoutData: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits([
|
||||
'update:currentStep',
|
||||
'update:checkout-data',
|
||||
])
|
||||
|
||||
const checkoutCartDataLocal = ref(props.checkoutData)
|
||||
|
||||
const removeItem = item => {
|
||||
checkoutCartDataLocal.value.cartItems = checkoutCartDataLocal.value.cartItems.filter(i => i.id !== item.id)
|
||||
}
|
||||
|
||||
const totalCost = computed(() => {
|
||||
return checkoutCartDataLocal.value.orderAmount = checkoutCartDataLocal.value.cartItems.reduce((acc, item) => {
|
||||
return acc + item.price * item.quantity
|
||||
}, 0)
|
||||
})
|
||||
|
||||
const updateCartData = () => {
|
||||
emit('update:checkout-data', checkoutCartDataLocal.value)
|
||||
}
|
||||
|
||||
const nextStep = () => {
|
||||
updateCartData()
|
||||
emit('update:currentStep', props.currentStep ? props.currentStep + 1 : 1)
|
||||
}
|
||||
|
||||
watch(() => props.currentStep, updateCartData)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow v-if="checkoutCartDataLocal">
|
||||
<VCol
|
||||
cols="12"
|
||||
md="8"
|
||||
>
|
||||
<!-- 👉 Offers alert -->
|
||||
<VAlert
|
||||
color="success"
|
||||
variant="tonal"
|
||||
icon="ri-percent-line"
|
||||
closable
|
||||
>
|
||||
<VAlertTitle class="text-success mb-1">
|
||||
Available Offers
|
||||
</VAlertTitle>
|
||||
|
||||
<p class="mb-0">
|
||||
- 0% Instant Discount on Bank of America Corp Bank Debit and Credit cards
|
||||
</p>
|
||||
<p class="mb-0">
|
||||
- 50% Cashback Voucher of up to $60 on first ever PayPal transaction. TCA
|
||||
</p>
|
||||
</VAlert>
|
||||
|
||||
<h5 class="text-h5 my-4">
|
||||
My Shopping Bag ({{ checkoutCartDataLocal.cartItems.length }} Items)
|
||||
</h5>
|
||||
|
||||
<!-- 👉 Cart items -->
|
||||
<div
|
||||
v-if="checkoutCartDataLocal.cartItems.length"
|
||||
class="border rounded"
|
||||
>
|
||||
<template
|
||||
v-for="(item, index) in checkoutCartDataLocal.cartItems"
|
||||
:key="item.name"
|
||||
>
|
||||
<div
|
||||
class="d-flex align-center gap-3 pa-5 position-relative flex-column flex-sm-row"
|
||||
:class="index ? 'border-t' : ''"
|
||||
>
|
||||
<IconBtn
|
||||
size="x-small"
|
||||
class="checkout-item-remove-btn"
|
||||
color="disabled"
|
||||
@click="removeItem(item)"
|
||||
>
|
||||
<VIcon
|
||||
size="18"
|
||||
icon="ri-close-line"
|
||||
/>
|
||||
</IconBtn>
|
||||
|
||||
<div>
|
||||
<VImg
|
||||
width="140"
|
||||
:src="item.image"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="d-flex w-100"
|
||||
:class="(($vuetify.display.width <= 1280 && $vuetify.display.width >= 960) || $vuetify.display.width <= 700) ? 'flex-column' : 'flex-row'"
|
||||
>
|
||||
<div>
|
||||
<h6 class="text-h6 mb-2">
|
||||
{{ item.name }}
|
||||
</h6>
|
||||
<div class="d-flex align-center text-no-wrap gap-2 text-base">
|
||||
<span class="text-disabled">Sold by:</span>
|
||||
<span class="text-primary">{{ item.seller }}</span>
|
||||
<VChip
|
||||
:color="item.inStock ? 'success' : 'error'"
|
||||
size="small"
|
||||
>
|
||||
{{ item.inStock ? 'In Stock' : 'Out of Stock' }}
|
||||
</VChip>
|
||||
</div>
|
||||
|
||||
<div class="my-2">
|
||||
<VRating
|
||||
:model-value="item.rating"
|
||||
size="24"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<VTextField
|
||||
v-model="item.quantity"
|
||||
type="number"
|
||||
density="compact"
|
||||
style="inline-size: 7.5rem;"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<VSpacer />
|
||||
|
||||
<div
|
||||
class="d-flex flex-column mt-5"
|
||||
:class="(($vuetify.display.width <= 1280 && $vuetify.display.width >= 960) || $vuetify.display.width <= 700) ? 'text-start' : 'text-end'"
|
||||
>
|
||||
<p class="text-base">
|
||||
<span class="text-primary">${{ item.price }}</span>
|
||||
<span>/</span>
|
||||
<span class="text-decoration-line-through">${{ item.discountPrice }}</span>
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<VBtn
|
||||
size="small"
|
||||
variant="outlined"
|
||||
>
|
||||
move to wishlist
|
||||
</VBtn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- 👉 Empty Cart -->
|
||||
<div v-else>
|
||||
<VImg :src="emptyCartImg" />
|
||||
</div>
|
||||
|
||||
<!-- 👉 Add more from wishlist -->
|
||||
<div
|
||||
class="d-flex align-center justify-space-between border rounded px-5 text-base mt-4"
|
||||
style="padding-block:7px"
|
||||
>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="font-weight-medium"
|
||||
>Add more products from wishlist</a>
|
||||
<VIcon
|
||||
icon="ri-arrow-right-line"
|
||||
class="flip-in-rtl"
|
||||
size="16"
|
||||
color="primary"
|
||||
/>
|
||||
</div>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<VCard
|
||||
flat
|
||||
variant="outlined"
|
||||
>
|
||||
<!-- 👉 payment offer -->
|
||||
<VCardText>
|
||||
<h6 class="text-h6 mb-4">
|
||||
Offer
|
||||
</h6>
|
||||
|
||||
<div class="d-flex align-center gap-4">
|
||||
<VTextField
|
||||
v-model="checkoutCartDataLocal.promoCode"
|
||||
placeholder="Enter Promo Code"
|
||||
density="compact"
|
||||
/>
|
||||
|
||||
<VBtn
|
||||
variant="outlined"
|
||||
@click="updateCartData"
|
||||
>
|
||||
Apply
|
||||
</VBtn>
|
||||
</div>
|
||||
|
||||
<!-- 👉 Gift wrap banner -->
|
||||
<div class="bg-var-theme-background rounded pa-5 mt-4">
|
||||
<h6 class="text-h6">
|
||||
Buying gift for a loved one?
|
||||
</h6>
|
||||
|
||||
<p class="my-2 text-body-1">
|
||||
Gift wrap and personalized message on card, Only for $2.
|
||||
</p>
|
||||
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="font-weight-medium d-inline-block"
|
||||
>Add a gift wrap</a>
|
||||
</div>
|
||||
</VCardText>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<!-- 👉 Price details -->
|
||||
<VCardText>
|
||||
<h6 class="text-h6 mb-4">
|
||||
Price Details
|
||||
</h6>
|
||||
|
||||
<div class="text-sm text-high-emphasis">
|
||||
<div class="d-flex justify-space-between mb-2">
|
||||
<div class="text-body-1 text-high-emphasis">
|
||||
Bag Total
|
||||
</div>
|
||||
<div class="text-body-1">
|
||||
${{ totalCost }}.00
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-space-between mb-2">
|
||||
<div class="text-body-1 text-high-emphasis">
|
||||
Coupon Discount
|
||||
</div>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="text-base d-inline-block"
|
||||
>Apply Coupon</a>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-space-between mb-2">
|
||||
<div class="text-body-1 text-high-emphasis">
|
||||
Order Total
|
||||
</div>
|
||||
<div class="text-body-1">
|
||||
${{ totalCost }}.00
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-space-between">
|
||||
<div class="text-body-1 text-high-emphasis">
|
||||
Delivery Charges
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-x-2">
|
||||
<div class="text-decoration-line-through text-body-1 text-disabled">
|
||||
$5.00
|
||||
</div>
|
||||
<VChip
|
||||
size="small"
|
||||
color="success"
|
||||
>
|
||||
Free
|
||||
</VChip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<VCardText class="d-flex justify-space-between py-4">
|
||||
<h6 class="text-h6">
|
||||
Total
|
||||
</h6>
|
||||
<h6 class="text-h6">
|
||||
${{ totalCost }}.00
|
||||
</h6>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<VBtn
|
||||
block
|
||||
class="mt-4"
|
||||
@click="nextStep"
|
||||
>
|
||||
Place Order
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.checkout-item-remove-btn {
|
||||
position: absolute;
|
||||
inset-block-start: 10px;
|
||||
inset-inline-end: 10px;
|
||||
}
|
||||
</style>
|
||||
271
resources/js/views/wizard-examples/checkout/Confirmation.vue
Normal file
271
resources/js/views/wizard-examples/checkout/Confirmation.vue
Normal 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>
|
||||
322
resources/js/views/wizard-examples/checkout/Payment.vue
Normal file
322
resources/js/views/wizard-examples/checkout/Payment.vue
Normal file
@@ -0,0 +1,322 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
currentStep: {
|
||||
type: Number,
|
||||
required: false,
|
||||
},
|
||||
checkoutData: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits([
|
||||
'update:currentStep',
|
||||
'update:checkout-data',
|
||||
])
|
||||
|
||||
const prop = __props
|
||||
const checkoutPaymentDataLocal = ref(prop.checkoutData)
|
||||
const selectedPaymentMethod = ref('card')
|
||||
|
||||
const cardFormData = ref({
|
||||
cardNumber: null,
|
||||
cardName: '',
|
||||
cardExpiry: '',
|
||||
cardCvv: null,
|
||||
isCardSave: true,
|
||||
})
|
||||
|
||||
const giftCardFormData = ref({
|
||||
giftCardNumber: null,
|
||||
giftCardPin: null,
|
||||
})
|
||||
|
||||
const selectedDeliveryAddress = computed(() => {
|
||||
return checkoutPaymentDataLocal.value.addresses.filter(address => {
|
||||
return address.value === checkoutPaymentDataLocal.value.deliveryAddress
|
||||
})
|
||||
})
|
||||
|
||||
const updateCartData = () => {
|
||||
emit('update:checkout-data', checkoutPaymentDataLocal.value)
|
||||
}
|
||||
|
||||
const nextStep = () => {
|
||||
updateCartData()
|
||||
emit('update:currentStep', prop.currentStep ? prop.currentStep + 1 : 1)
|
||||
}
|
||||
|
||||
watch(() => prop.currentStep, updateCartData)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="8"
|
||||
>
|
||||
<!-- 👉 Offers alert -->
|
||||
<VAlert
|
||||
color="success"
|
||||
variant="tonal"
|
||||
icon="ri-percent-line"
|
||||
closable
|
||||
class="mb-6"
|
||||
>
|
||||
<VAlertTitle class="text-success mb-1">
|
||||
Available Offers
|
||||
</VAlertTitle>
|
||||
|
||||
<p class="mb-0">
|
||||
- 10% Instant Discount on Bank of America Corp Bank Debit and Credit cards
|
||||
</p>
|
||||
<p class="mb-0">
|
||||
- 25% Cashback Voucher of up to $60 on first ever PayPal transaction. TCA
|
||||
</p>
|
||||
</VAlert>
|
||||
|
||||
<VTabs
|
||||
v-model="selectedPaymentMethod"
|
||||
class="v-tabs-pill"
|
||||
>
|
||||
<VTab value="card">
|
||||
Card
|
||||
</VTab>
|
||||
<VTab value="cash-on-delivery">
|
||||
Cash on Delivery
|
||||
</VTab>
|
||||
<VTab value="gift-card">
|
||||
Gift Card
|
||||
</VTab>
|
||||
</VTabs>
|
||||
|
||||
<VWindow
|
||||
v-model="selectedPaymentMethod"
|
||||
class="pt-6"
|
||||
style="max-inline-size: 600px;"
|
||||
>
|
||||
<VWindowItem value="card">
|
||||
<VForm>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="cardFormData.cardNumber"
|
||||
type="number"
|
||||
label="Card Number"
|
||||
placeholder="1234 5678 9012 3456"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="cardFormData.cardName"
|
||||
label="Name"
|
||||
placeholder="John Doe"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="6"
|
||||
md="3"
|
||||
>
|
||||
<VTextField
|
||||
v-model="cardFormData.cardExpiry"
|
||||
label="Expiry"
|
||||
placeholder="MM/YY"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="6"
|
||||
md="3"
|
||||
>
|
||||
<VTextField
|
||||
v-model="cardFormData.cardCvv"
|
||||
label="CVV"
|
||||
placeholder="123"
|
||||
type="number"
|
||||
>
|
||||
<template #append-inner>
|
||||
<VTooltip
|
||||
text="Card Verification Value"
|
||||
location="bottom"
|
||||
>
|
||||
<template #activator="{ props: tooltipProps }">
|
||||
<VIcon
|
||||
v-bind="tooltipProps"
|
||||
size="20"
|
||||
icon="ri-question-line"
|
||||
/>
|
||||
</template>
|
||||
</VTooltip>
|
||||
</template>
|
||||
</VTextField>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VSwitch
|
||||
v-model="cardFormData.isCardSave"
|
||||
label="Save Card for future billing?"
|
||||
/>
|
||||
|
||||
<div class="mt-4">
|
||||
<VBtn
|
||||
class="me-4"
|
||||
@click="nextStep"
|
||||
>
|
||||
Save Changes
|
||||
</VBtn>
|
||||
<VBtn
|
||||
variant="outlined"
|
||||
color="secondary"
|
||||
>
|
||||
Reset
|
||||
</VBtn>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VWindowItem>
|
||||
|
||||
<VWindowItem value="cash-on-delivery">
|
||||
<p class="text-base text-high-emphasis my-6">
|
||||
Cash on Delivery is a type of payment method where the recipient make payment for the order at the time of delivery rather than in advance.
|
||||
</p>
|
||||
|
||||
<VBtn @click="nextStep">
|
||||
Pay on delivery
|
||||
</VBtn>
|
||||
</VWindowItem>
|
||||
|
||||
<VWindowItem value="gift-card">
|
||||
<h6 class="text-base font-weight-medium my-6">
|
||||
Enter Gift Card Details
|
||||
</h6>
|
||||
<VForm>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="giftCardFormData.giftCardNumber"
|
||||
label="Gift Card Number"
|
||||
placeholder="1234 5678 9012 3456"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="giftCardFormData.giftCardPin"
|
||||
label="Gift Card Pin"
|
||||
placeholder="1234"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VBtn @click="nextStep">
|
||||
Redeem Gift Card
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VWindowItem>
|
||||
</VWindow>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<VCard
|
||||
flat
|
||||
variant="outlined"
|
||||
>
|
||||
<VCardText>
|
||||
<h6 class="text-h6 mb-4">
|
||||
Price Details
|
||||
</h6>
|
||||
|
||||
<div class="d-flex justify-space-between text-sm mb-2">
|
||||
<div class="text-body-1 text-high-emphasis">
|
||||
Order Total
|
||||
</div>
|
||||
<div class="text-body-1">
|
||||
${{ checkoutPaymentDataLocal.orderAmount }}.00
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-space-between text-sm">
|
||||
<div class="text-high-emphasis text-body-1">
|
||||
Delivery Charges
|
||||
</div>
|
||||
<div
|
||||
v-if="checkoutPaymentDataLocal.deliverySpeed === 'free'"
|
||||
class="d-flex align-center"
|
||||
>
|
||||
<div class="text-body-1 text-disabled me-2">
|
||||
$5.00
|
||||
</div>
|
||||
<VChip
|
||||
color="success"
|
||||
size="small"
|
||||
>
|
||||
FREE
|
||||
</VChip>
|
||||
</div>
|
||||
<div v-else>
|
||||
<span>${{ checkoutPaymentDataLocal.deliveryCharges }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<VCardText>
|
||||
<div class="d-flex justify-space-between text-base mb-2">
|
||||
<div class="text-high-emphasis font-weight-medium">
|
||||
Total
|
||||
</div>
|
||||
<h6 class="text-h6 text-medium-emphasis">
|
||||
${{ checkoutPaymentDataLocal.orderAmount + checkoutPaymentDataLocal.deliveryCharges }}.00
|
||||
</h6>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-space-between text-base mb-4">
|
||||
<h6 class="text-h6">
|
||||
Deliver to:
|
||||
</h6>
|
||||
<VChip
|
||||
color="primary"
|
||||
size="small"
|
||||
class="text-capitalize"
|
||||
>
|
||||
{{ checkoutPaymentDataLocal.deliveryAddress }}
|
||||
</VChip>
|
||||
</div>
|
||||
|
||||
<template
|
||||
v-for="item in selectedDeliveryAddress"
|
||||
:key="item.value"
|
||||
>
|
||||
<h6 class="text-h6">
|
||||
{{ item.title }}
|
||||
</h6>
|
||||
<p class="text-body-1 mb-1">
|
||||
{{ item.desc }}
|
||||
</p>
|
||||
<p class="text-base mb-4">
|
||||
Mobile : {{ item.subtitle }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="font-weight-medium text-base d-inline-block"
|
||||
>Change address</a>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
1
resources/js/views/wizard-examples/checkout/types.js
Normal file
1
resources/js/views/wizard-examples/checkout/types.js
Normal file
@@ -0,0 +1 @@
|
||||
export {}
|
||||
131
resources/js/views/wizard-examples/create-deal/DealDetails.vue
Normal file
131
resources/js/views/wizard-examples/create-deal/DealDetails.vue
Normal file
@@ -0,0 +1,131 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
formData: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:formData'])
|
||||
|
||||
const formData = ref(props.formData)
|
||||
|
||||
const offeredItems = [
|
||||
'iPhone 12 Pro Max',
|
||||
'iPhone 12 Pro',
|
||||
'iPhone 11 Pro Max',
|
||||
'iPhone 11',
|
||||
'iPhone 12 Mini',
|
||||
'OnePlus Nord CE',
|
||||
]
|
||||
|
||||
watch(formData, () => {
|
||||
emit('update:formData', formData.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.title"
|
||||
label="Deal Title"
|
||||
placeholder="Black Friday Sale, 50% off on all products"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.code"
|
||||
label="Deal Code"
|
||||
placeholder="BLACKFRIDAY50"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VTextarea
|
||||
v-model="formData.description"
|
||||
label="Deal Description"
|
||||
placeholder="Write something about this deal"
|
||||
auto-grow
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VSelect
|
||||
v-model="formData.offeredUItems"
|
||||
multiple
|
||||
chips
|
||||
label="Offered Items"
|
||||
placeholder="Select Offered Items"
|
||||
:items="offeredItems"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VSelect
|
||||
v-model="formData.cartCondition"
|
||||
label="Cart Condition"
|
||||
placeholder="Select Cart Condition"
|
||||
:items="['Cart must contain all selected Downloads', 'Cart needs one or more of the selected Downloads']"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<AppDateTimePicker
|
||||
v-model="formData.dealDuration"
|
||||
label="Deal Duration"
|
||||
placeholder="Select Date"
|
||||
:config="{ mode: 'range' }"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<h6 class="text-sm font-weight-medium">
|
||||
Notify Users
|
||||
</h6>
|
||||
|
||||
<div class="d-flex align-center flex-wrap gap-x-3">
|
||||
<VCheckbox
|
||||
v-model="formData.notification.email"
|
||||
label="Email"
|
||||
value="email"
|
||||
/>
|
||||
<VCheckbox
|
||||
v-model="formData.notification.sms"
|
||||
label="SMS"
|
||||
value="sms"
|
||||
/>
|
||||
<VCheckbox
|
||||
v-model="formData.notification.pushNotification"
|
||||
label="Push Notification"
|
||||
value="push-notification"
|
||||
/>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
@@ -0,0 +1,124 @@
|
||||
<script setup>
|
||||
import reviewAndComplete from '@images/pages/create-deal-review-complete.png'
|
||||
|
||||
const props = defineProps({
|
||||
formData: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:formData'])
|
||||
|
||||
const formData = ref(props.formData)
|
||||
|
||||
watch(formData, () => {
|
||||
emit('update:formData', formData.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="7"
|
||||
>
|
||||
<h4 class="text-h4 mb-4">
|
||||
Almost done! 🚀
|
||||
</h4>
|
||||
|
||||
<p>Confirm your deal details information and submit to create it.</p>
|
||||
|
||||
<table class="text-base">
|
||||
<tr>
|
||||
<td style="inline-size: 202px;">
|
||||
<p class="font-weight-medium mb-2">
|
||||
Deal Type
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="mb-2">
|
||||
Percentage
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<p class="font-weight-medium mb-2">
|
||||
Amount
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="mb-2">
|
||||
25%
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<p class="font-weight-medium mb-2">
|
||||
Deal Code
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="mb-2">
|
||||
<VChip
|
||||
size="small"
|
||||
color="warning"
|
||||
>
|
||||
25PEROFF
|
||||
</VChip>
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<p class="font-weight-medium mb-2">
|
||||
Deal Title
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="mb-2">
|
||||
Black friday sale, 25% OFF
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<p class="font-weight-medium mb-2">
|
||||
Deal Duration
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="mb-2">
|
||||
2021-07-14 to 2021-07-30
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<VSwitch
|
||||
v-model="formData.isDealDetailsConfirmed"
|
||||
label="I have confirmed the deal details."
|
||||
class="mb-3"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="5"
|
||||
>
|
||||
<div class="border rounded pa-4 pb-0">
|
||||
<VImg
|
||||
width="178"
|
||||
:src="reviewAndComplete"
|
||||
class="mx-auto"
|
||||
/>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
90
resources/js/views/wizard-examples/create-deal/DealType.vue
Normal file
90
resources/js/views/wizard-examples/create-deal/DealType.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<script setup>
|
||||
import ShoppingGirl from '@images/pages/shopping-girl.png'
|
||||
|
||||
const props = defineProps({
|
||||
formData: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:formData'])
|
||||
|
||||
const discountOffers = [
|
||||
{
|
||||
icon: 'ri-percent-line',
|
||||
title: 'Percentage',
|
||||
desc: 'Create a deal which offer uses some % off (i.e 5% OFF) on total.',
|
||||
value: 'percentage',
|
||||
},
|
||||
{
|
||||
icon: 'ri-money-dollar-circle-line',
|
||||
title: 'Flat Amount',
|
||||
desc: 'Create a deal which offer uses some flat amount (i.e $5 OFF) on total.',
|
||||
value: 'flat',
|
||||
},
|
||||
{
|
||||
icon: 'ri-user-line',
|
||||
title: 'Prime member',
|
||||
desc: 'Create prime member only deal to encourage the prime members.',
|
||||
value: 'prime',
|
||||
},
|
||||
]
|
||||
|
||||
const formData = ref(props.formData)
|
||||
|
||||
watch(formData, () => {
|
||||
emit('update:formData', formData.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm>
|
||||
<VRow>
|
||||
<!-- 👉 Shopping girl image -->
|
||||
<VCol cols="12">
|
||||
<VImg
|
||||
:src="ShoppingGirl"
|
||||
max-height="240"
|
||||
class="border rounded"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<CustomRadiosWithIcon
|
||||
v-model:selected-radio="formData.Offer"
|
||||
:radio-content="discountOffers"
|
||||
:grid-column="{ cols: '12', sm: '4' }"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.discount"
|
||||
type="number"
|
||||
label="Discount"
|
||||
placeholder="10%"
|
||||
hint="Enter the discount percentage. 10 = 10%"
|
||||
persistent-hint
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VSelect
|
||||
v-model="formData.region"
|
||||
label="Region"
|
||||
:items="['Asia', 'Europe', 'Africa', 'Australia', 'North America', 'South America']"
|
||||
placeholder="Select Region"
|
||||
hint="Select applicable regions for the deal."
|
||||
persistent-hint
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
101
resources/js/views/wizard-examples/create-deal/DealUsage.vue
Normal file
101
resources/js/views/wizard-examples/create-deal/DealUsage.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
formData: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:formData'])
|
||||
|
||||
const formData = ref(props.formData)
|
||||
|
||||
watch(formData, () => {
|
||||
emit('update:formData', formData.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VSelect
|
||||
v-model="formData.userType"
|
||||
label="User Type"
|
||||
placeholder="Select User Type"
|
||||
:items="['All', 'Registered', 'Unregistered', 'Prime Member']"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.maxUsers"
|
||||
label="Max Users"
|
||||
placeholder="1000"
|
||||
type="number"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.cartAmount"
|
||||
label="Minimum Cart Amount"
|
||||
placeholder="$199"
|
||||
type="number"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.promotionFree"
|
||||
label="Promotion Fee"
|
||||
placeholder="$4.99"
|
||||
type="number"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VSelect
|
||||
v-model="formData.paymentMethod"
|
||||
label="Payment Method"
|
||||
placeholder="Select Payment Method"
|
||||
:items="['Any', 'Credit Card', 'Net Banking', 'Wallet']"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VSelect
|
||||
v-model="formData.dealStatus"
|
||||
label="Deal Status"
|
||||
placeholder="Select Deal Status"
|
||||
:items="['Active', 'Inactive', 'Suspended', 'Abandoned']"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VSwitch
|
||||
v-model="formData.isSingleUserCustomer"
|
||||
label="Limit this discount to a single-use per customer?"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
1
resources/js/views/wizard-examples/create-deal/types.js
Normal file
1
resources/js/views/wizard-examples/create-deal/types.js
Normal file
@@ -0,0 +1 @@
|
||||
export {}
|
||||
@@ -0,0 +1,129 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
formData: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:formData'])
|
||||
|
||||
const propertyRadioContent = [
|
||||
{
|
||||
title: 'I am the builder',
|
||||
desc: 'List property as Builder, list your project and get highest reach fast.',
|
||||
icon: 'ri-home-6-line',
|
||||
value: 'builder',
|
||||
},
|
||||
{
|
||||
title: 'I am the owner',
|
||||
desc: 'Submit property as an Individual. Lease, Rent or Sell at the best price.',
|
||||
icon: 'ri-user-3-line',
|
||||
value: 'owner',
|
||||
},
|
||||
{
|
||||
title: 'I am the broker',
|
||||
desc: 'Earn highest commission by listing your clients properties at best price.',
|
||||
value: 'broker',
|
||||
icon: 'ri-money-dollar-circle-line',
|
||||
},
|
||||
]
|
||||
|
||||
const formData = ref(props.formData)
|
||||
|
||||
watch(formData, () => {
|
||||
emit('update:formData', formData.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<!-- 👉 User Type -->
|
||||
<CustomRadiosWithIcon
|
||||
v-model:selected-radio="formData.userType"
|
||||
:radio-content="propertyRadioContent"
|
||||
:grid-column="{ cols: '12', sm: '4' }"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 First Name -->
|
||||
<VTextField
|
||||
v-model="formData.firstName"
|
||||
class="text-center"
|
||||
label="First Name"
|
||||
placeholder="John"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Last Name -->
|
||||
<VTextField
|
||||
v-model="formData.lastName"
|
||||
label="Last Name"
|
||||
placeholder="Doe"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Username -->
|
||||
<VTextField
|
||||
v-model="formData.username"
|
||||
label="Username"
|
||||
placeholder="Johndoe"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Password -->
|
||||
<VTextField
|
||||
v-model="formData.password"
|
||||
autocomplete="on"
|
||||
type="password"
|
||||
label="Password"
|
||||
placeholder="············"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Email -->
|
||||
<VTextField
|
||||
v-model="formData.email"
|
||||
type="email"
|
||||
label="Email"
|
||||
placeholder="john.doe@email.com"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Contact -->
|
||||
<VTextField
|
||||
v-model="formData.contact"
|
||||
type="number"
|
||||
label="Contact"
|
||||
placeholder="+1 123 456 7890"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
@@ -0,0 +1,140 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
formData: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:formData'])
|
||||
|
||||
const formData = ref(props.formData)
|
||||
|
||||
watch(formData, () => {
|
||||
emit('update:formData', formData.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Expected Price -->
|
||||
<VTextField
|
||||
v-model="formData.expectedPrice"
|
||||
label="Expected Price"
|
||||
type="number"
|
||||
append-inner-icon="ri-money-dollar-circle-line"
|
||||
placeholder="25,000"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Price Per SQFT -->
|
||||
<VTextField
|
||||
v-model="formData.pricePerSqft"
|
||||
label="Price Per SQFT"
|
||||
append-inner-icon="ri-money-dollar-circle-line"
|
||||
type="number"
|
||||
placeholder="500"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Maintenance Charge -->
|
||||
<VTextField
|
||||
v-model="formData.maintenanceCharge"
|
||||
label="Maintenance Charge"
|
||||
append-inner-icon="ri-money-dollar-circle-line"
|
||||
type="number"
|
||||
placeholder="50"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Maintenance Period -->
|
||||
<VSelect
|
||||
v-model="formData.maintenancePeriod"
|
||||
label="Maintenance Period"
|
||||
placeholder="Select Maintenance Period"
|
||||
:items="['Monthly', 'Quarterly', 'Half Yearly', 'Yearly']"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Booking/Token Amount -->
|
||||
<VTextField
|
||||
v-model="formData.bookingAmount"
|
||||
label="Booking/Token Amount"
|
||||
append-inner-icon="ri-money-dollar-circle-line"
|
||||
type="number"
|
||||
placeholder="250"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Other Amount -->
|
||||
<VTextField
|
||||
v-model="formData.otherAmount"
|
||||
label="Other Amount"
|
||||
append-inner-icon="ri-money-dollar-circle-line"
|
||||
type="number"
|
||||
placeholder="500"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Show Price As -->
|
||||
<VRadioGroup v-model="formData.priceDisplayType">
|
||||
<template #label>
|
||||
<div>
|
||||
Show Price As
|
||||
</div>
|
||||
</template>
|
||||
<VRadio
|
||||
label="Negotiable"
|
||||
value="Negotiable"
|
||||
/>
|
||||
<VRadio
|
||||
label="Call For Price"
|
||||
value="Call For Price"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Price Includes -->
|
||||
<div class="mb-2 text-base">
|
||||
Price Includes
|
||||
</div>
|
||||
<VCheckbox
|
||||
v-model="formData.priceIncludes"
|
||||
label="Car Parking"
|
||||
value="Car Parking"
|
||||
/>
|
||||
<VCheckbox
|
||||
v-model="formData.priceIncludes"
|
||||
label="Club Membership"
|
||||
value="Club Membership"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
@@ -0,0 +1,159 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
formData: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:formData'])
|
||||
|
||||
const formData = ref(props.formData)
|
||||
|
||||
watch(formData, () => {
|
||||
emit('update:formData', formData.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Total Area -->
|
||||
<VTextField
|
||||
v-model="formData.totalArea"
|
||||
label="Total Area"
|
||||
suffix="sq-ft"
|
||||
type="number"
|
||||
placeholder="1000"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Carpet Area -->
|
||||
<VTextField
|
||||
v-model="formData.carpetArea"
|
||||
label="Carpet Area"
|
||||
suffix="sq-ft"
|
||||
type="number"
|
||||
placeholder="800"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Plot Area -->
|
||||
<VTextField
|
||||
v-model="formData.plotArea"
|
||||
label="Plot Area"
|
||||
suffix="sq-ft"
|
||||
type="number"
|
||||
placeholder="800"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Available From -->
|
||||
<AppDateTimePicker
|
||||
v-model="formData.availableFrom"
|
||||
label="Available From"
|
||||
type="date"
|
||||
placeholder="Select Date"
|
||||
format="YYYY-MM-DD"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Possession Status -->
|
||||
<VRadioGroup v-model="formData.possessionStatus">
|
||||
<template #label>
|
||||
<div>
|
||||
Possession Status
|
||||
</div>
|
||||
</template>
|
||||
<VRadio
|
||||
value="Under Construciton"
|
||||
label="Under Construction"
|
||||
/>
|
||||
<VRadio
|
||||
value="Ready to Move"
|
||||
label="Ready to Move"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Transaction Type -->
|
||||
<VRadioGroup v-model="formData.transactionType">
|
||||
<template #label>
|
||||
<div>
|
||||
Transaction Type
|
||||
</div>
|
||||
</template>
|
||||
<VRadio
|
||||
value="New Property"
|
||||
label="New Property"
|
||||
/>
|
||||
<VRadio
|
||||
value="Resale"
|
||||
label="Resale"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 property Location -->
|
||||
<VRadioGroup v-model="formData.isOnMainRoad">
|
||||
<template #label>
|
||||
<div>
|
||||
Is Property Facing Main Road?
|
||||
</div>
|
||||
</template>
|
||||
<VRadio
|
||||
value="Yes"
|
||||
label="Yes"
|
||||
/>
|
||||
<VRadio
|
||||
value="No"
|
||||
label="No"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Gated Colony -->
|
||||
<VRadioGroup v-model="formData.isGatedColony">
|
||||
<template #label>
|
||||
<div>
|
||||
Gated Colony
|
||||
</div>
|
||||
</template>
|
||||
<VRadio
|
||||
value="Yes"
|
||||
label="Yes"
|
||||
/>
|
||||
<VRadio
|
||||
value="No"
|
||||
label="No"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
@@ -0,0 +1,130 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
formData: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:formData'])
|
||||
|
||||
const radioContent = [
|
||||
{
|
||||
title: 'Sell the property',
|
||||
desc: 'Post your property for sale. Unlimited free listing.',
|
||||
icon: 'ri-money-dollar-circle-line',
|
||||
value: 'sell',
|
||||
},
|
||||
{
|
||||
title: 'Rent the property',
|
||||
desc: 'Post your property for rent. Unlimited free listing.',
|
||||
icon: 'ri-home-6-line',
|
||||
value: 'rent',
|
||||
},
|
||||
]
|
||||
|
||||
const formData = ref(props.formData)
|
||||
|
||||
watch(formData, () => {
|
||||
emit('update:formData', formData.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<!-- 👉 Property Deal Type -->
|
||||
<CustomRadiosWithIcon
|
||||
v-model:selected-radio="formData.propertyDealType"
|
||||
:radio-content="radioContent"
|
||||
:grid-column="{ cols: '12', sm: '6' }"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Property Type -->
|
||||
<VSelect
|
||||
v-model="formData.propertyType"
|
||||
label="Property type"
|
||||
placeholder="Select Property Type"
|
||||
:items="['Residential', 'Commercial']"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Zip Code -->
|
||||
<VTextField
|
||||
v-model="formData.zipCode"
|
||||
label="Zip Code"
|
||||
type="number"
|
||||
placeholder="123456"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Country -->
|
||||
<VSelect
|
||||
v-model="formData.country"
|
||||
label="Country"
|
||||
placeholder="Select country"
|
||||
:items="['India', 'UK', 'USA', 'AUS', 'Germany']"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 State -->
|
||||
<VTextField
|
||||
v-model="formData.state"
|
||||
label="State"
|
||||
placeholder="California"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 City -->
|
||||
<VTextField
|
||||
v-model="formData.city"
|
||||
label="City"
|
||||
placeholder="Los Angeles"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Landmark -->
|
||||
<VTextField
|
||||
v-model="formData.landmark"
|
||||
label="Landmark"
|
||||
placeholder="Near to bus stop"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol>
|
||||
<!-- 👉 Address -->
|
||||
<VTextarea
|
||||
v-model="formData.address"
|
||||
label="Address"
|
||||
placeholder="112, 1st Cross, 1st Stage, 1st Phase, BTM Layout, Bangalore - 560068"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
@@ -0,0 +1,122 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
formData: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:formData'])
|
||||
|
||||
const formData = ref(props.formData)
|
||||
|
||||
watch(formData, () => {
|
||||
emit('update:formData', formData.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Bedrooms -->
|
||||
<VTextField
|
||||
v-model="formData.bedroomCount"
|
||||
label="Bedrooms"
|
||||
placeholder="3"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Floor No -->
|
||||
<VTextField
|
||||
v-model="formData.floorNo"
|
||||
label="Floor No"
|
||||
placeholder="12"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Bathrooms -->
|
||||
<VTextField
|
||||
v-model="formData.bathroomCount"
|
||||
label="Bathroom"
|
||||
placeholder="4"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Furnished Status -->
|
||||
<VSelect
|
||||
v-model="formData.furnishedStatus"
|
||||
label="Furnished Status"
|
||||
placeholder="Select Furnished Status"
|
||||
:items="['Fully Furnished', 'Furnished', 'Semi-Furnished', 'Unfurnished']"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<!-- 👉 Furnishing Details -->
|
||||
<VSelect
|
||||
v-model="formData.furnishingDetails"
|
||||
label="Furnishing Details"
|
||||
placeholder="Select Furnishing Details"
|
||||
multiple
|
||||
chips
|
||||
closable-chips
|
||||
:items="['TV', 'AC', 'RO', 'Bed', 'Fridge', 'Wi-Fi', 'Sofa', 'Cupboard', 'Microwave', 'Dining Table', 'Washing Machine']"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 xCommon Area? -->
|
||||
<VRadioGroup v-model="formData.isCommonArea1">
|
||||
<template #label>
|
||||
<div>
|
||||
Is There Any Common Area?
|
||||
</div>
|
||||
</template>
|
||||
<VRadio
|
||||
label="Yes"
|
||||
value="true"
|
||||
/>
|
||||
<VRadio
|
||||
label="No"
|
||||
value="false"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Common Area? -->
|
||||
<VRadioGroup v-model="formData.isCommonArea2">
|
||||
<template #label>
|
||||
<div>
|
||||
Is There Any Common Area?
|
||||
</div>
|
||||
</template>
|
||||
<VRadio
|
||||
label="Yes"
|
||||
value="true"
|
||||
/>
|
||||
<VRadio
|
||||
label="No"
|
||||
value="false"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
@@ -0,0 +1 @@
|
||||
export {}
|
||||
Reference in New Issue
Block a user