diff --git a/src/api/recruit.js b/src/api/recruit.js
new file mode 100644
index 0000000..237e7c4
--- /dev/null
+++ b/src/api/recruit.js
@@ -0,0 +1,12 @@
+import { get, post } from '../utils/http.js'
+
+// 执行关注
+export const follow = async (data) => {
+  try {
+    const response = await post('/user/support-relation/follow', data)
+    return response
+  } catch (error) {
+    console.error('Failed to fetch follow recharge agency:', error)
+    throw error
+  }
+}
diff --git a/src/api/userInfo.js b/src/api/userInfo.js
index 8bbc42b..706f83f 100644
--- a/src/api/userInfo.js
+++ b/src/api/userInfo.js
@@ -62,3 +62,15 @@ export const getAgencyTotalRecharge = async (data) => {
     throw error
   }
 }
+
+// 分页查询货运
+export const getFreightAgencys = async () => {
+  try {
+    const response = await get(`/user/freight-balance/page`)
+    return response
+  } catch (error) {
+    console.error('Failed to fetch get Freight Agencys:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
diff --git a/src/assets/images/RechargeAgency/idBg.png b/src/assets/images/RechargeAgency/idBg.png
index f37dd96..1deda3e 100644
Binary files a/src/assets/images/RechargeAgency/idBg.png and b/src/assets/images/RechargeAgency/idBg.png differ
diff --git a/src/views/Activities/Lottery/Lottery.vue b/src/views/Activities/Lottery/Lottery.vue
index bdc5896..996872b 100644
--- a/src/views/Activities/Lottery/Lottery.vue
+++ b/src/views/Activities/Lottery/Lottery.vue
@@ -1416,7 +1416,7 @@ const getWinners = async () => {
   }
 }
 
-//获取领取任务奖励
+//领取任务奖励
 const receiveTaskReward = async (code) => {
   let data = {
     taskCode: code,
diff --git a/src/views/RechargeAgency/Recruit.vue b/src/views/RechargeAgency/Recruit.vue
index 0fe9024..63edd3b 100644
--- a/src/views/RechargeAgency/Recruit.vue
+++ b/src/views/RechargeAgency/Recruit.vue
@@ -46,20 +46,28 @@
           display: flex;
           flex-direction: column;
           gap: 4px;
+          margin-bottom: 8px;
 
           border-radius: 12px;
           background: rgba(255, 255, 255, 0.4);
           backdrop-filter: blur(32px);
         "
+        v-for="FreightAgency in FreightAgencyList?.records"
       >
         <!-- 基本信息 -->
         <div style="display: flex; gap: 4px">
           <div style="width: 15%; display: flex; align-items: center">
             <img
-              src=""
+              :src="FreightAgency.userBaseInfo.userAvatar"
               alt=""
               @error="defaultAvatarUrl"
-              style="display: block; width: 100%; aspect-ratio: 1/1"
+              style="
+                display: block;
+                width: 100%;
+                border-radius: 50%;
+                aspect-ratio: 1/1;
+                object-fit: cover;
+              "
             />
           </div>
           <div
@@ -73,7 +81,7 @@
           >
             <div style="display: flex; align-items: center; gap: 4px">
               <img :src="images.testFlag" alt="" width="10%" style="display: block" />
-              <div style="font-weight: 700">Nanfangjian</div>
+              <div style="font-weight: 700">{{ FreightAgency.userBaseInfo.userNickname }}</div>
             </div>
             <div style="display: flex; align-items: center; gap: 4px">
               <div style="position: relative; width: 30%">
@@ -82,7 +90,7 @@
                   style="
                     position: absolute;
                     inset: 0;
-                    padding: 5% 10% 5% 30%;
+                    padding: 5% 8% 5% 23%;
                     display: flex;
                     justify-content: space-between;
                     align-items: center;
@@ -90,16 +98,24 @@
                 >
                   <div
                     style="
-                      font-size: 0.7em;
+                      font-size: 0.6em;
                       width: 80%;
                       overflow: hidden;
                       white-space: nowrap;
                       text-overflow: ellipsis;
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;
                     "
                   >
-                    8826602
+                    {{ FreightAgency.userBaseInfo.account }}
                   </div>
-                  <img :src="images.copyWhite" alt="" width="20%" @click="copyPhone('8826602')" />
+                  <img
+                    :src="images.copyWhite"
+                    alt=""
+                    width="15%"
+                    @click="copyPhone(FreightAgency.userBaseInfo.account)"
+                  />
                 </div>
               </div>
               <img src="../../assets/icon/RA.png" alt="" width="25%" style="display: block" />
@@ -119,10 +135,12 @@
                 style="aspect-ratio: 1/1; display: block"
               />
             </div>
-            <div style="color: #f00; font-weight: 590">7********</div>
+            <div style="color: #f00; font-weight: 590">{{ maskAmount(FreightAgency.balance) }}</div>
           </div>
           <!-- 老资历 -->
-          <div style="font-weight: 600; font-size: 0.8em">Has been a coin agency for 160 days</div>
+          <div style="font-weight: 600; font-size: 0.8em">
+            Has been a coin agency for {{ FreightAgency.becomeDays }} days
+          </div>
           <!-- 社交的手腕 -->
           <div>
             <div style="font-weight: 600; font-size: 0.8em; margin-bottom: 4px">
@@ -135,13 +153,13 @@
             </div>
           </div>
           <!-- 实力展示 -->
-          <div>10972 successful transaction</div>
+          <div>{{ FreightAgency.transactionCount }} successful transaction</div>
           <!-- 食人树 -->
           <div
             style="display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: 0.9em"
           >
             <img :src="images.phone" alt="" width="8%" />
-            +86 1008610086
+            {{ FreightAgency.contactInfo || '' }}
           </div>
         </div>
         <!-- 按钮 -->
@@ -159,7 +177,7 @@
               align-items: center;
             "
             :style="{
-              background: followingStatus
+              background: FreightAgency.isFollow
                 ? `radial-gradient(107.94% 107.94% at 15.9% 13.54%, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.00) 100%), linear-gradient(180deg, #FFF 0%, #000 100%), #D1D1D1`
                 : `radial-gradient(
                   107.94% 107.94% at 15.9% 13.54%,
@@ -168,9 +186,9 @@
                 ),
                 linear-gradient(180deg, #fff 0%, #000 100%), #b464ff`,
             }"
-            @click="followingStatus = !followingStatus"
+            @click="followBt(FreightAgency.isFollow, FreightAgency.userBaseInfo.id)"
           >
-            <div style="font-weight: 500">Following</div>
+            <div style="font-weight: 500">{{ FollowButtonText(FreightAgency.isFollow) }}</div>
           </div>
           <!-- 私聊按钮 -->
           <div
@@ -253,10 +271,24 @@
 </template>
 
 <script setup>
-import { isInApp } from '@/utils/appBridge.js'
+import {
+  connectApplication,
+  parseAccessOrigin,
+  parseHeader,
+  setHttpHeaders,
+  isInApp,
+} from '@/utils/appBridge.js'
+import {
+  appConnectionManager,
+  isAppConnected,
+  getAppHeaderInfo,
+} from '@/utils/appConnectionManager.js'
 import { onMounted, ref } from 'vue'
 import { useClipboard } from '@vueuse/core'
 import maskLayer from '@/components/MaskLayer.vue'
+import { getFreightAgencys } from '@/api/userInfo.js'
+import { follow } from '@/api/recruit.js'
+import { showError, showWarning, showInfo, showSuccess } from '@/utils/toast.js'
 
 //vite动态批量导入图片
 const imageModules = import.meta.glob('@/assets/images/RechargeAgency/*.{png,jpg,svg}', {
@@ -270,10 +302,14 @@ const images = Object.fromEntries(
   })
 )
 const { copy, isSupported } = useClipboard()
+
+const appConnected = ref(false)
+const headerInfo = ref({})
 const isInAppEnvironment = ref(false) // 检测是否在APP环境中
 
+const FreightAgencyList = ref([]) //充值代理列表
+
 const maskLayerShow = ref(false) // 控制遮罩层显示隐藏
-const followingStatus = ref(false) // 控制关注按钮状态
 const tipShow = ref(false) //提示弹窗
 
 const defaultAvatarUrl = (e) => {
@@ -282,10 +318,50 @@ const defaultAvatarUrl = (e) => {
   e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
 }
 
+// 获取代理列表
+const getAgencyList = async () => {
+  const resAgencyList = await getFreightAgencys()
+  if (resAgencyList.status && resAgencyList.body) {
+    FreightAgencyList.value = resAgencyList.body
+  }
+}
+
+// 格式化金额
+const maskAmount = (number) => {
+  let amount = number.toString()
+  if (amount.length === 0) return ''
+  if (amount.length === 1) return amount
+  let firstChar = amount.charAt(0)
+  let maskedPart = '*'.repeat(amount.length - 1)
+  return firstChar + maskedPart
+}
+
+// 格式化关注按钮
+const FollowButtonText = (isFollow) => {
+  return isFollow ? 'Following' : 'Follow'
+}
+
+// 点击关注按钮
+const followBt = async (isFollow, userId) => {
+  if (isFollow) return
+  let data = {
+    userId,
+  }
+  try {
+    const resFollow = await follow(data)
+    if (resFollow.status) {
+      getAgencyList() // 获取代理列表
+    }
+  } catch (error) {
+    showError(error.errorMsg)
+  }
+}
+
 // 关闭弹窗
 const closedPopup = () => {
   maskLayerShow.value = false
 }
+
 // 复制到剪贴板（原生方法）
 const copyPhone = (text) => {
   if (isSupported.value) {
@@ -306,9 +382,131 @@ const copyPhone = (text) => {
   }, 2000)
 }
 
+/**
+ * 连接APP并获取认证信息（优化版 - 仅专注连接）
+ */
+const connectToApp = async () => {
+  console.group('🔗 APP Connection Process')
+  console.debug('🚀 Starting APP connection...')
+
+  try {
+    // 检查是否在APP环境中
+    if (!isInApp()) {
+      console.debug('🌐 Browser environment detected')
+      appConnected.value = true
+      console.groupEnd()
+
+      // 触发连接成功回调
+      getAgencyList() // 获取代理列表
+
+      return { success: true, environment: 'browser' }
+    }
+
+    // 检查是否已经连接且未过期
+    if (isAppConnected()) {
+      console.debug('✅ APP already connected and valid')
+      appConnected.value = true
+
+      // 使用缓存的头部信息
+      const cachedHeaderInfo = getAppHeaderInfo()
+      if (cachedHeaderInfo) {
+        headerInfo.value = cachedHeaderInfo
+        console.debug('🔧 Using cached HTTP headers')
+      }
+
+      console.groupEnd()
+
+      // 触发连接成功回调
+      getAgencyList() // 获取代理列表
+
+      return { success: true, environment: 'app', fromCache: true }
+    }
+
+    // 检查是否有正在进行的连接
+    if (appConnectionManager.isConnecting()) {
+      console.debug('⏳ Connection already in progress, waiting...')
+      await appConnectionManager.getConnectionPromise()
+      appConnected.value = true
+      console.debug('✅ Connected via existing process')
+      console.groupEnd()
+
+      // 触发连接成功回调
+      getAgencyList() // 获取代理列表
+
+      return { success: true, environment: 'app', fromCache: true }
+    }
+
+    // 建立新的APP连接
+    console.debug('📱 Establishing new APP connection...')
+
+    const connectionResult = await new Promise((resolve, reject) => {
+      const connectionPromise = new Promise((connectResolve, connectReject) => {
+        connectApplication(async (access) => {
+          try {
+            const result = parseAccessOrigin(access)
+
+            if (result.success) {
+              // 解析头部信息
+              headerInfo.value = parseHeader(result.data)
+
+              // 设置HTTP请求头
+              console.debug('🔧 Setting HTTP headers...')
+              await setHttpHeaders(headerInfo.value)
+
+              // 标记连接成功
+              appConnected.value = true
+              appConnectionManager.setConnected(headerInfo.value)
+
+              console.debug('🎉 APP connection established successfully')
+              connectResolve({ success: true, environment: 'app', fromCache: false })
+            } else {
+              console.error('❌ Failed to parse access origin:', result.error)
+              appConnectionManager.reset()
+              connectReject(new Error(result.error))
+            }
+          } catch (error) {
+            console.error('❌ Connection process failed:', error)
+            appConnectionManager.reset()
+            connectReject(error)
+          }
+        })
+      })
+
+      // 设置连接状态
+      appConnectionManager.setConnecting(connectionPromise)
+
+      connectionPromise.then(resolve).catch(reject)
+    })
+
+    console.debug('✅ Connection completed successfully')
+    console.groupEnd()
+
+    // 触发连接成功回调
+    getAgencyList() // 获取代理列表
+
+    return connectionResult
+  } catch (error) {
+    console.error('❌ Connection failed:', error)
+    appConnected.value = false
+    console.groupEnd()
+
+    // 触发连接失败回调
+    // if (onConnectionFailed) {
+    //   onConnectionFailed(error)
+    // }
+
+    // 连接失败的特殊处理
+    if (error.message && error.message.includes('parse access')) {
+      router.push({ path: '/not_app', query: { message: error.message } })
+    }
+
+    return { success: false, error: error.message }
+  }
+}
+
 onMounted(() => {
+  connectToApp()
   isInAppEnvironment.value = isInApp()
-  console.log('images:', images)
 })
 </script>
 
@@ -327,7 +525,7 @@ onMounted(() => {
 
 @media screen and (max-width: 360px) {
   * {
-    font-size: 10px;
+    font-size: 12px;
   }
 }