1404/10/28-base

src/views/base/fund/components/Item.vue

@@ -0,0 +1,78 @@
+<template>
+  <div v-if="item" class="bg-white flex flex-col items-center p-3 rounded-xl">
+<!--    <img v-lazy="{ src: itemImg, loading: logo,error: logo}" alt="" class="w-[87px] ">-->
+    <img v-if="props.item.group_type=='گوی'"  :src="goyImg">
+    <img v-if="props.item.group_type=='مکعب'" :src="mokaabImg">
+    <img v-if="props.item.group_type=='سکه'" :src="sekkeImg">
+<!--    <img :src="props.item.img" alt="image">-->
+    <img v-if="props.item.group_type=='آبشده'|| props.item.group_type== null" :src="defaultImg">
+    <div class="mt-3">{{props.item?.title?? '-'}}</div>
+    <div class="mt-1 flex gap-1"> <div class="font-bold"> {{props.item?.wallet?.gold?? '-'}} </div> {{props.item?.unit}} </div>
+<!--    {{props.item?.wallet[0]?.cash}}-->
+  </div>
+</template>
+
+<script setup lang="ts">
+import homeImg from '@/assets/img/cash_home.svg'
+import giftImg from '@/assets/img/cash_gift.svg'
+import circulationImg from '@/assets/img/cash_circulation.svg'
+import loveImg from '@/assets/img/cash_love.svg'
+import repairsImg from '@/assets/img/cash_repairs.svg'
+import savingImg from '@/assets/img/cash_saving.svg'
+import {computed} from "vue"
+import type {Fund} from "@/models/fund"
+import defaultImg from "@/assets/img/defaultAbshodeh.svg"
+import goyImg from "@/assets/img/goyImg.svg"
+import mokaabImg from "@/assets/img/mokaabImg.svg"
+import sekkeImg from "@/assets/img/sekkeImg.svg"
+import type { Product } from '@/models/products'
+/*function itemImg() {
+
+}*/
+interface Prop {
+  item: Product
+}
+
+const props = defineProps<Prop>()
+
+const itemImg = computed(() => {
+  switch (props.item?.title) {
+    case 'خرید لوازم منزل':
+      return homeImg
+    case 'هدیه':
+      return giftImg
+    case 'گردش':
+      return circulationImg
+    case 'ازدواج':
+      return loveImg
+    case 'تعمیرات':
+      return repairsImg
+    case 'پس انداز':
+      return savingImg
+    default: return savingImg
+  }
+})
+
+/*const itemName = computed(() => {
+  switch (props.type) {
+    case 'home':
+      return 'خرید لوازم منزل'
+    case 'gift':
+      return 'هدیه'
+    case 'circulation':
+      return 'گردش'
+    case 'love':
+      return 'ازدواج'
+    case 'repairs':
+      return 'تعمیرات'
+    case 'saving':
+      return 'پس انداز'
+    default: return null
+  }
+})*/
+
+</script>
+
+<style scoped>
+
+</style>

src/views/base/fund/index.vue

