fixed add to cart bugs
This commit is contained in:
mohadese-nm
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,108 +1,113 @@
|
||||
<template>
|
||||
<div class="pre-factor">
|
||||
<div>
|
||||
<h2>
|
||||
<i class="isax isax-receipt-2"></i>
|
||||
<span>{{ $t("submitPreFactor") }}</span>
|
||||
</h2>
|
||||
<p>{{ $t("submitPreFactorDesc") }}</p>
|
||||
</div>
|
||||
<PanelSalesFactor :data="data" />
|
||||
<ul>
|
||||
<li v-for="(btn, key) in btns" :key="key">
|
||||
<Button v-bind="btn.props" @click="click(key)" />
|
||||
</li>
|
||||
</ul>
|
||||
<div id="pre-factor">
|
||||
<div>
|
||||
<h2>
|
||||
<i class="isax isax-receipt-2"></i>
|
||||
<span>{{ $t("submitPreFactor") }}</span>
|
||||
</h2>
|
||||
<p>{{ $t("submitPreFactorDesc") }}</p>
|
||||
</div>
|
||||
<PanelSalesFactor :data="factorData" />
|
||||
<ul>
|
||||
<li v-for="(btn, key) in btns" :key="key">
|
||||
<Button v-bind="btn.props" @click="click(key)" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import init from '../../../initialize/pre-factor.js'
|
||||
import init from "../../../initialize/pre-factor.js";
|
||||
import html2pdf from "html2pdf.js";
|
||||
const { btns } = init();
|
||||
const dialog = inject('dialogRef');
|
||||
const data = dialog.value.data
|
||||
const router = useRouter()
|
||||
const dialog = inject("dialogRef");
|
||||
const factorData = dialog.value.data;
|
||||
const router = useRouter();
|
||||
const store = useCartStore();
|
||||
|
||||
const click = (key) => {
|
||||
if (key == 'send')
|
||||
router.push({ path: '/panel/factors', query: { id: data._id } });
|
||||
const click = async (key) => {
|
||||
if (key == "send") {
|
||||
await store.createPayment(factorData._id);
|
||||
// navigateTo(data.value.url, { external: true });
|
||||
// store.paymentUrl = ''
|
||||
}
|
||||
if (key == "save" || key == "print") {
|
||||
// Select the element you want to print
|
||||
const element = document.getElementById("pre-factor");
|
||||
|
||||
dialog.value.close()
|
||||
}
|
||||
// Configure options for html2pdf
|
||||
const options = {
|
||||
margin: 1,
|
||||
filename: "preFactor.pdf",
|
||||
image: { type: "jpeg", quality: 0.98 },
|
||||
html2canvas: { scale: 1 },
|
||||
jsPDF: { unit: "in", format: "a3", orientation: "landscape" },
|
||||
};
|
||||
|
||||
// Generate the PDF
|
||||
html2pdf().set(options).from(element).save();
|
||||
}
|
||||
|
||||
dialog.value.close();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.pre-factor {
|
||||
@apply flex flex-col gap-8 rounded-2xl w-[77.5rem] py-8 bg-white overflow-y-auto;
|
||||
#pre-factor {
|
||||
@apply flex flex-col gap-8 rounded-2xl w-screen lg:w-[79vw] h-auto py-2 bg-white overflow-y-hidden;
|
||||
|
||||
&>div:nth-of-type(1) {
|
||||
@apply flex flex-col items-center;
|
||||
& > div:nth-of-type(1) {
|
||||
@apply flex flex-col items-center;
|
||||
|
||||
h2 {
|
||||
@apply flex items-center gap-4 text-[#333333];
|
||||
h2 {
|
||||
@apply flex items-center gap-4 text-[#333333];
|
||||
|
||||
i {
|
||||
@apply text-2xl;
|
||||
}
|
||||
i {
|
||||
@apply text-2xl;
|
||||
}
|
||||
|
||||
span {
|
||||
@apply text-xl font-bold font-vazir;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
@apply w-[30.2rem] mt-[1.1rem] text-center text-[#4C4C4C] text-lg font-vazir;
|
||||
}
|
||||
span {
|
||||
@apply text-xl font-bold font-vazir;
|
||||
}
|
||||
}
|
||||
|
||||
&>ul {
|
||||
@apply w-full flex gap-4 px-8;
|
||||
|
||||
li {
|
||||
button {
|
||||
@apply w-full h-12 #{!important};
|
||||
|
||||
.p-button-label {
|
||||
@apply h-[1.6rem] text-lg font-medium font-iran-sans;
|
||||
}
|
||||
|
||||
.p-button-icon {
|
||||
@apply text-2xl text-[#7F7F7F];
|
||||
}
|
||||
|
||||
&.p-button-secondary {
|
||||
@apply border-[#7F7F7F] justify-center;
|
||||
|
||||
.p-button-label {
|
||||
@apply grow-0 text-[#7F7F7F];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li:nth-of-type(1) {
|
||||
@apply w-[12.3rem];
|
||||
}
|
||||
|
||||
li:nth-of-type(2) {
|
||||
@apply w-[12.3rem] ml-auto;
|
||||
}
|
||||
|
||||
li:nth-of-type(3) {
|
||||
@apply w-[25.1rem];
|
||||
}
|
||||
|
||||
li:nth-of-type(4) {
|
||||
@apply w-[10.8rem];
|
||||
}
|
||||
p {
|
||||
@apply w-[23rem] px-1 sm:w-[30.2rem] mt-[1.1rem] text-center text-[#4C4C4C] text-base sm:text-lg font-vazir;
|
||||
}
|
||||
}
|
||||
|
||||
& > ul {
|
||||
@apply w-full flex flex-wrap gap-4 px-8;
|
||||
|
||||
li {
|
||||
button {
|
||||
@apply w-[12.3rem] h-12 #{!important};
|
||||
|
||||
.p-button-label {
|
||||
@apply h-[1.6rem] text-sm lg:text-lg font-medium font-iran-sans;
|
||||
}
|
||||
|
||||
.p-button-icon {
|
||||
@apply text-2xl text-[#7F7F7F];
|
||||
}
|
||||
|
||||
&.p-button-secondary {
|
||||
@apply border-[#7F7F7F] justify-center;
|
||||
|
||||
.p-button-label {
|
||||
@apply grow-0 text-[#7F7F7F];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body:has(.pre-factor) {
|
||||
.sales-factor {
|
||||
h2 {
|
||||
@apply hidden #{!important};
|
||||
}
|
||||
.sales-factor {
|
||||
h2 {
|
||||
@apply hidden #{!important};
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,73 +1,85 @@
|
||||
<template>
|
||||
<div class="cart-total-aside">
|
||||
<ul>
|
||||
<li v-for="(value, key) in items" :key="key">
|
||||
<label>{{ $t(key) }}</label>
|
||||
<span>
|
||||
{{ numberFormat(value) }}
|
||||
{{ key == 'productsCount' ? $t('product') : '' }}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<Button :label="$t('submitAndViewPreFactor')" :loading="loading" @click="submitOrder()" />
|
||||
</div>
|
||||
<div class="cart-total-aside">
|
||||
<ul>
|
||||
<li v-for="(value, key) in items" :key="key">
|
||||
<label>{{ $t(key) }}</label>
|
||||
<span>
|
||||
{{ numberFormat(value) }}
|
||||
{{ key == "productsCount" ? $t("product") : "" }}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<Button
|
||||
:label="$t('submitAndViewPreFactor')"
|
||||
:loading="loading"
|
||||
@click="submitOrder()"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import init from '../../../initialize/cart-total-invoice'
|
||||
import init from "../../../initialize/cart-total-invoice";
|
||||
const { dialog } = inject("service");
|
||||
const data = inject("data");
|
||||
|
||||
const { dialog } = inject('service')
|
||||
const data = inject('data')
|
||||
const items = computed(() => init(data.value));
|
||||
|
||||
const items = computed(() => init(data.value))
|
||||
const token = useCookie("token");
|
||||
|
||||
const loading = ref(false)
|
||||
const router = useRouter();
|
||||
|
||||
const loading = ref(false);
|
||||
|
||||
const submitOrder = async () => {
|
||||
loading.value = true
|
||||
const { status, data: res } = await useFetch('/api/orders', {
|
||||
headers: { Authorization: useCookie('token') }, method: 'post'
|
||||
})
|
||||
loading.value = false
|
||||
if (token.value) {
|
||||
loading.value = true;
|
||||
const { status, data: res } = await useFetch("/api/orders", {
|
||||
headers: { Authorization: useCookie("token") },
|
||||
method: "post",
|
||||
});
|
||||
loading.value = false;
|
||||
|
||||
if (status.value == 'success') {
|
||||
dialog.show(resolveComponent('CartDialogPreFactor'), res.value)
|
||||
const cart = useCartStore()
|
||||
cart.get()
|
||||
if (status.value == "success") {
|
||||
dialog.show(resolveComponent("CartDialogPreFactor"), res.value);
|
||||
const cart = useCartStore();
|
||||
cart.get();
|
||||
}
|
||||
}
|
||||
} else router.push("/auth/login?redirect=/checkout/cart");
|
||||
};
|
||||
|
||||
const numberFormat = (number) =>
|
||||
new Intl.NumberFormat('fa-IR', { maximumSignificantDigits: 3 }).format(number)
|
||||
new Intl.NumberFormat("fa-IR", { maximumSignificantDigits: 3 }).format(
|
||||
number
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.cart-total-aside {
|
||||
@apply w-full lg:max-w-[28.1rem] lg:h-[25rem] flex flex-col justify-between p-6 grow;
|
||||
@apply lg:bg-neutral-50 lg:rounded-[0.6rem] lg:border border-neutral-200 font-vazir lg:mr-auto;
|
||||
@apply w-full lg:max-w-[28.1rem] lg:h-[25rem] flex flex-col justify-between p-6 grow;
|
||||
@apply lg:bg-neutral-50 lg:rounded-[0.6rem] lg:border border-neutral-200 font-vazir lg:mr-auto;
|
||||
|
||||
ul {
|
||||
@apply flex flex-col gap-[1.1rem] lg:gap-6 lg:mt-2;
|
||||
ul {
|
||||
@apply flex flex-col gap-[1.1rem] lg:gap-6 lg:mt-2;
|
||||
|
||||
li {
|
||||
@apply flex justify-between items-center;
|
||||
li {
|
||||
@apply flex justify-between items-center;
|
||||
|
||||
label {
|
||||
@apply text-zinc-500 text-sm lg:text-xl font-medium;
|
||||
}
|
||||
label {
|
||||
@apply text-zinc-500 text-sm lg:text-xl font-medium;
|
||||
}
|
||||
|
||||
span {
|
||||
@apply text-zinc-800 text-lg lg:text-2xl lg:font-medium;
|
||||
}
|
||||
}
|
||||
span {
|
||||
@apply text-zinc-800 text-lg lg:text-2xl lg:font-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
@apply max-lg:hidden;
|
||||
button {
|
||||
@apply max-lg:hidden;
|
||||
|
||||
span {
|
||||
@apply text-xl font-bold;
|
||||
}
|
||||
span {
|
||||
@apply text-xl font-bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -11,7 +11,8 @@
|
||||
|
||||
<script setup>
|
||||
import init from '../../initialize/cart-total-invoice'
|
||||
|
||||
const { isMobile } = useDevice();
|
||||
const { breakpoint: device = isMobile ? "mobile" : "desktop" } = useViewport();
|
||||
const { dialog } = inject('service')
|
||||
|
||||
const data = inject('data')
|
||||
@@ -19,6 +20,10 @@ const data = inject('data')
|
||||
const items = computed(() => init(data.value))
|
||||
|
||||
const loading = ref(false)
|
||||
const position = computed(() => {
|
||||
if(device == "desktop") return "center"
|
||||
if(device == "mobile") return "bottom"
|
||||
})
|
||||
|
||||
const submitOrder = async () => {
|
||||
loading.value = true
|
||||
@@ -28,8 +33,8 @@ const submitOrder = async () => {
|
||||
loading.value = false
|
||||
|
||||
if (status.value == 'success') {
|
||||
dialog.open(resolveComponent('DialogPreFactorSubmit'), {
|
||||
props: { modal: true },
|
||||
dialog.open(resolveComponent('CartDialogPreFactor'), {
|
||||
props: { modal: true, position: 'bottom' },
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
+83
-76
@@ -1,89 +1,96 @@
|
||||
<template>
|
||||
<div class="buy">
|
||||
<p>
|
||||
<span>{{ $t('priceForYou') }}</span>
|
||||
<small v-if="boxSeller">
|
||||
{{ $t('everyBox') }}
|
||||
</small>
|
||||
</p>
|
||||
<div>
|
||||
<span v-if="specialPrice">
|
||||
{{ numberFormat(specialPrice) }}
|
||||
<small>{{ $t('priceUnit') }}</small>
|
||||
</span>
|
||||
<span>
|
||||
{{ numberFormat(price) }}
|
||||
<small v-if="!specialPrice">
|
||||
{{ $t('priceUnit') }}
|
||||
</small>
|
||||
</span>
|
||||
</div>
|
||||
<CartQuantity v-if="cart.find(id)" v-model="quantity" :range="orderRange" />
|
||||
<Button v-else :label="$t('addToCart')" :loading="cart.loading" @click="quantity = orderRange.min" />
|
||||
<p>
|
||||
<span>{{ $t("priceForYou") }}</span>
|
||||
<small v-if="boxSeller">
|
||||
{{ $t("everyBox") }}
|
||||
</small>
|
||||
</p>
|
||||
<div>
|
||||
<span v-if="specialPrice">
|
||||
{{ numberFormat(specialPrice) }}
|
||||
<small>{{ $t("priceUnit") }}</small>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
{{ numberFormat(price) }}
|
||||
<small v-if="!specialPrice">
|
||||
{{ $t("priceUnit") }}
|
||||
</small>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
<CartQuantity v-if="cart.find(id)" v-model="quantity" :range="orderRange" />
|
||||
<Button v-else :label="$t('addToCart')" :loading="cart.loading" @click="quantity = orderRange.min" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
const { id, orderRange, boxSeller, specialPrice, price } = inject('data')
|
||||
|
||||
const cart = useCartStore()
|
||||
const quantity = computed({
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const product = inject("data");
|
||||
const { id, orderRange, boxSeller, specialPrice, price } = product;
|
||||
|
||||
const cart = useCartStore();
|
||||
const quantity = computed({
|
||||
get: () => cart.find(id)?.quantity || 0,
|
||||
set: (v) => cart.update(id, v)
|
||||
})
|
||||
|
||||
const numberFormat = (number) =>
|
||||
new Intl.NumberFormat('fa-IR', { maximumSignificantDigits: 3 }).format(number)
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.product .buy {
|
||||
set: (v) => cart.update(product, v),
|
||||
});
|
||||
// const productAddedToCart = computed(() => {
|
||||
// cart.items.find((item) => item.product._id == id);
|
||||
// });
|
||||
// console.log(productAddedToCart);
|
||||
const numberFormat = (number) =>
|
||||
new Intl.NumberFormat("fa-IR", { maximumSignificantDigits: 3 }).format(
|
||||
number
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.product .buy {
|
||||
@apply flex flex-wrap justify-between items-center px-6 pt-1 pb-2.5 lg:gap-6 shadow-[0px_-3px_5px_#00000005];
|
||||
@apply fixed inset-x-0 bottom-0 h-[6.2rem] bg-white shadow border-t border-[#F1F2F4] lg:h-auto;
|
||||
@apply z-10 lg:z-0 lg:static lg:bg-transparent lg:shadow-none lg:border-t-0 lg:p-0 lg:gap-y-6 lg:mt-auto;
|
||||
|
||||
|
||||
p {
|
||||
@apply w-full lg:w-max text-[#7F7F7F] font-medium font-vazir pr-1.5 lg:p-0;
|
||||
|
||||
span {
|
||||
@apply text-xs lg:text-xl leading-[2.1rem];
|
||||
}
|
||||
|
||||
small {
|
||||
@apply text-[0.7em] lg:text-base leading-[1.9rem];
|
||||
}
|
||||
@apply w-full lg:w-max text-[#7F7F7F] font-medium font-vazir pr-1.5 lg:p-0;
|
||||
|
||||
span {
|
||||
@apply text-xs lg:text-xl leading-[2.1rem];
|
||||
}
|
||||
|
||||
small {
|
||||
@apply text-[0.7em] lg:text-base leading-[1.9rem];
|
||||
}
|
||||
}
|
||||
|
||||
&>div:nth-of-type(1) {
|
||||
@apply flex flex-col justify-end gap-2 max-lg:order-last;
|
||||
|
||||
|
||||
span {
|
||||
@apply text-left text-[#333] text-sm font-bold lg:text-[1.6em] font-vazir;
|
||||
|
||||
& > div:nth-of-type(1) {
|
||||
@apply flex flex-col justify-end gap-2 max-lg:order-last;
|
||||
|
||||
span {
|
||||
@apply text-left text-[#333] text-sm font-bold lg:text-[1.6em] font-vazir;
|
||||
}
|
||||
|
||||
small {
|
||||
@apply text-xs font-medium lg:hidden;
|
||||
}
|
||||
|
||||
&:has(span:nth-child(2)) {
|
||||
span:first-child {
|
||||
@apply max-lg:-mt-8;
|
||||
}
|
||||
|
||||
small {
|
||||
@apply text-xs font-medium lg:hidden;
|
||||
}
|
||||
|
||||
&:has(span:nth-child(2)) {
|
||||
span:first-child {
|
||||
@apply max-lg:-mt-8;
|
||||
}
|
||||
|
||||
span:last-child {
|
||||
@apply line-through text-xs lg:text-base text-gray-600;
|
||||
}
|
||||
|
||||
span:last-child {
|
||||
@apply line-through text-xs lg:text-base text-gray-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>button {
|
||||
@apply w-[10.8rem] h-[2.6rem] lg:w-[25.1rem] lg:h-14 #{!important};
|
||||
|
||||
.p-button-label {
|
||||
@apply text-xs lg:text-xl font-bold font-iran-sans;
|
||||
}
|
||||
|
||||
& > button {
|
||||
@apply w-[10.8rem] h-[2.6rem] lg:w-[25.1rem] lg:h-14 #{!important};
|
||||
|
||||
.p-button-label {
|
||||
@apply text-xs lg:text-xl font-bold font-iran-sans;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user