1405/03/09-fix bug in transactions & cart

2026-05-30 16:13:21 +03:30
parent 53a3e2f61a
commit bf34d0fba0
5 changed files with 184 additions and 141 deletions
@@ -2,6 +2,8 @@ import { computed, ref } from 'vue'
 import { defineStore } from 'pinia'
 import type { CartItem } from '@/models/cart'
 import type { Product } from '@/models/products'
+import type { Price } from '@/models/home'
+import { getProducts } from '@/api/products'

 const CART_STORAGE_KEY = 'ghatre_cart'

@@ -93,6 +95,58 @@ export const useCartStore = defineStore('cart', () => {
    return cartItems.value.length
  })

+  function syncProductsFromServer(serverProducts: Product[]): number {
+    const productMap = new Map(serverProducts.map(p => [p.id, p]))
+    const beforeCount = cartItems.value.length
+
+    cartItems.value = cartItems.value
+      .filter(item => productMap.has(item.product.id))
+      .map(item => ({
+        ...item,
+        product: { ...productMap.get(item.product.id)! }
+      }))
+
+    if (cartItems.value.length > 0 || beforeCount > 0) {
+      saveCartToStorage()
+    }
+
+    return beforeCount - cartItems.value.length
+  }
+
+  function recalculateCartPrices(lastPrice: Price) {
+    if (!lastPrice || cartItems.value.length === 0) return
+
+    cartItems.value.forEach((item) => {
+      const product = item.product
+      let newPrice = 0
+
+      if (product.group_type == 'آبشده') {
+        newPrice = lastPrice.price_last ?? 0
+      } else {
+        newPrice = product.amount * (lastPrice.price_last ?? 0)
+      }
+
+      product.price = newPrice
+      product.sellPrice = product.amount * (lastPrice.sell ?? 0)
+      item.price = newPrice + (product.cash_fee_buy ?? 0)
+      item.totalPrice = parseInt(String(item.price * item.quantity))
+    })
+
+    saveCartToStorage()
+  }
+
+  async function refreshCartFromServer(): Promise<number> {
+    if (cartItems.value.length === 0) return 0
+
+    try {
+      const serverProducts: Product[] = await getProducts()
+      return syncProductsFromServer(serverProducts)
+    } catch (e) {
+      console.error('Error refreshing cart from server:', e)
+      return 0
+    }
+  }
+
  return {
    cartItems,
    addToCart,
@@ -102,7 +156,10 @@ export const useCartStore = defineStore('cart', () => {
    totalPrice,
    itemCount,
    loadCartFromStorage,
-    saveCartToStorage
+    saveCartToStorage,
+    syncProductsFromServer,
+    recalculateCartPrices,
+    refreshCartFromServer
  }
 })

@@ -15,7 +15,11 @@
      </div>
    </div>
    <GoldLoading v-model:show="infoVisible" title=""/>
-    <div class="px-5 pt-26 pb-30">
+    <div class="px-5 pt-26 pb-30" :class="loading ? 'h-[60vh]' : ''">
+      <template v-if="loading">
+        <TransactionSkeleton v-for="i in 3" :key="i" class="mt-4" />
+      </template>
+      <template v-else>
      <!-- Empty Cart Message -->
      <div v-if="cartStore.itemCount === 0" class="flex flex-col items-center justify-center h-[60vh]">
        <div class="text-gray-500 text-lg font-semibold mb-4">سبد خرید شما خالی است</div>
@@ -107,6 +111,7 @@
          </BasicButton>
        </div>
      </div>
+      </template>
    </div>
  </div>
  <AModal v-model:visible="showDiscountModal" ok-text="اعمال کد تخفیف" cancel-text="انصراف" @ok="submitDiscount"
@@ -152,6 +157,7 @@ import parsianImg from '@/assets/img/parsianImg.svg'
 import venusImg from '@/assets/img/venousImg.svg'
 import {loading, getToken} from '@/utils'
 import GoldLoading from '@/components/GoldLoading.vue'
+import TransactionSkeleton from '@/components/TransactionSkeleton.vue'
 import {registerCodeDiscount} from "@/api/giftCard";

 const cartStore = useCartStore()
