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

src/views/base/cart/index.vue

@@ -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(() => {

src/views/base/transactions/components/Item.vue

@@ -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) {