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>
|