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

<template>
  <div class="fund-mobile-root">
    <div
      class="fund-mobile-root__header bg-white w-full mobile-top-chrome px-3 pb-3 text-primary font-bold drop-shadow flex min-h-12 z-20"
    >
      <div class="cursor-pointer" @click="goBack()">
        <BasicIcon icon="vuesax-linear:arrow-right-1" />
      </div>
      <div class="mr-2">دارایی ها</div>
    </div>

    <div class="fund-mobile-root__hero text-tertiary bg-primary">
      <img
        :src="fundHeaderBackground"
        alt=""
        class="fund-mobile-root__hero-bg"
      />
      <div class="fund-mobile-root__hero-content flex flex-col">
        <div class="font-bold mr-5 z-20">موجودی دارایی ها</div>

        <div
          v-if="meta?.has_count_based_products"
          class="flex justify-center mt-4 w-full z-20"
        >
          محصولات:
          <div class="text-l mr-4 font-bold">{{ countBasedInventory }} عدد</div>
        </div>

        <template v-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"
          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="fund-mobile-root__scroll">
      <div class="fund-mobile-root__panel bg-gray-100 rounded-t-3xl">
        <div
          v-if="inventoryCards.length === 0 && !loading"
          class="w-full min-h-[40vh] flex justify-center items-center"
        >
          <div>
            <img :src="fundEmptyImage" alt="" class="w-70" />
            <div 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 Item from '../components/Item.vue'
import { useFundPageContext } from '../composables/useFundPage'

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

<style scoped>
.fund-mobile-root {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  height: 100%;
}

.fund-mobile-root__header {
  flex: 0 0 auto;
}

.fund-mobile-root__hero {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  padding-bottom: 2.5rem;
}

.fund-mobile-root__hero-bg {
  pointer-events: none;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  opacity: 0.05;
}

.fund-mobile-root__hero-content {
  position: relative;
  z-index: 10;
  padding: 1rem 0 0;
}

.fund-mobile-root__scroll {
  position: relative;
  z-index: 20;
  flex: 1 1 0;
  min-height: 0;
  margin-top: -2rem;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.fund-mobile-root__panel {
  min-height: 100%;
  padding-bottom: calc(var(--app-bottom-chrome-height, 80px) + 1rem);
  box-shadow: 0 -2px 4px -2px #0000001a;
}
</style>