feat: 微客宝H5客户端 - 基础架构+核心页面

client/src/views/my/Transactions.vue

@@ -0,0 +1,55 @@
+<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>