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

checkout ui fixes

This commit is contained in:
User 2023-05-18 19:40:21 +05:30
parent c102732b2d
commit 36ed3aeec1
4 changed files with 65 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/retailer/cart-product/CartProductList.vue
View File

@ -13,7 +13,7 @@
v-for="(product, index) in cartItems.slice().reverse()" v-for="(product, index) in cartItems.slice().reverse()"
v-bind:key="index" v-bind:key="index"
> >
<v-row class="mx-1"> <v-row class="mx-1 mt-4">
<v-col cols="4"> <v-col cols="4">
<div v-if="product.customAttributes.isPersonalize == 1"> <div v-if="product.customAttributes.isPersonalize == 1">
<div v-if="product.personalizeDetails"> <div v-if="product.personalizeDetails">
@ -69,7 +69,7 @@
<v-row> <v-row>
<v-col class="py-0 ma-0"> <v-col class="py-0 ma-0">
<p <p
class="fontsize-14 black--text float-left" class="fontsize-14 text-black mb-6 float-left"
> >
{{ product.name }} {{ product.name }}
</p> </p>
@ -84,10 +84,10 @@
" "
> >
<v-expansion-panel class="pa-0 ma-0" v-if="product.productOption"> <v-expansion-panel class="pa-0 ma-0" v-if="product.productOption">
<v-expansion-panel-header class="pa-0 ma-0" <v-expansion-panel-title class="pa-0 ma-0"
>See Details</v-expansion-panel-header >See Details</v-expansion-panel-title
> >
<v-expansion-panel-content <v-expansion-panel-text
v-if="product.productType == 'giftcard'" v-if="product.productType == 'giftcard'"
class="cartproductlist-expansion" class="cartproductlist-expansion"
> >
@ -129,8 +129,8 @@
.giftcardRecipientEmail .giftcardRecipientEmail
}} }}
</p> </p>
</v-expansion-panel-content> </v-expansion-panel-text>
<v-expansion-panel-content <v-expansion-panel-text
v-else v-else
class="cartproductlist-expansion" class="cartproductlist-expansion"
> >
@ -145,10 +145,10 @@
> >
{{ product.productOption.attributesInfo[0].value }} {{ product.productOption.attributesInfo[0].value }}
</p> </p>
</v-expansion-panel-content> </v-expansion-panel-text>
</v-expansion-panel> </v-expansion-panel>
</v-expansion-panels> </v-expansion-panels>
<p class="fontsize-14">${{ priceFormatter(product.price) }}</p> <p class="fontsize-14 mb-6">${{ priceFormatter(product.price) }}</p>
<div v-if="pageName() != 'CheckoutPage'"> <div v-if="pageName() != 'CheckoutPage'">
<v-row <v-row
@ -159,7 +159,7 @@
<p class="fontsize-14 mb-0 pb-7">Qty.</p> <p class="fontsize-14 mb-0 pb-7">Qty.</p>
</v-col> </v-col>
<v-col class="pl-0 pt-0"> <v-col class="pl-0 pt-0">
<v-hover v-slot:default="{ hover }"> <v-hover v-slot:default="{ isHovering }">
<v-select <v-select
:items=" :items="
qtyPriceOptions( qtyPriceOptions(
@ -169,13 +169,13 @@
) )
" "
class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 cartproductlist-select-button select-change-icon" class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 cartproductlist-select-button select-change-icon"
dense density="compact"
attach attach
flat flat
solo solo
outlined variant="outlined"
:class="hover ? 'primary--text' : 'black--text'" :class="isHovering ? 'text-primary' : 'text-black'"
item-text="price" item-title="price"
item-value="qty" item-value="qty"
single-line single-line
@change=" @change="
@ -269,11 +269,11 @@
</div> </div>
<div v-else> <div v-else>
<v-row> <v-row>
<v-col cols="auto" class="py-0 pr-0"> <v-col cols="auto" class="py-0 pr-0 mb-4">
<p class="fontsize-14 mb-1">Qty.</p> <p class="fontsize-14 mb-1">Qty.</p>
</v-col> </v-col>
<v-col cols="auto" class="py-0 pl-2"> <v-col cols="auto" class="py-0 pl-2 mb-4">
<p class="fontsize-14 black--text">{{ product.qty }}</p> <p class="fontsize-14 text-black">{{ product.qty }}</p>
</v-col> </v-col>
</v-row> </v-row>
</div> </div>

16
src/routes/retailer/boxed_order_history.vue
View File

