feat(ui): desktop piggy/notifications views, support chat fixes, gift card list

2026-09-09 16:57:41 +03:30
parent 5920866a95
commit 0a3a5d7c82
50 changed files with 3242 additions and 1094 deletions
@@ -0,0 +1,117 @@
+<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>