fixed position of montzar

src/views/base/products/components/ProductItem.vue

@@ -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>-->