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="percentChange !== 0"
          class="price-change-badge"
          :class="percentChange > 0 ? 'price-change-badge--up' : 'price-change-badge--down'"
        >
          <Icon
            :key="displayGoldVal"
            :size="15"
            :icon="percentChange > 0 ? 'vuesax-linear:send' : 'vuesax-linear:received'"
            :color="percentChange > 0 ? 'green-600' : 'red-600'"
          />
          <span class="price-change-badge__value">{{ formatSignedPercentChange(percentChange) }}</span>
        </div>
        <Vue3Odometer
          :value="displayGoldVal"
          class="o-text !text-xl font-bold"
          style="direction: ltr"
        />
        ریال
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
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 { formatSignedPercentChange } from '@/utils/usePrice'

const config = useConfigStore()

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)
})
</script>

<style scoped>
.price-change-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.65rem;
  border-radius: 0.5rem;
  font-weight: 600;
}

.price-change-badge--up {
  background: #dcfce7;
  color: #16a34a;
}

.price-change-badge--down {
  background: #fee2e2;
  color: #dc2626;
}

.price-change-badge__value {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
</style>