boursecu_user/src/views/base/home/components/CurrentPrice.vue

<template>
  <div class="w-full relative mt-2 border-gray-200 border-1 rounded-lg py-3 flex flex-col justify-center home_appear_fade_in">
    <div class="text-gray-600 text-[12px] ml-2 w-full text-center">قیمت خرید از {{ config.config.name_fa }}</div>
    <div class="w-full items-center flex justify-center">
      <div v-if="price" class="flex gap-1 text-xs items-center">
        <div
            v-if="percentPriceChanged() !== 0"
            class="flex flex-row-reverse rounded-lg justify-between items-center gap-2 px-3"
            :class="percentPriceChanged() >= 0 ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'"
        >
          <div dir="ltr">{{ useTowDecimal(percentPriceChanged()) }}%</div>
          <div>
            <Icon
                :size="15"
                :icon="percentPriceChanged() < 0 ? 'vuesax-linear:received' : 'vuesax-linear:send'"
                :color="percentPriceChanged() < 0 ? 'red-600' : 'green-600'"
            />
          </div>
        </div>
        <Vue3Odometer
            :value="displayGoldVal"
            class="o-text !text-xl font-bold"
            style="font-family: iran-sans; direction: ltr"
        />
        ریال
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Icon from '@/components/BasicPacks/BasicIcon.vue'
import { useConfigStore } from '@/store/configStore'
import { getTradeBuyPrice, lastPrice, percentPriceChanged, price } from '@/utils/price'
import Vue3Odometer from 'vue3-odometer'
import 'odometer/themes/odometer-theme-default.css'
import {useTowDecimal} from "../../../../utils/usePrice";
import {computed} from "vue";


const config = useConfigStore()

// محاسبه درصد تغییرات به صورت reactive
const percentChange = computed(() => {
  if (!getTradeBuyPrice(lastPrice.value)) return 0
  return percentPriceChanged()
})

// بررسی بسته بودن بازار
const isMarketClosed = computed(() => {
  return lastPrice?.value?.goldir === 0 && getTradeBuyPrice(lastPrice.value) === 0
})

// مقدار نمایشی برای ادومتر (با مدیریت خطا)
const displayGoldVal = computed(() => {
  if (isMarketClosed.value) return 0
  return getTradeBuyPrice(lastPrice.value)
})

// انیمیشن fade-in
</script>