display deposit & withdraw limits

src/views/base/gold/index.vue

@@ -4,11 +4,11 @@
       <!--      <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 ">
-        <div :class="isBuy?'text-tertiary':'text-gray-400'" class="w-full text-center z-2"
+        <div :class="isBuy?'text-secondary':'text-gray-400'" class="w-full text-center z-2"
              @click.stop="setIsBuy(true) ">
           خرید طلا {{ props?.ProductItem?.title }}
         </div>
-        <div :class="!isBuy?'text-tertiary':'text-gray-400'" class="w-full text-center z-2"
+        <div :class="!isBuy?'text-secondary':'text-gray-400'" class="w-full text-center z-2"
              @click.stop="setIsBuy(false) ">
           فروش طلا {{ props?.ProductItem?.title }}
         </div>
@@ -46,17 +46,17 @@
           <bg_main />
           <div class="z-100 relative">
             <a-form-item>
-              <BasicInput v-model:value="form.goldCash" addon-before="ریال" :addon-bg-color="useConfigStore().config.color"
+              <BasicInput v-model:value="form.goldCash" addon-before="ریال" addon-bg-color="#000000FF"
                           addon-text-color="white"
                           place-holder="ارزش کل"
                           size="large"
-                          type="price" @onchange="calculateGold" />
+                          type="price" @onchange="handleGoldCashChange" />
             </a-form-item>
-            <a-form-item :rules="[justNumber()]">
-              <BasicInput v-model:value="form.goldValue" addon-before="گرم" :addon-bg-color="useConfigStore().config.color"
+            <a-form-item>
+              <BasicInput v-model:value="form.goldValue" addon-before="گرم" addon-bg-color="#000000FF"
                           addon-text-color="white"
                           place-holder="مقدار طلا"
-                          size="large" type="text" inputmode="decimal" @onchange="calculateCash" />
+                          size="large" type="text" input="decimal" @onchange="handleGoldValueChange" />
             </a-form-item>
             <!--              {{walletStore?.walletInfo?.gold}}-->
             <Transition mode="out-in" name="fade">
@@ -182,6 +182,7 @@
             <div class="text-xs mr-1">ریال</div>
           </div>
         </div>
+
       </div>
       <BasicButton class="mb-20 mt-5 w-full" type="primary" @click="ok(); confirmAction= false">ثبت نهایی</BasicButton>
     </BasicActionSheet>
@@ -207,35 +208,27 @@ import img1 from '@/assets/img/home_ly2.svg'
 import { usePrice, usePriceWithoutType } from '@/utils/usePrice'
 import BasicInput from '@/components/BasicPacks/BasicInput.vue'
 import type { Gold } from '@/models/gold'
-import { isIphone, loading, loadingMore, toFixedDownThreeChar } from '@/utils'
+import { loading, loadingMore, toFixedDownThreeChar } from '@/utils'
 import BasicButton from '@/components/BasicPacks/BasicButton.vue'
 import router from '@/router'
 import { useWalletStore } from '@/store/walletStore'
 import { createOrder } from '@/api/order'
 import { message } from 'ant-design-vue'
 import type { Price } from '@/models/home'
-import { getLastPrice } from '@/api/home'
 import Icon from '@/components/BasicPacks/BasicIcon.vue'
 import { useUserStore } from '@/store/userStore'
 import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
 import { justNumber } from '@/utils/inputRules'
 import GoldSkeleton from '@/views/base/gold/components/GoldSkeleton.vue'
 import GoldLoading from '@/components/GoldLoading.vue'
-import { update } from 'lodash'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
-import TransactionSkeleton from '@/components/TransactionSkeleton.vue'
-import ListAnim from '@/components/ListAnim.vue'
-import Item from '@/views/base/wallet/components/Item.vue'
 import type { Transaction } from '@/models/transaction'
 import type { TableEngineInput, TableOutput } from '@/models/table'
