fix bugs

src/views/base/gold/desktop/styles/desktop-gold.less

@@ -1,5 +1,31 @@
 /* Desktop standalone gold trade page */
 
+.gold-page {
+  height: 100%;
+  min-height: 0;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  overflow-x: hidden;
+}
+
+.gold-embed {
+  max-height: min(70vh, 35rem);
+  overflow-x: hidden;
+  overflow-y: auto;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.gold-form-card {
+  min-height: 0;
+}
+
+.gold-fee-box {
+  margin-top: 1rem;
+}
+
 .dgold {
   min-height: 100%;
   background: #f6f7f9;
@@ -73,7 +99,27 @@
   margin-bottom: 2rem !important;
 }
 
-.dgold__panel .bottom-18 {
+.dgold__panel .gold-fee-box {
   position: static !important;
   margin-top: 1rem;
 }
+
+@media screen and (max-width: 900px) {
+  .dgold {
+    padding: 16px;
+  }
+
+  .dgold-topbar {
+    gap: 12px;
+    margin-bottom: 16px;
+    padding-bottom: 16px;
+  }
+
+  .dgold-topbar__title {
+    font-size: 20px;
+  }
+
+  .dgold__panel {
+    max-height: none;
+  }
+}

src/views/base/gold/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="isStandaloneDesktop ? 'dgold' : 'h-35rem overflow-y-auto'">
+  <div :class="rootClass">
     <header v-if="isStandaloneDesktop" class="dgold-topbar">
       <button type="button" class="dgold-topbar__back" @click="router.back()">
         <BasicIcon icon="vuesax-linear:arrow-right-1" size="18" />
@@ -10,8 +10,18 @@
         <h1 class="dgold-topbar__title">خرید و فروش {{ tradeProductLabel }}</h1>
       </div>
     </header>
-    <div :class="isStandaloneDesktop ? 'dgold__panel' : ''">
-    <div class=" !overflow-y-scroll bg-white py-3   text-primary font-bold  flex justify-evenly">
+    <MobilePageHeader
+      v-else-if="isStandaloneMobile"
+      :title="`خرید و فروش ${tradeProductLabel}`"
+      show-back
+    />
+    <div :class="panelClass">
+    <div
+      :class="[
+        '!overflow-y-scroll bg-white py-3 text-primary font-bold flex justify-evenly',
+        isStandaloneMobile ? 'mpage-subheader wrap-fix' : '',
+      ]"
+    >
       <!--      <div @click="isBuy = false" class="w-full text-center" :class="!isBuy?'text-primary':'text-gray-400'">خرید طلا</div>
             <div @click="isBuy = true" class="w-full text-center" :class="isBuy?'text-primary':'text-gray-400'">فروش طلا</div>-->
       <div class="flex justify-evenly w-full px-2 h-11 items-center bg-gray-50 relative rounded ">
@@ -28,11 +38,11 @@
              class="absolute bg-white h-8 w-1/2 rounded-lg animate right"></div>
       </div>
     </div>
-    <div v-if="userStore" class=" mt-5 mb-25vh pb-2">
+    <div v-if="userStore" :class="contentClass">
       <a-spin :spinning="!price">
         <div v-if="!loading" :class="!isBuy? ' bg-red-100' : ' bg-green-100'"
              class="w-full  relative rounded-lg h-[88px] flex flex-col justify-center background-color-transition">
-          <img :src="img1" alt="" class="h-[88px] absolute">
+          <img :src="img1" alt="" class="h-[88px] absolute inset-0 w-full object-cover">
           <div class="w-full items-center flex flex-col">
             <div class="text-gray-700 font-bold">{{ !isBuy ? 'قیمت فروش' : 'قیمت خرید' }}</div>
             <div v-if="price" class="flex gap-1 mt-3 text-xs items-center">
@@ -53,7 +63,7 @@
         </div>
       </a-spin>
       <a-form :model="form" class="!mt-5" name="basic" @finish="okConfirm()">
-        <div class="border-gray-200 border-1 rounded-xl p-5 h-58 relative">
+        <div class="border-gray-200 border-1 rounded-xl p-5 gold-form-card relative">
           <bg_main />
           <div class="z-100 relative">
             <a-form-item>
@@ -138,7 +148,7 @@
             موجودی کیف پول ناکافی می باشد.
           </div>
         </a-form-item>
-        <div class="  w-full bottom-18 px-6 rounded-xl py-1 border-1 bg-white">
+        <div class="w-full px-4 rounded-xl py-2 border-1 bg-white gold-fee-box">
           <div class="flex justify-between items-center">
             <div>کارمزد:</div>
             <div class="flex gap-2 items-center">
@@ -278,6 +288,7 @@ import { useUserStore } from '@/store/userStore'
 import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
 import BasicModal from '@/components/BasicPacks/BasicModal.vue'
 import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
+import MobilePageHeader from '@/layouts/components/MobilePageHeader.vue'
 import { justNumber } from '@/utils/inputRules'
 import GoldSkeleton from '@/views/base/gold/components/GoldSkeleton.vue'
 import GoldLoading from '@/components/GoldLoading.vue'
@@ -336,6 +347,20 @@ interface Prop {
 const props = withDefaults(defineProps<Prop>(), {})
 const isDesktop = useDesktopBreakpoint()
 const isStandaloneDesktop = computed(() => isDesktop.value && !props.ProductItem)
+const isStandaloneMobile = computed(() => !isDesktop.value && !props.ProductItem)
+const rootClass = computed(() => {
+  if (isStandaloneDesktop.value) return 'dgold'
+  if (props.ProductItem) return 'gold-embed'
+  return 'gold-page'
+})
+const panelClass = computed(() => (isStandaloneDesktop.value ? 'dgold__panel' : ''))
+const contentClass = computed(() => {
+  if (isStandaloneDesktop.value) return 'mt-5 mb-25vh pb-2'
+  if (isStandaloneMobile.value) {
+    return 'px-3 mpage-content mpage-content--with-subheader pb-[calc(var(--app-bottom-chrome-height)+1rem)]'
+  }
+  return 'mt-5 px-3 pb-4'
+})
 const isBuy = ref<boolean>(true)
 
 const tradeProductLabel = computed(() => {

src/views/base/products/components/DealProduct.vue

@@ -277,6 +277,7 @@ import Icon from '@/components/BasicPacks/BasicIcon.vue'
 import { useUserStore } from '@/store/userStore'
 import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
 import { justNumber2, justNumber3, required } from '@/utils/inputRules'
+import { persianToEnglishDigits } from '@/utils/persianDigits'
 import GoldSkeleton from '@/views/base/gold/components/GoldSkeleton.vue'
 import GoldLoading from '@/components/GoldLoading.vue'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
@@ -678,16 +679,7 @@ watch(
 )
 
 // تابع تبدیل اعداد فارسی به انگلیسی
-const persianToEnglish = (str: string | number | undefined): string => {
-  if (!str) return ''
-  const persianNumbers = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹']
-  const englishNumbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
-  let result = str.toString()
-  for (let i = 0; i < 10; i++) {
-    result = result.replace(new RegExp(persianNumbers[i], 'g'), englishNumbers[i])
-  }
-  return result
-}
+const persianToEnglish = persianToEnglishDigits
 
 watch(() => form.value.goldValue, (newVal) => {
   if (newVal !== undefined && newVal !== null && newVal !== '') {