From c5c5c83a05e628f6f9aeb72b807072a1257c75b4 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Tue, 25 Nov 2025 19:40:58 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=96=B0=E9=A1=B5=E9=9D=A2):=20=E6=88=91?=
 =?UTF-8?q?=E4=BB=AC=E9=87=91=E5=B8=81=E4=BB=A3=E7=90=86=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                        |   6 +
 src/utils/permissionManager.js             |   1 +
 src/utils/routeGuard.js                    |   1 +
 src/views/AdminCenter/MyRechargeAgency.vue | 243 +++++++++++++++++++++
 4 files changed, 251 insertions(+)
 create mode 100644 src/views/AdminCenter/MyRechargeAgency.vue

diff --git a/src/router/index.js b/src/router/index.js
index 1026100..29e08e3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -335,6 +335,12 @@ const router = createRouter({
       component: () => import('../views/AdminCenter/MyAgencyTeams.vue'),
       meta: { requiresAuth: true },
     },
+    {
+      path: '/my-recharge-agency',
+      name: 'my-recharge-agency',
+      component: () => import('../views/AdminCenter/MyRechargeAgency.vue'),
+      meta: { requiresAuth: true },
+    },
   ],
 })
 
diff --git a/src/utils/permissionManager.js b/src/utils/permissionManager.js
index a8d99ef..7a60489 100644
--- a/src/utils/permissionManager.js
+++ b/src/utils/permissionManager.js
@@ -149,6 +149,7 @@ export const ROLE_PERMISSIONS = {
     '/my-BDLeader-teams', //我的BDLeader团队页面（临时开放）
     '/my-BD-teams', //我的BD团队页面（临时开放）
     '/my-agency-teams', //我的代理团队页面（临时开放）
+    '/my-recharge-agency', //我的金币代理团队页面（临时开放）
   ],
 
   // 加载页面
diff --git a/src/utils/routeGuard.js b/src/utils/routeGuard.js
index 87ac7e9..06674c2 100644
--- a/src/utils/routeGuard.js
+++ b/src/utils/routeGuard.js
@@ -429,6 +429,7 @@ class RouteGuard {
       '/my-BDLeader-teams', //我的BDLeader团队页面（临时开放）
       '/my-BD-teams', //我的BD团队页面（临时开放）
       '/my-agency-teams', //我的代理团队页面（临时开放）
+      '/my-recharge-agency', //我的金币代理团队页面（临时开放）
     ]
     return publicPages.includes(path)
   }