-import { useInfiniteScroll } from '@vueuse/core'
 import { getTransactionTable } from '@/api/transaction'
 import { getLastPrices, getUpPrice, lastPrice, setIntervalGetAllPrice, stopPriceInterval } from '@/utils/price'
 import type { Product } from '@/models/products'
 import { useFundUserStore } from '@/store/fundStore'
-import {useConfigStore} from "@/store/configStore";
-// import Bg_main from "@/components/bg_main.vue";
-
+import {debounce} from "lodash";
 const infoVisible = ref(false)
 const walletStore = useWalletStore()
 const userStore = useUserStore()
@@ -254,6 +247,7 @@ interface Prop {
 }
 
 const props = withDefaults(defineProps<Prop>(), {})
+
 const isBuy = ref<boolean>(true)
 
 const buyPagination = ref<TableEngineInput>({
@@ -403,24 +397,53 @@ const form = ref<Gold>({
   goldValue: undefined,
   percentWallet: undefined
 })
+
+const persianToEnglish = (str: string | number | undefined): string => {
+  if (!str) return '';
+  return str.toString()
+      .replace(/[۰-۹]/g, (d) => '۰۱۲۳۴۵۶۷۸۹'.indexOf(d).toString())
+      .replace(/٫/g, '.');
+};
+
+function handleGoldCashChange(val: string | number | undefined) {
+  if (val === undefined || val === null || val === '') {
+    form.value.goldCash = undefined
+    return
+  }
+  const valStr = val.toString()
+  const convertedValue = persianToEnglish(valStr)
+  const numericValue = parseFloat(convertedValue.replace(/,/g, ''))
+  form.value.goldCash = isNaN(numericValue) ? undefined : numericValue
+  if (form.value.goldCash !== undefined) {
+    calculateGold(form.value.goldCash)
+  }
+}
+
+const handleGoldValueChange = debounce(  (val: string | number | undefined) => {
+  if (val === undefined || val === null || val === '') {
+    form.value.goldValue = undefined
+    return
+  }
+  const valStr = val.toString()
+  const convertedValue = persianToEnglish(valStr)
+  const numericValue = parseFloat(convertedValue)
+  form.value.goldValue = isNaN(numericValue) ? undefined : numericValue
+  if (form.value.goldValue !== undefined) {
+    calculateCash(form.value.goldValue)
+  }
+},1500)
+
 const allowedAsciiCodeFloat = [46, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57]
 const allowedAsciiCodeInt = [48, 49, 50, 51, 52, 53, 54, 55, 56, 57]
-watch(form.value, () => {
-  if (form.value.goldValue) {
-    const lastCharGoldStr: string = form.value.goldValue.toString()
-    if (!allowedAsciiCodeFloat.includes(lastCharGoldStr.slice(-1).charCodeAt(0))) {
-      form.value.goldValue = isNaN(parseFloat(lastCharGoldStr.slice(0, -1))) ? null : parseFloat(lastCharGoldStr.slice(0, -1))
-      calculateCash(form.value.goldValue)
-    }
+watch(() => form.value.goldValue, (newVal) => {
+  if (newVal !== undefined && newVal !== null && newVal !== '') {
+    calculateCash(newVal)
   }
-  if (form.value.goldCash) {
-    const lastCharCashStr: string = form.value.goldCash.toString()
-    if (!allowedAsciiCodeInt.includes(lastCharCashStr.slice(-1).charCodeAt(0))) {
-      form.value.goldCash = isNaN(parseFloat(lastCharCashStr.slice(0, -1))) ? null : parseFloat(lastCharCashStr.slice(0, -1))
-      calculateGold(form.value.goldCash)
-    }
+})
+watch(() => form.value.goldCash, (newVal) => {
+  if (newVal !== undefined && newVal !== null && newVal !== '') {
+    calculateGold(newVal)
   }
-
 })
 
 onMounted(() => {
@@ -615,7 +638,7 @@ async function ok() {
   background: blue;
 }*/
 .completeButtonStyle .van-dialog__confirm .van-button__content {
-  background: @App-primary-color;
+  background: #000000FF;
   color: white;
 }