接口调试用户信息

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')

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()