From 2a7ab3e733e2ad7bf9e2f68799b2d297cfc0c8eb Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Tue, 9 Sep 2025 18:53:20 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E7=AE=A1=E7=90=86=E5=91=98):=20=E5=AF=B9?=
 =?UTF-8?q?=E6=8E=A5=E8=8E=B7=E5=8F=96=E5=88=97=E8=A1=A8=E7=9A=84=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/userInfo.js       |  66 ++++++----
 src/views/AdminCenter.vue | 257 +++++++++++++++++++++-----------------
 2 files changed, 179 insertions(+), 144 deletions(-)

diff --git a/src/api/userInfo.js b/src/api/userInfo.js
index 47a59e8..3c62b09 100644
--- a/src/api/userInfo.js
+++ b/src/api/userInfo.js
@@ -1,50 +1,64 @@
-import { get, post } from '../utils/http.js';
+import { get, post } from '../utils/http.js'
 
 export const searchUser = async (userId) => {
   try {
-    const response = await get(`/user/user-profile/open-search?account=${userId}`);
-    return response;
+    const response = await get(`/user/user-profile/open-search?account=${userId}`)
+    return response
   } catch (error) {
-    console.error('Failed to fetch search user:', error);
-    console.error('error:' + error.response.errorMsg);
-    throw error;
+    console.error('Failed to fetch search user:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
   }
-};
+}
 
 // 用户支付充值用户搜索
 export const searchPayRechargeUser = async (params) => {
   try {
     const response = await get(
       `/order/web/pay/user-profile?sysOrigin=${params.sysOrigin}&account=${params.account}&type=GOLD`
-    );
-    return response;
+    )
+    return response
   } catch (error) {
-    console.error('Failed to fetch search pay recharge user:', error);
-    console.error('error:' + error.response.errorMsg);
-    throw error;
+    console.error('Failed to fetch search pay recharge user:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
   }
-};
+}
 
 // 获取BD列表
-export const getBDList = async (userId) => {
+export const getBDList = async (data) => {
   try {
-    const response = await get(`/team/bd/page?sysOrigin=LIKEI&userId=${userId}`);
-    return response;
+    const response = await get(
+      `/team/bd/page2?sysOrigin=LIKEI&userId=${data.userId}&cursor=${data.cursor}&limit=${data.limit}`
+    )
+    return response
   } catch (error) {
-    console.error('Failed to fetch get BD list:', error);
-    console.error('error:' + error.response.errorMsg);
-    throw error;
+    console.error('Failed to fetch get BD list:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
   }
-};
+}
 
 // 获取金币代理列表
 export const getAgencyList = async (data) => {
   try {
-    const response = await post(`/wallet/freight-gold/client/pageFreight`, data);
-    return response;
+    const response = await get(`/app/h5/recharge-page?cursor=${data.cursor}&limit=${data.limit}`)
+    return response
   } catch (error) {
-    console.error('Failed to fetch get agency list:', error);
-    console.error('error:' + error.response.errorMsg);
-    throw error;
+    console.error('Failed to fetch get agency list:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
   }
-};
+}
+
+// 获取货运代理充值月度汇总（当月，上月）
+export const getAgencyTotalRecharge = async (data) => {
+  try {
+    const response = await get(`/app/h5/recharge-summary`)
+    return response
+  } catch (error) {
+    console.error('Failed to fetch get agency total recharge:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
diff --git a/src/views/AdminCenter.vue b/src/views/AdminCenter.vue
index 3694954..09aaff5 100644
--- a/src/views/AdminCenter.vue
+++ b/src/views/AdminCenter.vue
@@ -59,10 +59,16 @@
         <!-- 基本信息 -->
         <div style="display: flex; justify-content: space-between">
           <div style="display: flex; align-items: center">
-            <img src="../assets/icon/coin.png" alt="" style="width: 36px; border-radius: 50%" />
+            <img
+              :src="info.userProfile.userAvatar"
+              alt="../assets/icon/coin.png"
+              style="width: 36px; height: 36px; border-radius: 50%"
+            />
             <div style="margin-left: 8px">
-              <div style="font-weight: 700">{{ info.name }}</div>
-              <div style="font-weight: 700; color: rgba(0, 0, 0, 0.4)">ID:{{ info.id }}</div>
+              <div style="font-weight: 700">{{ info.userProfile.userNickname }}</div>
+              <div style="font-weight: 700; color: rgba(0, 0, 0, 0.4)">
+                ID:{{ info.userProfile.userNickname }}
+              </div>
             </div>
           </div>
           <div style="display: flex; align-items: center">
@@ -79,17 +85,21 @@
           <div style="display: flex" v-show="BDIndex == selectedBDIndex">
             <div style="flex: 1">
               <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Host</div>
-              <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">{{ info.host }}</div>
+              <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
+                {{ info.allAnchorCount || 0 }}
+              </div>
             </div>
             <div style="flex: 1">
               <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Agency</div>
-              <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">{{ info.agency }}</div>
+              <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
+                {{ info.agentCount || 0 }}
+              </div>
             </div>
           </div>
         </transition>
       </div>
       <!-- 触发加载功能 -->
-      <div ref="loadmore" v-if="showLoading"></div>
+      <div ref="BDloadmore" v-if="showBDLoading"></div>
     </div>
 
     <!-- agency列表 -->
@@ -104,10 +114,12 @@
         "
       >
         <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)">${{ rechargeDetail.total }}</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)">
-          ${{ rechargeDetail.lastMonth }}
+          ${{ totalRechargeDetail[1]?.totalAmount || 0 }}
         </div>
       </div>
       <div
@@ -125,10 +137,10 @@
         <!-- 基本信息 -->
         <div style="display: flex; justify-content: space-between">
           <div style="display: flex; align-items: center">
-            <img src="../assets/icon/coin.png" alt="" style="width: 36px; border-radius: 50%" />
+            <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.id }}</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">
@@ -146,31 +158,35 @@
           <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)">${{ agency.thisMonth }}</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)">${{ agency.lastMonth }}</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>
 </template>
 
 <script setup>
