diff --git a/src/assets/images/firstRechargeBonus.png b/src/assets/images/firstRechargeBonus.png
deleted file mode 100644
index b3378be..0000000
Binary files a/src/assets/images/firstRechargeBonus.png and /dev/null differ
diff --git a/src/router/index.js b/src/router/index.js
index 0ad30cd..045bd85 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -158,12 +158,6 @@ const router = createRouter({
     {
       path: '/recharge',
       name: 'recharge',
-      component: () => import('../views/Recharge/Recharge.vue'),
-      meta: { requiresAuth: true },
-    },
-    {
-      path: '/recharge-freight-agent',
-      name: 'recharge-freight-agent',
       component: () => import('../views/Recharge/RechargeFreightAgent.vue'),
       meta: { requiresAuth: true },
     },
diff --git a/src/stores/country.js b/src/stores/country.js
index 1a3eb8d..77b2cfc 100644
--- a/src/stores/country.js
+++ b/src/stores/country.js
@@ -1,16 +1,16 @@
-import { defineStore } from "pinia";
+import { defineStore } from 'pinia'
 
-export const useCountryStore = defineStore("country", {
+export const useCountryStore = defineStore('country', {
   state: () => ({
-    list: [],
-    selectedCountry: {},
+    list: [], //国家列表
+    selectedCountry: {}, //选中的国家
   }),
   actions: {
     setCountryList(data) {
-      this.list = data;
+      this.list = data
     },
     setCountry(country) {
-      this.selectedCountry = country;
+      this.selectedCountry = country
     },
   },
-});
+})
diff --git a/src/utils/permissionManager.js b/src/utils/permissionManager.js
index 6147228..a5493b0 100644
--- a/src/utils/permissionManager.js
+++ b/src/utils/permissionManager.js
@@ -76,7 +76,6 @@ export const ROLE_PERMISSIONS = {
     ...RANKING_PAGES, //排行榜
     ...ACTIVITIES, //活动页面
     '/recharge',
-    '/recharge-freight-agent',
     '/recharge-agency-recruit', //充值代理介绍页面
     '/search-payee', //搜索收款人
     '/cash-out', // 提现页面
@@ -128,7 +127,6 @@ export const ROLE_PERMISSIONS = {
     PAGES.COIN_SELLER, // 主页面
     '/seller-records',
     '/coin-seller-search',
-    '/recharge-freight-agent',
   ],
 
   // Agency (代理商)
diff --git a/src/utils/routeGuard.js b/src/utils/routeGuard.js
index 4d450a2..10b7a60 100644
--- a/src/utils/routeGuard.js
+++ b/src/utils/routeGuard.js
@@ -424,7 +424,6 @@ class RouteGuard {
       '/404', // 404页面
       '/error', // 通用错误页面
       '/recharge',
-      '/recharge-freight-agent',
       '/recharge-agency-recruit', //充值代理介绍页面
       '/pay-result',
       '/search-payee', //搜索收款人
diff --git a/src/views/Recharge/Recharge.vue b/src/views/Recharge/Recharge.vue
deleted file mode 100644
index 39acfef..0000000
--- a/src/views/Recharge/Recharge.vue
+++ /dev/null
@@ -1,223 +0,0 @@
-<!-- Recharge.vue -->
-<template>
-  <div class="fullPage">
-    <div class="bg">
-      <!-- 顶部 -->
-      <MobileHeader title="Recharge" showHelp="true" isHomePage="true" @help="popupHelp" />
-
-      <!-- 内容 -->
-      <div style="padding: 4%">
-        <!-- 输入框 -->
-        <div style="display: flex; gap: 20px; width: 100%">
-          <div style="flex: 1">
-            <input
-              style="
-                width: 100%;
-                border: 0;
-                border-radius: 8px;
-                box-shadow: 0 0 2px 2px #00000020;
-                padding: 10px 8px;
-              "
-              type="text"
-              placeholder="Please enter your Likei's lD"
-              v-model="targetUserId"
-            />
-          </div>
-
-          <button
-            style="
-              border: 0;
-              border-radius: 8px;
-              font-weight: 590;
-              color: white;
-              padding: 10px 8px;
-              background-color: #c670ff;
-              background: linear-gradient(to bottom, rgba(198, 112, 255, 1), rgba(119, 38, 255, 1));
-              box-shadow: 0 0 1px 1px #00000020;
-            "
-            @click="checkUserId"
-          >
-            Recharge
-          </button>
-        </div>
-
-        <!-- 功能介绍 -->
-        <div style="margin-top: 16px">
-          <p style="font-weight: bold">Frequently asked question:</p>
-          <div class="textContent">
-            <p>1.Question:</p>
-            <p>How to check whether the account recharge amounthasbeen received.</p>
-            <p>Ask:</p>
-            <p>
-              Firstly, open Likei, enter the 'My' page, click on theWallet' page, and select the
-              recharge record in theupper right corner.
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <!-- 弹窗 -->
-      <!-- 遮罩层 -->
-      <div
-        style="
-          position: absolute;
-          left: 0;
-          right: 0;
-          top: 0;
-          bottom: 0;
-          z-index: 9999;
-          background-color: #00000080;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        "
-        v-show="dialogshow"
-        @click="closedPopup"
-      >
-        <div
-          style="
-            width: 80%;
-            padding: 8%;
-            background-color: white;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            border-radius: 20px;
-          "
-          @click.stop
-        >
-          <!-- 标题行 -->
-          <div
-            style="
-              width: 100%;
-              display: flex;
-              justify-content: center;
-              font-weight: 800;
-              font-size: 16px;
-              position: relative;
-              padding: 5px 0;
-            "
-          >
-            Help
-            <div
-              style="
-                position: absolute;
-                top: 50%;
-                right: 0;
-                transform: translateY(-50%);
-                font-weight: bold;
-              "
-              @click="closedPopup"
-            >
-              x
-            </div>
-          </div>
-
-          <!-- 内容 -->
-          <div>
-            <p style="font-weight: bold">User recharge instructions:</p>
-            <div class="textContent">
-              <p>
-                1、Before recharging,the user needs toprovide the correct Likei lD to complete
-                thisrecharge.
-              </p>
-              <p>
-                2、After the coin seller recharges, therecharged coins will be directly sent to
-                thecoin seller account.
-              </p>
-              <p>
-                3、How to obtain an lD for an account:(1)In Likei open the 'My' page.(2)You can
-                confrm the account lD at the topof the page.
-              </p>
-              <p>
-                4、lf the lD account you enter is a coinseller account, the coin will be sent to
-                thecoin seller center of that account.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { useRouter } from 'vue-router'
-import { showWarning } from '@/utils/toast.js'
-
-import { searchUser } from '@/api/userInfo'
-
-import MobileHeader from '@/components/MobileHeader.vue'
-
-const router = useRouter()
-
-const dialogshow = ref(false)
-// 展示弹窗
-const popupHelp = () => {
-  dialogshow.value = true
-}
-
-// 关闭弹窗
-const closedPopup = () => {
-  dialogshow.value = false
-}
-
-const targetUserId = ref('')
-
-const checkUserId = async () => {
-  console.log('充值目标用户id：', targetUserId.value)
-
-  try {
-    const targetUserInfo = await searchUser(targetUserId.value)
-    console.log('targetUserInfo:', targetUserInfo)
-    if (targetUserInfo.status && targetUserInfo.body.id) {
-      router.push({
-        path: '/recharge-freight-agent',
-        query: {
-          targetUserId: targetUserId.value,
-          isSuperFreightAgent: targetUserInfo.body?.isSuperFreightAgent || false,
-          isFreightAgent: targetUserInfo.body.isFreightAgent,
-        },
-      })
-    } else {
-      // 信息提示id有误
-      showWarning('User info not found')
-    }
-  } catch (error) {
-    console.log('error:', error.response.errorMsg)
-    throw error
-  }
-}
-</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;
-}
-
-.textContent > p {
-  font-weight: bold;
-  color: rgba(0, 0, 0, 0.5);
-}
-
-input::placeholder {
-  font-weight: bold;
-  color: rgba(0, 0, 0, 0.4);
-}
-</style>
diff --git a/src/views/Recharge/RechargeFreightAgent.vue b/src/views/Recharge/RechargeFreightAgent.vue
index 7cf1542..856286c 100644
--- a/src/views/Recharge/RechargeFreightAgent.vue
+++ b/src/views/Recharge/RechargeFreightAgent.vue
@@ -1,152 +1,185 @@
 <template>
   <div class="fullPage">
     <div class="bg">
-      <!-- 顶部 -->
-      <MobileHeader title="Recharge">
-        <template v-slot:extraFunction>
-          <div
-            style="
-              display: flex;
-              align-items: center;
-              position: relative;
-              color: rgba(187, 146, 255, 1) !important;
-            "
-            @click="showLang"
-          >
-            <div style="font-weight: bold">{{ selectedLanguage.value }}</div>
-            <!-- <div
-              style="margin-left: 5px; transition: transform 0.5s"
-              :class="{ rotated: visibleList }"
-            >
-              >
-            </div> -->
-            <transition name="slide-fade">
-              <div
-                style="
-                  position: absolute;
-                  right: 0;
-                  top: 100%;
-                  padding: 10px;
-                  display: flex;
-                  flex-direction: column;
-                  width: max-content;
-                  background-color: rgba(255, 255, 255, 0.1);
-                  border-radius: 10px;
-                  margin-top: 5px;
-                  backdrop-filter: blur(8px);
-                "
-                v-show="visibleList"
-                class="extraList"
-              >
-                <div
-                  style="padding: 8px; color: white !important; font-weight: 590"
-                  v-for="(item, index) in languageList"
-                  :key="index"
-                  @click="selectLang(item)"
-                >
-                  {{ item.value }}
-                </div>
-              </div>
-            </transition>
-          </div>
-        </template>
-      </MobileHeader>
+      <!-- 顶部导航 -->
+      <GeneralHeader
+        :isHomePage="true"
+        :showLanguageList="true"
+        title="Recharge"
+        :backImg="imgUrl"
+        color="black"
+        style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
+      />
 
-      <div style="padding: 10px">
+      <!-- 主要内容 -->
+      <div style="padding: 10px; display: flex; flex-direction: column; gap: 8px">
         <!-- 头部展示图 -->
-        <img src="../../assets/images/firstRechargeBonus.png" alt="" style="width: 100%" />
+        <img :src="imageUrl('headImg')" alt="" style="width: 100%" />
 
-        <div style="font-weight: 600; margin-bottom: 10px">Recharge ID：</div>
-        <!-- 个人信息 -->
-        <div
-          style="
-            display: flex;
-            border-radius: 8px;
-            box-shadow: 0 0 4px 0 #00000050;
-            align-items: center;
-          "
-        >
-          <img
-            :src="userProfile.userAvatar"
-            alt=""
-            style="
-              width: 10%;
-              margin: 10px;
-              border-radius: 50%;
-              aspect-ratio: 1/1;
-              object-fit: cover;
-            "
-          />
-          <div style="">
-            <div style="font-weight: 700; display: flex; align-items: center">
-              {{ userProfile.userNickname }}
+        <!-- 个人信息模块 -->
+        <div style="display: flex; flex-direction: column; gap: 8px">
+          <!-- 标题 -->
+          <div style="display: flex; justify-content: space-between; align-items: center">
+            <div style="font-weight: 600">My Information:</div>
+            <div style="min-width: 0; width: 1.5em">
               <img
-                src="../../assets/icon/identity/coinSeller.png"
+                src="../../assets/icon/help.png"
                 alt=""
-                style="height: 20px; margin-left: 5px"
-                v-if="isFreightAgent"
+                style="display: block; width: 100%; object-fit: cover"
               />
             </div>
-            <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">
-              ID:{{ userProfile.account }}
+          </div>
+
+          <!-- 个人信息 -->
+          <div
+            style="
+              min-width: 0;
+              padding: 10px;
+              border-radius: 8px;
+              box-shadow: 0 0 4px 0 #00000050;
+
+              display: flex;
+              align-items: center;
+              gap: 4px;
+            "
+          >
+            <!-- 头像 -->
+            <img
+              :src="userInfo.userAvatar || ''"
+              alt=""
+              style="
+                width: 3em;
+                min-width: 0;
+
+                border-radius: 50%;
+                aspect-ratio: 1/1;
+                object-fit: cover;
+              "
+              @error="handleAvatarImageError"
+            />
+
+            <!-- 基本信息 -->
+            <div style="flex: 1; min-width: 0">
+              <div style="display: flex; align-items: center; gap: 4px">
+                <div
+                  style="
+                    font-weight: 700;
+
+                    min-width: 0;
+
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                  "
+                >
+                  {{ userInfo.userNickname }}
+                </div>
+
+                <img
+                  v-if="isFreightAgent"
+                  src="../../assets/icon/identity/coinSeller.png"
+                  alt=""
+                  style="
+                    display: block;
+                    width: auto;
+                    min-width: 0;
+                    height: 1.5em;
+                    object-fit: contain;
+                    flex-shrink: 0;
+                  "
+                />
+              </div>
+              <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">
+                ID:{{ userInfo.account }}
+              </div>
             </div>
           </div>
         </div>
 
-        <!-- 当前选择国家 -->
-        <div style="width: 100%; display: flex; justify-content: space-between; margin: 10px 0">
-          <div style="font-weight: 600">Select a country：</div>
-          <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)" @click="goMap">
-            <img src="../../assets/icon/Vector.png" alt="" style="width: 10px" />
-            {{ selectedCountry.countryName }}
-          </div>
-        </div>
-
-        <!-- 支付渠道 -->
-        <div v-if="channels.length != 0">
-          <div v-for="(channelItem, index) in channels" :key="index">
-            <!-- 支付类型 -->
+        <!-- 商品展示模块 -->
+        <div style="display: flex; flex-direction: column; gap: 8px">
+          <!-- 当前选择国家 -->
+          <div style="width: 100%; display: flex; justify-content: space-between">
+            <div style="font-weight: 600">Select a country：</div>
             <div
               style="
+                padding: 4px;
+                border-radius: 4px;
+                background: #7726ff;
+                box-shadow: 0 1px 18px 2px #f2d9ff inset, 0 1px 4px 2px #f2d9ff inset;
+
                 display: flex;
-                border-radius: 8px;
-                box-shadow: 0 0 4px 0 #00000050;
+                justify-content: center;
                 align-items: center;
+                gap: 4px;
               "
-              @click="setChannelName(channelItem.channel.channelName)"
+              @click="goMap"
             >
-              <img :src="channelItem.channel.channelIcon" alt="" style="width: 10%; margin: 10px" />
-              <div style="font-weight: 500">{{ channelItem.channel.channelName }}</div>
-            </div>
+              <!-- 国旗 -->
+              <img
+                :src="selectedCountry.country?.nationalFlag"
+                alt=""
+                style="display: block; width: 1.5em; object-fit: contain"
+              />
 
-            <!-- 支付商品 -->
+              <!-- 国家名字 -->
+              <div style="font-size: 0.8em; font-weight: 500; color: #fff">
+                {{ selectedCountry.countryName }}
+              </div>
+            </div>
+          </div>
+
+          <!-- 支付渠道 -->
+          <div v-if="channels.length != 0" style="display: flex; flex-direction: column; gap: 12px">
             <div
+              v-for="(channelItem, index) in channels"
+              :key="index"
               style="
+                padding: 10px;
                 border-radius: 8px;
                 box-shadow: 0 0 4px 0 #00000050;
-                display: grid;
-                grid-template-columns: repeat(3, 1fr);
-                gap: 12px;
-                padding: 10px;
-                margin-top: 1rem;
+
+                display: flex;
+                flex-direction: column;
+                gap: 8px;
               "
             >
-              <div
-                style="
-                  width: 100%;
-                  border-radius: 8px;
-                  box-shadow: 0 0 4px 0 #00000050;
-                  display: flex;
-                  flex-direction: column;
-                  align-items: center;
-                "
-                v-for="(goods, index) in commodityList"
-                :key="index"
-                @click="goPay(channelItem, goods)"
-              >
-                <img src="../../assets/icon/coin.png" alt="" style="width: 30%" />
-                <div>{{ goods.content }}</div>
-                <div>${{ goods.amountUsd }}</div>
+              <!-- 支付类型 -->
+              <div style="display: flex; align-items: center; gap: 8px">
+                <img :src="channelItem.channel.channelIcon" style="display: block; width: 2.5em" />
+                <div style="font-weight: 500">{{ channelItem.channel.channelName }}</div>
+              </div>
+
+              <!-- 支付商品 -->
+              <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px">
+                <div
+                  style="
+                    padding: 8px;
+                    width: 100%;
+                    border-radius: 8px;
+                    box-shadow: 0 0 4px 0 #00000050;
+
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    gap: 4px;
+                  "
+                  v-for="(goods, index) in commodityList"
+                  :key="index"
+                  @click="goPay(channelItem, goods)"
+                >
+                  <img
+                    src="../../assets/icon/coin.png"
+                    alt=""
+                    style="display: block; width: 3em; object-fit: cover"
+                  />
+                  <div style="font-size: 0.9em; font-weight: 500; color: #373232">
+                    {{ goods.content }}
+                  </div>
+                  <div style="font-size: 1em; font-weight: 500; color: #131111">
+                    ${{ goods.amountUsd }}
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -157,97 +190,69 @@
 </template>
 
 <script setup>
-import { onMounted, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
-import router from '@/router'
-import { useI18n } from 'vue-i18n'
+import { onMounted, ref } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { connectToApp } from '@/utils/appConnector.js'
+
 import { goAirwallex } from '@/utils/payment'
 import { showWarning } from '@/utils/toast.js'
-
 import { useCountryStore } from '@/stores/country'
 import { storeToRefs } from 'pinia'
+import { handleAvatarImageError } from '@/utils/imageHandler.js'
+import { getPngUrl } from '@/config/imagePaths.js'
+import { preloadImages } from '@/utils/imagePreloader.js'
 
-import { searchPayRechargeUser } from '@/api/userInfo'
+import { getMemberProfile } from '@/api/wallet'
+import { searchUser, searchPayRechargeUser } from '@/api/userInfo'
 import { getPayAplication, getAppCommodityCard, payPlaceAnOrderRecharge } from '@/api/pay'
 
-import MobileHeader from '@/components/MobileHeader.vue'
+import GeneralHeader from '@/components/GeneralHeader.vue'
 
-const { t, locale } = useI18n()
+// 获取OSS图片URL的函数
+const imageUrl = (filename) => getPngUrl('Recharge/', filename)
+const imgUrl = new URL('/src/assets/icon/arrowBackBlack.png', import.meta.url).href
 
 const countryStore = useCountryStore()
 const route = useRoute()
-
-const languageList = ref([
-  {
-    type: 'en',
-    value: 'English',
-  },
-  {
-    type: 'ar',
-    value: 'اللغة العربية',
-  },
-])
-const selectedLanguage = ref({
-  type: 'en',
-  value: 'English',
-})
-
-const visibleList = ref(false) //语言列表显示
-//语言列表显示
-const showLang = () => {
-  visibleList.value = !visibleList.value
-}
-
-const selectLang = (item) => {
-  selectedLanguage.value = item
-  localStorage.setItem('lang', item)
-}
-
-// 监听语言变化并设置文档方向
-watch(locale, (newLocale) => {
-  setDocumentDirection(newLocale)
-})
+const router = useRouter()
 
 const applicationId = ref('1963531459019739137')
-const userProfile = ref({}) //用户信息
-const type = ref('') //用户身份
-const isFreightAgent = ref(false)
+const userInfo = ref({}) //用户信息
+const type = ref(route.params.type || '') //用户身份
+const isFreightAgent = ref(route.query.isFreightAgent === 'true')
+const isSuperFreightAgent = ref(route.query.isSuperFreightAgent === 'true')
 
 const regionId = ref('') //区域id
 
-const { list: countryList, selectedCountry } = storeToRefs(countryStore) //国家信息
+const { selectedCountry } = storeToRefs(countryStore) //国家信息
 
 const channels = ref([]) //支付渠道
-const selectedChannelName = ref('') //选中的支付渠道
-
 const commodityList = ref([]) //商品列表
-const selectedCommodity = ref({}) //选中的商品
 
 // 前往地图页
 const goMap = () => {
   router.push({ path: '/map' })
 }
 
+// 点击商品支付
 const goPay = async (item, commodity) => {
-  selectedCommodity.value = commodity
   let payData = {
     applicationId: applicationId.value,
     payCountryId: selectedCountry.value.id,
     goodsId: commodity.id,
-    userId: userProfile.value.id,
+    userId: userInfo.value.id,
     channelCode: item.channel.channelCode,
   }
-  console.log('payData:', payData)
 
-  const payRes = await payPlaceAnOrderRecharge(payData)
-  const body = payRes.body
-  if (!body) {
+  const payRes = await payPlaceAnOrderRecharge(payData) // 下单充值
+  if (!payRes.body) {
     console.log('Payment not available, please contact administrator!!!')
     return
   }
-  if (body.factoryCode === 'AIRWALLEX') {
+  if (payRes.body.factoryCode === 'AIRWALLEX') {
+    // 拉起对应的h5支付页
     goAirwallex({
-      result: body,
+      result: payRes.body,
       props: {
         logoUrl: that.sysOriginLog,
         successUrl: `${location.origin}/#/pay-result?redirect=recharge&appType=${type.value}&appId=${applicationId.value}&appStatus=0`,
@@ -261,68 +266,117 @@ const goPay = async (item, commodity) => {
       },
     })
   }
-  if (body.requestUrl) {
-    location.href = decodeURIComponent(body.requestUrl)
+  if (payRes.body.requestUrl) {
+    location.href = decodeURIComponent(payRes.body.requestUrl)
+  }
+}
+//获取用户信息
+const getUserInfo = async () => {
+  const resUserInfo = await getMemberProfile()
+  if (resUserInfo.status && resUserInfo.body) {
+    userInfo.value = resUserInfo.body
   }
 }
 
-// 选中支付渠道
-const setChannelName = (channelName) => {
-  selectedChannelName.value = selectedChannelName.value != channelName ? channelName : ''
+// 检查身份
+const checkAccount = async () => {
+  console.log('充值目标用户account：', userInfo.value.account)
+
+  try {
+    const targetUserInfo = await searchUser(userInfo.value.account)
+    console.log('targetUserInfo:', targetUserInfo)
+    if (targetUserInfo.status && targetUserInfo.body.id) {
+      isSuperFreightAgent.value = targetUserInfo.body?.isSuperFreightAgent
+      isFreightAgent.value = targetUserInfo.body?.isFreightAgent
+    }
+  } catch (error) {
+    console.log('error:', error.response.errorMsg)
+    throw error
+  }
+}
+
+// 获取appCode
+const getAppCode = async () => {
+  const PayAplication = await getPayAplication(applicationId.value)
+  return PayAplication.body.appCode
+}
+
+// 获取支付渠道和商品列表
+const getPayAplicationAndCommodity = async () => {
+  let appCommodityCardParams = {
+    applicationId: applicationId.value,
+    payCountryId: selectedCountry.value.id,
+    regionId: regionId.value,
+    type: isSuperFreightAgent.value
+      ? 'FREIGHT_GOLD_SUPER'
+      : isFreightAgent.value
+      ? 'FREIGHT_GOLD'
+      : 'GOLD',
+  }
+  const appCommodityCard = await getAppCommodityCard(appCommodityCardParams)
+  commodityList.value = appCommodityCard.body.commodity
+  if (appCommodityCard.body.channels) {
+    channels.value = appCommodityCard.body.channels
+  }
+}
+
+// 获取用户信息和国家列表
+const getUserInfoAndCountry = async () => {
+  let appCode = await getAppCode()
+  if (appCode) {
+    let params = {
+      sysOrigin: appCode,
+      account: userInfo.value.account,
+      type: isSuperFreightAgent.value
+        ? 'FREIGHT_GOLD_SUPER'
+        : isFreightAgent.value
+        ? 'FREIGHT_GOLD'
+        : 'GOLD',
+    }
+    const countryAndRegionInfo = await searchPayRechargeUser(params)
+
+    if (
+      countryAndRegionInfo.body &&
+      countryAndRegionInfo.body.regionId &&
+      countryAndRegionInfo.body.countryList.length != 0
+    ) {
+      countryStore.setCountryList(countryAndRegionInfo.body.countryList) // 存储国家列表
+      // 设置默认国家
+      if (JSON.stringify(selectedCountry.value) == '{}') {
+        countryStore.setCountry(countryAndRegionInfo.body.countryList[0])
+      }
+
+      regionId.value = countryAndRegionInfo.body.regionId //区域id
+    }
+  }
+}
+
+// 数据初始化
+const init = async () => {
+  await getUserInfoAndCountry() // 获取用户信息和国家列表
+  await getPayAplicationAndCommodity() // 获取支付渠道和商品列表
+}
+
+// 使用工具函数连接APP
+const connectToAppHandler = () => {
+  connectToApp(async () => {
+    // 连接成功回调
+    await getUserInfo() //获取用户信息
+    await checkAccount() // 检查身份
+    await init() // 数据初始化
+  })
+}
+
+// 预加载关键图片
+const preloadCriticalImages = () => {
+  const criticalImages = [imageUrl('headImg')]
+
+  preloadImages(criticalImages)
 }
 
 onMounted(async () => {
-  type.value = route.params.type || 'GOLD'
-  isFreightAgent.value = route.query.isFreightAgent === 'true'
-
-  const PayAplication = await getPayAplication(applicationId.value)
-  console.log('PayAplication:', PayAplication)
-  if (PayAplication.body && PayAplication.body.appCode) {
-    let params = {
-      sysOrigin: PayAplication.body.appCode,
-      account: route.query.targetUserId,
-      type:
-        route.query.isSuperFreightAgent === 'true'
-          ? 'FREIGHT_GOLD_SUPER'
-          : route.query.isFreightAgent === 'true'
-          ? 'FREIGHT_GOLD'
-          : 'GOLD',
-    }
-    const userInfo = await searchPayRechargeUser(params)
-
-    if (userInfo.body && userInfo.body.regionId && userInfo.body.countryList.length != 0) {
-      userProfile.value = { ...userInfo.body.userProfile, type: 'GOLD' }
-
-      countryStore.setCountryList(userInfo.body.countryList)
-      if (JSON.stringify(selectedCountry.value) == '{}') {
-        countryStore.setCountry(userInfo.body.countryList[0])
-      }
-
-      regionId.value = userInfo.body.regionId
-
-      let appCommodityCardParams = {
-        applicationId: applicationId.value,
-        payCountryId: selectedCountry.value.id,
-        regionId: userInfo.body.regionId,
-        type:
-          route.query.isSuperFreightAgent === 'true'
-            ? 'FREIGHT_GOLD_SUPER'
-            : route.query.isFreightAgent === 'true'
-            ? 'FREIGHT_GOLD'
-            : 'GOLD',
-      }
-      const appCommodityCard = await getAppCommodityCard(appCommodityCardParams)
-      console.log('appCommodityCard:', appCommodityCard)
-      commodityList.value = appCommodityCard.body.commodity
-      if (appCommodityCard.body.channels) {
-        channels.value = appCommodityCard.body.channels
-      }
-    }
-  }
-})
-
-watch(selectedCountry, (New, Old) => {
-  console.log(`新值：${New.id},旧值：${Old.id}`)
+  preloadCriticalImages() // 预加载关键图片
+  connectToAppHandler()
 })
 </script>
 
@@ -375,4 +429,28 @@ watch(selectedCountry, (New, Old) => {
 .rotated {
   transform: rotate(90deg);
 }
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 12px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  * {
+    font-size: 32px;
+  }
+}
 </style>
diff --git a/src/views/Recharge/map.vue b/src/views/Recharge/map.vue
index de16d2f..e31bb9f 100644
--- a/src/views/Recharge/map.vue
+++ b/src/views/Recharge/map.vue
@@ -1,49 +1,41 @@
 <template>
   <div class="fullPage">
     <div class="bg">
-      <div>
-        <!-- 顶部 -->
-        <MobileHeader title="Country&Region">
-          <!-- <template v-slot:extraFunction>
-            <div style="display: flex; justify-content: center; align-items: center; width: 10%">
-              <img src="../assets/icon/selected.png" alt="" style="width: 100%" @click="confirm" />
-            </div>
-          </template> -->
-        </MobileHeader>
-      </div>
+      <!-- 顶部导航 -->
+      <GeneralHeader
+        title="Select Country"
+        :backImg="imgUrl"
+        color="black"
+        style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
+      />
 
       <!-- 内容 -->
-      <div style="padding: 10px">
+      <div style="padding: 10px; display: grid; gap: 10px">
         <div style="font-weight: 510; color: rgba(0, 0, 0, 0.4)">Select your country</div>
 
         <div v-for="(countries, gIndex) in groupedCountries" :key="gIndex">
-          <div style="font-weight: 400; color: rgba(0, 0, 0, 0.4)">{{ countries.letter }}</div>
+          <div style="font-weight: 400; color: rgba(0, 0, 0, 0.4); margin-bottom: 10px">
+            {{ countries.letter }}
+          </div>
           <div
             style="
-              margin: 10px 0;
               border-radius: 12px;
               box-shadow: 0 0 4px 0 #00000050;
               padding: 10px;
               background-color: white;
+
+              display: grid;
+              gap: 10px;
             "
           >
             <div
               v-for="(country, cIndex) in countries.countries"
               :key="cIndex"
-              style="
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                margin: 10px 0;
-              "
+              style="display: flex; justify-content: space-between; align-items: center"
               @click="selectC(gIndex, cIndex, country)"
             >
-              <div style="display: flex; align-items: center">
-                <img
-                  :src="country.country.nationalFlag"
-                  alt=""
-                  style="height: 16px; margin-right: 10px"
-                />
+              <div style="display: flex; align-items: center; gap: 10px">
+                <img :src="country.country.nationalFlag" alt="" style="height: 16px" />
                 {{ country.countryName }}
               </div>
               <div
@@ -81,7 +73,9 @@ import { useRouter } from 'vue-router'
 
 import { useCountryStore } from '@/stores/country'
 
-import MobileHeader from '@/components/MobileHeader.vue'
+import GeneralHeader from '@/components/GeneralHeader.vue'
+
+const imgUrl = new URL('/src/assets/icon/arrowBackBlack.png', import.meta.url).href
 
 const router = useRouter()
 const countryStore = useCountryStore()
@@ -162,4 +156,28 @@ const confirm = () => {
   background-size: 100% auto;
   background-repeat: no-repeat;
 }
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 12px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  * {
+    font-size: 32px;
+  }
+}
 </style>