fix ذشزنلقخعدی

2026-06-23 16:02:41 +03:30
parent 29c58c4202
commit ac28eda09f
29 changed files with 624 additions and 167 deletions
@@ -2,11 +2,13 @@
 import { computed, inject } from 'vue'
 import { useUserStore } from '@/store/userStore'
 import { usePriceWithoutType } from '@/utils/usePrice'
+import { isBoursecuProject } from '@/utils/config'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import { HOME_PAGE_CONTEXT_KEY } from '../../composables/useHomePage'

 const ctx = inject(HOME_PAGE_CONTEXT_KEY)!
 const userStore = useUserStore()
+const isBoursecu = isBoursecuProject()

 const showLimitedPrice = computed(
  () =>
@@ -28,7 +30,7 @@ const limitedPriceText = computed(() =>
      </span>
    </div>
    <div
-      v-if="ctx.showClosedMessage.value"
+      v-if="!isBoursecu && ctx.showClosedMessage.value"
      class="dhome-alert dhome-alert--info"
      v-html="ctx.closedMessage.value"
    />
@@ -1,26 +1,47 @@
 <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'"
-      >
-        <BasicIcon
-          :icon="percentChange > 0 ? 'vuesax-linear:arrow-up-2' : 'vuesax-linear:arrow-down-2'"
-          size="14"
-        />
-        <span class="dhome-hero-price__delta-value">{{ formatSignedPercentChange(percentChange) }}</span>
+  <div
+    class="dhome-surface dhome-hero-price"
+    :class="{
+      'dhome-hero-price--boursecu-open': isBoursecu && !showStoreClosed,
+      'dhome-hero-price--boursecu-closed': isBoursecu && showStoreClosed,
+    }"
+  >
+    <template v-if="isBoursecu && showStoreClosed">
+      <div class="dhome-hero-price__closed">
+        <div class="dhome-hero-price__closed-icon">
+          <BasicIcon icon="vuesax-linear:lock" size="22" color="#ffffff" />
+        </div>
+        <p class="dhome-hero-price__closed-title">فروشگاه بسته است</p>
+        <p class="dhome-hero-price__closed-hint">{{ storeClosedHint }}</p>
+      </div>
+    </template>
+
+    <template v-else>
+      <span class="dhome-label" :class="{ 'dhome-label--boursecu': isBoursecu }">
+        {{ isBoursecu ? 'قیمت لحظه‌ای کاتد مس' : 'قیمت لحظه‌ای' }}
      </span>
-      <Vue3Odometer
-        :value="displayGoldVal"
-        class="dhome-hero-price__odometer o-text"
-        style="font-family: iran-sans"
-      />
-      <span class="dhome-hero-price__unit">ریال</span>
-    </div>
+      <p v-if="!isBoursecu" 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'"
+        >
+          <BasicIcon
+            :icon="percentChange > 0 ? 'vuesax-linear:arrow-up-2' : 'vuesax-linear:arrow-down-2'"
+            size="14"
+          />
+          <span class="dhome-hero-price__delta-value">{{ formatSignedPercentChange(percentChange) }}</span>
+        </span>
+        <Vue3Odometer
+          :value="displayGoldVal"
+          class="dhome-hero-price__odometer o-text"
+          :class="{ 'dhome-hero-price__odometer--boursecu': isBoursecu }"
+          style="font-family: iran-sans"
+        />
+        <span class="dhome-hero-price__unit" :class="{ 'dhome-hero-price__unit--boursecu': isBoursecu }">ریال</span>
+      </div>
+    </template>
  </div>
 </template>

@@ -30,17 +51,33 @@ import Vue3Odometer from 'vue3-odometer'
 import 'odometer/themes/odometer-theme-default.css'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import { useConfigStore } from '@/store/configStore'
+import { useUserStore } from '@/store/userStore'
+import { isBoursecuProject } from '@/utils/config'
 import { getTradeBuyPrice, lastPrice, percentPriceChanged } from '@/utils/price'
+import { getStoreClosedMessage, isStoreClosed } from '@/utils/storeHours'
 import { formatSignedPercentChange } from '@/utils/usePrice'

 const config = useConfigStore()
+const userStore = useUserStore()
+const isBoursecu = isBoursecuProject()

-const isMarketClosed = computed(
-  () => lastPrice?.value?.goldir === 0 && getTradeBuyPrice(lastPrice.value) === 0,
-)
+const showStoreClosed = computed(() => {
+  if (isBoursecu) {
+    return isStoreClosed()
+  }
+  return lastPrice?.value?.goldir === 0 && getTradeBuyPrice(lastPrice.value) === 0
+})
+
+const storeClosedHint = computed(() => {
+  const custom = userStore.getValueByKey('closed_message')
+  if (typeof custom === 'string' && custom.trim()) {
+    return custom.replace(/<[^>]*>/g, '').trim()
+  }
+  return getStoreClosedMessage()
+})

 const displayGoldVal = computed(() => {
-  if (isMarketClosed.value) return 0
+  if (showStoreClosed.value) return 0
  return getTradeBuyPrice(lastPrice.value)
 })

@@ -49,3 +86,61 @@ const percentChange = computed(() => {
  return percentPriceChanged()
 })
 </script>
+
+<style scoped lang="less">
+.dhome-hero-price--boursecu-open {
+  background: linear-gradient(135deg, #c98a4a 0%, #a86528 100%);
+  border-color: transparent;
+  box-shadow: 0 4px 14px rgba(168, 101, 40, 0.28);
+}
+
+.dhome-hero-price--boursecu-closed {
+  background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
+  border-color: transparent;
+  box-shadow: 0 4px 14px rgba(45, 55, 72, 0.22);
+}
+
+.dhome-label--boursecu {
+  color: rgba(255, 255, 255, 0.92);
+}
+
+.dhome-hero-price__odometer--boursecu {
+  color: #ffffff !important;
+}
+
+.dhome-hero-price__unit--boursecu {
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.dhome-hero-price__closed {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+}
+
+.dhome-hero-price__closed-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.12);
+  margin-bottom: 4px;
+}
+
+.dhome-hero-price__closed-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  color: #ffffff;
+}
+
+.dhome-hero-price__closed-hint {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.7;
+  color: rgba(255, 255, 255, 0.78);
+}
+</style>
@@ -5,7 +5,7 @@ import { usePriceWithoutType } from '@/utils/usePrice'
 import { getHomeLayoutId } from '../../layouts/registry'
 import { resolveMetalDayRangePrices, usePriceChart } from '../../composables/usePriceChart'

-const { selectedChartMetal, maftolChartRatio } = usePriceChart()
+const { selectedChartMetal, selectedMetalChartRatio } = usePriceChart()
 const isBoursecuLayout = computed(() => getHomeLayoutId() === 'boursecu')

 const rangePrices = computed(() =>
@@ -13,7 +13,7 @@ const rangePrices = computed(() =>
    price: price.value,
    metal: selectedChartMetal.value,
    isBoursecuLayout: isBoursecuLayout.value,
-    maftolRatio: maftolChartRatio.value,
+    metalRatio: selectedMetalChartRatio.value,
  })
 )