-import MobileHeader from '../components/MobileHeader.vue';
-import { onMounted, ref, computed, watch } from 'vue';
-import { getAdminCenterList, giveProps } from '@/api/itemDistribution';
-import { getBDList, getAgencyList } from '@/api/userInfo';
-import { showError, showWarning, showInfo, showSuccess } from '@/utils/toast.js';
-import { useRouter } from 'vue-router';
-import { usePageInitializationWithConfig } from '@/utils/pageConfig.js';
-import { getUserId } from '@/utils/userStore.js';
-import { useDebounce, useThrottle } from '@/utils/useDebounce';
+import MobileHeader from '../components/MobileHeader.vue'
+import { onMounted, ref, computed } from 'vue'
+import { getBDList, getAgencyList, getAgencyTotalRecharge } from '@/api/userInfo'
+import { useRouter } from 'vue-router'
+import { usePageInitializationWithConfig } from '@/utils/pageConfig.js'
+import { getUserId } from '@/utils/userStore.js'
+import { useDebounce, useThrottle } from '@/utils/useDebounce'
 
-const router = useRouter();
+const router = useRouter()
 
 const tabList = ref([
   {
@@ -181,152 +197,157 @@ const tabList = ref([
     id: 2,
     name: 'Recharge Agency',
   },
-]);
+])
 
-const activeIndex = ref(0);
-const tabItems = ref([]); // 存储标签DOM引用
+const activeIndex = ref(0)
+const tabItems = ref([]) // 存储标签DOM引用
 
 // 选择标签
 const setActiveTab = (index) => {
   if (activeIndex.value != index) {
-    console.log('切换标签');
-    activeIndex.value = index;
-    selectedBDIndex.value = -1;
-    selectedAgencyIndex.value = -1;
+    console.log('切换标签')
+    activeIndex.value = index
+    selectedBDIndex.value = -1
+    selectedAgencyIndex.value = -1
   }
-};
+}
 
 // 计算下划线样式
 const underlineStyle = computed(() => {
-  console.log('计算属性');
+  console.log('计算属性')
 
-  if (tabItems.value.length === 0) return {}; //没有这个元素
-  const activeTab = tabItems.value[activeIndex.value];
-  console.log('选中元素的左边距', activeTab.offsetLeft);
+  if (tabItems.value.length === 0) return {} //没有这个元素
+  const activeTab = tabItems.value[activeIndex.value]
+  console.log('选中元素的左边距', activeTab.offsetLeft)
 
   return {
     position: 'absolute',
     left: `${activeTab.offsetLeft + activeTab.offsetWidth / 2 - 15 / 2}px`,
     bottom: '0',
     transition: 'left 0.3s ease', // 平滑过渡
-  };
-});
+  }
+})
 
-const selectedBDIndex = ref(-1); //选中的BD用户下标
+const selectedBDIndex = ref(-1) //选中的BD用户下标
 const showUserInfo = (index) => {
-  selectedBDIndex.value = selectedBDIndex.value != index ? index : -1;
-}; //选中的BD用户
+  selectedBDIndex.value = selectedBDIndex.value != index ? index : -1
+} //选中的BD用户
 
-const selectedAgencyIndex = ref(-1); //选中的agency用户下标
+const selectedAgencyIndex = ref(-1) //选中的agency用户下标
 const showAgencyInfo = (index) => {
-  selectedAgencyIndex.value = selectedAgencyIndex.value != index ? index : -1;
-}; //选中的agency用户
+  selectedAgencyIndex.value = selectedAgencyIndex.value != index ? index : -1
+} //选中的agency用户
 
 const send = async () => {
-  router.push({ path: '/item-distribution' });
-};
-
-// const BDList = ref([]) // BD列表
-const BDList = ref(
-  Array.from(
-    { length: 20 },
-    (item) =>
-      (item = {
-        name: 'BD2',
-        id: '456',
-        host: '333',
-        agency: '444',
-      })
-  )
-); // BD列表
-
-const agencyList = ref([
-  {
-    name: 'agency1',
-    id: '666',
-    thisMonth: '112',
-    lastMonth: '223',
-  },
-  {
-    name: 'agency2',
-    id: '777',
-    thisMonth: '334',
-    lastMonth: '445',
-  },
-]); // 代理列表
-
-const rechargeDetail = ref({
-  total: '123456',
-  lastMonth: '12345',
-}); //代理消费金额
+  router.push({ path: '/item-distribution' })
+}
 
 // 页面加载时获取申请记录