@@ -0,0 +1,157 @@
+<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="bg-[#EFCED9] w-screen md:w-full h-[70vh] fixed md:absolute">
+      <div class="pt-15 flex flex-col">
+        <div class="text-gray-500 font-bold mr-5 z-20">موجودی دارایی ها</div>
+          <div class="flex  justify-center mt-2 w-full z-20">
+            محصولات:
+            <div class="text-l mr-4 font-bold">{{ walletStore.walletInfo?.count_product ?? 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 ?? 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 ?? 0) }}ریال</div>
+          </div>
+<!--        <div class="flex items-baseline justify-center mt-2 w-full z-20">
+          <div class="text-3xl font-bold">{{ inventory }}</div>
+          /عدد
+        </div>
+        <div  class="flex items-baseline justify-center mt-2 w-full z-20">
+          <div class="text-3xl font-bold">{{ (weight + ((userInfo?.gold) ?? 0)).toFixed(3)}}</div>
+          /گرم
+        </div>-->
+        <img :src="img" alt="" class="mt-[-4rem] mr-10 max-w-[22rem] self-end">
+      </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 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/cash_img.svg'
+import empty from '@/assets/img/cash_empty.svg'
+import Item from './components/Item.vue'
+import {onMounted, ref} from "vue";
+import {loading} from "@/utils";
+import type {TableOutput} from "@/models/table";
+import type {Fund} from "@/models/fund";
+import {useFundUserStore} from "@/store/fundStore";
+import goyImg from '@/assets/img/goyImg.svg'
+import mokaabImg from '@/assets/img/mokaabImg.svg'
+import defaultImg from '@/assets/img/defaultAbshodeh.svg'
+import { getMe } from '@/api/me'
+import type { User } from '@/models/login'
+import {usePriceWithoutType} from "../../../utils/usePrice";
+import {useWalletStore} from "@/store/walletStore";
+const openModal = ref<boolean>(false)
+
+
+const items = ref<Fund[]>([])
+const tableOutput = ref<TableOutput<Fund> | null>(null)
+const inventory = ref<number>(0)
+const fundStore = useFundUserStore()
+const walletStore = useWalletStore()
+const userInfo = ref<User>()
+const weight = ref<number>(0)
+const total = ref<number>(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 => {
+      console.log(x.wallet)
+      if (x.title !== 'آبشده نقدی')
+      inventory.value += x?.wallet?.gold ?? 0
+      total.value += ((x?.wallet?.gold) ?? 0) * ((x?.price) ?? 0)
+      if (x.title !== 'آبشده نقدی' && x.title !== 'سکه')
+      weight.value += ((x?.wallet?.gold) ?? 0) * ((x?.amount) ?? 0)
+      // console.log(inventory.value)
+    })
+    // console.log(tableOutput.value)
+  } 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>

src/views/base/fund/info/components/Item.vue

@@ -0,0 +1,122 @@
+<template>
+
+  <div @click="infoVisible = true">
+    <div class="flex">
+      <div :class="isUp? 'bg-green-50':'bg-red-50'"
+           class="rounded-lg p-3 h-fit w-fit flex justify-center items-center ">
+        <Icon :class="isUp? 'text-green-600':'text-red-600'"
+              :icon="`vuesax-linear:${isUp? 'arrow-up-2':'arrow-down-2'}`"/>
+      </div>
+      <div class="w-full mr-3">
+        <div class="flex justify-between w-full">
+          <div>{{ item.title }}</div>
+          <div>{{ toJalaliNotime(item.expire_at) }}</div>
+        </div>
+        <div class="flex justify-between mt-2">
+          <div :class="item.gold >= 0? 'text-green-600':'text-red-600'" class="text-gray-500 text-xs number-ltr">
+          </div>
+          <div class="text-gray-500 flex gap-1 text-xs items-center">
+            <div :class="item.gold > 0 ? 'text-green-600':'text-red-600'" class="text-base number-ltr">
+              {{ item.gold }}
+            </div>
+            {{item.unit}}
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--    <div v-if="isGold" class="flex w-full justify-between mt-2">
+          <div class="text-gray-500">قیمت معامله</div>
+          <div class="text-gray-500 flex gap-1 text-xs items-center">
+            <div class="text-base">{{ usePriceWithoutType(Math.abs(item.cash) / Math.abs(item.gold)) }}</div>
+            ریال
+          </div>
+        </div>-->
+    <!--    <div v-else class="h-8"></div>-->
+    <a-divider class="!my-3"/>
+    <BasicActionSheet v-model:show="infoVisible">
+      <div class="font-bold text-lg">{{ props.item.title }}</div>
+      <div class="pb-20 mt-5">
+        <div class="flex justify-between mb-3">
+          <div class="text-primary">مقدار {{props.title}} مبادله شده:</div>
+          <div :class="item.gold >= 0? 'text-green-600' : 'text-red-600'" class="flex text-xs items-center">
+            <div class="text-base ml-1 number-ltr">{{ item.gold }}</div>
+            {{item.unit}}
+          </div>
+        </div>
+        <div class="flex justify-between mb-3">
+          <div class="text-primary">موجودی {{ props.title }}:</div>
+          <div class="flex text-xs text-yellow-700 items-center">
+            <div class="text-base ml-1">{{ item.balance_gold }}</div>
+            {{item.unit}}
+          </div>
+        </div>
+        <!--        <div class="flex justify-between mb-3">
+                  <div class="text-primary">موجودی کیف پول:</div>
+                  <div class="flex text-xs items-center" :class="isUp? 'text-green-600' : 'text-red-600'"><div class="text-base">{{usePriceWithoutType(12000000)}}</div>ریال</div>
+                </div>
+                <div class="flex justify-between mb-3">
+                  <div class="text-primary">موجودی کیف طلا:</div>
+                  <div class="flex items-center" :class="isUp? 'text-red-600' : 'text-green-600'">60 گرم</div>
+                </div>-->
+        <div class="flex justify-between mb-3">
+          <div class="text-primary">وضعیت:</div>
+          <div class="flex text-xs items-center">
+            <ATag :color="item.active? 'blue': 'red'" class="!py-1 !px-6 !ml-0">{{
+                item.active ? 'موفق' : 'نا موفق'
+              }}
+            </ATag>
+          </div>
+        </div>
+        <div class="flex justify-between mb-3">
+          <div class="text-primary">تاریخ:</div>
+          <div>{{ toJalaliNotime(item.expire_at) }}</div>
+        </div>
+        <div class="flex justify-between mb-3">
+          <div class="text-primary">زمان:</div>
+          <div>{{ toTime(item.expire_at) }}</div>
+        </div>
+        <BasicButton class="w-full mt-5" @click="infoVisible = false">بازگشت</BasicButton>
+      </div>
+    </BasicActionSheet>
+  </div>
+
+</template>
+
+<script lang="ts" setup>
+import Icon from "@/components/BasicPacks/BasicIcon.vue";
+import BasicActionSheet from "@/components/BasicPacks/BasicActionSheet.vue";
+import {computed, ref} from "vue";
+import BasicButton from "@/components/BasicPacks/BasicButton.vue";
+import type {Transaction} from "@/models/transaction";
+import {toJalaliNotime, toTime} from "../../../../../utils/useDateTime";
+
+const infoVisible = ref<boolean>(false)
+
+interface Prop {
+  item: Transaction
+  title?: string
+}
+
+const props = withDefaults(defineProps<Prop>(), {})
+const isUp = computed(() => props.item.type === 3 || props.item.type === 1)
+// const isGold = computed(() => props.item.type === 1 || props.item.type === 2 || props.item.type === 10)
+/*const title = computed(() => {
+  if (isUp.value) {
+    if (isGold.value) {
+      return 'واریز ریالی'
+    } else {
+      return 'خرید طلا'
+    }
+  } else {
+    if (isGold.value) {
+      return 'برداشت ریالی'
+    } else {
+      return 'فروش طلا'
+    }
+  }
+})*/
+</script>
+
+<style scoped>
+
+</style>

