first commit
This commit is contained in:
Inshal
132
resources/js/pages/wizard-examples/checkout.vue
Normal file
132
resources/js/pages/wizard-examples/checkout.vue
Normal file
@@ -0,0 +1,132 @@
|
||||
<script setup>
|
||||
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'
|
||||
|
||||
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>
|
||||
<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>
|
||||
</template>
|
||||
150
resources/js/pages/wizard-examples/create-deal.vue
Normal file
150
resources/js/pages/wizard-examples/create-deal.vue
Normal file
@@ -0,0 +1,150 @@
|
||||
<script setup>
|
||||
import DealDetails from '@/views/wizard-examples/create-deal/DealDetails.vue'
|
||||
import DealReviewComplete from '@/views/wizard-examples/create-deal/DealReviewComplete.vue'
|
||||
import CreateDealType from '@/views/wizard-examples/create-deal/DealType.vue'
|
||||
import DealUsage from '@/views/wizard-examples/create-deal/DealUsage.vue'
|
||||
|
||||
const createDealSteps = [
|
||||
{
|
||||
title: 'Deal Type',
|
||||
subtitle: 'Choose type of deal',
|
||||
},
|
||||
{
|
||||
title: 'Deal Details',
|
||||
subtitle: 'Provide deal details',
|
||||
},
|
||||
{
|
||||
title: 'Deal Usage',
|
||||
subtitle: 'Limitations & Offers',
|
||||
},
|
||||
{
|
||||
title: 'Review & Complete',
|
||||
subtitle: 'Launch a deal',
|
||||
},
|
||||
]
|
||||
|
||||
const currentStep = ref(0)
|
||||
|
||||
const createDealData = ref({
|
||||
dealType: {
|
||||
Offer: 'percentage',
|
||||
discount: null,
|
||||
region: null,
|
||||
},
|
||||
dealDetails: {
|
||||
title: '',
|
||||
code: '',
|
||||
description: '',
|
||||
offeredUItems: [],
|
||||
cartCondition: null,
|
||||
dealDuration: '',
|
||||
notification: {
|
||||
email: false,
|
||||
sms: false,
|
||||
pushNotification: false,
|
||||
},
|
||||
},
|
||||
dealUsage: {
|
||||
userType: null,
|
||||
maxUsers: null,
|
||||
cartAmount: null,
|
||||
promotionFree: null,
|
||||
paymentMethod: null,
|
||||
dealStatus: null,
|
||||
isSingleUserCustomer: false,
|
||||
},
|
||||
dealReviewComplete: { isDealDetailsConfirmed: true },
|
||||
})
|
||||
|
||||
const onSubmit = () => {
|
||||
console.log('createDealData :>> ', createDealData.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
lg="3"
|
||||
:class="$vuetify.display.mdAndUp ? 'border-e' : 'border-b'"
|
||||
>
|
||||
<VCardText>
|
||||
<AppStepper
|
||||
v-model:current-step="currentStep"
|
||||
direction="vertical"
|
||||
:items="createDealSteps"
|
||||
/>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="8"
|
||||
lg="9"
|
||||
>
|
||||
<VCardText>
|
||||
<VWindow
|
||||
v-model="currentStep"
|
||||
class="disable-tab-transition"
|
||||
>
|
||||
<VWindowItem>
|
||||
<CreateDealType v-model:form-data="createDealData.dealType" />
|
||||
</VWindowItem>
|
||||
|
||||
<VWindowItem>
|
||||
<DealDetails v-model:form-data="createDealData.dealDetails" />
|
||||
</VWindowItem>
|
||||
|
||||
<VWindowItem>
|
||||
<DealUsage v-model:form-data="createDealData.dealUsage" />
|
||||
</VWindowItem>
|
||||
|
||||
<VWindowItem>
|
||||
<DealReviewComplete v-model:form-data="createDealData.dealReviewComplete" />
|
||||
</VWindowItem>
|
||||
</VWindow>
|
||||
|
||||
<div class="d-flex flex-wrap gap-4 justify-space-between mt-6">
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
:disabled="currentStep === 0"
|
||||
@click="currentStep--"
|
||||
>
|
||||
<VIcon
|
||||
icon="ri-arrow-left-line"
|
||||
start
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
Previous
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
v-if="createDealSteps.length - 1 === currentStep"
|
||||
color="success"
|
||||
append-icon="ri-check-line"
|
||||
@click="onSubmit"
|
||||
>
|
||||
submit
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
v-else
|
||||
@click="currentStep++"
|
||||
>
|
||||
Next
|
||||
|
||||
<VIcon
|
||||
icon="ri-arrow-right-line"
|
||||
end
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
</VBtn>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCard>
|
||||
</template>
|
||||
182
resources/js/pages/wizard-examples/property-listing.vue
Normal file
182
resources/js/pages/wizard-examples/property-listing.vue
Normal file
@@ -0,0 +1,182 @@
|
||||
<script setup>
|
||||
import PersonalDetails from '@/views/wizard-examples/property-listing/PersonalDetails.vue'
|
||||
import PriceDetails from '@/views/wizard-examples/property-listing/PriceDetails.vue'
|
||||
import PropertyArea from '@/views/wizard-examples/property-listing/PropertyArea.vue'
|
||||
import PropertyDetails from '@/views/wizard-examples/property-listing/PropertyDetails.vue'
|
||||
import PropertyFeatures from '@/views/wizard-examples/property-listing/PropertyFeatures.vue'
|
||||
|
||||
const propertyListingSteps = [
|
||||
{
|
||||
title: 'Personal Details',
|
||||
subtitle: 'Your Name/Email',
|
||||
},
|
||||
{
|
||||
title: 'Property Details',
|
||||
subtitle: 'Property Type',
|
||||
},
|
||||
{
|
||||
title: 'Property Features',
|
||||
subtitle: 'Bedrooms/Floor No',
|
||||
},
|
||||
{
|
||||
title: 'Property Area',
|
||||
subtitle: 'covered Area',
|
||||
},
|
||||
{
|
||||
title: 'Price Details',
|
||||
subtitle: 'Expected Price',
|
||||
},
|
||||
]
|
||||
|
||||
const propertyListingData = ref({
|
||||
personalDetails: {
|
||||
userType: 'builder',
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
username: '',
|
||||
password: '',
|
||||
email: '',
|
||||
contact: null,
|
||||
},
|
||||
priceDetails: {
|
||||
expectedPrice: null,
|
||||
pricePerSqft: null,
|
||||
maintenanceCharge: null,
|
||||
maintenancePeriod: null,
|
||||
bookingAmount: null,
|
||||
otherAmount: null,
|
||||
priceDisplayType: 'Negotiable',
|
||||
priceIncludes: ['Car Parking'],
|
||||
},
|
||||
propertyFeatures: {
|
||||
bedroomCount: '',
|
||||
floorNo: '',
|
||||
bathroomCount: '',
|
||||
isCommonArea: true,
|
||||
furnishedStatus: null,
|
||||
furnishingDetails: [
|
||||
'AC',
|
||||
'TV',
|
||||
'Fridge',
|
||||
],
|
||||
isCommonArea1: 'true',
|
||||
isCommonArea2: 'false',
|
||||
},
|
||||
propertyArea: {
|
||||
totalArea: null,
|
||||
carpetArea: null,
|
||||
plotArea: null,
|
||||
availableFrom: null,
|
||||
possessionStatus: 'Under Construciton',
|
||||
transactionType: 'New Property',
|
||||
isOnMainRoad: 'No',
|
||||
isGatedColony: 'No',
|
||||
},
|
||||
propertyDetails: {
|
||||
propertyDealType: 'sell',
|
||||
propertyType: null,
|
||||
zipCode: null,
|
||||
country: null,
|
||||
state: '',
|
||||
city: '',
|
||||
landmark: '',
|
||||
address: '',
|
||||
},
|
||||
})
|
||||
|
||||
const currentStep = ref(0)
|
||||
|
||||
const onSubmit = () => {
|
||||
console.log('propertyListingData :>> ', propertyListingData.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
:class="$vuetify.display.smAndDown ? 'border-b' : 'border-e'"
|
||||
>
|
||||
<VCardText>
|
||||
<AppStepper
|
||||
v-model:current-step="currentStep"
|
||||
:items="propertyListingSteps"
|
||||
direction="vertical"
|
||||
/>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="8"
|
||||
>
|
||||
<VCardText>
|
||||
<VWindow
|
||||
v-model="currentStep"
|
||||
class="disable-tab-transition"
|
||||
>
|
||||
<VWindowItem>
|
||||
<PersonalDetails v-model:form-data="propertyListingData.personalDetails" />
|
||||
</VWindowItem>
|
||||
|
||||
<VWindowItem>
|
||||
<PropertyDetails v-model:form-data="propertyListingData.propertyDetails" />
|
||||
</VWindowItem>
|
||||
|
||||
<VWindowItem>
|
||||
<PropertyFeatures v-model:form-data="propertyListingData.propertyFeatures" />
|
||||
</VWindowItem>
|
||||
|
||||
<VWindowItem>
|
||||
<PropertyArea v-model:form-data="propertyListingData.propertyArea" />
|
||||
</VWindowItem>
|
||||
|
||||
<VWindowItem>
|
||||
<PriceDetails v-model:form-data="propertyListingData.priceDetails" />
|
||||
</VWindowItem>
|
||||
</VWindow>
|
||||
|
||||
<div class="d-flex flex-wrap gap-4 justify-space-between mt-6">
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
:disabled="currentStep === 0"
|
||||
@click="currentStep--"
|
||||
>
|
||||
<VIcon
|
||||
icon="ri-arrow-left-line"
|
||||
start
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
Previous
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
v-if="propertyListingSteps.length - 1 === currentStep"
|
||||
color="success"
|
||||
append-icon="ri-check-line"
|
||||
@click="onSubmit"
|
||||
>
|
||||
submit
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
v-else
|
||||
@click="currentStep++"
|
||||
>
|
||||
Next
|
||||
|
||||
<VIcon
|
||||
icon="ri-arrow-right-line"
|
||||
end
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
</VBtn>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCard>
|
||||
</template>
|
||||
Reference in New Issue
Block a user