boursecu_user/src/views/base/piggy/mobile/MobilePiggyInfoView.vue

<template>
  <div class="piggy-info">
    <div class="piggy-info__inner">
      <header class="piggy-info__hero">
        <div class="piggy-info__top">
          <button type="button" class="piggy-info__btn" aria-label="بازگشت" @click="goBack">
            <BasicIcon icon="vuesax-linear:arrow-right-1" size="22" />
          </button>
          <h1 class="piggy-info__title">{{ fund?.title || 'قلک' }}</h1>
          <button type="button" class="piggy-info__btn" aria-label="حذف" @click="onDelete">
            <BasicIcon icon="vuesax-linear:trash" size="18" />
          </button>
        </div>

        <a-spin :spinning="busy">
          <div class="piggy-info__balance-block">
            <p class="piggy-info__product">{{ fund?.product?.title || '—' }}</p>
            <p class="piggy-info__label">موجودی قلک</p>
            <p class="piggy-info__value" dir="ltr">
              {{ formatPiggyAmount(potGold) }}
              <span>گرم</span>
            </p>
            <p class="piggy-info__free">
              آزاد قابل واریز:
              <strong dir="ltr">{{ formatPiggyAmount(freeGold) }}</strong>
              گرم
            </p>
          </div>
        </a-spin>
      </header>

      <div class="piggy-info__sheet">
        <div class="piggy-info__actions">
          <BasicButton class="piggy-info__action" size="middle" @click="openTx(false)">
            <div class="piggy-info__action-inner">
              <BasicIcon icon="vuesax-linear:export" size="18" />
              <span>برداشت به آزاد</span>
            </div>
          </BasicButton>
          <BasicButton class="piggy-info__action" type="primary" size="middle" @click="openTx(true)">
            <div class="piggy-info__action-inner">
              <BasicIcon icon="vuesax-linear:import" size="18" />
              <span>واریز از آزاد</span>
            </div>
          </BasicButton>
        </div>

        <section class="piggy-info__tx">
          <h2 class="piggy-info__tx-title">تراکنش‌های این قلک</h2>
          <div v-if="!transactions.length" class="piggy-info__tx-empty">
            <BasicIcon icon="vuesax-linear:receipt-2" size="28" />
            <p class="m-0 mt-2 text-sm text-gray-500">هنوز جابه‌جایی ثبت نشده</p>
          </div>
          <div v-else class="piggy-info__tx-list">
            <div v-for="tx in transactions" :key="tx.id" class="piggy-info__tx-row">
              <div class="piggy-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-[11px] text-gray-400">{{ tx.created_at || '' }}</div>
              </div>
              <div class="shrink-0 font-bold text-primary" dir="ltr">
                {{ formatPiggyAmount(Number(tx.gold ?? 0)) }}
              </div>
            </div>
          </div>
        </section>
      </div>
    </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 PiggyTxModal from '../components/PiggyTxModal.vue'
import { usePiggyInfoPage } from '../composables/usePiggyInfoPage'

const {
  busy,
  fund,
  transactions,
  txVisible,
  isDeposit,
  txValue,
  potGold,
  freeGold,
  formatPiggyAmount,
  goBack,
  openTx,
  submitTx,
  onDelete,
} = usePiggyInfoPage()
</script>

<style scoped>
.piggy-info {
  box-sizing: border-box;
  min-height: 100%;
  width: 100%;
  background: #f9fafb;
  padding: 0 12px calc(var(--app-bottom-chrome-height, 108px) + 1rem);
}
.piggy-info__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
}
.piggy-info__hero {
  @apply bg-primary px-3 pb-8 pt-3 text-white;
}
.piggy-info__top {
  @apply flex items-center justify-between gap-2;
}
.piggy-info__btn {
  @apply flex h-9 w-9 shrink-0 items-center justify-center rounded-full border-none bg-white/15 text-white;
}
.piggy-info__title {
  @apply m-0 min-w-0 flex-1 truncate text-center text-base font-bold text-white;
}
.piggy-info__balance-block {
  @apply mt-6 px-2 text-center;
}
.piggy-info__product {
  @apply m-0 inline-flex max-w-full truncate rounded-full bg-white/15 px-3 py-1 text-xs text-white/90;
}
.piggy-info__label {
  @apply m-0 mt-4 text-sm text-white/75;
}
.piggy-info__value {
  @apply m-0 mt-1 flex flex-wrap items-baseline justify-center gap-2 text-3xl font-bold sm:text-4xl;
}
.piggy-info__value span {
  @apply text-sm font-medium text-white/75;
}
.piggy-info__free {
  @apply m-0 mt-3 text-xs leading-5 text-white/70;
}
.piggy-info__free strong {
  @apply text-white;
}
.piggy-info__sheet {
  @apply relative z-10 -mt-4 rounded-t-3xl bg-gray-50 px-3 pt-5 sm:px-4;
}
.piggy-info__actions {
  @apply flex flex-col gap-2 sm:flex-row;
}
.piggy-info__action {
  @apply !w-full sm:!flex-1;
}
.piggy-info__action-inner {
  @apply flex items-center justify-center gap-2 text-sm;
}
.piggy-info__tx {
  @apply mt-5;
}
.piggy-info__tx-title {
  @apply m-0 mb-3 text-base font-bold text-gray-900;
}
.piggy-info__tx-empty {
  @apply flex flex-col items-center rounded-2xl bg-white px-4 py-10 text-gray-400;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.piggy-info__tx-list {
  @apply flex flex-col gap-2;
}
.piggy-info__tx-row {
  @apply flex min-w-0 items-center gap-3 rounded-2xl bg-white p-3;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.piggy-info__tx-dot {
  @apply h-2.5 w-2.5 shrink-0 rounded-full bg-primary;
}
</style>