diff --git a/src/views/AdminCenter/MyRechargeAgency.vue b/src/views/AdminCenter/MyRechargeAgency.vue
new file mode 100644
index 0000000..7b8ca7e
--- /dev/null
+++ b/src/views/AdminCenter/MyRechargeAgency.vue
@@ -0,0 +1,243 @@
+<template>
+  <div class="fullPage">
+    <div class="bg">
+      <!-- 顶部导航 -->
+      <GeneralHeader
+        title="Recharae Agency"
+        :backImg="imgUrl"
+        color="black"
+        style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
+      />
+
+      <!-- 主要内容 -->
+      <div
+        style="
+          padding: 16px;
+
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
+        "
+      >
+        <!-- 这个月总充值 -->
+        <div
+          style="
+            background-color: white;
+            border-radius: 12px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+            padding: 16px;
+            border: 1px solid #e5e7eb;
+          "
+        >
+          <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">
+            Total recharge for the month:
+          </div>
+          <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
+            ${{ totalRechargeDetail[0]?.totalAmount || 0 }}
+          </div>
+          <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Total recharge last month:</div>
+          <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
+            ${{ totalRechargeDetail[1]?.totalAmount || 0 }}
+          </div>
+        </div>
+
+        <div
+          v-for="(agency, aIndex) in agencyList"
+          :key="aIndex"
+          style="
+            background-color: white;
+            border-radius: 12px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+            padding: 16px;
+            border: 1px solid #e5e7eb;
+
+            margin-bottom: 10px;
+            transition: all 0.3s ease-out;
+          "
+          @click="showAgencyInfo(aIndex)"
+        >
+          <!-- 基本信息 -->
+          <div style="display: flex; justify-content: space-between">
+            <div style="display: flex; align-items: center">
+              <img :src="agency.userAvatar" alt="" style="width: 36px; border-radius: 50%" />
+              <div style="margin-left: 8px">
+                <div style="font-weight: 700">{{ agency.name }}</div>
+                <div style="font-weight: 700; color: rgba(0, 0, 0, 0.4)">
+                  ID:{{ agency.account }}
+                </div>
+              </div>
+            </div>
+            <div style="display: flex; align-items: center">
+              <img
+                src="../../assets/icon/arrow.png"
+                alt=""
+                style="
+                  width: 24px;
+                  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+                "
+                :class="{ rotated: aIndex == selectedAgencyIndex }"
+              />
+            </div>
+          </div>
+
+          <!-- 展示信息 -->
+          <transition name="info-fade">
+            <div style="display: flex" v-show="aIndex == selectedAgencyIndex">
+              <div style="flex: 1">
+                <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">This month:</div>
+                <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
+                  ${{ formatPrice(agency.thisMonth) || 0 }}
+                </div>
+              </div>
+              <div style="flex: 1">
+                <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Last month:</div>
+                <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
+                  ${{ formatPrice(agency.lastMonth) || 0 }}
+                </div>
+              </div>
+            </div>
+          </transition>
+        </div>
+        <!-- 触发加载功能 -->
+        <div ref="Agloadmore" v-if="showAgLoading"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useThrottle } from '@/utils/useDebounce'
+
+import { getAgencyList, getAgencyTotalRecharge } from '@/api/userInfo'
+
+import GeneralHeader from '@/components/GeneralHeader.vue'
+
+const imgUrl = new URL('/src/assets/icon/arrowBackBlack.png', import.meta.url).href
+
+const router = useRouter()
+
+const selectedAgencyIndex = ref(-1) //选中的agency用户下标
+const showAgencyInfo = (index) => {
+  selectedAgencyIndex.value = selectedAgencyIndex.value != index ? index : -1
+} //选中的agency用户
+
+const send = async () => {
+  router.push({ path: '/item-distribution' })
+}
+
+const totalRechargeDetail = ref([]) //代理消费金额
+const agencyList = ref([]) // 代理列表
+const agencyCurrent = ref(1) //代理列表第几页
+const showAgLoading = ref(true) //触底加载功能
+
+onMounted(async () => {
+  getAgencise() // 获取代理列表
+  getAgencyMonthsRecharge() //获取代理总支付
+
+  // 开始监听底部元素
+  if (Agloadmore.value) {
+    observer.observe(Agloadmore.value)
+  }
+})
+
+// 获取代理列表
+const getAgencyMonthsRecharge = async () => {
+  const resTotalRecharge = await getAgencyTotalRecharge()
+  console.log('resTotalRecharge:', resTotalRecharge)
+  if (resTotalRecharge.status && resTotalRecharge.body) {
+    totalRechargeDetail.value = resTotalRecharge.body
+  }
+}
+
+// 获取代理列表
+const getAgencise = async () => {
+  let data = {
+    cursor: agencyCurrent.value,
+    limit: 20,
+  }
+  const resagencyList = await getAgencyList(data)
+  console.log('resagencyList:', resagencyList)
+  if (resagencyList.status && resagencyList.body) {
+    agencyList.value.push(...resagencyList.body.records)
+    if (resagencyList.body.total <= resagencyList.body.current * resagencyList.body.size) {
+      showAgLoading.value = false
+    }
+  }
+}
+
+const Agloadmore = ref(null)
+
+const debouceGetAgList = useThrottle(getAgencise, 1000)
+
+// IntersectionObserver配置
+const observer = new IntersectionObserver((entries) => {
+  entries.forEach((entry) => {
+    if (entry.intersectionRatio > 0) {
+      console.log('监控')
+      if (entry.target == Agloadmore.value && agencyList.value.length != 0) {
+        agencyCurrent.value++
+        debouceGetAgList()
+      }
+    }
+  })
+})
+
+const formatPrice = (value) => {
+  if (value && value != 0) {
+    return Number(value).toFixed(2)
+  }
+  return 0
+}
+</script>
+
+<style scoped>
+* {
+  color: black;
+  font-family: 'SF Pro';
+}
+
+.fullPage {
+  background-color: #ffffff;
+  min-height: 100vh;
+  position: relative;
+}
+
+.bg {
+  width: 100vw;
+  min-height: 100vh;
+  background-image: url(../../assets/images/secondBg.png);
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+}
+
+.tabName {
+  color: #00000066;
+}
+
+.tabName-active {
+  color: black;
+  font-weight: 500;
+}
+
+.info-fade-enter-from,
+.info-fade-leave-to {
+  transform: translateY(-10px);
+  opacity: 0;
+}
+
+.info-fade-enter-active {
+  transition: all 0.5s ease-out;
+}
+
+.info-fade-leave-active {
+  transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.rotated {
+  transform: rotate(90deg);
+}
+</style>