feat(新页面): 金币代理页

src/router/index.js

@@ -233,6 +233,12 @@ const router = createRouter({
       component: () => import('../views/BDCenter/inviteAgency.vue'),
       meta: { requiresAuth: true },
     },
+    {
+      path: '/recharge-agency-recruit',
+      name: 'recharge-agency-recruit',
+      component: () => import('../views/RechargeAgency/Recruit.vue'),
+      meta: { requiresAuth: true },
+    },
   ],
 })
 

src/utils/permissionManager.js

@@ -37,7 +37,7 @@ export const PAGES = {
 // 🎯 核心改变：基于身份的权限配置
 // 每个身份拥有的页面权限列表
 export const ROLE_PERMISSIONS = {
-  // Freight Agent (货运代理/金币销售员)
+  // Freight Agent (充值代理Rechange Agency/货运代理Freight Agent/金币销售员Coin Seller)
   [USER_ROLES.FREIGHT_AGENT]: [
     PAGES.COIN_SELLER, // 主页面
     '/seller-records',
@@ -117,6 +117,7 @@ export const ROLE_PERMISSIONS = {
     '/weekly-star', //每周明星
     '/ranking', //总排行榜
     '/halloween', //万圣节活动页面
+    '/recharge-agency-recruit', //充值代理介绍页面
   ],
 
   // 加载页面

src/utils/routeGuard.js

@@ -407,6 +407,8 @@ class RouteGuard {
       '/top-list', //排行榜
       '/weekly-star', //每周明星
       '/ranking', //总排行榜
+      '/halloween', //万圣节活动页面
+      '/recharge-agency-recruit', //充值代理介绍页面
     ]
     return publicPages.includes(path)
   }

src/views/RechargeAgency/Recruit.vue

@@ -0,0 +1,306 @@
+<template>
+  <div class="fullPage">
+    <!-- 状态栏占位区域（仅在APP中显示） -->
+    <!-- <div v-if="isInAppEnvironment" style="height: 30px"></div> -->
+    <img :src="images.pageTop" alt="" width="100%" style="display: block" />
+    <div
+      style="
+        background: linear-gradient(
+          180deg,
+          #ffcc97 0%,
+          #ffa95e 14.99%,
+          #ff8e2e 29.99%,
+          #fd6500 44.98%,
+          #d53f00 59.98%
+        );
+        min-height: calc(100vh - 93.3vw + 24px);
+        border-radius: 24px 24px 0 0;
+        margin-top: -24px;
+        position: relative;
+        z-index: 2;
+        padding: 12px;
+      "
+    >
+      <!-- 头部 -->
+      <div style="display: flex; gap: 4px; align-items: flex-end; margin: 0 12px 12px">
+        <div style="font-size: 0.7em; font-weight: 700">Want To Become A Recharge Agency?</div>
+        <div
+          style="
+            font-size: 0.9em;
+            color: #ff3e13;
+            font-weight: 700;
+            border-bottom: 1px solid #ff3e13;
+            padding: 0 4px;
+          "
+          @click="maskLayerShow = true"
+        >
+          Contact Us Now!
+        </div>
+      </div>
+
+      <!-- 代理列表 -->
+      <div
+        style="
+          padding: 12px;
+
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+
+          border-radius: 12px;
+          background: rgba(255, 255, 255, 0.4);
+          backdrop-filter: blur(32px);
+        "
+      >
+        <!-- 基本信息 -->
+        <div style="display: flex; gap: 4px">
+          <div style="width: 15%; display: flex; align-items: center">
+            <img
+              src=""
+              alt=""
+              @error="defaultAvatarUrl"
+              style="display: block; width: 100%; aspect-ratio: 1/1"
+            />
+          </div>
+          <div
+            style="
+              width: 80%;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-around;
+              gap: 4px;
+            "
+          >
+            <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>
+            <div style="display: flex; align-items: center; gap: 4px">
+              <div style="position: relative; width: 30%">
+                <img :src="images.idBg" alt="" width="100%" style="display: block" />
+                <div
+                  style="
+                    position: absolute;
+                    inset: 0;
+                    padding: 5% 10% 5% 30%;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                  "
+                >
+                  <div
+                    style="
+                      font-size: 0.7em;
+                      width: 80%;
+                      overflow: hidden;
+                      white-space: nowrap;
+                      text-overflow: ellipsis;
+                    "
+                  >
+                    8826602
+                  </div>
+                  <img :src="images.copyWhite" alt="" width="20%" />
+                </div>
+              </div>
+              <img src="../../assets/icon/RA.png" alt="" width="25%" style="display: block" />
+            </div>
+          </div>
+        </div>
+        <!-- 代理信息 -->
+        <div>
+          <!-- 财力展示 -->
+          <div style="display: flex; gap: 4px; align-items: center">
+            <div style="font-weight: 700">Current balance:</div>
+            <div style="width: 5%">
+              <img
+                src="/src/assets/icon/coin.png"
+                alt=""
+                width="100%"
+                style="aspect-ratio: 1/1; display: block"
+              />
+            </div>
+            <div style="color: #f00; font-weight: 590">7********</div>
+          </div>
+          <!-- 老资历 -->
+          <div style="font-weight: 600; font-size: 0.8em">Has been a coin agency for 160 days</div>
+          <!-- 社交的手腕 -->
+          <div>
+            <div style="font-weight: 600; font-size: 0.8em; margin-bottom: 4px">
+              Available countries:
+            </div>
+            <div style="display: flex; gap: 4px; align-items: center; flex-wrap: wrap">
+              <img :src="images.testFlag" alt="" width="8%" style="display: block" />
+              <img :src="images.testFlag" alt="" width="8%" style="display: block" />
+              <img :src="images.testFlag" alt="" width="8%" style="display: block" />
+            </div>
+          </div>
+          <!-- 实力展示 -->
+          <div>10972 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
+          </div>
+        </div>
+        <!-- 按钮 -->
+        <div style="display: flex; justify-content: space-between">
+          <!-- 关注按钮 -->
+          <div
+            style="
+              width: 45%;
+              padding: 8px 12px;
+              border-radius: 89px;
+              background-blend-mode: normal, soft-light, normal;
+
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            "
+            :style="{
+              background: followingStatus
+                ? `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%,
+                  rgba(255, 255, 255, 0.2) 0%,
+                  rgba(255, 255, 255, 0) 100%
+                ),
+                linear-gradient(180deg, #fff 0%, #000 100%), #b464ff`,
+            }"
+            @click="followingStatus = !followingStatus"
+          >
+            <div style="font-weight: 500">Following</div>
+          </div>
+          <!-- 私聊按钮 -->
+          <div
+            style="
+              width: 45%;
+              padding: 8px 12px;
+              text-align: center;
+              border-radius: 60px;
+              background: radial-gradient(
+                  107.94% 107.94% at 15.9% 13.54%,
+                  rgba(255, 255, 255, 0.2) 0%,
+                  rgba(255, 255, 255, 0) 100%
+                ),
+                linear-gradient(180deg, #fff 0%, #000 100%), #4ecf5d;
+              background-blend-mode: normal, soft-light, normal;
+
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            "
+          >
+            <div style="font-weight: 500">Send Message</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 弹窗遮罩层 -->
+    <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
+      <div style="height: 100%; display: flex; justify-content: center; align-items: center">
+        <div
+          style="
+            width: 90%;
+            padding: 10px;
+            border-radius: 12px;
+            background: #fff;
+
+            display: flex;
+            gap: 10px;
+            flex-direction: column;
+          "
+          @click.stop
+        >
+          <div style="color: rgba(0, 0, 0, 0.8); font-weight: 800; font-size: 0.9em">
+            Contact Likei company's Whatsapp account:
+          </div>
+          <div style="display: flex; gap: 10px; align-items: center">
+            <img :src="images.phone" alt="" width="24px" />
+            <div style="color: #000; font-weight: 600">+86 18709616238</div>
+            <img :src="images.copy" alt="" width="24px" />
+          </div>
+        </div>
+      </div>
+    </maskLayer>
+  </div>
+</template>
+
+<script setup>
+import { isInApp } from '@/utils/appBridge.js'
+import { onMounted, ref } from 'vue'
+import maskLayer from '@/components/MaskLayer.vue'
+
+//vite动态批量导入图片
+const imageModules = import.meta.glob('@/assets/images/RechargeAgency/*.{png,jpg,svg}', {
+  eager: true,
+})
+// 生成文件名映射对象（自动移除路径和扩展名）
+const images = Object.fromEntries(
+  Object.entries(imageModules).map(([path, module]) => {
+    const fileName = path.split('/').pop().split('.')[0]
+    return [fileName, module.default]
+  })
+)
+
+const isInAppEnvironment = ref(false) // 检测是否在APP环境中
+
+const maskLayerShow = ref(false) // 控制遮罩层显示隐藏
+const followingStatus = ref(false) // 控制关注按钮状态
+
+const defaultAvatarUrl = (e) => {
+  console.log('头像资源出错')
+  e.target.onerror = null //防止循环
+  e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
+}
+
+// 关闭弹窗
+const closedPopup = () => {
+  maskLayerShow.value = false
+}
+
+onMounted(() => {
+  isInAppEnvironment.value = isInApp()
+  console.log('images:', images)
+})
+</script>
+
+<style lang="scss" scoped>
+* {
+  color: #fff;
+  font-family: 'SF Pro Text';
+}
+
+.fullPage {
+  width: 100vw;
+  min-height: 100vh;
+  background-color: #220447;
+  position: relative;
+}
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 16px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  * {
+    font-size: 32px;
+  }
+}
+</style>