fix bugs of UI

src/App.vue

@@ -79,7 +79,6 @@
   <div
     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"
@@ -177,6 +176,8 @@ function update() {
   min-height: var(--app-credit-bar-inner);
   padding-bottom: var(--app-safe-bottom);
   box-sizing: content-box;
+  background: #fff;
+  box-shadow: 0 -2px 4px -2px #0000001a;
 }
 
 .updateButton .van-dialog__confirm .van-button__text {

src/utils/productPrice.ts

@@ -0,0 +1,23 @@
+import type { Product } from '@/models/products'
+import { lastPrice } from '@/utils/price'
+
+/** قیمت خرید نمایشی محصول (همان مقداری که در لیست و اکشن‌شیت نشان داده می‌شود) */
+export function getProductBuyPrice(product: Product): number {
+  if (product.group_type === 'آبشده') {
+    return lastPrice.value?.buy ?? 0
+  }
+
+  if (['مس', 'نقره'].includes(product.group_type)) {
+    const base = (product.price_profit ?? 0) + (product.price ?? 0)
+    return base + (product.cash_fee_buy ?? 0)
+  }
+
+  const basePrice = (product.price ?? 0) + (product.cash_fee_buy ?? 0)
+  return product.direct_price === 0
+    ? basePrice * (product.amount ?? 0)
+    : basePrice
+}
+
+export function isProductPriceInactive(product: Product): boolean {
+  return getProductBuyPrice(product) <= 0
+}

src/views/base/index.vue

@@ -84,7 +84,7 @@
       </router-view>
     </div>
     <!--      <canvas ref="canvas" id="canvas1" width="400" height="80" class="w-full"></canvas>-->
-    <div v-if="!hideMenu" class="bottom-appbar w-auto mx-auto">
+    <div v-if="!hideMenu" class="bottom-appbar w-auto mx-auto bg-white">
       <div class="tabs bottom-0">
         <div :class="setNavColor('home')" class="tab" @click="setRoute('home')">
           <Icon icon="vuesax-linear:home"/>
@@ -193,6 +193,7 @@ function setRoute(val: string) {
   position: fixed;
   display: flex;
   justify-content: space-evenly;
+  background: #fff;
   /* دقیقاً بالای نوار اعتبار App.vue (متغیر --app-credit-footer-offset) */
   bottom: var(--app-credit-footer-offset, 28px);
   right: 0;
@@ -204,11 +205,12 @@ function setRoute(val: string) {
 
   .tabs {
     display: flex;
-    height: 90%;
+    height: 100%;
     width: 100%;
-    background: white;
+    background: #fff;
     justify-content: space-between;
     position: absolute;
+    bottom: 0;
     z-index: 400;
     //border: 1px dashed primary;
     box-shadow: 0px -2px 4px -2px #0000001A;

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() {