From 3be2362610e4ff5aba18d1964f7961c3353c2ccb Mon Sep 17 00:00:00 2001
From: Seven <qiqiwatermelon@gmail.com>
Date: Sun, 18 Jan 2026 17:38:40 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=9B=A2=E9=98=9F?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=EF=BC=8C=E6=94=AF=E6=8C=81=E5=9B=A2=E9=98=9F?=
 =?UTF-8?q?=E6=88=90=E5=91=98=E7=BB=9F=E8=AE=A1=E5=92=8C=E5=88=86=E9=A1=B5?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts          |   4 +
 src/router/index.ts      |   5 +
 src/views/home/index.vue |   2 +-
 src/views/team/index.vue | 576 +++++++++++++++++++++++++++++++++++++++
 4 files changed, 586 insertions(+), 1 deletion(-)
 create mode 100644 src/views/team/index.vue

diff --git a/components.d.ts b/components.d.ts
index 0ed2f86..4d3bec8 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -32,6 +32,8 @@ declare module 'vue' {
     IonList: typeof import('@ionic/vue')['IonList']
     IonPage: typeof import('@ionic/vue')['IonPage']
     IonRouterOutlet: typeof import('@ionic/vue')['IonRouterOutlet']
+    IonSegment: typeof import('@ionic/vue')['IonSegment']
+    IonSegmentButton: typeof import('@ionic/vue')['IonSegmentButton']
     IonSpinner: typeof import('@ionic/vue')['IonSpinner']
     IonTabBar: typeof import('@ionic/vue')['IonTabBar']
     IonTabButton: typeof import('@ionic/vue')['IonTabButton']
@@ -68,6 +70,8 @@ declare global {
   const IonList: typeof import('@ionic/vue')['IonList']
   const IonPage: typeof import('@ionic/vue')['IonPage']
   const IonRouterOutlet: typeof import('@ionic/vue')['IonRouterOutlet']
+  const IonSegment: typeof import('@ionic/vue')['IonSegment']
+  const IonSegmentButton: typeof import('@ionic/vue')['IonSegmentButton']
   const IonSpinner: typeof import('@ionic/vue')['IonSpinner']
   const IonTabBar: typeof import('@ionic/vue')['IonTabBar']
   const IonTabButton: typeof import('@ionic/vue')['IonTabButton']
diff --git a/src/router/index.ts b/src/router/index.ts
index d183e74..fdadc42 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -109,6 +109,11 @@ const routes: Array<RouteRecordRaw> = [
     component: () => import("@/views/recharge/records.vue"),
     meta: { requiresAuth: true },
   },
+  {
+    path: "/team",
+    component: () => import("@/views/team/index.vue"),
+    meta: { requiresAuth: true },
+  },
 ];
 
 const router = createRouter({
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 7cd3d87..7d0040a 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -91,7 +91,7 @@ function handleQuickAction(action: Action) {
       router.push("/check_in");
       break;
     case "team":
-      console.log("团队中心");
+      router.push("/team");
       break;
     case "invite":
       router.push("/invite");
diff --git a/src/views/team/index.vue b/src/views/team/index.vue
new file mode 100644
index 0000000..69c0d1b
--- /dev/null
+++ b/src/views/team/index.vue
@@ -0,0 +1,576 @@
+<script lang='ts' setup>
+import { peopleOutline, trendingUpOutline, walletOutline } from "ionicons/icons";
+import { client, safeClient } from "@/api";
+
+const [depth1Query] = useResetRef({
+  depth: 1,
+  pageIndex: 1,
+  pageSize: 10,
+});
+const [depth2Query] = useResetRef({
+  depth: 2,
+  pageIndex: 1,
+  pageSize: 10,
+});
+const [depth3Query] = useResetRef({
+  depth: 3,
+  pageIndex: 1,
+  pageSize: 10,
+});
+// 统计数据
+const { data: statistics } = safeClient(client.api.team.stats.get({ query: { currentTime: new Date().toISOString() } }));
+const { data: depth1, execute: executeDepth1 } = safeClient(() => client.api.team.members.get({ query: { ...depth1Query.value } }));
+const { data: depth2, execute: executeDepth2 } = safeClient(() => client.api.team.members.get({ query: { ...depth2Query.value } }));
+const { data: depth3, execute: executeDepth3 } = safeClient(() => client.api.team.members.get({ query: { ...depth3Query.value } }));
+
+// 当前选中的级别
+const selectedLevel = ref<1 | 2 | 3>(1);
+
+// 获取当前级别对应的数据源和执行函数
+const currentData = computed(() => {
+  switch (selectedLevel.value) {
+    case 1:
+      return depth1;
+    case 2:
+      return depth2;
+    case 3:
+      return depth3;
+    default:
+      return depth1;
+  }
+});
+
+const currentExecute = computed(() => {
+  switch (selectedLevel.value) {
+    case 1:
+      return executeDepth1;
+    case 2:
+      return executeDepth2;
+    case 3:
+      return executeDepth3;
+    default:
+      return executeDepth1;
+  }
+});
+
+const currentQuery = computed(() => {
+  switch (selectedLevel.value) {
+    case 1:
+      return depth1Query;
+    case 2:
+      return depth2Query;
+    case 3:
+      return depth3Query;
+    default:
+      return depth1Query;
+  }
+});
+
+// 当前级别的团队成员列表（API返回的已分页数据）
+const filteredMembers = computed(() => {
+  return currentData.value.value?.data || [];
+});
+
+// 全部成员数量
+const totalMembers = computed(() => {
+  return currentData.value.value?.pagination.total || 0;
+});
+
+// 总页数
+const totalPages = computed(() => {
+  return Math.ceil(totalMembers.value / currentQuery.value.value.pageSize);
+});
+
+// 当前页码
+const currentPage = computed(() => {
+  return currentQuery.value.value.pageIndex;
+});
+
+function handleLevelChange(event: CustomEvent) {
+  selectedLevel.value = event.detail.value;
+  // 切换级别时重置到第一页
+  currentQuery.value.value.pageIndex = 1;
+  currentExecute.value();
+}
+
+async function goToPage(page: number) {
+  if (page >= 1 && page <= totalPages.value) {
+    currentQuery.value.value.pageIndex = page;
+    await currentExecute.value();
+  }
+}
+
+function prevPage() {
+  goToPage(currentPage.value - 1);
+}
+
+function nextPage() {
+  goToPage(currentPage.value + 1);
+}
+</script>
+
+<template>
+  <ion-page>
+    <ion-header class="ion-no-border">
+      <ion-toolbar class="ion-toolbar">
+        <ion-buttons slot="start">
+          <back-button />
+        </ion-buttons>
+        <ion-title>我的团队</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <!-- 团队人数统计 -->
+      <div class="stats-section">
+        <div class="section-title">
+          <ion-icon :icon="peopleOutline" class="title-icon" />
+          <span>团队规模</span>
+        </div>
+        <div class="team-size-card">
+          <div class="team-total">
+            <div class="total-value">
+              {{ statistics?.totalCount }}
+            </div>
+            <div class="total-label">
+              团队总人数
+            </div>
+          </div>
+          <div class="team-growth">
+            <div class="growth-item">
+              <span class="growth-label">今日新增</span>
+              <span class="growth-value">{{ statistics?.todayCount }}</span>
+            </div>
+            <div class="growth-item">
+              <span class="growth-label">昨日新增</span>
+              <span class="growth-value">{{ statistics?.yesterdayCount }}</span>
+            </div>
+            <div class="growth-item">
+              <span class="growth-label">本月新增</span>
+              <span class="growth-value">{{ statistics?.monthCount }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 助力统计 -->
+      <div class="stats-section">
+        <div class="section-title">
+          <ion-icon :icon="trendingUpOutline" class="title-icon" />
+          <span>团队助力</span>
+        </div>
+        <div class="unified-card">
+          <div class="unified-left">
+            <div class="unified-value">
+              ¥{{ statistics?.totalSupport.toFixed(2) }}
+            </div>
+            <div class="unified-label">
+              团队总助力
+            </div>
+          </div>
+          <div class="unified-right">
+            <div class="unified-item">
+              <span class="unified-item-label">本月助力</span>
+              <span class="unified-item-value">¥{{ statistics?.monthSupport.toFixed(2) }}</span>
+            </div>
+            <div class="unified-item">
+              <span class="unified-item-label">较上月</span>
+              <span class="unified-item-value" :class="supportChange.isPositive ? 'success' : 'danger'">
+                {{ supportChange.isPositive ? '+' : '' }}{{ supportChange.percent }}%
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 收益统计 -->
+      <div class="stats-section">
+        <div class="section-title">
+          <ion-icon :icon="walletOutline" class="title-icon" />
+          <span>团队收益</span>
+        </div>
+        <div class="unified-card">
+          <div class="unified-left">
+            <div class="unified-value">
+              ¥{{ statistics.todayIncome.toFixed(2) }}
+            </div>
+            <div class="unified-label">
+              今日收益
+            </div>
+          </div>
+          <div class="unified-right">
+            <div class="unified-item">
+              <span class="unified-item-label">本周收益</span>
+              <span class="unified-item-value">¥{{ statistics.weekIncome.toFixed(2) }}</span>
+            </div>
+            <div class="unified-item">
+              <span class="unified-item-label">较上月</span>
+              <span class="unified-item-value" :class="incomeChange.isPositive ? 'success' : 'danger'">
+                {{ incomeChange.isPositive ? '+' : '' }}{{ incomeChange.percent }}%
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 团队列表 -->
+      <div class="team-list-section">
+        <div class="section-title">
+          <span>团队成员</span>
+        </div>
+
+        <!-- 级别切换 -->
+        <ion-segment :value="selectedLevel" class="level-segment" @ion-change="handleLevelChange">
+          <ion-segment-button :value="1">
+            <ion-label>一级直推</ion-label>
+          </ion-segment-button>
+          <ion-segment-button :value="2">
+            <ion-label>二级直推</ion-label>
+          </ion-segment-button>
+          <ion-segment-button :value="3">
+            <ion-label>三级直推</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+
+        <!-- 成员列表 -->
+        <div class="member-list">
+          <div
+            v-for="member in filteredMembers"
+            :key="member.profile.userId"
+            class="member-card"
+          >
+            <div class="member-header">
+              <div class="member-name">
+                {{ member.profile.nickname }}
+              </div>
+              <div class="member-amount">
+                ¥{{ member.investAmount.toFixed(2) }}
+              </div>
+            </div>
+            <div class="member-info">
+              <div class="info-row-item">
+                <span class="label">手机号</span>
+                <span class="value">{{ member.profile.phone }}</span>
+              </div>
+              <div class="info-row-item">
+                <span class="label">加入时间</span>
+                <span class="value">{{ member.joinTime }}</span>
+              </div>
+              <div class="info-row-item">
+                <span class="label">邀请人数</span>
+                <span class="value highlight">{{ member.inviteCount }}人</span>
+              </div>
+            </div>
+          </div>
+
+          <div v-if="filteredMembers.length === 0" class="empty-list">
+            <ion-icon :icon="peopleOutline" class="empty-icon" />
+            <div class="empty-text">
+              暂无成员
+            </div>
+          </div>
+        </div>
+
+        <!-- 分页控制 -->
+        <div v-if="totalMembers > 0" class="pagination-section">
+          <div class="pagination-info">
+            共 {{ totalMembers }} 人，第 {{ currentPage }}/{{ totalPages }} 页
+          </div>
+          <div class="pagination-buttons">
+            <ion-button
+              fill="outline"
+              size="small"
+              :disabled="currentPage === 1"
+              @click="prevPage"
+            >
+              上一页
+            </ion-button>
+            <ion-button
+              fill="outline"
+              size="small"
+              :disabled="currentPage === totalPages"
+              @click="nextPage"
+            >
+              下一页
+            </ion-button>
+          </div>
+        </div>
+      </div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<style lang='css' scoped>
+.stats-section {
+  background: white;
+  padding: 20px;
+  margin-bottom: 12px;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 16px;
+}
+
+.title-icon {
+  font-size: 20px;
+  color: #c41e3a;
+}
+
+.team-size-card {
+  display: flex;
+  align-items: center;
+  background: linear-gradient(135deg, #c41e3a 0%, #8b1a2e 100%);
+  border-radius: 12px;
+  padding: 20px;
+  gap: 20px;
+}
+
+.team-total {
+  flex: 1;
+  text-align: center;
+  padding-right: 20px;
+  border-right: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.total-value {
+  font-size: 36px;
+  font-weight: 700;
+  color: white;
+  margin-bottom: 8px;
+}
+
+.total-label {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.team-growth {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.growth-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.growth-label {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.growth-value {
+  font-size: 18px;
+  font-weight: 700;
+  color: white;
+}
+
+.unified-card {
+  display: flex;
+  align-items: center;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e8edf3 100%);
+  border-radius: 12px;
+  padding: 20px;
+  gap: 20px;
+}
+
+.unified-left {
+  flex: 1;
+  text-align: center;
+  padding-right: 20px;
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.unified-value {
+  font-size: 28px;
+  font-weight: 700;
+  color: #c41e3a;
+  margin-bottom: 8px;
+}
+
+.unified-label {
+  font-size: 14px;
+  color: #666;
+}
+
+.unified-right {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.unified-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.unified-item-label {
+  font-size: 14px;
+  color: #666;
+}
+
+.unified-item-value {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.unified-item-value.success {
+  color: #52c41a;
+}
+
+.unified-item-value.danger {
+  color: #ff4d4f;
+}
+
+.team-list-section {
+  background: white;
+  padding: 20px;
+  min-height: 400px;
+}
+
+.level-segment {
+  margin-bottom: 16px;
+  --background: #f5f5f5;
+  border-radius: 12px;
+  padding: 4px;
+}
+
+.level-segment ion-segment-button {
+  --indicator-color: #c41e3a;
+  --color: #666;
+  --color-checked: white;
+  min-height: 36px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.member-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.member-card {
+  background: #fafafa;
+  border-radius: 12px;
+  padding: 16px;
+}
+
+.member-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.member-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.member-amount {
+  font-size: 18px;
+  font-weight: 700;
+  color: #c41e3a;
+}
+
+.member-info {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.info-row-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.info-row-item .label {
+  font-size: 13px;
+  color: #999;
+}
+
+.info-row-item .value {
+  font-size: 14px;
+  color: #666;
+  font-weight: 500;
+}
+
+.info-row-item .value.highlight {
+  color: #c41e3a;
+  font-weight: 600;
+}
+
+.empty-list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+}
+
+.empty-icon {
+  font-size: 64px;
+  color: #ddd;
+  margin-bottom: 12px;
+}
+
+.empty-text {
+  font-size: 14px;
+  color: #999;
+}
+
+.pagination-section {
+  margin-top: 20px;
+  padding-top: 16px;
+  border-top: 1px solid #e8e8e8;
+}
+
+.pagination-info {
+  text-align: center;
+  font-size: 13px;
+  color: #666;
+  margin-bottom: 12px;
+}
+
+.pagination-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+}
+
+.pagination-buttons ion-button {
+  --border-color: #c41e3a;
+  --color: #c41e3a;
+  --border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  min-width: 80px;
+}
+
+.pagination-buttons ion-button:not([disabled]):hover {
+  --background: rgba(196, 30, 58, 0.05);
+}
+
+.pagination-buttons ion-button[disabled] {
+  --border-color: #ddd;
+  --color: #999;
+  opacity: 0.5;
+}
+</style>