|
|
@@ -2,7 +2,7 @@
|
|
|
<div class="wallet-page">
|
|
|
<div class="balance-card">
|
|
|
<p class="balance-label">当前余额(元)</p>
|
|
|
- <p class="balance-amount">¥{{ userStore.userInfo.balance.toFixed(2) }}</p>
|
|
|
+ <p class="balance-amount">¥{{ walletStore.balance.toFixed(2) }}</p>
|
|
|
<div class="balance-actions">
|
|
|
<el-button type="primary" @click="showRecharge = true">充值</el-button>
|
|
|
<el-button @click="showWithdraw = true">提现</el-button>
|
|
|
@@ -12,15 +12,15 @@
|
|
|
<el-divider />
|
|
|
|
|
|
<h3 class="section-title">资金明细</h3>
|
|
|
- <div class="transaction-list">
|
|
|
- <div v-for="item in transactions" :key="item.id" class="tx-item">
|
|
|
+ <div v-loading="walletStore.loading" class="transaction-list">
|
|
|
+ <div v-for="item in walletStore.transactions" :key="item.id" class="tx-item">
|
|
|
<span class="tx-type">{{ typeLabel(item.type) }}</span>
|
|
|
- <span class="tx-amount" :class="item.amount > 0 ? 'income' : 'expense'">
|
|
|
- {{ item.amount > 0 ? '+' : '' }}{{ item.amount.toFixed(2) }}
|
|
|
+ <span class="tx-amount" :class="(item.amount ?? 0) >= 0 ? 'income' : 'expense'">
|
|
|
+ {{ (item.amount ?? 0) >= 0 ? '+' : '' }}{{ (item.amount ?? 0).toFixed(2) }}
|
|
|
</span>
|
|
|
- <span class="tx-time">{{ item.time }}</span>
|
|
|
+ <span class="tx-time">{{ item.createdAt }}</span>
|
|
|
</div>
|
|
|
- <EmptyState v-if="transactions.length === 0" description="暂无资金明细" />
|
|
|
+ <EmptyState v-if="!walletStore.loading && walletStore.transactions.length === 0" description="暂无资金明细" />
|
|
|
</div>
|
|
|
|
|
|
<el-dialog v-model="showRecharge" title="充值" width="85%">
|
|
|
@@ -38,7 +38,7 @@
|
|
|
<el-dialog v-model="showWithdraw" title="提现" width="85%">
|
|
|
<el-form>
|
|
|
<el-form-item label="提现金额">
|
|
|
- <el-input-number v-model="withdrawAmount" :min="1" :max="userStore.userInfo.balance" />
|
|
|
+ <el-input-number v-model="withdrawAmount" :min="1" :max="walletStore.balance" />
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<template #footer>
|
|
|
@@ -50,61 +50,69 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref } from 'vue'
|
|
|
+import { ref, onMounted } from 'vue'
|
|
|
import { ElMessage } from 'element-plus'
|
|
|
-import { useLoginUserStore } from '../store'
|
|
|
+import { useWalletStore } from '../store'
|
|
|
import EmptyState from '../components/EmptyState.vue'
|
|
|
-import type { TransactionItem } from '../type'
|
|
|
|
|
|
-const userStore = useLoginUserStore()
|
|
|
+const walletStore = useWalletStore()
|
|
|
const showRecharge = ref(false)
|
|
|
const showWithdraw = ref(false)
|
|
|
const rechargeAmount = ref(100)
|
|
|
const withdrawAmount = ref(100)
|
|
|
const recharging = ref(false)
|
|
|
const withdrawing = ref(false)
|
|
|
-const transactions = ref<TransactionItem[]>([])
|
|
|
|
|
|
function typeLabel(type: string): string {
|
|
|
- const map: Record<string, string> = { recharge: '充值', withdraw: '提现', payment: '打赏支出' }
|
|
|
+ const map: Record<string, string> = { recharge: '充值', withdraw: '提现', tip_out: '打赏支出', admin_adjust: '管理员调整' }
|
|
|
return map[type] || type
|
|
|
}
|
|
|
|
|
|
-function doRecharge() {
|
|
|
+async function doRecharge() {
|
|
|
recharging.value = true
|
|
|
- setTimeout(() => {
|
|
|
- userStore.updateBalance(rechargeAmount.value)
|
|
|
- transactions.value.unshift({
|
|
|
- id: Date.now().toString(),
|
|
|
- time: new Date().toLocaleString(),
|
|
|
- amount: rechargeAmount.value,
|
|
|
- type: 'recharge'
|
|
|
- })
|
|
|
- ElMessage.success('充值成功')
|
|
|
- showRecharge.value = false
|
|
|
+ try {
|
|
|
+ const ok = await walletStore.recharge(rechargeAmount.value)
|
|
|
+ if (ok) {
|
|
|
+ ElMessage.success('充值成功')
|
|
|
+ showRecharge.value = false
|
|
|
+ await walletStore.fetchTransactions()
|
|
|
+ } else {
|
|
|
+ ElMessage.error('充值失败')
|
|
|
+ }
|
|
|
+ } catch {
|
|
|
+ ElMessage.error('充值失败')
|
|
|
+ } finally {
|
|
|
recharging.value = false
|
|
|
- }, 500)
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-function doWithdraw() {
|
|
|
- if (withdrawAmount.value > userStore.userInfo.balance) {
|
|
|
+async function doWithdraw() {
|
|
|
+ if (withdrawAmount.value > walletStore.balance) {
|
|
|
ElMessage.warning('余额不足')
|
|
|
return
|
|
|
}
|
|
|
withdrawing.value = true
|
|
|
- setTimeout(() => {
|
|
|
- userStore.updateBalance(-withdrawAmount.value)
|
|
|
- transactions.value.unshift({
|
|
|
- id: Date.now().toString(),
|
|
|
- time: new Date().toLocaleString(),
|
|
|
- amount: -withdrawAmount.value,
|
|
|
- type: 'withdraw'
|
|
|
- })
|
|
|
- ElMessage.success('提现申请已提交,等待处理')
|
|
|
- showWithdraw.value = false
|
|
|
+ try {
|
|
|
+ const ok = await walletStore.applyWithdraw(withdrawAmount.value)
|
|
|
+ if (ok) {
|
|
|
+ ElMessage.success('提现申请已提交,等待处理')
|
|
|
+ showWithdraw.value = false
|
|
|
+ await walletStore.fetchBalance()
|
|
|
+ await walletStore.fetchTransactions()
|
|
|
+ } else {
|
|
|
+ ElMessage.error('提现申请失败')
|
|
|
+ }
|
|
|
+ } catch {
|
|
|
+ ElMessage.error('提现申请失败')
|
|
|
+ } finally {
|
|
|
withdrawing.value = false
|
|
|
- }, 500)
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ walletStore.fetchBalance()
|
|
|
+ walletStore.fetchTransactions()
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|