@@ -167,28 +173,8 @@ const price = computed((): Price => <Price>lastPrice.value ?? 0)

 // Watch for price updates and update cart items
 watch(lastPrice, () => {
-  if (lastPrice.value && cartStore.cartItems.length > 0) {
-    cartStore.cartItems.forEach((item) => {
-      const product = item.product
-      let newPrice = 0
-
-      if (product.group_type == 'آبشده') {
-        newPrice = lastPrice.value?.price_last ?? 0
-      } else {
-        newPrice = product.amount * (lastPrice.value?.price_last ?? 0)
-      }
-
-      // Update product price
-      product.price = newPrice
-      product.sellPrice = product.amount * (lastPrice.value?.sell ?? 0)
-
-      // Update item price and total price
-      item.price = newPrice + (product.cash_fee_buy ?? 0)
-      item.totalPrice = parseInt(item.price * item.quantity)
-    })
-
-    // Save updated prices to storage
-    cartStore.saveCartToStorage()
+  if (lastPrice.value) {
+    cartStore.recalculateCartPrices(lastPrice.value)
  }
 }, {deep: true, immediate: false})

@@ -313,8 +299,8 @@ async function handleCheckout() {

  if (cashItemsTotal > 0) {
    // Ensure wallet info is loaded
-    if (discountInfo.value?.amount>0){
-      cashItemsTotal=cashItemsTotal-cashItemsTotal*discountInfo.value.amount
+    if (discountInfo.value?.amount && discountInfo.value?.amount>0){
+      cashItemsTotal=cashItemsTotal-cashItemsTotal*discountInfo.value?.amount
    }
    if (!walletStore.walletInfo) {
      await walletStore.getMyWallet()
@@ -348,10 +334,8 @@ async function handleCheckout() {
  }

  try {
-    loading.value = true
    infoVisible.value = true

-    // console.log(cartStore.cartItems)
    // Prepare orders array with same structure as createOrder for each product
    const orders: Order[] = cartStore.cartItems.map(item => {
      console.log(item)
@@ -415,40 +399,33 @@ async function initPrice() {
  try {
    await getLastPrices()
    await setIntervalGetLastPrice()
-
-    // Update prices for all cart items
-    if (lastPrice.value && cartStore.cartItems.length > 0) {
-      cartStore.cartItems.forEach((item) => {
-        const product = item.product
-        let newPrice = 0
-
-        if (product.group_type == 'آبشده') {
-          newPrice = lastPrice.value?.price_last ?? 0
-        } else {
-          newPrice = product.amount * (lastPrice.value?.price_last ?? 0)
-        }
-
-        // Update product price
-        product.price = newPrice
-        product.sellPrice = product.amount * (lastPrice.value?.sell ?? 0)
-
-        // Update item price and total price
-        item.price = newPrice + (product.cash_fee_buy ?? 0)
-        item.totalPrice = parseInt(item.price * item.quantity)
-      })
-
-      // Save updated prices to storage
-      cartStore.saveCartToStorage()
+    if (lastPrice.value) {
+      cartStore.recalculateCartPrices(lastPrice.value)
    }
  } catch (e: any) {
    console.log(e)
  }
 }

+async function refreshCart() {
+  const removedCount = await cartStore.refreshCartFromServer()
+  if (removedCount > 0) {
+    message.warning(`${removedCount} محصول از سبد خرید حذف شد (دیگر در دسترس نیست)`)
+  }
+  if (lastPrice.value) {
+    cartStore.recalculateCartPrices(lastPrice.value)
+  }
+}
+
 onMounted(async () => {
-  // Load cart from storage if needed
  cartStore.loadCartFromStorage()
-  await initPrice()
+  loading.value = true
+  try {
+    await initPrice()
+    await refreshCart()
+  } finally {
+    loading.value = false
+  }
 })

 onUnmounted(() => {
@@ -16,7 +16,7 @@
               class="text-gray-500 text-xs  number-ltr">{{ item.gold }}
            <div>{{item.unit}}</div>
          </div>
-          <div class="text-gray-500 flex gap-1 text-xs items-center number-ltr">
+          <div v-if="!isShopProduct" class="text-gray-500 flex gap-1 text-xs items-center number-ltr">
            <div :class="item.cash > 0 ? 'text-green-600':'text-red-600'" class="text-base">
              {{ usePriceWithoutType(item.cash?? 0) }}
            </div>
@@ -25,7 +25,27 @@
        </div>
      </div>
    </div>
-    <div v-if="isGold" class="flex w-full justify-between mt-2">
+    <template v-if="isShopProduct">
+      <div class="flex w-full justify-between mt-2">
+        <div class="text-gray-500">تعداد:</div>
+        <div class="text-gray-500 text-xs number-ltr">{{ item?.gold ?? 0 }}</div>
+      </div>
+      <div class="flex w-full justify-between mt-2">
+        <div class="text-gray-500">قیمت کل:</div>
+        <div class="text-gray-500 flex gap-1 text-xs items-center number-ltr">
+          <div class="text-base">{{ usePriceWithoutType(item.order?.total_price ?? 0) }}</div>
+          ریال
+        </div>
+      </div>
+      <div class="flex w-full justify-between mt-2">
+        <div class="text-gray-500">قیمت واحد:</div>
+        <div class="text-gray-500 flex gap-1 text-xs items-center number-ltr">
+          <div class="text-base">{{ usePriceWithoutType(item.order?.price ?? 0) }}</div>
+          ریال
+        </div>
+      </div>
+    </template>
+    <div v-else-if="isGold" class="flex w-full justify-between mt-2">
      <div class="text-gray-500">قیمت معامله:</div>
      <div class="text-gray-500 flex gap-1 text-xs items-center">
 <!--        <div class="text-base">{{ typeof parseInt((Math.abs(item.cash) / Math.abs(item.gold)).toFixed(0)) }}</div>-->
@@ -60,20 +80,44 @@
            ریال
          </div>
        </div>
-        <div v-if="item.order" class="flex justify-between mb-3">
-          <div class="text-primary">قیمت هر گرم طلا حین معامله:</div>
-          <div class="flex text-xs items-center number-ltr">
-            <div class="text-base ml-1">{{ usePriceWithoutType(item.order?.price?? 0) }}</div>
-            ریال
+        <template v-if="isShopProduct">
+          <div class="flex justify-between mb-3">
+            <div class="text-primary">تعداد:</div>
+            <div class="flex text-xs items-center number-ltr">
+              <div class="text-base ml-1">{{ item.order?.number ?? 0 }}</div>
+            </div>
          </div>
-        </div>
-        <div class="flex justify-between mb-3">
-          <div class="text-primary">مقدار {{item.wallet?.product? item.wallet.product.title: 'آبشده' }} مبادله شده:</div>
-          <div :class="item.gold >= 0? 'text-green-600' : 'text-red-600'" class="flex text-xs items-center number-ltr">
-            <div class="text-base ml-1">{{ item.gold }}</div>
-            {{item.unit}}
+          <div class="flex justify-between mb-3">
+            <div class="text-primary">قیمت کل:</div>
+            <div class="flex text-xs items-center number-ltr">
+              <div class="text-base ml-1">{{ usePriceWithoutType(item.order?.total_price ?? 0) }}</div>
+              ریال
+            </div>
          </div>
-        </div>
+          <div class="flex justify-between mb-3">
+            <div class="text-primary">قیمت واحد:</div>
+            <div class="flex text-xs items-center number-ltr">
+              <div class="text-base ml-1">{{ usePriceWithoutType(item.order?.price ?? 0) }}</div>
+              ریال
+            </div>
+          </div>
+        </template>
+        <template v-else>
+          <div v-if="item.order" class="flex justify-between mb-3">
+            <div class="text-primary">قیمت هر گرم طلا حین معامله:</div>
+            <div class="flex text-xs items-center number-ltr">
+              <div class="text-base ml-1">{{ usePriceWithoutType(item.order?.price?? 0) }}</div>
+              ریال
+            </div>
+          </div>
+          <div class="flex justify-between mb-3">
+            <div class="text-primary">مقدار {{item.wallet?.product? item.wallet.product.title: 'آبشده' }} مبادله شده:</div>
+            <div :class="item.gold >= 0? 'text-green-600' : 'text-red-600'" class="flex text-xs items-center number-ltr">
+              <div class="text-base ml-1">{{ item.gold }}</div>
+              {{item.unit}}
+            </div>
+          </div>
+        </template>
        <div class="flex justify-between mb-3">
          <div class="text-primary">موجودی کیف پول:</div>
          <div :class="item.cash > 0? 'text-green-600' : 'text-red-600'" class="flex text-xs items-center number-ltr">
@@ -156,6 +200,7 @@ interface Prop {
 const props = withDefaults(defineProps<Prop>(), {})
 const isUp = computed(() => props.item.type === 3 || props.item.type === 1 || props.item.type === 8 || props.item.type === 9)
 const isGold = computed(() => props.item.type === 1 || props.item.type === 2 || props.item.type === 10)
+const isShopProduct = computed(() => !!props.item?.product_id)
 /*const title = computed(() => {
  if (isUp.value) {
    if (isGold.value) {