From 4392dd4a3ee1047e6fcf4e33f8df988da50b9a41 Mon Sep 17 00:00:00 2001
From: speakeloudest <speakeloudest@gmail.com>
Date: Tue, 30 Dec 2025 02:28:09 -0800
Subject: [PATCH] =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E8=B0=83=E8=AF=95=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/user-center/DeviceList.vue    | 82 ++++++++++++++------
 src/components/user-center/PaymentMethod.vue | 23 +++---
 src/components/user-center/PlanCard.vue      |  2 +-
 src/pages/UserCenter/MobileLayout/index.vue  | 28 +++----
 src/pages/UserCenter/index.vue               | 50 +++++++++---
 5 files changed, 123 insertions(+), 62 deletions(-)

diff --git a/src/components/user-center/DeviceList.vue b/src/components/user-center/DeviceList.vue
index d37f9eb..72113eb 100644
--- a/src/components/user-center/DeviceList.vue
+++ b/src/components/user-center/DeviceList.vue
@@ -1,5 +1,28 @@
+<template>
+  <div class="grid min-h-[76px] grid-cols-2 gap-3">
+    <div
+      v-for="device in devices"
+      :key="device.id"
+      class="h-[76px] rounded-3xl border-2 p-4 text-[10px]"
+    >
+      <div class="flex items-center gap-3">
+        <component
+          :is="getDeviceTypeInfo(device.user_agent)?.iconComponent"
+          class="h-6 w-6 text-white"
+        />
+        <div class="flex flex-col overflow-hidden">
+          <span class="text-white">设备: {{ getDeviceTypeInfo(device.user_agent)?.type }}</span>
+          <span class="font-mono text-[11px] tracking-tighter uppercase"
+            >SN: {{ device?.identifier?.slice(0, 4) }}{{ device.id }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
 <script setup lang="ts">
-import { Laptop, Smartphone } from 'lucide-vue-next'
+import { Laptop, Smartphone, Tablet, Monitor, Cpu, HelpCircle } from 'lucide-vue-next'
 
 interface Device {
   id: string
@@ -11,26 +34,39 @@ interface Device {
 defineProps<{
   devices: Device[]
 }>()
+
+interface DeviceTypeInfo {
+  type: string
+  icon: string
+}
+
+/**
+ * 获取设备类型和图标
+ * @param userAgent 浏览器代理字符串
+ */
+const getDeviceTypeInfo = (userAgent: string): DeviceTypeInfo => {
+  // 转换为小写以便进行不区分大小写的匹配
+  const ua = userAgent.toLowerCase()
+
+  if (ua.includes('ipad')) {
+    return { type: 'iPad', iconComponent: Tablet }
+  }
+  if (ua.includes('iphone') || ua.includes('ios')) {
+    return { type: 'iPhone', iconComponent: Smartphone }
+  }
+  if (ua.includes('android')) {
+    return { type: 'Android', iconComponent: Smartphone }
+  }
+  if (ua.includes('mac') || ua.includes('macos')) {
+    return { type: 'Mac', iconComponent: Laptop }
+  }
+  if (ua.includes('windows')) {
+    return { type: 'Windows', iconComponent: Monitor }
+  }
+  if (ua.includes('linux')) {
+    return { type: 'Linux', iconComponent: Cpu }
+  }
+
+  return { type: 'Unknown', iconComponent: HelpCircle }
+}
 </script>
-
-<template>
-  <div class="flex items-center justify-center gap-3">
-    <div
-      v-for="device in devices"
-      :key="device.id"
-      class="h-[76px] rounded-3xl border-2 p-4 text-[10px]"
-    >
-      <div class="flex items-center gap-3">
-        <Smartphone v-if="device.type === 'mobile'" class="h-5 w-5 text-white" />
-        <Laptop v-else class="h-5 w-5 text-white" />
-
-        <div class="flex flex-col overflow-hidden">
-          <span class="text-white">设备: {{ device.name }}</span>
-          <span class="font-mono text-[11px] tracking-tighter uppercase"
-            >ID: {{ device.deviceId }}</span
-          >
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/src/components/user-center/PaymentMethod.vue b/src/components/user-center/PaymentMethod.vue
index 1b2666c..174ad53 100644
--- a/src/components/user-center/PaymentMethod.vue
+++ b/src/components/user-center/PaymentMethod.vue
@@ -1,22 +1,27 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { Button } from '@/components/ui/button'
 
 interface PaymentOption {
   label: string
-  value: number
+  value: number | string
 }
 
-const list = ref<PaymentOption[]>([
-  { label: '支付宝', value: 1 },
-  { label: '微信', value: 2 },
-  { label: '国际银行卡', value: 3 },
-])
+const props = defineProps<{
+  methods: any[]
+}>()
+
+const list = computed(() =>
+  props.methods.map((item) => ({
+    label: item.name,
+    value: item.id,
+  }))
+)
 
 // 当前选中的值，默认选中第一个
-const selectedValue = ref(1)
+const selectedValue = ref<number | string>(props.methods[0]?.id || 1)
 
-const handleSelect = (value: number) => {
+const handleSelect = (value: number | string) => {
   selectedValue.value = value
 }
 </script>
diff --git a/src/components/user-center/PlanCard.vue b/src/components/user-center/PlanCard.vue
index 5c16ddf..de447f7 100644
--- a/src/components/user-center/PlanCard.vue
+++ b/src/components/user-center/PlanCard.vue
@@ -24,7 +24,7 @@
           ]"
           class="absolute top-[20px] -right-[40px] h-[16px] w-[126px] origin-center rotate-45 bg-black text-center text-[14px] leading-[16px] font-[200] text-[#ADFF5B]"
         >
-          111 off%
+          {{ plan.discount }}
         </div>
       </div>
     </div>
diff --git a/src/pages/UserCenter/MobileLayout/index.vue b/src/pages/UserCenter/MobileLayout/index.vue
index 38cc81f..1b2b5b0 100644
--- a/src/pages/UserCenter/MobileLayout/index.vue
+++ b/src/pages/UserCenter/MobileLayout/index.vue
@@ -4,18 +4,18 @@
     <div class="mb-3 ml-[31px] flex h-[60px] items-center gap-3">
       <img src="../avatar.png" class="size-[60px]" alt="" />
       <div class="flex h-full flex-col justify-center text-white">
-        <div class="text-xl font-semibold">11emai</div>
-        <div class="text-xs">到期时间： 122222</div>
+        <div class="text-xl font-semibold">{{ userInfo.email }}</div>
+        <div class="text-xs">到期时间： {{ userInfo.expireDate }}</div>
       </div>
     </div>
 
-    <div class="mb-5 flex justify-between pr-[25px] pl-[21px] text-white">
+    <div class="mb-5 pr-[25px] pl-[21px] text-white">
       <DeviceList :devices="devices" />
     </div>
     <div class="overflow-hidden rounded-4xl bg-[#A8FF53]">
-      <PlanCard :plans="plans" :currentPlanIndex="currentPlanIndex" />
+      <PlanCard :plans="plans" :currentPlanIndex="currentPlanIndex" @select="handlePlanSelect" />
       <div class="pt-2">
-        <PaymentMethod />
+        <PaymentMethod :methods="payments" />
       </div>
     </div>
 
@@ -43,19 +43,13 @@ import PlanCard from '@/components/user-center/PlanCard.vue'
 import DeviceList from '@/components/user-center/DeviceList.vue'
 import PaymentMethod from '@/components/user-center/PaymentMethod.vue'
 import { Button } from '@/components/ui/button'
-import request from '@/utils/request'
-// --- Mock Data ---
-const devices = [
-  { id: '1', name: 'XXX的 MacBook Pro 15-inch', type: 'desktop' as const, deviceId: '87654321' },
-  { id: '2', name: 'XXX的 iPhone 15 Pro Max', type: 'mobile' as const, deviceId: '12345678' },
-]
 
-const plans = [
-  { id: 'p1', days: 7, price: 2.79, dailyPrice: '0.39' },
-  { id: 'p2', days: 30, price: 5.99, dailyPrice: '0.19', discount: '50% off' },
-  { id: 'p3', days: 90, price: 12.99, dailyPrice: '0.14', discount: '64% off' },
-  { id: 'p4', days: 365, price: 44.99, dailyPrice: '0.12', discount: '70% off', inverted: true },
-]
+const props = defineProps<{
+  devices: any[]
+  plans: any[]
+  payments: any[]
+  userInfo: { email: string; expireDate: string }
+}>()
 
 // --- State ---
 const selectedPlanId = ref('p2')
diff --git a/src/pages/UserCenter/index.vue b/src/pages/UserCenter/index.vue
index 9bc7dbf..52d9984 100644
--- a/src/pages/UserCenter/index.vue
+++ b/src/pages/UserCenter/index.vue
@@ -20,7 +20,12 @@
     </div>
     <!-- Main Neon Green Card -->
     <div class="px-[18px]">
-      <MobileLayout />
+      <MobileLayout
+        :devices="devices"
+        :plans="plans"
+        :payments="payments"
+        :user-info="userSubInfo"
+      />
     </div>
   </div>
 </template>
@@ -36,28 +41,49 @@ import request from '@/utils/request'
 const selectedPlanId = ref('p2')
 const selectedPayment = ref('alipay')
 
+const devices = ref([])
+const plans = ref([])
+const payments = ref([])
+const userSubInfo = ref({
+  email: '',
+  expireDate: '',
+})
+
 // --- Handlers ---
 const handlePlanSelect = (id: string) => {
   selectedPlanId.value = id
 }
 
-const devices = ref([])
 function init() {
   // 设备列表
-  request.get('/public/user/devices').then((res) => {
-    devices.value = res.list
+  // request.get('/public/user/devices').then((res: any) => {
+  //   devices.value =
+  //     res.list?.map((item: any) => ({
+  //       id: item.id,
+  //       name: item.user_agent || 'Unknown Device',
+  //       type: item.user_agent?.toLowerCase().includes('android') ? 'mobile' : 'desktop',
+  //       deviceId: item.id,
+  //     })) || []
+  // })
+
+  // 用户信息
+  request.get('/public/user/info').then((res: any) => {
+    const emailInfo = res.auth_methods?.find((item: any) => item.auth_type === 'email')
+    devices.value = res.user_devices
+    console.log(res.user_devices)
+
+    if (emailInfo) {
+      userSubInfo.value.email = emailInfo.auth_identifier
+    }
   })
   // 订阅详情
-  request.get('/public/subscribe/list').then((res) => {
-    console.log(222, res.list)
+  request.get('/public/subscribe/list').then((res: any) => {
+    plans.value = res.list
+    console.log(plans.value)
   })
   // 获取支付方式
-  request.get('/public/payment/methods').then((res) => {
-    console.log(33, res)
-  })
-  // 订阅列表
-  request.get('/public/subscribe/list').then((res) => {
-    console.log(44, res)
+  request.get('/public/payment/methods').then((res: any) => {
+    payments.value = res.list || []
   })
 }
 init()