1405/04/27

-responive bugs

src/components/GoldLoading.vue

@@ -1,9 +1,12 @@
 <template>
   <van-dialog
-    class="updateButton"
-    confirm-button-text="متوجه شدم"
+    v-model:show="show"
+    class="gold-loading-dialog updateButton"
+    teleport="body"
+    :z-index="zIndex"
     :show-confirm-button="false"
-    @confirm="update()"
+    :close-on-click-overlay="false"
+    :close-on-popstate="false"
   >
     <div class="flex flex-col items-center p-2">
       <DotLottieVue class="w-15rem h-15rem" autoplay loop src="/animIsTracking.json" />
@@ -16,21 +19,27 @@
 </template>
 
 <script setup lang="ts">
-import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
-import { update } from 'lodash'
-import { ref } from 'vue'
-import anim from '@/assets/img/anim/anim1.json'
+import { computed } from 'vue'
 import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
-interface Prop {
-  title: string
-  info?: string
-  infoHead?: string
-  isLine?: boolean
-  value?: string | number
-}
-const props = withDefaults(defineProps<Prop>(), {
-  isLine: false
+import { APP_Z_OVERLAY } from '@/utils/zIndex'
+
+const props = withDefaults(
+  defineProps<{
+    show?: boolean
+    zIndex?: number
+  }>(),
+  {
+    show: false,
+    zIndex: APP_Z_OVERLAY,
+  },
+)
+
+const emit = defineEmits<{
+  'update:show': [value: boolean]
+}>()
+
+const show = computed({
+  get: () => props.show,
+  set: (value: boolean) => emit('update:show', value),
 })
 </script>
-
-<style scoped lang="less"></style>

src/components/SupportContactBar.vue

@@ -66,7 +66,7 @@ async function onSupportClick() {
   padding: 0.65rem 1rem;
   border: 0;
   border-radius: 0.75rem;
-  background: var(--App-primary, var(--ant-color-primary, #7f1d1d));
+  background: var(--App-primary, @App-primary-color);
   color: #fff;
   font-size: 0.9375rem;
   font-weight: 600;

src/components/TradeFeeConfirmSummary.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="w-full rounded-lg bg-gray-50 p-3 trade-fee-summary">
+    <div class="flex justify-between items-center pb-3 border-b border-gray-200">
+      <div class="text-sm text-gray-600">مظنه هر {{ weightUnit }}</div>
+      <div class="flex items-center font-bold">
+        <span>{{ formattedUnitPrice }}</span>
+        <span class="text-xs mr-1 font-normal">ریال</span>
+      </div>
+    </div>
+
+    <div
+      v-for="(section, index) in breakdown.sections"
+      :key="section.heading"
+      class="mt-3"
+      :class="{ 'pt-3 border-t border-gray-200': index > 0 }"
+    >
+      <div class="text-sm font-bold text-gray-800 mb-2">{{ section.heading }}</div>
+
+      <div
+        v-for="(row, rowIndex) in section.rows"
+        :key="`${section.heading}-${rowIndex}`"
+        class="flex justify-between items-center py-1"
+        :class="{
+          'border-t border-dashed border-gray-300 mt-1 pt-2': row.dividerBefore,
+          'font-bold text-base': row.bold,
+        }"
+      >
+        <div class="text-sm" :class="row.bold ? 'text-gray-900' : 'text-gray-700'">
+          <span v-if="row.plus" class="text-green-700 ml-1">+</span>
+          <span v-else-if="row.minus && !row.bold" class="text-red-600 ml-1">−</span>
+          {{ row.label }}
+        </div>
+        <div
+          class="text-left text-sm"
+          :class="{
+            'text-red-600': row.minus && !row.bold,
+            'text-green-700': row.plus,
+          }"
+        >
+          <template v-if="row.gram != null">
+            <span>{{ formatTradeGramDisplay(row.gram) }}</span>
+            <span class="text-xs mr-1">{{ weightUnit }}</span>
+          </template>
+          <template v-else-if="row.rial != null">
+            <span v-if="row.minus && row.bold">−</span>
+            <span>{{ formatRial(row.rial) }}</span>
+            <span class="text-xs mr-1">ریال</span>
+          </template>
+        </div>
+      </div>
+
+      <div v-if="section.footnote" class="text-xs text-gray-600 mt-2 leading-relaxed bg-white rounded-lg px-2 py-1.5">
+        {{ section.footnote }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { usePriceWithoutType } from '@/utils/usePrice'
+import {
+  buildTradeConfirmBreakdown,
+  formatTradeGramDisplay,
+  type TradeInputLock,
+} from '@/utils/serviceFee'
+
+const props = defineProps<{
+  isBuy: boolean
+  inputLock: TradeInputLock
+  displayTradeGoldAmount: number
+  weightUnit: string
+  unitPriceRial: number
+  feeInGrams: number
+  equivalentPrice: string
+  payablePrice: number
+  orderGoldAmount: number
+  feeInRial: number
+  sellGoldDebit?: number
+}>()
+
+const formattedUnitPrice = computed(() =>
+  usePriceWithoutType(Math.round(props.unitPriceRial))
+)
+
+function formatRial(value: number) {
+  return usePriceWithoutType(Math.round(value))
+}
+
+const breakdown = computed(() =>
+  buildTradeConfirmBreakdown({
+    isBuy: props.isBuy,
+    inputLock: props.inputLock,
+    orderGoldAmount: props.orderGoldAmount,
+    feeInGrams: props.feeInGrams,
+    feeInRial: props.feeInRial,
+    payablePrice: props.payablePrice,
+    unitPriceRial: props.unitPriceRial,
+    sellGoldDebit: props.sellGoldDebit,
+  })
+)
+</script>