147 lines
3.5 KiB
Vue
147 lines
3.5 KiB
Vue
<template>
|
||
<div class="account-balance">
|
||
<!-- 余额展示区域 -->
|
||
<div class="balance-section">
|
||
<div class="balance-title">
|
||
<span>我的金币（元）</span>
|
||
<el-tag size="small" type="primary">资产和使用</el-tag>
|
||
</div>
|
||
<div class="balance-amount">{{ userStaticInfo?.currencyCount || 0 }}</div>
|
||
<div class="balance-actions">
|
||
<el-button type="primary" @click="handlePay">充值</el-button>
|
||
<el-button>提现</el-button>
|
||
</div>
|
||
<div class="balance-tip">提示：最低提现金额：100 元，一元=10金币</div>
|
||
</div>
|
||
|
||
<!-- 交易记录区域 -->
|
||
<div class="transaction-section">
|
||
<div class="transaction-tabs">
|
||
<el-tabs v-model="activeTab">
|
||
<el-tab-pane label="充值记录" name="purchase">
|
||
<!-- 组件 -->
|
||
<PayRecords></PayRecords>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="提现管理" name="withdraw"></el-tab-pane>
|
||
</el-tabs>
|
||
<!-- <div class="date-filter">
|
||
<span>当前时期：</span>
|
||
<el-date-picker v-model="currentMonth" type="month" format="YYYY.MM" value-format="YYYY.MM" placeholder="选择月份" />
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
<!-- 充值弹窗 -->
|
||
<Pay v-if="payVisible" v-model="payVisible" @refresh="fetchUserStatistics"></Pay>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import Pay from './components/pay.vue'
|
||
import PayRecords from './components/pay-records.vue'
|
||
import { getUserStatistics } from '~/api/personal-center/index'
|
||
import type { UserStatisticsCountRespVO } from '~/api/personal-center/types'
|
||
|
||
const activeTab = ref('purchase')
|
||
// const currentMonth = ref('2025.03')
|
||
|
||
// 获取用户统计信息
|
||
const userStaticInfo = ref<UserStatisticsCountRespVO>()
|
||
const fetchUserStatistics = async () => {
|
||
const res = await getUserStatistics()
|
||
userStaticInfo.value = res.data
|
||
}
|
||
fetchUserStatistics()
|
||
|
||
const payVisible = ref(false)
|
||
const handlePay = () => {
|
||
payVisible.value = true
|
||
// router.push({ path: '/personal/trading/center' })
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.account-balance {
|
||
width: 913px;
|
||
min-height: 100vh;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.balance-section {
|
||
background: white;
|
||
padding: 20px 25px;
|
||
border-radius: 8px;
|
||
margin-bottom: 20px;
|
||
border-radius: 6px;
|
||
border: 1px solid #eeeeee;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.balance-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-bottom: 10px;
|
||
color: #666;
|
||
}
|
||
|
||
.balance-amount {
|
||
font-size: 32px;
|
||
font-weight: bold;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.balance-actions {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.balance-tip {
|
||
color: #999;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.transaction-section {
|
||
background: white;
|
||
padding: 20px 25px;
|
||
border-radius: 8px;
|
||
border-radius: 6px;
|
||
border: 1px solid #eeeeee;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.transaction-tabs {
|
||
/* display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20px; */
|
||
}
|
||
|
||
.date-filter {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
color: #666;
|
||
}
|
||
|
||
.amount {
|
||
color: #409eff;
|
||
}
|
||
|
||
.pagination {
|
||
margin-top: 20px;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
:deep(.el-pagination .el-pager li.is-active) {
|
||
background-color: #409eff;
|
||
color: white;
|
||
}
|
||
|
||
:deep(.el-input__wrapper) {
|
||
background-color: transparent;
|
||
}
|
||
</style>
|