1405/02/24-Optimization home index.vue

2026-05-14 13:44:43 +03:30
parent e3b4182f6c
commit 1b13aa2a7d
19 changed files with 2143 additions and 1082 deletions
@@ -0,0 +1,61 @@
+<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="w-full items-center flex justify-center">
+      <div class="text-gray-600 text-[12px] ml-2">قیمت خرید از {{ config.config.name_fa }}</div>
+      <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 {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 (! lastPrice?.value?.price_last) return 0
+  return percentPriceChanged()
+})
+
+// بررسی بسته بودن بازار
+const isMarketClosed = computed(() => {
+  return lastPrice?.value?.goldir === 0 && lastPrice?.value?.price_last === 0
+})
+
+// مقدار نمایشی برای ادومتر (با مدیریت خطا)
+const displayGoldVal = computed(() => {
+  if (isMarketClosed.value) return 0
+  return  lastPrice?.value?.price_last|| 0
+})
+
+// انیمیشن fade-in
+</script>