boursecu_user/src/views/base/fund/index.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="router.back()">
        <BasicIcon icon="vuesax-linear:arrow-right-1"/>
      </div>
      <div class="mr-2">دارایی ها</div>
    </div>
    <div class="text-tertiary bg-primary w-screen md:w-full h-[70vh] fixed md:absolute overflow-hidden">
      <img :src="img" alt="" class="w-full absolute bottom-0 left-0 opacity-5 pointer-events-none z-0" />
      <div class="pt-15 flex flex-col relative z-10">
        <div class="text-tertiary  font-bold mr-5 z-20">موجودی دارایی ها</div>
          <div class="flex mt-4 justify-center mt-2 w-full z-20">
            محصولات:
            <div class="text-l mr-4 font-bold">{{ walletStore.walletInfo?.count_product ?? 0}}عدد</div>
          </div>
          <div v-if="nameProject === 'goldsun'" 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 v-if="nameProject === 'goldsun'" class="flex  justify-center mt-2 w-full z-20">
            دارایی مس:
            <div class="text-l mr-4 font-bold">{{ walletStore.walletInfo?.count_copper ?? 0}}گرم</div>
          </div>
          <div v-if="isBoursecuProject()" class="flex justify-center mt-2 w-full z-20">
            مجموع موجودی:
            <div class="text-l mr-4 font-bold">{{ inventory }} عدد</div>
          </div>
          <div v-if="!isBoursecuProject()" class="flex justify-center mt-2 w-full z-20">
            {{ metalAssetLabel }}:
            <div class="text-l mr-4 font-bold">{{ walletStore.walletInfo?.count_gold ?? 0 }}{{ getWeightUnit() }}</div>
          </div>
          <div class="flex  justify-center mt-2 w-full z-20">
            دارایی ریالی:
            <div class="text-l mr-4 font-bold">{{ usePriceWithoutType(walletStore.walletInfo?.count_cash ?? 0) }}ریال</div>
          </div>
          <div class="flex  justify-center mt-2 w-full z-20">
            معادل ریالی مجموع دارایی ها:
            <div class="text-l mr-4 font-bold">{{ usePriceWithoutType(walletStore.walletInfo?.count_cash_total ?? 0) }}ریال</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="items.length === 0 && !loading" class="w-full h-full flex justify-center items-center">
          <div>
            <img :src="empty" alt="" class="w-70 ">
            <div v-if="nameProject !== 'abaeigold' " class="text-center text-lg">یک گنج جدید بساز!</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 items.filter(x => x.title !== 'آبشده نقدی')" :item="item"
                  @click="router.push({name: 'fund_info', params:{id:item.id}})"
            />
          </div>
        </a-spin>
      </div>
    </div>
<!--    <div class="fixed w-full flex justify-center bottom-23 z-200 md:right-0">
      <div class="rounded-3xl bg-[#0A1B37] text-white px-5 py-2" @click="router.push({name: 'fund_add'})">افزودن گنج
      </div>
    </div>-->
  </div>
</template>

<script lang="ts" setup>

import router from "@/router";
import BasicIcon from "@/components/BasicPacks/BasicIcon.vue";
import BasicModal from "@/components/BasicPacks/BasicModal.vue";
import img from '@/assets/img/user_ly1.svg'
import empty from '@/assets/img/cash_empty.svg'
import Item from './components/Item.vue'
import { onMounted, ref, computed } from "vue";
import {loading} from "@/utils";
import type {TableOutput} from "@/models/table";
import type {Fund} from "@/models/fund";
import {useFundUserStore} from "@/store/fundStore";
import { getMe } from '@/api/me'
import type { User } from '@/models/login'
import {usePriceWithoutType} from "../../../utils/usePrice";
import {useWalletStore} from "@/store/walletStore";
import {useConfigStore} from "@/store/configStore";
import { isBoursecuProject } from '@/utils/config'
import { formatBoursecuAssetAmount, getMetalAssetLabel, getWeightUnit } from '@/utils/productDealMethod'
const nameProject = useConfigStore().config.name
const metalAssetLabel = computed(() => getMetalAssetLabel())

const items = ref<Fund[]>([])
const tableOutput = ref<TableOutput<Fund> | null>(null)
const fundStore = useFundUserStore()
const walletStore = useWalletStore()
const userInfo = ref<User>()
const weight = ref<number>(0)
const total = ref<number>(0)

const inventory = computed(() =>
  items.value
    .filter(x => x.title !== 'آبشده نقدی')
    .reduce((sum, x) => sum + (x?.wallet?.gold ?? 0), 0)
)

onMounted(() => {
  initTable()
})

async function initTable() {
  try {
    userInfo.value = await getMe()
    loading.value = true
    tableOutput.value = fundStore.myFunds ?? await fundStore.getMyFund() ?? null
    console.log(tableOutput.value)
    items.value.push(...tableOutput.value?.rows ?? [])
    items.value.forEach(x => {
      total.value += ((x?.wallet?.gold) ?? 0) * ((x?.price) ?? 0)
      if (x.title !== 'آبشده نقدی' && x.title !== 'سکه')
        weight.value += ((x?.wallet?.gold) ?? 0) * ((x?.amount) ?? 0)
    })
  } catch (e) {
    console.log(e)
  } finally {
    loading.value = false
  }
}

/*watch(()=> router.currentRoute.value.name, () =>{
  console.log('salammmmmmmmmmmmmmmmmmmmmmmmmmm')
})*/
/*
const items = [
  {
    type: 'home',
    amount: 2.7
  },
  {
    type: 'gift',
    amount: 13.1
  },
  {
    type: 'saving',
    amount: 6.4
  },
  {
    type: 'repairs',
    amount: 16.6
  },
  {
    type: 'circulation',
    amount: 5.4
  },
  {
    type: 'love',
    amount: 3.7
  },
]
*/

</script>

<style scoped>

</style>