56 lines
2.1 KiB
Vue
56 lines
2.1 KiB
Vue
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { accountApi } from '@/api/index'
|
|
|
|
const router = useRouter()
|
|
const list = ref([])
|
|
const loading = ref(true)
|
|
const finished = ref(false)
|
|
const page = ref(1)
|
|
const txTypeLabel = { 1: '充值', 2: '消费', 3: '退款', 4: '调整' }
|
|
const txTypeColor = { 1: '#22c55e', 2: '#ef4444', 3: '#3b82f6', 4: '#f59e0b' }
|
|
|
|
async function onLoad() {
|
|
try {
|
|
const res = await accountApi.transactions({ page: page.value, per_page: 20 })
|
|
const items = res.data?.data?.list || []
|
|
list.value.push(...items)
|
|
if (list.value.length >= (res.data?.data?.total || 0)) finished.value = true
|
|
page.value++
|
|
} catch { finished.value = true } finally { loading.value = false }
|
|
}
|
|
|
|
onMounted(onLoad)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="page">
|
|
<van-nav-bar title="流水记录" left-arrow @click-left="router.back()" />
|
|
<div class="content">
|
|
<van-list :loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
|
|
<div v-for="tx in list" :key="tx.id" class="tx-card">
|
|
<div class="tx-left">
|
|
<span class="tx-type">{{ txTypeLabel[tx.type] || '交易' }}</span>
|
|
<span class="tx-time">{{ tx.created_at?.slice(0, 16) }}</span>
|
|
</div>
|
|
<span class="tx-amount" :style="{ color: [1,3].includes(tx.type) ? '#22c55e' : '#ef4444' }">
|
|
{{ [1,3].includes(tx.type) ? '+' : '-' }}¥{{ Math.abs(tx.amount || 0).toFixed(2) }}
|
|
</span>
|
|
</div>
|
|
</van-list>
|
|
<van-empty v-if="!loading && !list.length" description="暂无流水记录" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.page { background: #f8f0f5; min-height: 100vh; }
|
|
.content { padding: 16px; }
|
|
.tx-card { background: white; border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
|
|
.tx-left { display: flex; flex-direction: column; gap: 2px; }
|
|
.tx-type { font-size: 14px; font-weight: 600; color: #333; }
|
|
.tx-time { font-size: 11px; color: #999; }
|
|
.tx-amount { font-size: 18px; font-weight: 700; }
|
|
</style>
|