118 lines
4.2 KiB
Vue
118 lines
4.2 KiB
Vue
<template>
|
||
<div class="dpiggy-info">
|
||
<div class="dpiggy-info__container">
|
||
<DesktopPageTopbar
|
||
eyebrow="دارایی"
|
||
:title="fund?.title || 'جزئیات قلک'"
|
||
:subtitle="fund?.product?.title || 'موجودی و جابهجایی قلک'"
|
||
show-back
|
||
>
|
||
<template #trailing>
|
||
<div class="flex items-center gap-2">
|
||
<BasicButton @click="goEdit">ویرایش</BasicButton>
|
||
<BasicButton danger @click="onDelete">حذف</BasicButton>
|
||
</div>
|
||
</template>
|
||
</DesktopPageTopbar>
|
||
|
||
<a-spin :spinning="busy">
|
||
<div class="dpiggy-info__layout">
|
||
<aside class="dpiggy-info__side">
|
||
<section class="dpiggy-info__hero">
|
||
<p class="dpiggy-info__product">{{ fund?.product?.title || '—' }}</p>
|
||
<p class="dpiggy-info__label">موجودی قلک</p>
|
||
<p class="dpiggy-info__value" dir="ltr">
|
||
{{ formatPiggyAmount(potGold) }}
|
||
<span>گرم</span>
|
||
</p>
|
||
<p class="dpiggy-info__free">
|
||
آزاد قابل واریز:
|
||
<strong dir="ltr">{{ formatPiggyAmount(freeGold) }}</strong>
|
||
گرم
|
||
</p>
|
||
</section>
|
||
|
||
<div class="dpiggy-info__actions">
|
||
<BasicButton class="dpiggy-info__action" @click="openTx(false)">
|
||
<div class="dpiggy-info__action-inner">
|
||
<BasicIcon icon="vuesax-linear:export" size="18" />
|
||
<span>برداشت به آزاد</span>
|
||
</div>
|
||
</BasicButton>
|
||
<BasicButton class="dpiggy-info__action" type="primary" @click="openTx(true)">
|
||
<div class="dpiggy-info__action-inner">
|
||
<BasicIcon icon="vuesax-linear:import" size="18" />
|
||
<span>واریز از آزاد</span>
|
||
</div>
|
||
</BasicButton>
|
||
</div>
|
||
</aside>
|
||
|
||
<section class="dpiggy-info__tx">
|
||
<div class="dpiggy-info__tx-header">
|
||
<h2 class="dpiggy-info__tx-title">تراکنشهای این قلک</h2>
|
||
<span class="dpiggy-info__tx-count">{{ transactions.length }} مورد</span>
|
||
</div>
|
||
|
||
<div v-if="!transactions.length" class="dpiggy-info__tx-empty">
|
||
<BasicIcon icon="vuesax-linear:receipt-2" size="32" />
|
||
<p class="m-0 text-sm">هنوز جابهجایی ثبت نشده</p>
|
||
</div>
|
||
|
||
<div v-else class="dpiggy-info__tx-list">
|
||
<div v-for="tx in transactions" :key="tx.id" class="dpiggy-info__tx-row">
|
||
<div class="dpiggy-info__tx-dot" />
|
||
<div class="min-w-0 flex-1 text-right">
|
||
<div class="truncate text-sm font-bold text-gray-900">
|
||
{{ tx.type_str || tx.type || 'تراکنش' }}
|
||
</div>
|
||
<div class="mt-0.5 text-xs text-gray-400">{{ tx.created_at || '' }}</div>
|
||
</div>
|
||
<div class="dpiggy-info__tx-amount" dir="ltr">
|
||
{{ formatPiggyAmount(Number(tx.gold ?? 0)) }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</a-spin>
|
||
</div>
|
||
|
||
<PiggyTxModal
|
||
v-model:visible="txVisible"
|
||
:is-deposit="isDeposit"
|
||
:busy="busy"
|
||
:fund-title="fund?.product?.title || 'محصول'"
|
||
:max-label="isDeposit ? formatPiggyAmount(freeGold) : formatPiggyAmount(potGold)"
|
||
v-model:value="txValue"
|
||
@submit="submitTx"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
|
||
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
|
||
import DesktopPageTopbar from '@/layouts/components/DesktopPageTopbar.vue'
|
||
import PiggyTxModal from '../components/PiggyTxModal.vue'
|
||
import { usePiggyInfoPage } from '../composables/usePiggyInfoPage'
|
||
|
||
const {
|
||
busy,
|
||
fund,
|
||
transactions,
|
||
txVisible,
|
||
isDeposit,
|
||
txValue,
|
||
potGold,
|
||
freeGold,
|
||
formatPiggyAmount,
|
||
openTx,
|
||
submitTx,
|
||
onDelete,
|
||
goEdit,
|
||
} = usePiggyInfoPage()
|
||
</script>
|
||
|
||
<style lang="less" src="./styles/desktop-piggy-info.less"></style>
|