体现

src/views/admin/account/cost/exchange/index.vue

@@ -8,22 +8,13 @@
       <a-breadcrumb-item>算力点兑换</a-breadcrumb-item>
     </a-breadcrumb>
 
-    <!-- 页面标题 -->
-    <div class="page-header">
-      <h1 class="page-title">算力点兑换</h1>
-      <p class="page-description">使用余额兑换算力点，提升计算能力</p>
-    </div>
 
-    <!-- 主要内容区域 -->
-    <div class="main-content">
     <!-- 余额卡片 -->
     <a-card class="balance-card" :bordered="false">
       <div class="balance-info">
         <div class="balance-item">
           <div class="balance-label">
-              <span class="icon-wrapper">
+
-                <DollarCircleOutlined />
-              </span>
             <span class="label-text">我的余额</span>
           </div>
           <div class="balance-value">
@@ -33,42 +24,31 @@
         </div>
         <div class="balance-item">
           <div class="balance-label">
-              <span class="icon-wrapper">
+
-                <ThunderboltOutlined />
+            <span class="label-text">算力点</span>
-              </span>
-              <span class="label-text">当前算力点</span>
           </div>
           <div class="balance-value">
             <span class="points">{{ formatPoints(points) }}</span>
-              <span class="points-unit">算力点</span>
+
           </div>
         </div>
       </div>
-        <div class="balance-tips">
+
-          <InfoCircleOutlined />
-          <span>余额可用于兑换算力点，算力点可用于平台计算服务</span>
-        </div>
     </a-card>
 
+
     <!-- 兑换卡片 -->
     <a-card class="exchange-card" title="兑换算力点">
       <div class="exchange-content">
         <!-- 兑换金额选择 -->
         <div class="exchange-section">
-            <h3 class="section-title">选择兑换金额</h3>
-            <p class="section-subtitle">请选择或输入要兑换的金额</p>
-            
           <div class="amount-options">
-              <a-button
+            <div class="section-title">选择兑换金额</div>
-                v-for="option in amountOptions"
+            <a-button v-for="option in amountOptions" :key="option.value"
-                :key="option.value"
               :class="['amount-option', { 'selected': selectedAmount === option.value }]"
-                @click="selectAmount(option.value)"
+              @click="selectAmount(option.value)" size="large">
-                size="large"
-              >
               <div class="amount-option-content">
-                  <div class="amount-number">¥{{ option.value }}</div>
+                <div class="amount-number">{{ option.value }}</div>
-                  <div class="amount-points">= {{ option.value }} 算力点</div>
               </div>
             </a-button>
           </div>
@@ -76,24 +56,14 @@
           <!-- 自定义输入 -->
           <div class="custom-amount">
             <a-input-group compact>
-                <a-input
+              <a-input v-model:value="customAmount" placeholder="输入其他金额" size="large" style="width: calc(100% - 120px)"
-                  v-model:value="customAmount"
+                @change="handleCustomAmountChange" :disabled="loading" />
-                  placeholder="输入其他金额"
+              <!-- <a-button type="primary" size="large" style="width: 120px" :disabled="!isCustomAmountValid || loading"
-                  size="large"
+                @click="handleCustomAmountConfirm">
-                  style="width: calc(100% - 120px)"
-                  @change="handleCustomAmountChange"
-                  :disabled="loading"
-                />
-                <a-button
-                  type="primary"
-                  size="large"
-                  style="width: 120px"
-                  :disabled="!isCustomAmountValid || loading"
-                  @click="handleCustomAmountConfirm"
-                >
                 确认
-                </a-button>
+              </a-button> -->
             </a-input-group>
+            <p class="input-name">用户自定义输入算力点数量</p>
             <div v-if="customAmountError" class="error-text">
               <ExclamationCircleOutlined />
               {{ customAmountError }}
@@ -148,7 +118,8 @@
               </div>
               <div class="preview-item">
                 <span class="preview-label">兑换后算力点：</span>
-                  <span class="preview-value points-value">{{ formatPoints(points + selectedExchangeAmount) }} 算力点</span>
+                <span class="preview-value points-value">{{ formatPoints(points + selectedExchangeAmount) }}
+                  算力点</span>
               </div>
             </div>
           </div>
@@ -167,38 +138,48 @@
 
         <!-- 操作按钮 -->
         <div class="action-buttons">
-            <a-button
+          <a-button type="primary" size="large" :loading="loading" :disabled="!canExchange" @click="handleExchange"
-              type="primary"
+            class="exchange-button">
-              size="large"
+            <template #icon>
-              :loading="loading"
+              <ThunderboltOutlined />
-              :disabled="!canExchange"
+            </template>
-              @click="handleExchange"
-              class="exchange-button"
-            >
-              <template #icon><ThunderboltOutlined /></template>
             确认兑换
           </a-button>
