sidharth.kothari
/
retailer-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

checkout page ui fixes

This commit is contained in:
User 2023-05-19 19:30:43 +05:30
parent 9af28417d7
commit 28860d5f95
3 changed files with 103 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/retailer/layout/Layout.vue
View File

@ -131,7 +131,8 @@ export default {
box-shadow: none !important; box-shadow: none !important;
} }
.sidebar-router-padding-open { .sidebar-router-padding-open {
margin:0 130px 16px 132px; /* margin:0 130px 16px 132px; */
padding: 0 0 0 250px;
} }
.sidebar-router-padding-close { .sidebar-router-padding-close {
margin:0 16px 16px 16px; margin:0 16px 16px 16px;

16
src/routes/retailer/checkout_page.scss
View File

@ -61,3 +61,19 @@
.checkpout-expansion-panel .v-expansion-panel-title__overlay{ .checkpout-expansion-panel .v-expansion-panel-title__overlay{
background-color:#fff !important; background-color:#fff !important;
} }
.myItems{
margin-bottom: 2px;
padding: 6px 0;
cursor: pointer;
color: #2850da;
}
.myItems:hover{
background: rgb(240, 235, 235);
}
.myItems1:hover{
background: rgb(240, 235, 235);
}
.myItems1{
padding: 6px 0;
cursor: pointer;
}

147
src/routes/retailer/checkout_page.vue
View File

@ -4,7 +4,7 @@
<v-container> <v-container>
<v-row> <v-row>
<v-col cols="12" class="d-flex justify-center align-center"> <v-col cols="12" class="d-flex justify-center align-center">
<div class="h3 white--text mt-10"> <div class="h3 text-white mt-10">
Do not refresh or click back. Your payment is currently being Do not refresh or click back. Your payment is currently being
processed. processed.
</div> </div>
@ -80,8 +80,8 @@
<v-window touchless v-model="tabs"> <v-window touchless v-model="tabs">
<v-window-item value="shippingTab" :disabled="valid"> <v-window-item value="shippingTab" :disabled="valid">
<v-row <v-row
v-if="isMobileDevice && estimatedShippingMethods.length > 0" v-if="estimatedShippingMethods.length > 0"
class="pt-3" class="pt-3 mb-3 mt-1 d-block d-sm-none"
> >
<v-col cols="12"> <v-col cols="12">
<v-alert text> <v-alert text>
@ -343,7 +343,6 @@
<v-radio-group <v-radio-group
mandatory mandatory
v-model="estimatedShipping" v-model="estimatedShipping"
color="primary"
> >
<div <div
v-for="( v-for="(
@ -356,7 +355,7 @@
<v-radio <v-radio
:label="method.carrierTitle" :label="method.carrierTitle"
:value="method" :value="method"
class="black--text" class="text-black"
color="primary" color="primary"
></v-radio> ></v-radio>
</v-col> </v-col>
@ -438,11 +437,11 @@
v-else v-else
> >
<v-expansion-panel elevation="0"> <v-expansion-panel elevation="0">
<v-expansion-panel-title class="pr-4" <v-expansion-panel-title class="pr-4 checkout-expansion"
>{{ cartProductsItem.length }} Items In >{{ cartProductsItem.length }} Items In
cart</v-expansion-panel-title cart</v-expansion-panel-title
> >
<v-expansion-panel-text class="checkout-expansion"> <v-expansion-panel-text class="">
<div class="mb-5 checkout-expansion-maxheight"> <div class="mb-5 checkout-expansion-maxheight">
<CartProductList :checkOut="chekoutFlag" /> <CartProductList :checkOut="chekoutFlag" />
</div> </div>
@ -470,14 +469,18 @@
<v-radio <v-radio
:label="purchaseOrderPayment.title" :label="purchaseOrderPayment.title"
:value="purchaseOrderPayment.code" :value="purchaseOrderPayment.code"
class="black--text" class="text-black"
color="primary"
></v-radio> ></v-radio>
</v-radio-group>
<div v-if="paymentMethod === 'purchaseorder'"> <div v-if="paymentMethod === 'purchaseorder'">
<v-checkbox <v-checkbox
color="primary"
label="My billing and shipping address are the same" label="My billing and shipping address are the same"
v-model="sameAddress" v-model="sameAddress"
@change="resetFields()" @change="resetFields()"
dense density="compact"
:readonly="readOnlyCheckBox" :readonly="readOnlyCheckBox"
hide-details hide-details
></v-checkbox> ></v-checkbox>
@ -487,7 +490,7 @@
<BillingAddressComponent :address="address" /> <BillingAddressComponent :address="address" />
<v-btn <v-btn
class="primary my-3" class="primary my-3"
large size="large"
v-if="editBillingButton" v-if="editBillingButton"
@click="editBillBook()" @click="editBillBook()"
depressed depressed
@ -497,20 +500,22 @@
</v-col> </v-col>
</v-row> <v-form ref="poNumberForm" v-model="valid" :lazy-validation="lazy"> </v-row> <v-form ref="poNumberForm" v-model="valid" :lazy-validation="lazy">
<v-row > <v-row >
<v-col cols="12" align="right"> <v-col cols="12">
<v-text-field <v-text-field
v-model="poNumber" v-model="poNumber"
type="text" type="text"
dense density="compact"
placeholder="Purchase Order Number" placeholder="Purchase Order Number"
outlined variant="outlined"
color="primary"
:rules="textRules" :rules="textRules"
></v-text-field> ></v-text-field>
</v-col> </v-col>
<v-col cols="12" align="right"> <v-col cols="12" align="right" class="mb-6">
<v-btn <v-btn
class="primary mx-3 text-uppercase" class="primary mx-3 text-uppercase rounded-0"
color="primary"
@click="placeOrderFree($event)" @click="placeOrderFree($event)"
tile tile
depressed depressed
@ -528,73 +533,85 @@
<v-col cols="12"> <v-col cols="12">
<v-select <v-select
v-model="selectedBillingAddress" v-model="selectedBillingAddress"
dense density="compact"
:items="billingAddressList" :items="billingAddressList"
outlined variant="outlined"
return-object return-object
color="primary"
class="billing-address-select" class="billing-address-select"
@change="changeBillingAddress()" @change="changeBillingAddress()"
item-value="id" item-value="id"
> >
<template v-slot:selection="data"> <template v-slot:selection="{ item }">
<div v-if="data.item.value"> <div v-if="item.raw.value">
<span class>New Address</span> <span class>New Address</span>
</div> </div>
<div <div
class=" class="d-inline-block text-truncate pt-sm-0"
d-inline-block
text-truncate
pt-sm-0
"
v-else v-else
> >
<span class <span class
>{{ data.item.firstname }} >{{ item.raw.firstname }}
{{ data.item.lastname }}</span {{item.raw.lastname }}</span
> >
<span <span
class="body pl-1" class="body pl-1"
v-if="data.item.streetNoOne" v-if="item.raw.streetNoOne"
>{{ data.item.streetNoOne }}, >{{ item.raw.streetNoOne }},
{{ data.item.streetNoTwo }}</span {{ item.raw.streetNoTwo }}</span
> >
<span class="body pl-1" v-else <span class="body pl-1" v-else
>{{ data.item.street[0] }} ,{{ >{{
data.item.street[1] item.raw.street
? item.raw.street[0]
: ""
}}
,{{
item.raw.street
? item.raw.street[1]
: ""
}}</span }}</span
> >
<span class="pl-1" <span class="pl-1"
>{{ data.item.city }} >{{ item.raw.city }}
{{ data.item.postcode }}</span {{ item.raw.postcode }}</span
> >
</div> </div>
</template> </template>
<template v-slot:item="data"> <template v-slot:item="{ props, item }">
<v-list-item-content> <v-list-item-content v-bind="props">
<v-list-item-title <v-list-item-title class="myItems1"
v-if="data.item.value" v-if="item.raw.value"
> >
<span class="ml-2">New Address</span> <span class="ml-2">New Address</span>
</v-list-item-title> </v-list-item-title>
<v-list-item-title v-else> <v-list-item-title class="myItems" v-else>
<span class="ml-2" <span class="ml-2"
>{{ data.item.firstname }} >{{ item.raw.firstname }}
{{ data.item.lastname }},</span {{ item.raw.lastname }},</span
> >
<span <span
class="body" class="body"
v-if="data.item.streetNoOne" v-if="item.raw.streetNoOne"
>{{ data.item.streetNoOne }}, >{{ item.raw.streetNoOne }},
{{ data.item.streetNoTwo }}</span {{ item.raw.streetNoTwo }}</span
> >
<span class="body" v-else <span class="body" v-else
>{{ data.item.street[0] }} ,{{ >{{
data.item.street[1] item.raw.street
? item.raw.street[0]
: ""
}}
,{{
item.raw.street
? item.raw.street[1]
: ""
}}</span }}</span
> >
<span class <span class
>{{ data.item.city }}, >{{ item.raw.city }},
{{ data.item.postcode }}</span {{ item.raw.postcode }}</span
> >
</v-list-item-title> </v-list-item-title>
</v-list-item-content> </v-list-item-content>
@ -603,17 +620,19 @@
</v-col> </v-col>
<v-col <v-col
cols="12" cols="12"
class="d-flex justify-end pa-0" class="d-flex justify-end pa-0 mb-6"
v-if="!showNewBillingForm" v-if="!sshowNewBillingForm"
> >
<v-btn <v-btn
class="primary ma-3 text-uppercase" class="primary ma-3 text-uppercase"
@click="cancelBillingAddress" @click="cancelBillingAddress"
color="primary"
>Cancel</v-btn >Cancel</v-btn
> >
<v-btn <v-btn
class="success ma-3 text-uppercase" class="success ma-3 text-uppercase"
@click="updateBillingAddress" @click="updateBillingAddress"
color="success"
>Update</v-btn >Update</v-btn
> >
</v-col> </v-col>
@ -632,7 +651,7 @@
label="Save in Address Book" label="Save in Address Book"
v-model="saveInBillingAddressBook" v-model="saveInBillingAddressBook"
class="mt-0" class="mt-0"
dense density="compact"
hide-details hide-details
></v-checkbox> ></v-checkbox>
</v-col> </v-col>
@ -702,7 +721,6 @@
>Continue To Paypal</v-btn> >Continue To Paypal</v-btn>
</v-col> </v-col>
</div>--> </div>-->
</v-radio-group>
<v-divider></v-divider> <v-divider></v-divider>
</v-col> </v-col>
@ -718,8 +736,8 @@
name="email" name="email"
v-model="emailId" v-model="emailId"
:rules="emailRules" :rules="emailRules"
outlined variant="outlined"
dense density="compact"
></v-text-field> ></v-text-field>
<!-- <v-text-field <!-- <v-text-field
v-show="passwordFields" v-show="passwordFields"
@ -837,20 +855,20 @@
<v-col cols="12" sm="5" md="4" class="pl-3 d-none d-sm-block"> <v-col cols="12" sm="5" md="4" class="pl-3 d-none d-sm-block">
<p class="h3 mb-2">Order Summary</p> <p class="h3 mb-2">Order Summary</p>
<hr /> <hr />
<v-expansion-panels accordion light flat> <v-expansion-panels class="checkpout-expansion-panel">
<v-expansion-panel class="transparent-background"> <v-expansion-panel elevation="0" class="transparent-background">
<v-expansion-panel-header class="pr-4" <v-expansion-panel-title class="pr-4 checkout-expansion"
>{{ cartProductsItem.length }} Items In >{{ cartProductsItem.length }} Items In
cart</v-expansion-panel-header cart</v-expansion-panel-title
> >
<v-expansion-panel-content class="checkout-expansion"> <v-expansion-panel-text class="checkout-expansion">
<div class="mb-5 checkout-expansion-maxheight"> <div class="mb-5 checkout-expansion-maxheight">
<CartProductList <CartProductList
:checkOut="chekoutFlag" :checkOut="chekoutFlag"
:cartItems="cartProductsItem" :cartItems="cartProductsItem"
/> />
</div> </div>
</v-expansion-panel-content> </v-expansion-panel-text>
</v-expansion-panel> </v-expansion-panel>
</v-expansion-panels> </v-expansion-panels>
<hr /> <hr />
@ -975,9 +993,10 @@
<v-row class="mt-4"> <v-row class="mt-4">
<v-col class="d-flex justify-space-between pb-0"> <v-col class="d-flex justify-space-between pb-0">
<span class="display-1">Ship To:</span> <span class="text-h4">Ship To:</span>
<v-btn <v-btn
icon icon
flat
@click="(tabs = 'shippingTab'), (valid = false)" @click="(tabs = 'shippingTab'), (valid = false)"
> >
<v-icon>mdi mdi-pencil</v-icon> <v-icon>mdi mdi-pencil</v-icon>
@ -1044,9 +1063,10 @@
</v-row> </v-row>
<v-row class="mt-4"> <v-row class="mt-4">
<v-col class="d-flex justify-space-between pb-0"> <v-col class="d-flex justify-space-between pb-0">
<span class="display-1">Shipping Method:</span> <span class="text-h4">Shipping Method:</span>
<v-btn <v-btn
icon icon
flat
@click="(tabs = 'shippingTab'), (valid = false)" @click="(tabs = 'shippingTab'), (valid = false)"
> >
<v-icon>mdi mdi-pencil</v-icon> <v-icon>mdi mdi-pencil</v-icon>
@ -1062,7 +1082,7 @@
> >
<v-col <v-col
cols="12" cols="12"
class="pb-0" class="pb-0 mb-4"
v-if="types.code === 'shipping'" v-if="types.code === 'shipping'"
>{{ types.title }}</v-col >{{ types.title }}</v-col
> >
@ -1088,7 +1108,7 @@
</v-col> </v-col>
</v-row> </v-row>
<v-col v-else> <v-col v-else>
<v-alert class="alert-box-outline" type="error" text dense <v-alert class="alert-box-outline" type="error" text density="compact"
>You have no items in your shopping cart.</v-alert >You have no items in your shopping cart.</v-alert
> >
<p> <p>
@ -2375,5 +2395,6 @@ export default {
padding-top: 5px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
} }
</style> </style>
<style src="./checkout_page.scss" lang="scss" /> <style src="./checkout_page.scss" lang="scss" />