lastPrice in BuySell

env.d.ts

@@ -1 +1,8 @@
 /// <reference types="vite/client" />
+
+declare module 'vue3-odometer' {
+  import type { DefineComponent } from 'vue'
+
+  const Vue3Odometer: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>
+  export default Vue3Odometer
+}

src/main.ts

@@ -78,9 +78,8 @@ function goToHome(to: RouteLocationNormalized, next: NavigationGuardNext) {
 }
 
 router.beforeEach(async (to, from, next) => {
-
   authStore.setLoading(true)
-  console.log(authStore)
+  // console.log(authStore)
   if (timeoutId) {
     clearTimeout(timeoutId)
   }
@@ -107,7 +106,7 @@ router.beforeEach(async (to, from, next) => {
     if (getToken()) {
       await userStore.getMyInfo()
       const  finger_print  =userStore.userInfo.finger_print
-      console.log(finger_print)
+      // console.log(finger_print)
       // const { finger_print } = await getMe()
       hasFingerPrint = finger_print
       // If on an Apple device and fingerprint exists

src/store/fundStore.ts

@@ -10,7 +10,7 @@ export const useFundUserStore = defineStore('fund', () => {
   const myFunds = ref<TableOutput<Fund> | undefined>(undefined)
   async function getMyFund() {
     try {
-      console.log('fff')
+      // console.log('fff')
       myFunds.value = await getFundTable()
       return myFunds.value
     } catch (e) {

src/views/base/gold/index.vue

@@ -25,9 +25,11 @@
           <div class="w-full items-center flex flex-col">
             <div class="text-gray-700 font-bold">{{ !isBuy ? 'قیمت فروش' : 'قیمت خرید' }}</div>
             <div class="flex gap-1 mt-3 text-xs items-center">
-              <div :class="!isBuy? 'text-red-700' : 'text-green-700'" class="font-bold text-2xl color-transition">
-                {{ usePriceWithoutType(isBuy ? ((props?.ProductItem?.price ?? 0) + (props?.ProductItem?.cash_fee_buy ?? 0)) : ((props?.ProductItem?.price ?? 0) - (props?.ProductItem?.cash_fee_sell ?? 0)) ) }}
-              </div>
+              <Vue3Odometer
+                :value="displayedGoldPrice"
+                :class="[!isBuy ? 'text-red-700' : 'text-green-700', 'o-text !text-2xl font-bold color-transition']"
+                style="font-family: iran-sans; direction: ltr"
+              />
               ریال
             </div>
           </div>
@@ -43,7 +45,7 @@
       </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">
-          <bg_main />
+          <bg_main/>
           <div class="z-100 relative">
             <a-form-item>
               <BasicInput v-model:value="form.goldCash" addon-before="ریال" addon-bg-color="#521620"
@@ -224,9 +226,12 @@ 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, lastPrice } from '@/utils/price'
+import { getLastPrices, lastPrice, setIntervalGetAllPrice, stopPriceInterval } from '@/utils/price'
 import type { Product } from '@/models/products'
 import { useFundUserStore } from '@/store/fundStore'
+import Bg_main from '@/components/bg_main.vue'
+import Vue3Odometer from 'vue3-odometer'
+import 'odometer/themes/odometer-theme-default.css'
 const infoVisible = ref(false)
 const walletStore = useWalletStore()
 const userStore = useUserStore()
@@ -380,6 +385,7 @@ onMounted(async () => {
       isBuy.value = true
       break
   }
+  await initPrice()
 /*  await initSellTable()
   await initBuyTable()*/
 })
@@ -416,6 +422,10 @@ onMounted(() => {
   }
 })
 
+onUnmounted(() => {
+  stopPriceInterval()
+})
+
 function percentChange(val: number) {
   if (val !== 0)
     if (isBuy.value) {
@@ -508,7 +518,6 @@ function useStyle() {
   else return ' right: 98%; transform: translate(100%, 0);'
 }
 
-
 function setIsBuy(val: boolean) {
   isBuy.value = val
   form.value.goldValue = undefined
@@ -528,21 +537,29 @@ const formatter = (value: number) => {
   return `${value}%`
 }
 
-
 const price = computed((): Price => <Price>lastPrice.value ?? 0)
 
+const displayedGoldPrice = ref<number>(0)
+
+watch([() => lastPrice.value, isBuy], () => {
+  if (lastPrice.value) {
+    displayedGoldPrice.value = isBuy.value ? (lastPrice.value.buy ?? 0) : (lastPrice.value.sell ?? 0)
+  }
+}, { immediate: true })
+
 async function initPrice() {
   try {
-    // chartLoading.value = true
     await getLastPrices()
-    // await setIntervalGetPrice()
+    await setIntervalGetAllPrice()
     loading.value = true
     price.value = lastPrice.value
+    if (lastPrice.value) {
+      displayedGoldPrice.value = isBuy.value ? (lastPrice.value.buy ?? 0) : (lastPrice.value.sell ?? 0)
+    }
   } catch (e) {
     console.log(e)
   } finally {
     loading.value = false
-    // chartLoading.value = false
   }
 }
 
@@ -577,8 +594,6 @@ async function ok() {
     infoVisible.value = false
   }
 }
-
-const livePrice = computed(() => lastPrice.value?.price_last ?? 0)
 </script>
 
 <style lang="less">