接口对接

src/pages/UserCenter/components/SalesData/index.vue

@@ -1,3 +1,50 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { Button } from '@/components/ui/button'
+import request from '@/utils/request'
+
+defineEmits(['show-history'])
+
+const salesPage = ref({
+  total: 0,
+  list: [] as any[],
+})
+
+const loading = ref(false)
+
+async function fetchSales() {
+  loading.value = true
+  try {
+    const res: any = await request.get('/api/v1/public/user/invite/sales', {
+      page: 1,
+      size: 8,
+    })
+    salesPage.value = res
+  } catch (error) {
+    console.error('Fetch sales error:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+function formatTime(timestamp: number) {
+  if (!timestamp) return '-'
+  const date = new Date(timestamp)
+  return new Intl.DateTimeFormat('zh-CN', {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  }).format(date)
+}
+
+onMounted(() => {
+  fetchSales()
+})
+</script>
+
 <template>
   <div
     class="lucid-glass-bar flex h-full w-full flex-col rounded-4xl! border-1 border-white px-6 py-7"
@@ -5,7 +52,7 @@
     <div class="mb-[20px] flex justify-between border-b-1 border-dashed pb-4">
       <div>
         <div class="mb-1 text-xl font-bold text-white">最近销售数据</div>
-        <div class="text-sm text-white/40">本月已成交订单54人/次</div>
+        <div class="text-sm text-white/40">累计成交订单{{ salesPage.total }}人/次</div>
       </div>
       <Button
         variant="link"
@@ -17,15 +64,18 @@
     </div>
 
     <div class="flex-1 overflow-y-auto pr-1">
-      <div class="border-t border-dashed border-white/20 pt-4">
+      <div v-if="loading && salesPage.list.length === 0" class="flex h-20 items-center justify-center">
+         <div class="h-6 w-6 animate-spin rounded-full border-2 border-[#ADFF5B] border-t-transparent"></div>
+      </div>
+      <div v-else class="border-t border-dashed border-white/20 pt-4">
         <div
-          v-for="(item, index) in sales"
+          v-for="(item, index) in salesPage.list"
           :key="index"
           class="mb-5 flex items-center justify-between last:mb-0"
         >
           <div class="flex flex-col">
-            <span class="text-sm font-semibold text-white">{{ item.email }}</span>
-            <span class="text-[10px] text-white/40">{{ item.time }}</span>
+            <span class="text-sm font-semibold text-white">{{ item.user_email }}</span>
+            <span class="text-[10px] text-white/40">{{ formatTime(item.created_at) }}</span>
           </div>
           <div class="text-lg font-bold text-white tabular-nums">$ {{ item.amount }}</div>
         </div>
@@ -33,16 +83,3 @@
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-import { Button } from '@/components/ui/button'
-
-defineEmits(['show-history'])
-
-const sales = [
-  { email: '321x***.com', time: '2026/1/10 22:32', amount: '2.99' },
-  { email: 'fafax***.com', time: '2026/1/10 22:32', amount: '44.99' },
-  { email: 'kjkljl***.com', time: '2026/1/10 22:32', amount: '19.79' },
-  { email: '098f***.com', time: '2026/1/10 22:32', amount: '2.99' },
-]
-</script>