From ddbaa5fb91ce9b80dcd0980af4ccf2f0515b80ea Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Mon, 8 Dec 2025 19:21:21 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=96=B0=E9=A1=B5=E9=9D=A2):=20=E5=85=85?=
 =?UTF-8?q?=E5=80=BC=E5=BC=95=E5=AF=BC=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                         | 10 ++++
 src/utils/permissionManager.js              |  1 +
 src/utils/routeGuard.js                     |  1 +
 src/views/Recharge/RechargeFreightAgent.vue |  7 ++-
 src/views/Recharge/guide.vue                | 64 +++++++++++++++++++++
 5 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 src/views/Recharge/guide.vue

diff --git a/src/router/index.js b/src/router/index.js
index 045bd85..a2d7ee9 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -329,6 +329,16 @@ const router = createRouter({
       component: () => import('../views/AdminCenter/MyRechargeAgency.vue'),
       meta: { requiresAuth: true },
     },
+
+    // 充值引导页
+    {
+      path: '/recharge-guide',
+      name: 'recharge-guide',
+      component: () => import('../views/Recharge/guide.vue'),
+      meta: { requiresAuth: true },
+    },
+
+    // 限时活动
     {
       path: '/activity-game',
       name: 'activity-game',
diff --git a/src/utils/permissionManager.js b/src/utils/permissionManager.js
index a5493b0..22fd38d 100644
--- a/src/utils/permissionManager.js
+++ b/src/utils/permissionManager.js
@@ -76,6 +76,7 @@ export const ROLE_PERMISSIONS = {
     ...RANKING_PAGES, //排行榜
     ...ACTIVITIES, //活动页面
     '/recharge',
+    '/recharge-guide',
     '/recharge-agency-recruit', //充值代理介绍页面
     '/search-payee', //搜索收款人
     '/cash-out', // 提现页面
diff --git a/src/utils/routeGuard.js b/src/utils/routeGuard.js
index 10b7a60..fbce91c 100644
--- a/src/utils/routeGuard.js
+++ b/src/utils/routeGuard.js
@@ -424,6 +424,7 @@ class RouteGuard {
       '/404', // 404页面
       '/error', // 通用错误页面
       '/recharge',
+      '/recharge-guide',
       '/recharge-agency-recruit', //充值代理介绍页面
       '/pay-result',
       '/search-payee', //搜索收款人
diff --git a/src/views/Recharge/RechargeFreightAgent.vue b/src/views/Recharge/RechargeFreightAgent.vue
index 856286c..5e7d629 100644
--- a/src/views/Recharge/RechargeFreightAgent.vue
+++ b/src/views/Recharge/RechargeFreightAgent.vue
@@ -21,7 +21,7 @@
           <!-- 标题 -->
           <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">
+            <div style="min-width: 0; width: 1.5em" @click="goGuide">
               <img
                 src="../../assets/icon/help.png"
                 alt=""
@@ -234,6 +234,11 @@ const goMap = () => {
   router.push({ path: '/map' })
 }
 
+// 前往引导页
+const goGuide = () => {
+  router.push({ path: '/recharge-guide' })
+}
+
 // 点击商品支付
 const goPay = async (item, commodity) => {
   let payData = {
diff --git a/src/views/Recharge/guide.vue b/src/views/Recharge/guide.vue
new file mode 100644
index 0000000..079d3b4
--- /dev/null
+++ b/src/views/Recharge/guide.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="policy-container">
+    <img
+      :src="imageUrl(getImgName('rechargeGuide'))"
+      alt=""
+      style="display: block; width: 100vw; object-fit: cover"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useLangStore } from '@/stores/lang'
+import { getPngUrl } from '@/config/imagePaths.js'
+import { preloadImages } from '@/utils/imagePreloader.js'
+
+import GeneralHeader from '@/components/GeneralHeader.vue'
+
+// 获取OSS图片URL的函数
+const imageUrl = (filename) => getPngUrl('Recharge/', filename)
+// 根据语言获取图片名
+const getImgName = (filename) => {
+  return currentLangType.value === 'ar' ? `${filename}_ar` : filename
+}
+
+const langStore = useLangStore()
+const { t, locale } = useI18n()
+
+// 当前语言类型
+const currentLangType = computed(() => {
+  return langStore.selectedLang?.type || 'en'
+})
+
+const imgUrl = new URL('/src/assets/icon/arrowBackBlack.png', import.meta.url).href
+
+// 预加载关键图片
+const preloadCriticalImages = () => {
+  const criticalImages = [imageUrl('rechargeGuide')]
+  const criticalImages_ar = [imageUrl('rechargeGuide_ar')]
+
+  if (currentLangType.value == 'en') {
+    preloadImages(criticalImages)
+  } else if (currentLangType.value == 'ar') {
+    preloadImages(criticalImages_ar)
+  }
+}
+
+onMounted(() => {
+  preloadCriticalImages() // 预加载关键图片
+})
+</script>
+
+<style lang="scss" scoped>
+.policy-container {
+  height: 100vh;
+  background-image: url(../../assets/images/secondBg.png);
+  overflow-y: auto;
+}
+
+.policy-container::-webkit-scrollbar {
+  display: none;
+}
+</style>