fix bugs of UI

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

@@ -1,6 +1,6 @@
 <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'">
+     :class="isClickable ? '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 :src="displayImage" class="object-contain w-full h-full" alt="">
   </div>
@@ -37,13 +37,20 @@ import type { Price } from '@/models/home'
 
 interface Prop {
   ProductItem: Product
+  inactive?: boolean
 }
+
+const props = withDefaults(defineProps<Prop>(), {
+  inactive: false,
+})
+
+const isClickable = computed(() => props.ProductItem.show && !props.inactive)
+
 const amountProduct=computed(()=>{
   if (0<props.ProductItem.amount && props.ProductItem.amount<1){
     return `${props.ProductItem.amount*1000}سوت`
   }else return `${props.ProductItem.amount}گرم`
 })
-const props = withDefaults(defineProps<Prop>(), {})
 
 const defaultImages: Record<string, string> = {
   'گوی': goyImg,

src/views/base/products/index.vue

@@ -14,8 +14,12 @@
       </div>
 
       <div class="mx-5 pb-30 pt-2" style="color: #1b2b07">
-        <div class="mt-3" v-for="item in items">
-          <ProductItem :ProductItem="item" @click="clickProduct(item)"></ProductItem>
+        <div class="mt-3" v-for="item in items" :key="item.id">
+          <ProductItem
+              :ProductItem="item"
+              :inactive="isProductPriceInactive(item)"
+              @click="clickProduct(item)"
+          />
         </div>
       </div>
     </div>
@@ -39,6 +43,25 @@
     </div>
   </BasicActionSheet>
 
+  <BasicModal
+      v-model:visible="isProductInactive"
+      custom-footer
+      :closable="false"
+  >
+    <div class="text-center">
+      <div class="font-bold text-red-600">محصول فعال نیست</div>
+      <div class="mt-2 leading-relaxed text-gray-600">
+        در حال حاضر امکان معامله این محصول وجود ندارد.
+      </div>
+    </div>
+
+    <template #footer>
+      <a-button type="primary" class="w-full" @click="isProductInactive = false">
+        متوجه شدم
+      </a-button>
+    </template>
+  </BasicModal>
+
   <BasicModal
       v-model:visible="isAfterCloseTime"
       custom-footer
@@ -81,12 +104,15 @@ import DealProduct from '@/views/base/products/components/DealProduct.vue'
 import { cloneDeep } from 'lodash'
 import img from "@/assets/img/user_ly1.svg";
 import BasicModal from "@/components/BasicPacks/BasicModal.vue";
+import { isProductPriceInactive } from '@/utils/productPrice'
+
 const activekey = ref('طلا' ||'آبشده')
-const showFilter = ref()
+const showFilter = ref(false)
 const selectedProduct = ref<Product>()
 const closeTime = ref<string>('')
 const openTime = ref<string>('')
 const isAfterCloseTime = ref<boolean>(false)
+const isProductInactive = ref<boolean>(false)
 
 watch([openTime, closeTime], ([open, close]) => {
   if (!open || !close) return
@@ -99,11 +125,17 @@ watch([openTime, closeTime], ([open, close]) => {
   isAfterCloseTime.value = currentSeconds < openSeconds || currentSeconds > closeSeconds
 })
 
-function clickProduct(item: Product) {
- if(item?.show){
-   showFilter.value = true
-   selectedProduct.value = cloneDeep(item)
- }
+function clickProduct(item?: Product) {
+  if (!item?.show) return
+
+  if (isProductPriceInactive(item)) {
+    showFilter.value = false
+    isProductInactive.value = true
+    return
+  }
+
+  selectedProduct.value = cloneDeep(item)
+  showFilter.value = true
 }
 
 function changeTab() {