整合登录注册页面

web/src/components/BindEmail.vue

@@ -1,37 +1,26 @@
 <template>
-  <el-dialog
-    v-model="showDialog"
-    :close-on-click-modal="true"
-    style="max-width: 400px"
-    @close="close"
-    :title="title"
-  >
-    <div class="form">
-      <div class="text-center" v-if="email !== ''">当前已绑定邮箱：{{ email }}</div>
-
-      <el-form label-position="top">
-        <el-form-item label="邮箱地址">
-          <el-input v-model="form.email" />
-        </el-form-item>
-        <el-form-item label="验证码">
-          <el-row :gutter="0">
-            <el-col :span="16">
-              <el-input v-model="form.code" maxlength="6" />
-            </el-col>
-            <el-col :span="8" style="padding-left: 10px">
-              <send-msg :receiver="form.email" type="email" />
-            </el-col>
-          </el-row>
-        </el-form-item>
-      </el-form>
+  <div class="form">
+    <div class="text-center" v-if="email !== ''">当前已绑定邮箱：{{ email }}</div>
+    <el-form label-position="top">
+      <el-form-item label="邮箱地址">
+        <el-input v-model="form.email" />
+      </el-form-item>
+      <el-form-item label="验证码">
+        <el-row :gutter="0">
+          <el-col :span="16">
+            <el-input v-model="form.code" maxlength="6" />
+          </el-col>
+          <el-col :span="8" style="padding-left: 10px">
+            <send-msg :receiver="form.email" type="email" />
+          </el-col>
+        </el-row>
+      </el-form-item>
+    </el-form>
+    <div class="dialog-footer text-center">
+      <el-button type="primary" @click="save"> 保存 </el-button>
+      <el-button @click="emits('hide')"> 取消 </el-button>
     </div>
-
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button type="primary" @click="save"> 提交绑定 </el-button>
-      </span>
-    </template>
-  </el-dialog>
+  </div>
 </template>
 
 <script setup>
@@ -39,31 +28,18 @@ import SendMsg from '@/components/SendMsg.vue'
 import { checkSession } from '@/store/cache'
 import { httpPost } from '@/utils/http'
 import { ElMessage } from 'element-plus'
-import { computed, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 
-const props = defineProps({
-  show: Boolean,
-})
-
-const showDialog = computed(() => {
-  return props.show
-})
-
-const title = ref('绑定邮箱')
 const email = ref('')
 const form = ref({
   email: '',
   code: '',
 })
 
-watch(showDialog, (val) => {
-  if (val) {
-    form.value.code = ''
-    form.value.email = ''
-    checkSession().then((user) => {
-      email.value = user.email
-    })
-  }
+onMounted(() => {
+  checkSession().then((user) => {
+    email.value = user.email
+  })
 })
 
 const emits = defineEmits(['hide'])
@@ -82,10 +58,6 @@ const save = () => {
       ElMessage.error('绑定失败：' + e.message)
     })
 }
-
-const close = function () {
-  emits('hide')
-}
 </script>
 
 <style lang="scss" scoped>

web/src/components/BindMobile.vue

@@ -1,37 +1,26 @@
 <template>
-  <el-dialog
-    v-model="showDialog"
-    :close-on-click-modal="true"
-    style="max-width: 400px"
-    @close="close"
-    :title="title"
-  >
-    <div class="form">
-      <div class="text-center" v-if="mobile !== ''">当前已绑手机号：{{ mobile }}</div>
-
-      <el-form label-position="top">
-        <el-form-item label="手机号">
-          <el-input v-model="form.mobile" />
-        </el-form-item>
-        <el-form-item label="验证码">
-          <el-row :gutter="0">
-            <el-col :span="16">
-              <el-input v-model="form.code" maxlength="6" />
-            </el-col>
-            <el-col :span="8" style="padding-left: 10px">
-              <send-msg :receiver="form.mobile" size="default" type="mobile" />
-            </el-col>
-          </el-row>
-        </el-form-item>
-      </el-form>
+  <div class="form">
+    <div class="text-center" v-if="mobile !== ''">当前已绑手机号：{{ mobile }}</div>
+    <el-form label-position="top">
+      <el-form-item label="手机号">
+        <el-input v-model="form.mobile" />
+      </el-form-item>
+      <el-form-item label="验证码">
+        <el-row :gutter="0">
+          <el-col :span="16">
+            <el-input v-model="form.code" maxlength="6" />
+          </el-col>
+          <el-col :span="8" style="padding-left: 10px">
+            <send-msg :receiver="form.mobile" size="default" type="mobile" />
+          </el-col>
+        </el-row>
+      </el-form-item>
+    </el-form>
+    <div class="dialog-footer text-center">
+      <el-button type="primary" @click="save"> 保存 </el-button>
+      <el-button @click="emits('hide')"> 取消 </el-button>
     </div>
-
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button type="primary" @click="save"> 提交绑定 </el-button>
-      </span>
-    </template>
-  </el-dialog>
+  </div>
 </template>
 
 <script setup>
@@ -39,34 +28,18 @@ import SendMsg from '@/components/SendMsg.vue'
 import { checkSession } from '@/store/cache'
 import { httpPost } from '@/utils/http'
 import { ElMessage } from 'element-plus'
-import { computed, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 
-const props = defineProps({
-  show: Boolean,
-})
-
-const showDialog = computed(() => {
-  return props.show
-})
-
-const title = ref('绑定手机')
 const mobile = ref('')
 const form = ref({
   mobile: '',
   code: '',
 })
 
-watch(showDialog, (val) => {
-  if (val) {
-    form.value = {
-      mobile: '',
-      code: '',
-    }
-
-    checkSession().then((user) => {
-      mobile.value = user.mobile
-    })
-  }
+onMounted(() => {
+  checkSession().then((user) => {
+    mobile.value = user.mobile
+  })
 })
 
 const emits = defineEmits(['hide'])
@@ -85,10 +58,6 @@ const save = () => {
       ElMessage.error('绑定失败：' + e.message)
     })
 }
-
-const close = function () {
-  emits('hide')
-}
 </script>
 
 <style lang="scss" scoped>

web/src/components/RedeemVerify.vue

@@ -1,42 +1,22 @@
 <template>
-  <el-dialog
-    v-model="showDialog"
-    :close-on-click-modal="true"
-    :before-close="close"
-    :width="450"
-    :title="title"
-  >
-    <div class="form" id="bind-mobile-form">
-      <el-form :model="form">
-        <el-form-item>
-          <el-input v-model="form.code" />
-        </el-form-item>
-      </el-form>
+  <div class="form" id="redeem-form">
+    <el-form :model="form">
+      <el-form-item>
+        <el-input v-model="form.code" placeholder="请输入兑换码" />
+      </el-form-item>
+    </el-form>
+    <div class="dialog-footer">
+      <el-button type="primary" @click="save">兑换</el-button>
+      <el-button @click="emits('hide')">取消</el-button>
     </div>
-
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button type="primary" @click="save"> 立即兑换 </el-button>
-      </span>
-    </template>
-  </el-dialog>
+  </div>
 </template>
 
 <script setup>
-import { showMessageError, showMessageOK } from '@/utils/dialog'
+import { showMessageError, showMessageInfo, showMessageOK } from '@/utils/dialog'
 import { httpPost } from '@/utils/http'
-import { ElMessage } from 'element-plus'
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 
-const props = defineProps({
-  show: Boolean,
-})
-
-const showDialog = computed(() => {
-  return props.show
-})
-
-const title = ref('兑换码核销')
 const form = ref({
   code: '',
 })
@@ -45,7 +25,7 @@ const emits = defineEmits(['hide'])
 
 const save = () => {
   if (form.value.code === '') {
-    return ElMessage.error({ message: '请输入兑换码' })
+    return showMessageInfo('请输入兑换码')
   }
 
   httpPost('/api/redeem/verify', form.value)
@@ -57,10 +37,23 @@ const save = () => {
       showMessageError('兑换失败：' + e.message)
     })
 }
-
-const close = function () {
-  emits('hide', false)
-}
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.form {
+  padding: 20px;
+
+  .form-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--el-text-color-primary);
+    margin-bottom: 20px;
+    text-align: center;
+  }
+
+  .dialog-footer {
+    text-align: center;
+    margin-top: 20px;
+  }
+}
+</style>