src/views/base/fund/info/index.vue

@@ -0,0 +1,300 @@
+<template>
+  <div>
+    <div class="bg-white wrap-fix py-3 px-3 text-primary font-bold drop-shadow flex h-12 z-20 justify-between">
+      <div class="flex 	">
+        <div @click="router.back()" class="cursor-pointer">
+          <BasicIcon icon="vuesax-linear:arrow-right-1" />
+        </div>
+        <div class="mr-2">{{ info?.title }}</div>
+      </div>
+<!--      <div @click="editShow = true">
+        <BasicIcon icon="vuesax-linear:setting-4" />
+      </div>-->
+    </div>
+    <div class="pt-20 flex flex-col justify-center items-center">
+      <a-spin :spinning="loading">
+        <div class="bg-sky-100 w-[120px] aspect-square flex justify-center rounded-xl">
+<!--          <img v-if="!loading" :src="itemImg" alt="">-->
+          <img v-if="info?.group_type=='گوی'"  :src="goyImg">
+          <img v-if="info?.group_type=='مکعب'" :src="mokaabImg">
+          <img v-if="info?.group_type=='سکه'" :src="sekkeImg">
+          <img v-if="info?.group_type=='آبشده'|| info?.group_type== null" :src="defaultImg">
+        </div>
+      </a-spin>
+      <div class="mt-2 font-bold flex text-xs items-center text-gray-500">
+        <div class="ml-1 text-base text-primary">{{ info?.wallet?.gold?? 0 }}</div>
+        {{info?.unit}}
+      </div>
+      <div class="text-gray-400">موجودی گنج {{ info?.title }}</div>
+      <div class="w-full p-5">
+<!--        <div class="w-full flex gap-3">
+          <BasicButton class="w-full !bg-[#F3F0E9] !border-0 !rounded" icon="vuesax-linear:add-square" icon-size="18"
+                       @click="()=> {transactionShow = true; isDeposit= false}">برداشت
+          </BasicButton>
+          <BasicButton class="w-full !bg-[#F3F0E9] !border-0 !rounded" icon="vuesax-linear:arrow-up" icon-size="18"
+                       @click="()=> {transactionShow = true; isDeposit= true}">واریز
+          </BasicButton>
+        </div>-->
+        <div class=" font-bold mt-5">تراکنش ها</div>
+        <!--        <a-spin :spinning="loading">-->
+        <div class="mt-5 pb-17 overflow-y-scroll h-[54vh]">
+          <list-anim v-if="!loading">
+            <Item v-for="item in items" :key="item.id" :item="item"  :title="info?.title"/>
+          </list-anim>
+          <TransactionSkeleton v-for="i in 8" v-else :key="i" class="mt-1" />
+          <empty v-if="items.length === 0 && !loading" text="هیچ تراکنشی یافت نشد" />
+        </div>
+        <!--        </a-spin>-->
+      </div>
+    </div>
+    <BasicActionSheet v-model:show="transactionShow">
+      <div class="font-bold text-lg">{{ isDeposit ? 'واریز' : 'برداشت' }}</div>
+      <a-form ref="formRef" :model="userFormState" class="!mt-5" name="basic" @finish="transaction()">
+        <a-form-item :rules="[required()]" label="مقدار گرم طلا" name="value" class="!block">
+          <BasicInput v-model:value="userFormState.value"
+                      addon-before="گرم" place-holder="گرم"
+                      type="text" inputmode="decimal"
+                      size="large" />
+          <div v-if="isDeposit" class="mt-2 text-xs font-bold leading-5">
+            <div>موجودی کیف طلا: {{ walletStore?.walletInfo?.gold }} گرم</div>
+            <div v-if="info?.wallet?.gold !== 0">
+              {{ `موجودی قابل برداشت گنج: ${info?.wallet?.gold ?? 0} گرم` }}
+            </div>
+          </div>
+          <div v-else class="mt-2 text-xs font-bold">موجودی گنج {{ info.title }}: {{ info?.wallet?.gold }} گرم
+          </div>
+        </a-form-item>
+        <a-form-item>
+          <BasicButton
+            :disabled="transButtonDisable"
+            class=" w-full py-2 mt-2"
+            html-type="submit"
+            type="primary"
+          >
+            <div>
+              <a-spin v-if="loading" size="small" />
+              <div v-else>{{ isDeposit ? 'واریز' : 'برداشت' }}</div>
+            </div>
+          </BasicButton>
+          <BasicButton class="mb-20 mt-2 w-full" @click="transactionShow = false">بازگشت</BasicButton>
+        </a-form-item>
+      </a-form>
+    </BasicActionSheet>
+    <BasicActionSheet v-model:show="editShow">
+      <div class="font-bold text-lg">گنج {{ info?.title }}</div>
+
+      <BasicButton class="mt-12 w-full" icon="vuesax-linear:edit"
+                   icon-size="16" @click="$router.push({name: 'fund_add', query:{id:infoId}})">
+        <div class="flex w-full justify-right">ویرایش</div>
+      </BasicButton>
+      <BasicButton :loading="loading" class="mb-10 mt-2 w-full !text-red-600"
+                   icon="vuesax-linear:trash"
+                   icon-size="16"
+                   @click="deleteFundConfirm">
+        <div class="flex w-full justify-right">حذف</div>
+      </BasicButton>
+
+      <BasicButton class="mb-20 mt-2 w-full" type="primary" @click="transactionShow = false">بازگشت</BasicButton>
+    </BasicActionSheet>
+    <DialogVant v-model:show="showDeleteConfirm" :closeOnClickOverlay="true" :timeOut="-1">
+      <!--      <template v-slot:img>
+              <img :src="registerDelayImage" alt="" class="opacity-80">
+            </template>-->
+
+      <template v-slot:title>
+        <div class="p-5 text-sm">
+          آیا از حذف گنج خود اطمینان دارید؟
+        </div>
+      </template>
+
+      <template v-slot:button>
+        <div class="text-center text-red" @click="deleteFundFunction">
+          حذف
+        </div>
+        <div class="text-center" @click="showDeleteConfirm = false">
+          انصراف
+        </div>
+      </template>
+
+    </DialogVant>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+import router from '@/router'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import Item from './components/Item.vue'
+import homeImg from '@/assets/img/cash_home.svg'
+import giftImg from '@/assets/img/cash_gift.svg'
+import circulationImg from '@/assets/img/cash_circulation.svg'
+import loveImg from '@/assets/img/cash_love.svg'
+import repairsImg from '@/assets/img/cash_repairs.svg'
+import savingImg from '@/assets/img/cash_saving.svg'
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import { loading } from '@/utils'
+import { deleteFund, fundDeposit, fundWithdraw, getFundById, getFundTransactionTable } from '@/api/fund'
+import type { Fund, FundTransaction } from '@/models/fund'
+import type { TableInput, TableOutput } from '@/models/table'
+import type { Transaction } from '@/models/transaction'
+import Empty from '@/components/empty.vue'
+import { required } from '@/utils/inputRules'
+import type { FormInstance } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
+import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
+import BasicInput from '@/components/BasicPacks/BasicInput.vue'
+import { useWalletStore } from '@/store/walletStore'
+import ListAnim from '@/components/ListAnim.vue'
+import TransactionSkeleton from '@/components/TransactionSkeleton.vue'
+import DialogVant from '@/components/DialogVant.vue'
+import { useFundUserStore } from '@/store/fundStore'
+import { getOneProductWallet } from '@/api/products'
+import goyImg from '@/assets/img/goyImg.svg'
+import mokaabImg from '@/assets/img/mokaabImg.svg'
+import sekkeImg from "@/assets/img/sekkeImg.svg"
+import defaultImg from '@/assets/img/defaultAbshodeh.svg'
+import type { Product } from '@/models/products'
+
+const info = ref<Product>()
+const items = ref<Transaction[]>([])
+const tableOutput = ref<TableOutput<Transaction> | null>(null)
+const pagination = ref<TableInput>({/*limit: 100, page: 0*/ })
+const transactionShow = ref<boolean>()
+const editShow = ref<boolean>()
+const showDeleteConfirm = ref<boolean>()
+const isDeposit = ref<boolean>()
+const formRef = ref<FormInstance>()
+let fundStore = useFundUserStore()
+let walletStore = useWalletStore()
+
+
+onMounted(() => {
+  initInfo()
+  // initTable()
+})
+
+function deleteFundConfirm() {
+  if (info.value?.wallet === undefined || info.value?.wallet?.gold === 0) {
+    showDeleteConfirm.value = true
+  } else {
+    message.error('ابتدا گنج خود را خالی کنید')
+    editShow.value = false
+  }
+}
+
+async function deleteFundFunction() {
+  try {
+    loading.value = true
+    showDeleteConfirm.value = false
+    await deleteFund(infoId)
+    await fundStore.getMyFund()
+    router.back()
+    message.success('گنج با موفقیت حذف شد')
+  } catch (e) {
+    console.log(e)
+  } finally {
+    loading.value = false
+  }
+}
+
+const infoId: number = parseInt(<string>router.currentRoute.value.params.id)
+const userFormState = reactive<FundTransaction>({
+  value: undefined,
+  fund_id: infoId
+})
+
+watch(transactionShow, (n) => !n ? userFormState.value = undefined : '')
+
+const transButtonDisable = computed(() => {
+    if (!loading.value) {
+      if (userFormState.value !== undefined) {
+        if (isDeposit.value) {
+          return userFormState.value > walletStore?.walletInfo?.gold
+        } else {
+          return userFormState.value > info.value?.wallet?.gold
+        }
+        // return isDeposit.value ? userFormState.value > walletStore?.walletInfo?.gold : userFormState.value > info.value?.wallet?.gold
+      } else return true
+    } else {
+      return true
+    }
+  }
+)
+
+async function initInfo() {
+  try {
+    loading.value = true
+    info.value = await getOneProductWallet(infoId)
+    //pagination.value.page=0
+    await initTable()
+  } catch (e) {
+    console.log(e)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function initTable() {
+  if (info.value?.wallet)
+    try {
+      loading.value = true
+      items.value = []
+      Object.assign(pagination.value, { wallet_id: info.value?.wallet?.id })
+      // pagination.value.fund_id = infoId
+      tableOutput.value = await getFundTransactionTable(pagination.value)
+      items.value.push(...tableOutput.value.rows)
+      // console.log(tableOutput.value)
+    } catch (e) {
+      console.log(e)
+    } finally {
+      loading.value = false
+    }
+}
+
+async function transaction() {
+  formRef.value?.validateFields().then(async () => {
+    try {
+      loading.value = true
+      userFormState.fund_id = infoId
+      isDeposit.value ? await fundDeposit(userFormState) : await fundWithdraw(userFormState)
+      await initInfo()
+      // await initTable()
+      await fundStore.getMyFund()
+      await walletStore.getMyWallet()
+      fundStore = useWalletStore()
+      walletStore = useWalletStore()
+      message.success(` با موفقیت${isDeposit.value ? ' واریز' : ' برداشت'} شد`)
+      transactionShow.value = false
+    } catch (e) {
+      console.log(e)
+    } finally {
+      loading.value = false
+    }
+  })
+}
+
+const itemImg = computed(() => {
+  switch (info.value?.title) {
+    case 'خرید لوازم منزل':
+      return homeImg
+    case 'هدیه':
+      return giftImg
+    case 'گردش':
+      return circulationImg
+    case 'ازدواج':
+      return loveImg
+    case 'تعمیرات':
+      return repairsImg
+    case 'پس انداز':
+      return savingImg
+    default:
+      return savingImg
+  }
+})
+
+
+</script>
+
+<style scoped>
+
+</style>

src/views/base/fund/newFund/index.vue

@@ -0,0 +1,194 @@
+<template>
+  <div>
+    <div class="bg-white wrap-fix py-3 px-3 text-primary font-bold drop-shadow flex h-12 z-20 justify-between">
+      <div class="flex 	">
+        <div @click="router.back()" class="cursor-pointer">
+          <BasicIcon icon="vuesax-linear:arrow-right-1"/>
+        </div>
+        <div class="mr-2">{{edit_id? `ویرایش گنج ${name}`: 'صندوق جدید'}}</div>
+      </div>
+      <div @click="router.back()">
+        <!--        <BasicIcon icon="vuesax-linear:setting-4"/>-->
+      </div>
+    </div>
+    <a-spin :spinning="loading">
+      <div class="pt-20 flex flex-col justify-center items-center">
+        <div class="bg-sky-100 w-[120px] aspect-square flex justify-center rounded-xl"><img :src="itemImg" alt=""></div>
+        <!--      <div class="mt-1 text-xs">تغییر عکس</div>-->
+        <div class="flex mt-3 w-full relative px-5" :class="[prefixCls]">
+          <!--        <div class="text-primary font-bold mx-auto items-center">پس انداز</div>
+                  <div class="absolute left-5 text-gray-400 text-xs">7/25</div>-->
+          <van-field
+              v-model="name"
+              label=""
+              class="font-bold"
+              placeholder="عنوان را وارد کنید"
+              input-align="center"
+              :show-word-limit="true"
+              maxlength="25"
+              rows="1"
+              size="small"
+          />
+        </div>
+        <div class="flex overflow-x-scroll gap-2 whitespace-nowrap max-w-[320px] mt-2 px-3">
+          <!--        <BasicTags
+                      :items="types"
+                      color="green"
+                      :has-add="false"
+                  />-->
+          <!--        <BasicButton v-for="item in types" size="small">{{item.name}}</BasicButton>-->
+          <div v-for="item in types"
+               class="border-1 px-3 py-2 flex-nowrap rounded text-xs color-transition background-color-transition"
+               :key="item.name"
+               :class="item.name === name? 'bg-[#0A1B37] text-white':'bg-gray-200 text-gray-600'"
+               @click="name = item.name">
+            {{ item.name }}
+          </div>
+        </div>
+        <!-- <div class="mt-2 font-bold flex text-xs items-center text-gray-500">
+          <div class="ml-1 text-base text-primary">{{ router.currentRoute.value.query.amount }}</div>
+          گرم
+        </div>
+        <div class="text-gray-400">موجودی صندوق {{itemName}}</div>
+        <div class="w-full p-5">
+          <div class="w-full flex gap-3">
+            <BasicButton class="w-full !bg-light" icon="vuesax-linear:add-square" icon-size="18">برداشت</BasicButton>
+            <BasicButton class="w-full !bg-light" icon="vuesax-linear:arrow-up" icon-size="18">واریز</BasicButton>
+          </div>
+          <div class="text-lg font-bold mt-5">تراکنش ها</div>
+         <div class="mt-5 pb-17">
+            <Item v-for="item in items" :is-up="item.isUp" :has-transition="item.hasTransition" :key="item"/>
+          </div>
+      </div>-->
+        <div class="wrap-fix flex justify-center bottom-23 px-5 z-200" @click="ok()">
+          <BasicButton class="rounded w-full  px-5 py-2 text-center" type="primary" :disabled="loading">
+            <a-spin v-if="loading" size="small"/>
+            <div v-else>{{edit_id? 'ویرایش گنج':'ساخت گنج'}}</div>
+          </BasicButton>
+        </div>
+      </div>
+    </a-spin>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import router from "@/router";
+import {computed, onMounted, ref} from "vue";
+import homeImg from "@/assets/img/cash_home.svg";
+import giftImg from "@/assets/img/cash_gift.svg";
+import circulationImg from "@/assets/img/cash_circulation.svg";
+import loveImg from "@/assets/img/cash_love.svg";
+import repairsImg from "@/assets/img/cash_repairs.svg";
+import savingImg from "@/assets/img/cash_saving.svg";
+import {usePrefix} from "@/utils/usePrefix";
+import {loading} from "@/utils";
+import {createFund, editFund, getFundById} from "@/api/fund";
+import {message} from "ant-design-vue/es";
+import {useFundUserStore} from "@/store/fundStore";
+import BasicButton from "@/components/BasicPacks/BasicButton.vue";
+import type {Fund} from "@/models/fund";
+
+const fundStore = useFundUserStore()
+
+
+const types = [
+  {
+    name: 'خرید لوازم منزل'
+  },
+  {
+    name: 'پس انداز'
+  },
+  {
+    name: 'گردش'
+  },
+  {
+    name: 'ازدواج'
+  },
+  {
+    name: 'تعمیرات'
+  },
+  {
+    name: 'هدیه'
+  },
+]
+
+const edit_id = computed(() => {
+  return parseInt(router.currentRoute.value.query.id as string)
+})
+const name = ref<string>('پس انداز')
+const {prefixCls} = usePrefix('input_name')
+const info = ref<Fund>()
+
+async function getEditInfo() {
+  try {
+    loading.value = true
+    info.value = await getFundById(edit_id.value)
+    name.value = info.value?.title?? ''
+  } catch (e) {
+    console.log(e)
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  if (edit_id.value) {
+    getEditInfo()
+  }
+})
+
+const itemImg = computed(() => {
+  switch (name.value) {
+    case 'خرید لوازم منزل':
+      return homeImg
+    case 'هدیه':
+      return giftImg
+    case 'گردش':
+      return circulationImg
+    case 'ازدواج':
+      return loveImg
+    case 'تعمیرات':
+      return repairsImg
+    case 'پس انداز':
+      return savingImg
+    default:
+      return savingImg
+  }
+})
+
+async function ok() {
+  try {
+    loading.value = true
+    // console.log(name.value)
+    name.value ? edit_id.value? await editFund(edit_id.value,{title: name.value}) :await createFund({title: name.value}) : () => {
+      message.error('ابتدا نام گنج را وارد کنید')
+      return
+    }
+    await fundStore.getMyFund()
+    message.success(`گنج با موفقیت ${edit_id.value? 'ویرایش':'ساخته'} شد`)
+    router.back()
+    // name.value? message.warn('ss'): message.error('ابتدا نام صندوق را وارد کنید')
+  } catch (e) {
+    console.log(e)
+  } finally {
+    loading.value = false
+  }
+}
+
+</script>
+
+<style lang="less">
+@prefix: ~'@{prefixCls}-input_name';
+
+.@{prefix} {
+  .van-field__value {
+  @apply flex;
+  }
+
+  .van-field__body {
+  @apply w-full mr-5;
+  }
+}
+</style>