danak/anahita-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed add to cart bugs

Browse Source
This commit is contained in:
mohadese-nm
2024-10-02 09:38:51 +03:30
parent dad18b1a34
commit 1c2169b807
16 changed files with 840 additions and 443 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/app/desktop/header/Index.vue
+26 -3
View File
@@ -4,14 +4,30 @@
<img src="/images/anahitaLogo.webp" alt="Asan Market" />
</router-link>
<AppDesktopHeaderNavigation />
<router-link v-if="!logged" :to="{ path: '/auth/login' }">
<div>
<router-link v-if="!logged" :to="{ path: '/auth/login' }" class="w-40">
<Button v-bind="btns.login.props" class="not-logged" />
</router-link>
<Button
v-else
v-bind="btns.account.props"
@click="overlay($event, btns.account.component)"
class="text-[#333333] min-w-36"
/>
<Button
v-bind="btns.cart.props"
@click="overlay($event, btns.cart.component)"
class="text-[#333333] w-16 basket"
/>
</div>
<!-- <router-link v-if="!logged" :to="{ path: '/auth/login' }">
<Button v-bind="btns.login.props" />
</router-link>
<div v-else>
<template v-for="({ props, component }, key) in btns.logged" :key="key">
<Button v-bind="props" @click="overlay($event, component)" />
</template>
</div>
</div> -->
</header>
</template>
@@ -66,7 +82,7 @@ const overlay = (event, is) => {
@apply border-[#CCCCCC] h-12 rounded-[0.6rem] #{!important};
.p-button-label {
@apply text-[#333333] text-lg font-medium font-vazir whitespace-nowrap;
@apply text-lg font-medium font-vazir whitespace-nowrap;
}
.p-button-icon {
@@ -91,6 +107,13 @@ const overlay = (event, is) => {
}
}
.not-logged {
@apply w-40 text-white p-2 #{!important};
.p-button-icon {
@apply text-white text-2xl;
}
}
.p-blockui-container {
@apply absolute;
}
components/app/desktop/header/cart/Item.vue
+66 -43
View File
@@ -1,57 +1,80 @@
<template>
<div class="header-cart-list-item">
<span>{{ quantity }}x</span>
<img :src="data.coverPath" />
<div>
<h3>{{ data.category[data.category.length - 1]?.name }}</h3>
<h2>{{ data.title }}</h2>
<span>
<b>{{ numberFormat(data.specialPrice || data.price) }} </b>
{{ $t('priceUnit') }}
</span>
<div class="flex">
<img :src="product.coverPath" />
<div class="w-full">
<h3>{{ product.category[product.category.length - 1]?.name }}</h3>
<h2>{{ product.title }}</h2>
<span class="text-zinc-800 text-[0.9em] mt-auto">
<b>{{ numberFormat(product.specialPrice * productQuantity || product.price * productQuantity) }} </b>
{{ $t("priceUnit") }}
</span>
<div class="flex flex-row justify-start w-48">
<CartQuantity
v-if="cart.items[index]"
v-model="productQuantity"
:range="product.orderRange"
/>
</div>
</div>
<Button icon="isax isax-trash" severity="secondary" text @click="$emit('remove', data.id)" />
</div>
<!-- <Button
icon="isax isax-trash"
severity="secondary"
text
@click="$emit('remove', product)"
/> -->
</div>
</template>
<script setup>
defineProps(['data', 'quantity'])
const numberFormat = (number) =>
new Intl.NumberFormat('fa-IR', { maximumSignificantDigits: 3 }).format(number)
</script>
<style lang="scss">
.header-cart-list-item {
</template>
<script setup>
const props = defineProps(["id", "index"]);
const cart = useCartStore();
console.log(props.id);
console.log(props.index);
const product = cart.items[props.index].product;
console.log(product);
const productQuantity = computed({
get: () => cart.items[props.index].quantity || 0,
set: (v) => cart.update(product, v),
});
const numberFormat = (number) =>
new Intl.NumberFormat("fa-IR", { maximumSignificantDigits: 3 }).format(
number
);
</script>
<style lang="scss">
.header-cart-list-item {
box-shadow: 0px 2px 12px #004b8226;
@apply flex p-2 pl-6 w-[26.9rem] h-[10.1rem] bg-white rounded-lg shadow border relative;
&>span {
@apply flex p-2 pl-6 w-[26.9rem] bg-white rounded-lg shadow border relative;
& > div {
& > span {
@apply absolute left-5 top-4 text-xs font-poppins;
}
img {
}
img {
@apply w-[9.2rem] h-[9.2rem] p-2;
}
div {
}
div:nth-of-type(1) {
@apply w-max gap-1 flex flex-col py-4 font-vazir mr-6;
h3 {
@apply text-right text-neutral-400 text-[0.9em] font-medium;
@apply text-right text-neutral-400 text-[0.9em] font-medium;
}
h2 {
@apply w-[13.1rem] h-14 text-right text-zinc-800 text-[1.1em] font-bold line-clamp-2;
@apply w-[13.1rem] h-14 text-right text-zinc-800 text-[1.1em] font-bold line-clamp-2;
}
span {
@apply text-zinc-800 text-[0.9em] mt-auto;
& > div {
@apply flex flex-row mr-0 h-14 items-center #{!important};
}
}
}
button {
@apply w-10 h-10 mb-2 -mx-2 shrink-0 self-end text-2xl text-[#7F7F7F] rounded-full #{!important};
}
}
</style>
}
</style>
components/app/desktop/header/cart/List.vue
+54 -44
View File
@@ -1,64 +1,74 @@
<template>
<div class="header-cart-list">
<h3>{{ $t('itemsSubmittedInCart', { count: cart.count }) }}</h3>
<div>
<ul>
<li v-for="({ product, quantity }, i) in items" :key="i">
<AppDesktopHeaderCartItem :data="product" :quantity="quantity" @remove="remove" />
</li>
</ul>
</div>
<Button :label="$t('showCart')" @click="show()" />
<div class="header-cart-list">
<h3>{{ $t("itemsSubmittedInCart", { count: cart.count }) }}</h3>
<div>
<ul>
<li v-for="(item, i) in items" :key="i">
<AppDesktopHeaderCartItem
:id="item._id"
:index="i"
@remove="remove"
/>
</li>
</ul>
</div>
<Button
:disabled="cart.count < 1"
:label="$t('showCart')"
@click="show()"
/>
</div>
</template>
<script setup>
const { popup } = inject('service')
const cart = useCartStore()
const items = computed(() => cart.items)
const { popup } = inject("service");
const cart = useCartStore();
const items = computed(() => cart.items);
const emit = defineEmits(['hide'])
const router = useRouter()
const emit = defineEmits(["hide"]);
const router = useRouter();
const token = useCookie("token");
const show = () => {
popup.value.hide()
router.push('/checkout/cart')
}
const remove = async (id) => {
await cart.update(id)
if (cart.count < 1) popup.value.hide()
}
popup.value.hide();
if (token.value) router.push("/checkout/cart");
else router.push("/auth/login?redirect=/checkout/cart");
};
const remove = async (data) => {
await cart.update(data);
if (cart.count < 1) popup.value.hide();
};
</script>
<style lang="scss">
.header-cart-list {
box-shadow: 0px 2px 10px 0px rgba(0, 75, 130, 0.16);
@apply rtl w-[30.9rem] h-[40.6rem] flex flex-col gap-5 py-6 pl-2 bg-white rounded-2xl border overflow-hidden relative;
box-shadow: 0px 2px 10px 0px rgba(0, 75, 130, 0.16);
@apply rtl w-[30.9rem] h-[40.6rem] flex flex-col gap-5 py-6 pl-2 bg-white rounded-2xl border overflow-hidden relative;
&>h3 {
@apply text-sky-700 text-[0.9em] font-medium font-vazir mb-2.5 mr-8 ml-6;
& > h3 {
@apply text-primary-700 text-[0.9em] font-medium font-vazir mb-2.5 mr-8 ml-6;
}
& > div {
@apply overflow-y-auto h-[29.8rem];
ul {
@apply w-full flex py-3 pr-8 pl-4 flex-col gap-3 items-center;
}
&>div {
@apply overflow-y-auto h-[29.8rem];
ul {
@apply w-full flex py-3 pr-8 pl-4 flex-col gap-3 items-center;
}
&::-webkit-scrollbar {
@apply hidden;
}
&::-webkit-scrollbar {
@apply hidden;
}
}
&>button {
@apply bg-sky-700 border-sky-700 mr-8 ml-6 text-xl font-bold font-vazir #{!important};
}
& > button {
@apply bg-primary-600 border-primary-600 mr-8 ml-6 text-xl font-bold font-vazir #{!important};
}
&::before {
content: ' ';
box-shadow: 0px -3px 16px 0px rgba(7, 50, 115, 0.16);
@apply absolute inset-x-0 -bottom-3 h-28 z-0;
}
&::before {
content: " ";
box-shadow: 0px -3px 16px 0px rgba(7, 50, 115, 0.16);
@apply absolute inset-x-0 -bottom-3 h-28 z-0;
}
}
</style>