fixed position of montzar

2026-05-13 14:59:46 +03:30
parent dd660a2ec5
commit 4769f66438
3 changed files with 134 additions and 15 deletions
@@ -77,9 +77,9 @@
    </a>
  </div>
  <div
-    v-if ="!showSplash"
-    class ="bottom-0 flex bg-white z-10000 justify-center text-[9px] fixed left-0 right-0 "
-    style ="box-shadow: 0px 3.75px 16px 0px #00000030"
+    v-if="!showSplash"
+    class="app-credit-footer flex bg-white justify-center text-[9px] fixed left-0 right-0"
+    style="box-shadow: 0px 3.75px 16px 0px #00000030"
  >
    <a
      href="https://montzar.ir"
@@ -164,6 +164,21 @@ function update() {
 </script>

 <style lang="less">
+/* ارتفاع نوار اعتبار + safe-area؛ منوی پایین با bottom: var(--app-credit-footer-offset) بالاتر از این نوار می‌نشیند */
+:root {
+  --app-credit-bar-inner: 28px;
+  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
+  --app-credit-footer-offset: calc(var(--app-credit-bar-inner) + var(--app-safe-bottom));
+}
+
+.app-credit-footer {
+  bottom: 0;
+  z-index: 1000;
+  min-height: var(--app-credit-bar-inner);
+  padding-bottom: var(--app-safe-bottom);
+  box-sizing: content-box;
+}
+
 .updateButton .van-dialog__confirm .van-button__text {
  color: @App-primary-color !important;
  font-weight: 600;
@@ -172,7 +187,7 @@ function update() {

 #support-button {
  position: fixed;
-  bottom: 90px;
+  bottom: calc(80px + var(--app-credit-footer-offset, 28px) + 12px);
  right: 20px;
  width: 70px;
  height: 70px;
@@ -75,19 +75,17 @@
        </div>
      </div>
    </Transition>
-    <div class=" !h-[calc(100vh-72px)] ">
+    <div class="main-with-bottom-chrome">
      <router-view v-slot="{ Component, route }">
        <!-- Use any custom transition and  to `fade` -->
        <transition :name="route.meta.transition || 'fade'">
-          <component :is="Component" class="!h-[calc(100vh-72px)]"/>
+          <component :is="Component" class="main-with-bottom-chrome-inner"/>
        </transition>
      </router-view>
    </div>
    <!--      <canvas ref="canvas" id="canvas1" width="400" height="80" class="w-full"></canvas>-->
    <div class="bottom-appbar w-auto mx-auto">
-      <div class="tabs"
-           :class="userStore.getValueByKey('display_montzar') === 'true' ? 'bottom-1rem' : 'bottom-0' "
-      >
+      <div class="tabs bottom-0">
        <div :class="setNavColor('home')" class="tab" @click="setRoute('home')">
          <Icon icon="vuesax-linear:home"/>
          <div class="text-xs mt-1 font-bold">صفحه اصلی</div>
@@ -153,7 +151,6 @@ import BasicButton from '@/components/BasicPacks/BasicButton.vue'
 import type {Transaction} from '@/models/transaction'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import {useConfigStore} from "@/store/configStore";
-import {useUserStore} from "@/store/userStore";
 import {getConfigApp} from "@/utils/config";

 /*onMounted(async () => {
@@ -167,7 +164,6 @@ import {getConfigApp} from "@/utils/config";
  ctx.lineTo(400,20)
  ctx.stroke();
 })*/
-const userStore = useUserStore()
 const currentRoute = computed(() => router.currentRoute.value.name)
 const config = useConfigStore()
 const popVisible = ref(false)
@@ -196,7 +192,8 @@ function setRoute(val: string) {
  position: fixed;
  display: flex;
  justify-content: space-evenly;
-  bottom: 0;
+  /* دقیقاً بالای نوار اعتبار App.vue (متغیر --app-credit-footer-offset) */
+  bottom: var(--app-credit-footer-offset, 28px);
  right: 0;
  left: 0;
  @media screen and (min-width: 426px) {
@@ -413,4 +410,12 @@ function setRoute(val: string) {
  transform: translateX(20px);
  opacity: 0;
 }
+
+.main-with-bottom-chrome {
+  height: calc(100vh - 72px - var(--app-credit-footer-offset, 28px));
+}
+
+.main-with-bottom-chrome-inner {
+  height: calc(100vh - 72px - var(--app-credit-footer-offset, 28px));
+}
 </style>
@@ -16,7 +16,9 @@
 <!--    <div v-if="props.ProductItem.group_type!='آبشده'" class=" font-500">{{ amountProduct}}</div>-->
 <!--    <div v-if="props.ProductItem.group_type!='آبشده'" class="text-secondary font-500">{{ props.ProductItem.amount }}گرم</div>-->
 <!--    <div v-else class="text-secondary font-500">حداقل خرید یک گرم</div>-->
-    <div>{{usePrice((props.ProductItem.price ?? 0) + (props.ProductItem.cash_fee_buy ?? 0))}}</div>
+<!--    <div>{{usePrice((props.ProductItem.price ?? 0) + (props.ProductItem.cash_fee_buy ?? 0))}}</div>-->
+    <div v-if="props.ProductItem.group_type=='آبشده'">{{usePrice(goldPriceValue)}}</div>
+    <div v-else>{{usePrice(price)}}</div>
 <!--    <div v-if="props.ProductItem.group_type!='آبشده'" class="text-xs text-gray-400">شامل 33 هزار تومان اجرت</div>-->
 <!--    <div v-else class="text-xs text-gray-400">محاسبه بر اساس قیمت روز</div>-->
  </div>
@@ -33,8 +35,10 @@ import noghrehImg from "@/assets/img/noghrehImg.webp"
 import parsianImg from "@/assets/img/parsianImg.svg"

 import type {Product} from "@/models/products";
-import {usePrice} from "../../../../utils/usePrice";
+import {usePrice} from '@/utils/usePrice';
 import {computed, ref} from "vue";
+import { lastPrice } from '@/utils/price'
+import type { Price } from '@/models/home'

 interface Prop {
  ProductItem: Product
@@ -58,8 +62,103 @@ const props = withDefaults(defineProps<Prop>(), {})
 //     return 'آب شده'
 // }

+const price = computed(()=>{
+  if(props.ProductItem.direct_price === 0){
+    return ((props.ProductItem.price ?? 0) + (props.ProductItem.cash_fee_buy ?? 0)) * props.ProductItem.amount
+  }
+  else {
+    return ((props.ProductItem.price ?? 0) + (props.ProductItem.cash_fee_buy ?? 0))
+  }
+})
+
+const priceLast = computed((): Price => <Price>lastPrice.value ?? 0)
+
+const goldPriceValue = computed(() => {
+  if (!priceLast.value) return 0
+  return priceLast.value.buy
+})
+
 </script>

 <style scoped>

-</style>
+</style>
+
+
+
+<!--<template>
+  <div class="flex bg-white border-1 border-gray-200 rounded-lg"
+       :class="props.ProductItem.show ? 'bg-white opacity-100' : 'bg-gray-200 opacity-50'">
+    <div class="bg-gray-100 m-2 rounded-lg w-28 h-28 flex justify-center p-2">
+      <img v-if="props.ProductItem.group_type=='گوی' && props.ProductItem.metal_id !== 2"  :src="goyImg">
+      <img v-if="props.ProductItem.group_type=='گوی' && props.ProductItem.metal_id == 2"  :src="noghrehImg">
+      <img v-if="props.ProductItem.group_type=='مکعب'" :src="mokaabImg">
+      <img v-if="props.ProductItem.group_type=='سکه'" :src="sekkeImg">
+      <img v-if="props.ProductItem.group_type=='سکه پارسیان'" :src="parsianImg">
+      <img v-if="props.ProductItem.group_type=='آبشده'|| props.ProductItem.group_type== null" :src="defaultImg">
+    </div>
+    <div class="m-1 flex flex-col gap-1 justify-center">
+      <div class="text-base font-500">{{ props.ProductItem.title }}</div>
+      <br>
+      <div v-if="props.ProductItem.group_type=='آبشده'">{{usePrice(goldPriceValue)}}</div>
+      <div v-else>{{usePrice(price)}}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import defaultImg from "@/assets/img/defaultAbshodeh.svg"
+import goyImg from "@/assets/img/goyImg.svg"
+import noghrehImg from "@/assets/img/noghrehImg.svg"
+import mokaabImg from "@/assets/img/mokaabImg.svg"
+import sekkeImg from "@/assets/img/sekkeImg.svg"
+import parsianImg from "@/assets/img/parsianImg.svg"
+import {
+  getLastPrices,
+  lastPrice, setIntervalGetLastPrice,
+  stopPriceInterval
+} from '@/utils/price'
+import type {Product} from "@/models/products";
+import {usePrice} from "../../../../utils/usePrice";
+import {computed, ref} from "vue";
+import type {Price} from "@/models/home";
+
+interface Prop {
+  ProductItem: Product
+}
+const amountProduct=computed(()=>{
+  if (0<props.ProductItem.amount && props.ProductItem.amount<1){
+    return `${props.ProductItem.amount*1000}سوت`
+  }else return `${props.ProductItem.amount}گرم`
+})
+
+const price = computed(()=>{
+  if(props.ProductItem.direct_price === 0){
+    return ((props.ProductItem.price ?? 0) + (props.ProductItem.cash_fee_buy ?? 0)) * props.ProductItem.amount
+  }
+  else {
+    return ((props.ProductItem.price ?? 0) + (props.ProductItem.cash_fee_buy ?? 0))
+  }
+})
+const priceLast = computed((): Price => <Price>lastPrice.value ?? 0)
+
+const goldPriceValue = computed(() => {
+  if (!priceLast.value) return 0
+  return priceLast.value.buy
+})
+
+const props = withDefaults(defineProps<Prop>(), {})
+// const typeOfProduct=(val:string)=>{
+//   if (val.includes('گوی'))
+//     return 'گوی'
+//   if (val.includes('شمش'))
+//     return 'شمش'
+//   if (val.includes('مکعب'))
+//     return 'مکعب'
+//   if (val.includes('24 عیار'))
+//     return '24 عیار'
+//
+//     return 'آب شده'
+// }
+
+</script>-->