Update API request formatting and routing structure

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

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