boursecu_user/src/views/base/fund/mobile/MobileFundView.vue

<template>
  <div>
    <div
      class="bg-white w-full py-3 px-3 text-primary font-bold drop-shadow fixed md:absolute top-0 flex h-12 z-20"
    >
      <div @click="goBack()">
        <BasicIcon icon="vuesax-linear:arrow-right-1" />
      </div>
      <div class="mr-2">دارایی ها</div>
    </div>
    <div
      class="w-screen md:w-full h-[70vh] fixed md:absolute overflow-hidden"
      :class="isBazretalaProject() ? 'bazretala-fund-header' : 'text-tertiary bg-primary'"
    >
      <img
        :src="fundHeaderBackground"
        alt=""
        :class="
          isBazretalaProject()
            ? 'pointer-events-none z-0 absolute inset-0 w-full object-cover object-center'
            : 'pointer-events-none z-0 w-full absolute bottom-0 left-0 opacity-5'
        "
      />
      <div
        class="pt-15 flex flex-col relative z-10"
        :class="isBazretalaProject() ? 'text-white' : 'text-tertiary'"
      >
        <div class="font-bold mr-5 z-20">موجودی دارایی ها</div>
        <div
          v-if="meta?.has_count_based_products"
          class="flex mt-4 justify-center mt-2 w-full z-20"
        >
          محصولات:
          <div class="text-l mr-4 font-bold">{{ countBasedInventory }} عدد</div>
        </div>
        <template v-if="isBazretalaProject()">
          <div class="flex justify-center mt-2 w-full z-20">
            دارایی نقره:
            <div class="text-l mr-4 font-bold">
              {{ walletStore.walletInfo?.count_silver ?? 0 }}گرم
            </div>
          </div>
          <div class="flex justify-center mt-2 w-full z-20">
            دارایی طلایی:
            <div class="text-l mr-4 font-bold">
              {{ walletStore.walletInfo?.count_gold_wallet ?? 0 }}گرم
            </div>
          </div>
        </template>
        <template v-else-if="meta?.single_metal && primaryMetalTotal">
          <div class="flex justify-center mt-2 w-full z-20">
            {{ primaryMetalTotal.label }}:
            <div class="text-l mr-4 font-bold">{{ formatMetalTotal(primaryMetalTotal) }}</div>
          </div>
        </template>
        <template v-else>
          <div
            v-for="metal in metalTotals"
            :key="`metal-${metal.metal_id}`"
            class="flex justify-center mt-2 w-full z-20"
          >
            {{ metal.label }}:
            <div class="text-l mr-4 font-bold">{{ formatMetalTotal(metal) }}</div>
          </div>
        </template>
        <div
          v-if="meta?.has_count_based_products && !isBazretalaProject()"
          class="flex justify-center mt-2 w-full z-20"
        >
          مجموع موجودی:
          <div class="text-l mr-4 font-bold">{{ countBasedInventory }} عدد</div>
        </div>
        <div class="flex justify-center mt-2 w-full z-20">
          دارایی ریالی:
          <div class="text-l mr-4 font-bold">{{ usePriceWithoutType(cashWallet) }}ریال</div>
        </div>
        <div class="flex justify-center mt-2 w-full z-20">
          معادل ریالی مجموع دارایی ها:
          <div class="text-l mr-4 font-bold">{{ usePriceWithoutType(totalRialValue) }}ریال</div>
        </div>
      </div>
    </div>
    <div class="pt-[20rem]">
      <div
        class="bg-gray-100 w-screen md:w-full z-20 relative rounded-t-3xl h-[calc(100vh-20rem-70px)] overflow-y-auto pb-15"
        style="box-shadow: 0px -2px 4px -2px #0000001a"
      >
        <div
          v-if="inventoryCards.length === 0 && !loading"
          class="w-full h-full flex justify-center items-center"
        >
          <div>
            <img
              :src="fundEmptyImage"
              alt=""
              :class="isBazretalaProject() ? 'w-48 max-w-[11rem]' : 'w-70'"
            />
            <div v-if="nameProject !== 'abaeigold'" class="text-center text-lg">
              {{ fundEmptyText }}
            </div>
          </div>
        </div>

        <a-spin :spinning="loading">
          <div :class="loading ? 'h-[40vh]' : ''" class="grid grid-cols-2 gap-3 p-5">
            <Item
              v-for="item in inventoryCards"
              :key="item.product_id"
              :item="item"
              @click="openFundInfo(item.product_id)"
            />
          </div>
        </a-spin>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
import { loading } from '@/utils'
import { usePriceWithoutType } from '@/utils/usePrice'
import { useWalletStore } from '@/store/walletStore'
import Item from '../components/Item.vue'
import { useFundPageContext } from '../composables/useFundPage'

const walletStore = useWalletStore()

const {
  nameProject,
  meta,
  inventoryCards,
  metalTotals,
  primaryMetalTotal,
  cashWallet,
  totalRialValue,
  countBasedInventory,
  fundHeaderBackground,
  fundEmptyImage,
  fundEmptyText,
  isBazretalaProject,
  formatMetalTotal,
  openFundInfo,
  goBack,
} = useFundPageContext()
</script>

<style scoped>
.bazretala-fund-header {
  background-color: #000;
}

.bazretala-fund-header::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
</style>