-usePageInitializationWithConfig('ADMIN_CENTER');
+usePageInitializationWithConfig('ADMIN_CENTER')
 
-const totalAgencyCurrent = ref(2); //代理的总数量
-const agencyCurrent = ref(1); //第几页
-const showLoading = ref(true);
+const BDList = ref([]) // BD列表
+const BDCurrent = ref(1) //BD列表第几页
+const showBDLoading = ref(true) //触底加载功能
+
+const totalRechargeDetail = ref([]) //代理消费金额
+const agencyList = ref([]) // 代理列表
+const agencyCurrent = ref(1) //代理列表第几页
+const showAgLoading = ref(true) //触底加载功能
 
 onMounted(async () => {
   if (tabItems.value.length > 0) {
-    underlineStyle.value; // 触发计算属性更新
+    underlineStyle.value // 触发计算属性更新
   }
 
-  const userId = getUserId();
-  const resBDList = await getBDList(userId);
-  console.log('resBDList:', resBDList);
-
-  getAgencise();
+  getBDs() // 获取BD列表
+  getAgencise() // 获取代理列表
+  getAgencyMonthsRecharge() //获取代理总支付
 
   // 开始监听底部元素
-  if (loadmore.value) {
-    observer.observe(loadmore.value);
+  if (BDloadmore.value) {
+    observer.observe(BDloadmore.value)
   }
-});
+  // 开始监听底部元素
+  if (Agloadmore.value) {
+    observer.observe(Agloadmore.value)
+  }
+})
+
+// 获取BD列表
+const getBDs = async () => {
+  let data = {
+    userId: getUserId(),
+    cursor: BDCurrent.value,
+    limit: 20,
+  }
+
+  const resBDList = await getBDList(data)
+  console.log('resBDList:', resBDList)
+  if (resBDList.status && resBDList.body) {
+    BDList.value.push(...resBDList.body.records)
+    if (resBDList.body.total <= resBDList.body.current * resBDList.body.size) {
+      showBDLoading.value = false
+    }
+  }
+}
+
+// 获取代理列表
+const getAgencyMonthsRecharge = async () => {
+  const resTotalRecharge = await getAgencyTotalRecharge()
+  console.log('resTotalRecharge:', resTotalRecharge)
+  if (resTotalRecharge.status && resTotalRecharge.body) {
+    totalRechargeDetail.value = resTotalRecharge.body
+  }
+}
 
 // 获取代理列表
 const getAgencise = async () => {
-  let agencyData = {
-    pageQuery: {
-      cursor: agencyCurrent.value,
-      limit: 20,
-      searchCount: true,
-    },
-    sysOrigin: 'LIKEI',
-    close: false,
-  };
-  const resagencyList = await getAgencyList(agencyData);
-  console.log('resagencyList:', resagencyList);
+  let data = {
+    cursor: agencyCurrent.value,
+    limit: 20,
+  }
+  const resagencyList = await getAgencyList(data)
+  console.log('resagencyList:', resagencyList)
   if (resagencyList.status && resagencyList.body) {
-    totalAgencyCurrent.value = resagencyList.body.total;
-    agencyCurrent.value = resagencyList.body.current;
+    agencyList.value.push(...resagencyList.body.records)
     if (resagencyList.body.total <= resagencyList.body.current * resagencyList.body.size) {
-      // showLoading.value = false
+      showAgLoading.value = false
     }
   }
-};
+}
 
 // 获取底部加载div
-const loadmore = ref(null);
+const BDloadmore = ref(null)
+const Agloadmore = ref(null)
 
-const test = () => {
-  console.log('加载数据1');
-};
-
-const debouceGetBDList = useThrottle(test, 1000);
+const debouceGetBDList = useThrottle(getBDs, 1000)
+const debouceGetAgList = useThrottle(getAgencise, 1000)
 
 // IntersectionObserver配置
 const observer = new IntersectionObserver((entries) => {
   entries.forEach((entry) => {
     if (entry.intersectionRatio > 0) {
-      debouceGetBDList();
-      // 被观察者进入视口
-      if (totalAgencyCurrent.value > agencyCurrent.value) {
-        // console.log('加载数据')
+      console.log('监控')
+
+      // 根据目标元素执行对应操作
+      if (entry.target == BDloadmore.value && BDList.value.length != 0) {
+        BDCurrent.value++
+        debouceGetBDList()
+      }
+      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>