@ -21,7 +21,7 @@
></v-text-field> ></v-text-field>
</v-col> </v-col>
<v-col cols="12" sm="12" md="6" lg="5"> <v-col cols="12" sm="12" md="6" lg="5">
<v-menu <!-- <v-menu
v-model="menu1" v-model="menu1"
:close-on-content-click="false" :close-on-content-click="false"
:nudge-right="40" :nudge-right="40"
@ -46,7 +46,18 @@
v-model="createdFrom" v-model="createdFrom"
@input="menu1 = false" @input="menu1 = false"
></v-date-picker> ></v-date-picker>
</v-menu> </v-menu> -->
<v-text-field
type="date"
v-model="createdFrom"
placeholder="Created From"
density="compact"
variant="outlined"
label="Created From"
color="primary pt-0"
>
</v-text-field>
</v-col> </v-col>
<div class="pt-7">-</div> <div class="pt-7">-</div>
@ -206,6 +217,7 @@ export default {
name: "BoxedOrderHistoryPage", name: "BoxedOrderHistoryPage",
components: {}, components: {},
data: () => ({ data: () => ({
visible:false,
menu1: false, menu1: false,
menu2: false, menu2: false,
dateAtFormatted:"", dateAtFormatted:"",

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

@ -15,7 +15,7 @@
border: thin solid #2850da; border: thin solid #2850da;
} }
.productpage-tab-slider.v-tab--active { .productpage-tab-slider.v-slide-group-item--active {
color: #fff !important; color: #fff !important;
background-color: #2850da !important; background-color: #2850da !important;
//max-height: 30px !important; //max-height: 30px !important;
@ -54,3 +54,10 @@
.checkoutpage-button-height { .checkoutpage-button-height {
height: 40px !important; height: 40px !important;
} }
.myDivider{
background-color: #2850da !important;
height: 1px;
}
.checkpout-expansion-panel .v-expansion-panel-title__overlay{
background-color:#fff !important;
}

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

@ -51,8 +51,9 @@
regular-font regular-font
ls-n008 ls-n008
px-0 px-0
rounded-0
" "
:href="`#shippingTab`" value="shippingTab"
@click="changedToShippTab()" @click="changedToShippTab()"
v-show="showShippingTab" v-show="showShippingTab"
>Shipping</v-tab >Shipping</v-tab
@ -65,16 +66,19 @@
regular-font regular-font
ls-n008 ls-n008
px-0 px-0
rounded-0
" "
:href="`#reviewTab`" value="reviewTab"
:disabled="!valid" :disabled="!valid"
:class="giftCardProduct ? 'checkout-tabs' : ''" :class="giftCardProduct ? 'checkout-tabs' : ''"
v-show="showReviewTab" v-show="showReviewTab"
>Review & Payments</v-tab >Review & Payments</v-tab
> >
</v-tabs> </v-tabs>
<v-tabs-items touchless v-model="tabs"> </v-col>
<v-tab-item :value="`shippingTab`" :disabled="valid"> <v-col cols="12">
<v-window touchless v-model="tabs">
<v-window-item value="shippingTab" :disabled="valid">
<v-row <v-row
v-if="isMobileDevice && estimatedShippingMethods.length > 0" v-if="isMobileDevice && estimatedShippingMethods.length > 0"
class="pt-3" class="pt-3"
@ -118,7 +122,7 @@
<p class="h3 mb-2"> <p class="h3 mb-2">
<span class="text-primary">Checkout Method</span> <span class="text-primary">Checkout Method</span>
</p> </p>
<v-divider class="primary"></v-divider> <div class="myDivider"></div>
<div v-if="basicInfo.addresses"> <div v-if="basicInfo.addresses">
<div v-if="basicInfo.addresses.length > 0"> <div v-if="basicInfo.addresses.length > 0">
<v-row class="mt-2 mx-1"> <v-row class="mt-2 mx-1">
@ -383,10 +387,10 @@
class="body ls-n009 text-decoration-none" class="body ls-n009 text-decoration-none"
> >
<v-btn <v-btn
class="text-uppercase" class="text-uppercase rounded-0"
color="primary" color="primary"
@click="next()" @click="next()"
large size="large"
tile tile
block block
depressed depressed
@ -405,7 +409,7 @@
> >
</v-col> </v-col>
</v-row> </v-row>
<v-divider class="my-3 primary"></v-divider> <div class="my-3 myDivider"></div>
</v-col> </v-col>
<v-col <v-col
cols="12" cols="12"
@ -416,7 +420,7 @@
<p class="h3 mb-2"> <p class="h3 mb-2">
<span class="text-primary">Order Summary</span> <span class="text-primary">Order Summary</span>
</p> </p>
<v-divider class="primary"></v-divider> <div class="myDivider"></div>
<v-col <v-col
align="center" align="center"
justify="center" justify="center"
@ -429,30 +433,27 @@
></v-progress-circular> ></v-progress-circular>
</v-col> </v-col>
<v-expansion-panels <v-expansion-panels
accordion
light
flat
multiple
v-model="cartItemPanel" v-model="cartItemPanel"
class="checkpout-expansion-panel"
v-else v-else
> >
<v-expansion-panel class="transparent-background"> <v-expansion-panel elevation="0">
<v-expansion-panel-header class="pr-4" <v-expansion-panel-title class="pr-4"
>{{ 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 :checkOut="chekoutFlag" /> <CartProductList :checkOut="chekoutFlag" />
</div> </div>
</v-expansion-panel-content> </v-expansion-panel-text>
</v-expansion-panel> </v-expansion-panel>
</v-expansion-panels> </v-expansion-panels>
<v-divider class="primary"></v-divider> <div class="myDivider"></div>
</v-col> </v-col>
</v-row> </v-row>
</v-tab-item> </v-window-item>
<v-tab-item :value="`reviewTab`"> <v-window-item value="reviewTab">
<v-row <v-row
no-gutters no-gutters
class="pt-sm-6" class="pt-sm-6"
@ -1082,8 +1083,8 @@
</v-row> </v-row>
</v-container> </v-container>
</v-row> </v-row>
</v-tab-item> </v-window-item>
</v-tabs-items> </v-window>
</v-col> </v-col>
</v-row> </v-row>
<v-col v-else> <v-col v-else>
@ -1879,6 +1880,7 @@ export default {
} }
}, },
next: function () { next: function () {
this.tabs = "reviewTab";
if (this.userAuth) { if (this.userAuth) {
if (this.addressesList.length == 0) { if (this.addressesList.length == 0) {
let phoneNumber = this.$refs.userAddressForm.$refs.phoneNumber let phoneNumber = this.$refs.userAddressForm.$refs.phoneNumber