-            <a-button
+          <a-button size="large" @click="handleCancel" :disabled="loading" class="cancel-button">
-              size="large"
-              @click="handleCancel"
-              :disabled="loading"
-              class="cancel-button"
-            >
             取消
           </a-button>
         </div>
       </div>
     </a-card>
 
+    <!-- 主要内容区域 -->
+    <div class="main-content">
+      <a-card class="history-card" title="算力点兑换历史">
+        <a-table :columns="historyColumns" :data-source="exchangeHistory" row-key="key" :pagination="false">
+          <!-- 自定义状态列的渲染 -->
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'status'">
+              <span :style="{ color: getStatusColor(record.status) }">{{ getStatusText(record.status) }}</span>
+            </template>
+            <template v-else-if="column.key === 'amount' || column.key === 'points'">
+              <span>{{ formatCurrency(record.amount) }}</span>
+            </template>
+            <template v-else>
+              {{ record[column.dataIndex] }}
+            </template>
+          </template>
+        </a-table>
+      </a-card>
+
+
+
+
+
+
     </div>
 
     <!-- 用户协议模态框 -->
-    <a-modal
+    <a-modal v-model:visible="agreementModalVisible" title="用户协议" width="800px" :footer="null">
-      v-model:visible="agreementModalVisible"
-      title="用户协议"
-      width="800px"
-      :footer="null"
-    >
       <div class="agreement-content">
         <h3>算力点兑换服务协议</h3>
         <p>欢迎使用算力点兑换服务。在兑换算力点前，请您仔细阅读以下协议内容：</p>
@@ -221,11 +202,7 @@
           <a-checkbox v-model:checked="modalAgreementChecked">
             我已阅读并同意以上协议
           </a-checkbox>
-          <a-button
+          <a-button type="primary" @click="handleAgreementConfirm" :disabled="!modalAgreementChecked">
-            type="primary"
-            @click="handleAgreementConfirm"
-            :disabled="!modalAgreementChecked"
-          >
             确认并关闭
           </a-button>
         </div>
