From d7a743ba09a195ef6955c87cb86342cdbe718745 Mon Sep 17 00:00:00 2001
From: adonis <mseddighi99.ms@gmail.com>
Date: Sun, 11 Oct 2026 22:44:10 +0330
Subject: [PATCH] feat(trade): separate gross price, fee and net payable into
 three colored rows

---
 src/views/base/gold/index.vue | 38 +++++++++++++++++++++++++++--------
 1 file changed, 30 insertions(+), 8 deletions(-)

diff --git a/src/views/base/gold/index.vue b/src/views/base/gold/index.vue
index 5fa1b77..7b364a5 100644
--- a/src/views/base/gold/index.vue
+++ b/src/views/base/gold/index.vue
@@ -147,15 +147,33 @@
             موجودی کیف پول ناکافی می باشد.
           </div>
         </a-form-item>
-        <div class="w-full px-4 rounded-2xl py-2 border-1 bg-white gold-fee-box">
-          <div class="flex justify-between items-center">
-            <div>کارمزد ({{ feeDeductsFromGold ? `از طلا` : `از ریال` }}):</div>
-            <div class="flex gap-2 items-center font-bold">
-              <div>{{ feeDisplayText }}</div>
-            </div>
+        <div class="w-full px-4 rounded-2xl py-3 border-1 bg-white gold-fee-box flex flex-col gap-2 mt-2">
+          <!-- سطر اول: مبلغ اصل معامله (رنگ مشکی/پایه) -->
+          <div class="flex justify-between items-center text-xs sm:text-sm">
+            <span class="text-gray-600 font-medium">مبلغ اصل معامله:</span>
+            <strong class="font-bold text-gray-800 number-ltr" dir="ltr">
+              {{ usePriceWithoutType(Math.round(finalPrice ?? 0)) }} ریال
+            </strong>
           </div>
-          <div class="text-xs text-gray-600 mt-1">
-            {{ feeFormHint }}
+
+          <!-- سطر دوم: کارمزد معامله (رنگ قرمز) -->
+          <div class="flex justify-between items-center text-xs sm:text-sm">
+            <span class="text-red-500 font-medium">
+              {{ isBuy ? `کارمزد خرید (${feePercentLabel}):` : `کسر ${feePercentLabel} کارمزد از فروش:` }}
+            </span>
+            <strong class="font-bold text-red-600 number-ltr" dir="ltr">
+              {{ isBuy ? `+ ${feeDisplayText}` : `− ${feeDisplayText}` }}
+            </strong>
+          </div>
+
+          <!-- سطر سوم: مبلغ نهایی قابل پرداخت / قابل واریز (رنگ سبز برجسته) -->
+          <div class="flex justify-between items-center text-xs sm:text-sm pt-2 border-t border-gray-100">
+            <span class="text-green-700 font-bold">
+              {{ isBuy ? 'مبلغ قابل پرداخت:' : 'مبلغ قابل واریز (دریافتی):' }}
+            </span>
+            <strong class="font-bold text-green-600 text-sm sm:text-base number-ltr" dir="ltr">
+              {{ usePriceWithoutType(Math.round(payablePrice ?? 0)) }} ریال
+            </strong>
           </div>
         </div>
       </a-form>
@@ -491,6 +509,10 @@ const feeDisplayText = computed(() =>
     : `${usePriceWithoutType(Math.round(feeInRial.value))} ریال`
 )
 
+const feePercentLabel = computed(() =>
+  feeInGrams.value > 0 ? `${formatFixed(serviceFeePercentage.value * 100, 2)}%` : 'رایگان'
+)
+
 const displayTradeGoldAmount = computed(() =>
   formatTradeGramDisplay(orderGoldAmount.value)
 )