feat(充值奖励页): 新增帮助按钮及其功能

src/views/Activities/Reward/RechargeReward.vue

@@ -3,7 +3,24 @@
     <!-- Rewards0.png 使用相对定位容器 -->
     <div style="position: relative">
       <img :src="images.Rewards0" alt="" style="width: 100%; display: block" />
-      <!-- 绝对定位的覆盖层，与 Rewards0.png 同级 -->
+      <!-- 帮助按钮 -->
+      <img
+        v-smart-img
+        :src="images.help"
+        alt=""
+        style="
+          position: absolute;
+          top: 2%;
+          right: 4%;
+          display: block;
+          width: 10vw;
+          aspect-ratio: 1/1;
+          object-fit: cover;
+        "
+        @click="maskLayerShow = true"
+      />
+
+      <!-- 用户信息、累积充值金额 -->
       <div
         style="
           position: absolute;
@@ -90,11 +107,19 @@
     </div>
 
     <!-- 其他图片直接引入 -->
-    <img :src="images.Rewards1" alt="" style="width: 100%; display: block" />
+    <img v-smart-img :src="images.Rewards1" alt="" style="width: 100%; display: block" />
-    <img :src="images.Rewards2" alt="" style="width: 100%; display: block" />
+    <img v-smart-img :src="images.Rewards2" alt="" style="width: 100%; display: block" />
-    <img :src="images.Rewards3" alt="" style="width: 100%; display: block" />
+    <img v-smart-img :src="images.Rewards3" alt="" style="width: 100%; display: block" />
-    <img :src="images.Rewards4" alt="" style="width: 100%; display: block" />
+    <img v-smart-img :src="images.Rewards4" alt="" style="width: 100%; display: block" />
-    <img :src="images.Rewards5" alt="" style="width: 100%; display: block" />
+    <img v-smart-img :src="images.Rewards5" alt="" style="width: 100%; display: block" />
+
+    <!-- 弹窗遮罩层 -->
+    <maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
+      <!-- help弹窗 -->
+      <div style="margin: 20% 0" @click.stop>
+        <img v-smart-img :src="images.helpInfo" alt="" style="display: block; width: 100%" />
+      </div>
+    </maskLayer>
   </div>
 </template>
 
@@ -104,12 +129,7 @@ import { connectToApp } from '@/utils/appConnector.js'
 
 import { getMemberProfile, getTotalRecharge } from '@/api/wallet'
 
-const userInfo = ref({
+import maskLayer from '@/components/MaskLayer.vue'
-  account: '',
-  userNickname: '',
-  userAvatar: '',
-  recharge: '',
-}) //个人信息
 
 // 使用与Lottery.vue相同的方式导入图片
 const imageModules = import.meta.glob('@/assets/images/RechargeReward/*.{jpg,png,svg}', {
@@ -123,6 +143,16 @@ const images = Object.fromEntries(
   })
 )
 
+const maskLayerShow = ref(false) //帮助模块
+
+//个人信息
+const userInfo = ref({
+  account: '',
+  userNickname: '',
+  userAvatar: '',
+  recharge: '',
+})
+
 //获取累积充值信息
 const getTotalRechargeInfo = async () => {
   // 连接成功回调