web/src/components/ThirdLogin.vue

@@ -1,94 +0,0 @@
-<template>
-  <el-dialog
-    v-model="showDialog"
-    :close-on-click-modal="true"
-    style="max-width: 400px"
-    @close="close"
-    :title="title"
-  >
-    <div class="third-login" v-loading="loading">
-      <div class="item" v-if="wechatBindURL !== ''">
-        <a class="link" :href="wechatBindURL"><i class="iconfont icon-wechat"></i></a>
-        <span class="text ok" v-if="openid !== ''">已绑定</span>
-        <span class="text" v-else>未绑定</span>
-      </div>
-    </div>
-  </el-dialog>
-</template>
-
-<script setup>
-import { checkSession } from '@/store/cache'
-import { showMessageError } from '@/utils/dialog'
-import { httpGet } from '@/utils/http'
-import { computed, ref, watch } from 'vue'
-
-const props = defineProps({
-  show: Boolean,
-})
-const emits = defineEmits(['hide'])
-
-const showDialog = computed(() => {
-  return props.show
-})
-
-const title = ref('绑定第三方登录')
-const openid = ref('')
-const wechatBindURL = ref('')
-const loading = ref(true)
-
-watch(showDialog, (val) => {
-  if (val) {
-    checkSession().then((user) => {
-      openid.value = user.openid
-    })
-    const returnURL = `${location.protocol}//${location.host}/login/callback?action=bind`
-    httpGet('/api/user/clogin?return_url=' + returnURL)
-      .then((res) => {
-        wechatBindURL.value = res.data.url
-        loading.value = false
-      })
-      .catch((e) => {
-        showMessageError(e.message)
-      })
-  }
-})
-
-const close = function () {
-  emits('hide')
-}
-</script>
-
-<style lang="scss" scoped>
-.third-login {
-  display: flex;
-  justify-content: center;
-  min-height: 100px;
-
-  .item {
-    display: flex;
-    flex-flow: column;
-    align-items: center;
-
-    .link {
-      display: flex;
-      .iconfont {
-        font-size: 30px;
-        cursor: pointer;
-        background: #e9f1f6;
-        padding: 10px;
-        border-radius: 50%;
-      }
-      margin-bottom: 10px;
-    }
-
-    .text {
-      font-size: 14px;
-    }
-
-    .icon-wechat,
-    .ok {
-      color: #0bc15f;
-    }
-  }
-}
-</style>

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>