接口调试用户信息

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>

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>

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>