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

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

@ -21,7 +21,7 @@
></v-text-field>
</v-col>
<v-col cols="12" sm="12" md="6" lg="5">
<v-menu
<!-- <v-menu
v-model="menu1"
:close-on-content-click="false"
:nudge-right="40"
@ -46,7 +46,18 @@
v-model="createdFrom"
@input="menu1 = false"
></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>
<div class="pt-7">-</div>
@ -206,6 +217,7 @@ export default {
name: "BoxedOrderHistoryPage",
components: {},
data: () => ({
visible:false,
menu1: false,
menu2: false,
dateAtFormatted:"",

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

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