47 lines
1.5 KiB
Vue
47 lines
1.5 KiB
Vue
 
|
<template>
|
|||
|
|
<div class="dhome-surface dhome-hero-price">
|
|||
|
|
<span class="dhome-label">قیمت لحظهای</span>
|
|||
|
|
<p class="dhome-hero-price__brand">{{ config.config?.name_fa }}</p>
|
|||
|
|
<div class="dhome-hero-price__value-row">
|
|||
|
|
<span
|
|||
|
|
v-if="percentChange !== 0"
|
|||
|
|
class="dhome-hero-price__delta"
|
|||
|
|
:class="percentChange >= 0 ? 'dhome-hero-price__delta--up' : 'dhome-hero-price__delta--down'"
|
|||
|
|
>
|
|||
|
|
{{ useTowDecimal(percentChange) }}%
|
|||
|
|
</span>
|
|||
|
|
<Vue3Odometer
|
|||
|
|
:value="displayGoldVal"
|
|||
|
|
class="dhome-hero-price__odometer o-text"
|
|||
|
|
style="font-family: var(--App-font-family)"
|
|||
|
|
/>
|
|||
|
|
<span class="dhome-hero-price__unit">ریال</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { computed } from 'vue'
|
|||
|
|
import Vue3Odometer from 'vue3-odometer'
|
|||
|
|
import 'odometer/themes/odometer-theme-default.css'
|
|||
|
|
import { useConfigStore } from '@/store/configStore'
|
|||
|
|
import { getTradeBuyPrice, lastPrice, percentPriceChanged } from '@/utils/price'
|
|||
|
|
import { useTowDecimal } from '@/utils/usePrice'
|
|||
|
|
|
|||
|
|
const config = useConfigStore()
|
|||
|
|
|
|||
|
|
const isMarketClosed = computed(
|
|||
|
|
() => lastPrice?.value?.goldir === 0 && getTradeBuyPrice(lastPrice.value) === 0,
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
const displayGoldVal = computed(() => {
|
|||
|
|
if (isMarketClosed.value) return 0
|
|||
|
|
return getTradeBuyPrice(lastPrice.value)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const percentChange = computed(() => {
|
|||
|
|
if (!getTradeBuyPrice(lastPrice.value)) return 0
|
|||
|
|
return percentPriceChanged()
|
|||
|
|
})
|
|||
|
|
</script>
|