@@ -235,7 +212,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, computed, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import {
   DollarCircleOutlined,
   ThunderboltOutlined,
@@ -245,47 +222,21 @@ import {
   SafetyOutlined,
   CloseOutlined
 } from '@ant-design/icons-vue'
-import { message, Modal } from 'ant-design-vue'
+import { message, Modal, Divider } from 'ant-design-vue'
 
 // 用户余额和算力点
-const balance = ref(3568.50)
+const balance = ref(3568.5)
 const points = ref(1250)
 
 // 金额选项
 const amountOptions = ref([
-  { value: 100, label: '100元' },
+  { value: 100, label: '100' },
-  { value: 200, label: '200元' },
+  { value: 200, label: '200' },
-  { value: 500, label: '500元' },
+  { value: 1000, label: '1000' },
-  { value: 1000, label: '1000元' },
+  { value: 5000, label: '5000' }
-  { value: 2000, label: '2000元' },
-  { value: 5000, label: '5000元' }
-])
-
-// 选择的金额
-const selectedAmount = ref(0)
-const customAmount = ref('')
-const customAmountError = ref('')
-
-// 用户协议确认
-const agreementChecked = ref(false)
-const showAgreementError = ref(false)
-
-// 加载状态
-const loading = ref(false)
-
-// 模态框
-const agreementModalVisible = ref(false)
-const modalAgreementChecked = ref(false)
-
-// 兑换记录
-const exchangeHistory = ref([
-  { key: 1, amount: 1000, points: 1000, time: '2024-03-15 14:30:22', status: 'success' },
-  { key: 2, amount: 500, points: 500, time: '2024-03-10 09:15:45', status: 'success' },
-  { key: 3, amount: 2000, points: 2000, time: '2024-03-05 16:20:33', status: 'success' },
-  { key: 4, amount: 100, points: 100, time: '2024-02-28 11:45:12', status: 'success' },
-  { key: 5, amount: 5000, points: 5000, time: '2024-02-20 13:05:27', status: 'success' }
 ])
 
+// 注意：这里只定义 columns 结构，不包含 customRender
 const historyColumns = [
   {
     title: '兑换金额',
@@ -312,6 +263,31 @@ const historyColumns = [
   }
 ]
 
+// 选择的金额
+const selectedAmount = ref(0)
+const customAmount = ref('')
+const customAmountError = ref('')
+
+// 用户协议确认
+const agreementChecked = ref(false)
+const showAgreementError = ref(false)
+
+// 加载状态
+const loading = ref(false)
+
+// 模态框
+const agreementModalVisible = ref(false)
+const modalAgreementChecked = ref(false)
+
+// 兑换记录
+const exchangeHistory = ref([
+  { key: 1, amount: 1000, points: 1000, time: '2024-03-15 14:30:22', status: 'success' },
+  { key: 2, amount: 500, points: 500, time: '2024-03-10 09:15:45', status: 'success' },
+  { key: 3, amount: 2000, points: 2000, time: '2024-03-05 16:20:33', status: 'success' },
+  { key: 4, amount: 100, points: 100, time: '2024-02-28 11:45:12', status: 'success' },
+  { key: 5, amount: 5000, points: 5000, time: '2024-02-20 13:05:27', status: 'success' }
+])
+
 // 计算选中的兑换金额
 const selectedExchangeAmount = computed(() => {
   if (selectedAmount.value > 0) {
@@ -447,11 +423,9 @@ const performExchange = () => {
 
   // 模拟API请求
   setTimeout(() => {
-    // 更新余额和算力点
     balance.value -= selectedExchangeAmount.value
     points.value += selectedExchangeAmount.value
 
-    // 添加兑换记录
     const now = new Date()
     const timeStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`
 
@@ -463,10 +437,8 @@ const performExchange = () => {
       status: 'success'
     })
 
-    // 重置选择
     clearSelection()
     agreementChecked.value = false
-    
     loading.value = false
 
     message.success(`兑换成功！获得 ${selectedExchangeAmount.value} 算力点`)
@@ -480,11 +452,6 @@ const handleCancel = () => {
   showAgreementError.value = false
 }
 
-// 格式化时间
-const formatTime = (timeStr) => {
-  return timeStr
-}
-
 // 获取状态颜色
 const getStatusColor = (status) => {
   const colors = {
@@ -505,14 +472,13 @@ const getStatusText = (status) => {
   return texts[status] || status
 }
 
-// 初始化加载
 onMounted(() => {
-  // 可以在这里加载用户余额和算力点数据
   console.log('页面加载完成')
 })
 </script>
 
 <style scoped>
+/* 你的样式保持不变 */
 .points-exchange-page {
   padding: 20px;
   background-color: #f0f2f5;
@@ -540,10 +506,7 @@ onMounted(() => {
   margin: 0;
 }
 
-.main-content {
+.main-content {}
-  max-width: 1200px;
-  margin: 0 auto;
-}
 
 .balance-card {
   margin-bottom: 20px;
@@ -581,24 +544,25 @@ onMounted(() => {
 }
 
 .label-text {
-  font-size: 14px;
+  font-size: 20px;
-  color: rgba(0, 0, 0, 0.45);
+  font-weight: 500;
+  color: rgba(56, 56, 56, 1);
 }
 
 .balance-value {
-  font-size: 28px;
+  font-size: 18px;
   font-weight: 600;
   color: rgba(0, 0, 0, 0.85);
 }
 
 .balance-value .currency {
   font-size: 20px;
-  color: #52c41a;
+  color: rgba(56, 56, 56, 1);
   margin-right: 4px;
 }
 
 .balance-value .points {
-  color: #722ed1;
+  color: rgba(56, 56, 56, 1);
 }
 
 .balance-value .points-unit {
@@ -648,8 +612,8 @@ onMounted(() => {
 
 .amount-options {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(8, 1fr);
-  gap: 16px;
+  gap: 6px;
   margin-bottom: 24px;
 }
 
@@ -661,7 +625,7 @@ onMounted(() => {
 
 .amount-option {
   height: auto !important;
-  padding: 16px !important;
+  /* padding: 6px !important; */
   border-radius: 8px !important;
   border: 2px solid #f0f0f0 !important;
   background: #fff !important;
@@ -696,7 +660,24 @@ onMounted(() => {
 }
 
 .custom-amount {
+  width: 460px;
   margin-bottom: 24px;
+  margin-left: 170px;
+
+  input {
+    height: 45px;
+  }
+
+  .input-name {
+    width: 350px;
+    text-align: center;
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(166, 166, 166, 1);
+    height: 35px;
+    line-height: 35px;
+  }
+
 }
 
 .error-text {
@@ -888,7 +869,6 @@ onMounted(() => {
   border-top: 1px solid #f0f0f0;
 }
 
-/* 加载状态 */
 :deep(.ant-btn-loading) {
   opacity: 0.8;
 }