feat: 完整支付配套——CoinLedger流水模型+充值/消费/退款全链写流水+管理后台订单/余额/退款/调整/统计页+用户明细页+余额卡明细入口

2026-09-14 12:26:41 +08:00
parent 968396bed5
commit f13309e6cd
11 changed files with 497 additions and 36 deletions
@@ -0,0 +1,95 @@
+<template>
+  <view class="ledger-page">
+    <view class="status-bar-placeholder"></view>
+
+    <view class="balance-header">
+      <text class="balance-num">{{ balance }}</text>
+      <text class="balance-label">星尘余额</text>
+    </view>
+
+    <view class="filter-row">
+      <view class="filter-tag" :class="{ active: filter === '' }" @tap="filter = ''; load()">全部</view>
+      <view class="filter-tag" :class="{ active: filter === 'recharge' }" @tap="filter = 'recharge'; load()">充值</view>
+      <view class="filter-tag" :class="{ active: filter === 'consume' }" @tap="filter = 'consume'; load()">消费</view>
+    </view>
+
+    <view v-for="item in items" :key="item._id" class="ledger-item">
+      <view class="li-left">
+        <text class="li-desc">{{ item.description || typeLabel(item.type) }}</text>
+        <text class="li-time">{{ fmt(item.createdAt) }}</text>
+      </view>
+      <text class="li-amount" :class="{ in: item.amount > 0, out: item.amount < 0 }">
+        {{ item.amount > 0 ? '+' : '' }}{{ item.amount }}
+      </text>
+    </view>
+
+    <view v-if="!loading && !items.length" class="empty">
+      <text>暂无记录</text>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { request } from '../../utils/api'
+import { useUserStore } from '../../stores/user'
+
+const userStore = useUserStore()
+const items = ref([])
+const balance = ref(0)
+const filter = ref('')
+const loading = ref(false)
+const TYPE_LABELS = { recharge: '充值', consume: '消费', refund: '退款', adjust: '调整', gift: '赠送' }
+
+function typeLabel(t) { return TYPE_LABELS[t] || t }
+function fmt(t) { return t ? new Date(t).toLocaleString('zh-CN', { hour12: false }) : '' }
+
+async function load() {
+  loading.value = true
+  try {
+    const data = await request('GET', `/api/vpay/ledger?limit=50`, null, userStore.token)
+    items.value = (data.items || []).filter(i => !filter.value || i.type === filter.value)
+  } catch (e) {
+    uni.showToast({ title: e.message || '加载失败', icon: 'none' })
+  } finally { loading.value = false }
+}
+
+onMounted(async () => {
+  if (!userStore.isLoggedIn) {
+    uni.showToast({ title: '请先登录', icon: 'none' })
+    setTimeout(() => uni.navigateBack(), 1500)
+    return
+  }
+  load()
+  try {
+    const info = await request('GET', '/api/vpay/info', null, userStore.token)
+    balance.value = info.balance || 0
+  } catch (e) {}
+})
+</script>
+
+<style scoped>
+.ledger-page { min-height: 100vh; padding: 0 20px 30px; background: var(--bg-primary); }
+.status-bar-placeholder { height: 44px; }
+.balance-header { text-align: center; padding: 20px 0; }
+.balance-num { font-size: 36px; font-weight: 800; color: var(--text-primary); display: block; }
+.balance-label { font-size: 12px; color: var(--text-tertiary); }
+.filter-row { display: flex; gap: 8px; margin-bottom: 12px; }
+.filter-tag {
+  padding: 6px 16px; border-radius: 999px; font-size: 12px;
+  background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-secondary);
+}
+.filter-tag.active { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }
+.ledger-item {
+  display: flex; align-items: center; justify-content: space-between;
+  background: var(--glass-bg); border: 1px solid var(--glass-border);
+  border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 8px;
+}
+.li-left { flex: 1; }
+.li-desc { font-size: 14px; color: var(--text-primary); display: block; }
+.li-time { font-size: 11px; color: var(--text-muted); }
+.li-amount { font-size: 16px; font-weight: 700; }
+.li-amount.in { color: #22c55e; }
+.li-amount.out { color: #ef4444; }
+.empty { text-align: center; padding: 40px; color: var(--text-muted); font-size: 13px; }
+</style>