front-pc/pages/personal-Center/index/trading-center.vue

<template>
  <div class="account-balance">
    <!-- 余额展示区域 -->
    <div class="balance-section flex h-206px!">
      <div>
        <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 type="danger" @click="handleWithdraw">提现</el-button>
          <el-button type="warning">兑换</el-button>
        </div>
        <div class="balance-tip">提示：最低提现金额：100 元，一元=10金币</div>
      </div>
      <el-divider direction="vertical" class="h-100%! mx-30px!" border-style="dashed"></el-divider>
      <div>
        <div class="balance-title">
          <span>我的收益</span>
          <el-tag size="small" type="primary">收益金币数额展示</el-tag>
        </div>
        <div class="balance-amount">{{ userStaticInfo?.revenueBalance || 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>
    <!-- 广告海报swiper -->
    <el-carousel height="150px" class="rounded-[8px] rounded-[6px] border border-solid border-[#eeeeee] box-borders mb-20px">
      <el-carousel-item>
        <el-image src="https://static.tuxixi.net/tuxixi_banner3.png" alt="" class="w-100%" fit="contain" />
      </el-carousel-item>
      <el-carousel-item>
        <el-image src="https://static.tuxixi.net/tuxixi_banner2.jpg" alt="" class="w-100%" fit="cover" />
      </el-carousel-item>
    </el-carousel>

    <!-- 交易记录区域 -->
    <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">
            <div class="text-center color-#999 pa-10px">暂无数据</div>
          </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>
    <!-- 提示 -->
    <div class="color-red pa-10px text-13px">
      温馨提示：交易未到账紧急联系客服,金币为虚拟积分不支持退款,但支持高额手续费提现，抵制恶性充值提现操作，金币使用没有时间限制,平台作品交易仅供学习参考,用于商业用途请与原作者联系!
    </div>
    <!-- 充值弹窗 -->
    <Pay v-if="payVisible" v-model="payVisible" @refresh="fetchUserStatistics"></Pay>
    <!-- 提现弹窗 -->
    <Withdraw v-if="withdrawVisible" v-model="withdrawVisible"></Withdraw>
  </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' })
  }

  const withdrawVisible = ref(false)
  const handleWithdraw = () => {
    withdrawVisible.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>