feat(新页面): 充值引导页

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',

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', // 提现页面

src/utils/routeGuard.js

@@ -424,6 +424,7 @@ class RouteGuard {
       '/404', // 404页面
       '/error', // 通用错误页面
       '/recharge',
+      '/recharge-guide',
       '/recharge-agency-recruit', //充值代理介绍页面
       '/pay-result',
       '/search-payee', //搜索收款人

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 = {

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>