96 lines
3.6 KiB
Vue
96 lines
3.6 KiB
Vue
<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>
|