整合登录注册页面

web/src/components/UserOrder.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="user-bill" v-loading="loading" element-loading-background="rgba(255,255,255,.3)">
-    <el-row v-if="items.length > 0">
+    <!-- PC端表格 -->
+    <div class="desktop-table" v-if="items.length > 0">
       <el-table :data="items" :row-key="(row) => row.id" table-layout="auto" border>
         <el-table-column prop="order_no" label="订单号">
           <template #default="scope">
@@ -14,7 +15,7 @@
         <el-table-column prop="amount" label="订单金额" />
         <el-table-column label="订单算力">
           <template #default="scope">
-            <span>{{ scope.row.remark?.power }}</span>
+            <span>{{ scope.row.remark && scope.row.remark.power }}</span>
           </template>
         </el-table-column>
         <el-table-column prop="pay_method" label="支付渠道" />
@@ -26,17 +27,61 @@
           </template>
         </el-table-column>
       </el-table>
-    </el-row>
+    </div>
+
+    <!-- 移动端卡片列表 -->
+    <div class="mobile-cards" v-if="items.length > 0">
+      <div v-for="item in items" :key="item.id" class="order-card">
+        <div class="card-header">
+          <div class="order-no">
+            <span class="label">订单号：</span>
+            <span class="value">{{ item.order_no }}</span>
+            <el-icon class="copy-icon" :data-clipboard-text="item.order_no">
+              <DocumentCopy />
+            </el-icon>
+          </div>
+        </div>
+
+        <div class="card-content">
+          <div class="info-row">
+            <span class="label">产品名称：</span>
+            <span class="value">{{ item.subject }}</span>
+          </div>
+          <div class="info-row">
+            <span class="label">订单金额：</span>
+            <span class="value amount">￥{{ item.amount }}</span>
+          </div>
+          <div class="info-row">
+            <span class="label">订单算力：</span>
+            <span class="value">{{ (item.remark && item.remark.power) || '-' }}</span>
+          </div>
+          <div class="info-row">
+            <span class="label">支付渠道：</span>
+            <span class="value">{{ item.pay_method }}</span>
+          </div>
+          <div class="info-row">
+            <span class="label">支付名称：</span>
+            <span class="value">{{ item.pay_name }}</span>
+          </div>
+          <div class="info-row">
+            <span class="label">支付时间：</span>
+            <span class="value">{{ item['pay_time'] ? dateFormat(item['pay_time']) : '-' }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <el-empty :image-size="100" v-else :image="nodata" description="暂无数据" />
+
     <div class="pagination pb-5">
       <el-pagination
         v-if="total > 0"
         background
         layout="total,prev, pager, next"
         :hide-on-single-page="true"
-        v-model:current-page="page"
-        v-model:page-size="pageSize"
-        @current-change="fetchData()"
+        :current-page="page"
+        :page-size="pageSize"
+        @current-change="handlePageChange"
         style="--el-pagination-button-bg-color: rgba(86, 86, 95, 0.2)"
         :total="total"
       />
@@ -46,7 +91,6 @@
 
 <script setup>
 import nodata from '@/assets/img/no-data.png'
-
 import { httpGet } from '@/utils/http'
 import { dateFormat } from '@/utils/libs'
 import { DocumentCopy } from '@element-plus/icons-vue'
@@ -62,7 +106,7 @@ const loading = ref(true)
 
 onMounted(() => {
   fetchData()
-  const clipboard = new Clipboard('.copy-order-no')
+  const clipboard = new Clipboard('.copy-order-no, .copy-icon')
   clipboard.on('success', () => {
     ElMessage.success('复制成功！')
   })
@@ -88,11 +132,17 @@ const fetchData = () => {
       ElMessage.error('获取数据失败：' + e.message)
     })
 }
+
+// 处理分页变化
+const handlePageChange = (newPage) => {
+  page.value = newPage
+  fetchData()
+}
 </script>
 
 <style scoped lang="scss">
 .user-bill {
-  background-color: var(--chat-bg);
+  // background-color: var(--el-bg-color);
 
   .pagination {
     margin: 20px 0 0 0;
@@ -108,5 +158,132 @@ const fetchData = () => {
     top: 2px;
     color: #20a0ff;
   }
+
+  // 移动端卡片样式
+  .mobile-cards {
+    display: none;
+
+    .order-card {
+      background: transparent;
+      border-radius: 12px;
+      padding: 16px;
+      margin-bottom: 16px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+      border: 1px solid var(--el-border-color-light);
+      background: var(--van-cell-background);
+
+      .card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 12px;
+        padding-bottom: 12px;
+        border-bottom: 1px solid var(--el-border-color-lighter);
+
+        .order-no {
+          display: flex;
+          align-items: center;
+          flex: 1;
+          margin-right: 12px;
+
+          .label {
+            font-size: 14px;
+            color: var(--el-text-color-regular);
+            margin-right: 4px;
+          }
+
+          .value {
+            font-size: 14px;
+            color: var(--el-text-color-primary);
+            font-weight: 500;
+            margin-right: 8px;
+          }
+
+          .copy-icon {
+            cursor: pointer;
+            color: #20a0ff;
+            font-size: 16px;
+          }
+        }
+
+        .order-status {
+          flex-shrink: 0;
+        }
+      }
+
+      .card-content {
+        .info-row {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 8px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+
+          .label {
+            font-size: 14px;
+            color: var(--el-text-color-regular);
+            flex-shrink: 0;
+            margin-right: 8px;
+          }
+
+          .value {
+            font-size: 14px;
+            color: var(--el-text-color-primary);
+            text-align: right;
+            word-break: break-all;
+
+            &.amount {
+              font-weight: 600;
+              color: #ff6b35;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .user-bill {
+    .desktop-table {
+      display: none;
+    }
+
+    .mobile-cards {
+      display: block;
+    }
+
+    .pagination {
+      :deep(.el-pagination) {
+        .el-pagination__total {
+          display: none;
+        }
+
+        .el-pager {
+          li {
+            min-width: 32px;
+            height: 32px;
+            line-height: 32px;
+            font-size: 12px;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 深色主题适配
+:deep(.van-theme-dark) {
+  .user-bill {
+    .mobile-cards .order-card {
+      background: transparent;
+      border-color: var(--el-border-color);
+      box-shadow: none;
+    }
+  }
 }
 </style>