style(春节活动页面): 新增弹窗和充值信息展示，并修复两个弹窗同时存在的问题

src/stores/springFestival.js

@@ -28,6 +28,7 @@ export const useSpringFestival = defineStore('springFestival', {
     myRechargeRanking: {}, // 我的充值排名
 
     // 充值奖池模块
+    myRechargeRecode: {}, // 我的充值记录
     RechargeRewards: {}, // 充值奖池
 
     resultShow: false,
@@ -43,7 +44,8 @@ export const useSpringFestival = defineStore('springFestival', {
     checkDate: '', // 对应几号
     checkStatus: false, // 是否已看过
 
-    helpShow: false, // 帮助展示
+    earningsHelpShow: false, // 收益help展示
+    rechargeHelpShow: false, // 充值help展示
   }),
   actions: {
     // 重置除了checkDate和checkStatus的属性

src/views/Activities/SpringFestival/Ranking.vue

@@ -236,6 +236,7 @@ const {
   myRechargeRanking, // 我的充值排名
 
   // 充值奖池模块
+  myRechargeRecode, // 我的充值记录
   RechargeRewards, // 充值奖池
 
   resultShow,
@@ -247,7 +248,8 @@ const {
   receiveRecordShow,
   receiveRecord, // 领取抽奖券记录
 
-  helpShow, // 帮助展示
+  earningsHelpShow, // 收益help展示
+  rechargeHelpShow, // 充值help展示
 } = storeToRefs(springFestivalStore)
 
 const langStore = useLangStore()

src/views/Activities/SpringFestival/RankingReward.vue

@@ -112,6 +112,7 @@ const {
   myRechargeRanking, // 我的充值排名
 
   // 充值奖池模块
+  myRechargeRecode, // 我的充值记录
   RechargeRewards, // 充值奖池
 
   resultShow,
@@ -123,7 +124,8 @@ const {
   receiveRecordShow,
   receiveRecord, // 领取抽奖券记录
 
-  helpShow, // 帮助展示
+  earningsHelpShow, // 收益help展示
+  rechargeHelpShow, // 充值help展示
 } = storeToRefs(springFestivalStore)
 
 const langStore = useLangStore()

src/views/Activities/SpringFestival/RechargeReward.vue

@@ -1,5 +1,98 @@
 <template>
   <div style="display: flex; flex-direction: column; gap: 2vw">
+    <!-- 个人充值信息 -->
+    <itemCenter
+      style="z-index: 0"
+      :imgUrl="imageUrl('earningInfoBg')"
+      :flip="true"
+      :contentStyle="`inset:11vw 10vw 9vw 9vw;justify-content: space-between;gap: 10vw;`"
+    >
+      <!-- 头像 -->
+      <img
+        v-smart-img
+        :src="myRechargeRecode?.userAvatar || ''"
+        alt=""
+        style="
+          position: relative;
+          z-index: -1;
+          width: 23vw;
+          min-width: 0;
+
+          border-radius: 50%;
+          aspect-ratio: 1/1;
+          object-fit: cover;
+        "
+        @error="handleAvatarImageError"
+      />
+
+      <!-- 基本信息 -->
+      <div
+        style="
+          position: relative;
+          flex: 1;
+          min-width: 0;
+          height: 80%;
+
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          gap: 1vw;
+        "
+      >
+        <!-- 充值帮助按钮 -->
+        <img
+          v-smart-img
+          src="/src/assets/icon/helpWhite.png"
+          alt=""
+          class="ruleBt"
+          @click="openPopup('rechargeHelp')"
+        />
+
+        <!-- 名称 -->
+        <div
+          style="
+            max-width: 70%;
+            min-width: 0;
+            font-weight: 500;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          "
+        >
+          {{ myRechargeRecode?.userName || '' }}
+        </div>
+
+        <!-- 账号 -->
+        <div>{{ $t('user_id_prefix') }} {{ myRechargeRecode?.account }}</div>
+
+        <!-- 总充值 -->
+        <div style="display: flex; justify-content: space-between; align-items: center">
+          <div>
+            {{ t('Accumulated recharge') }}:${{
+              formatRechargeAmount(myRechargeRecode?.totalAmount)
+            }}
+          </div>
+
+          <img
+            v-show="rechargehidden"
+            v-smart-img
+            :src="imageUrl('rechargeNumHidden')"
+            alt=""
+            style="width: 5vw; display: block; object-fit: cover"
+            @click="rechargehidden = !rechargehidden"
+          />
+          <img
+            v-show="!rechargehidden"
+            v-smart-img
+            :src="imageUrl('rechargeNumShow')"
+            alt=""
+            style="width: 5vw; display: block; object-fit: cover"
+            @click="rechargehidden = !rechargehidden"
+          />
+        </div>
+      </div>
+    </itemCenter>
+
     <itemCenter
       v-for="(rewardsTop, index) in RechargeRewards"
       style=""
@@ -72,6 +165,13 @@
           align-items: center;
         "
       >
+        <img
+          v-if="rewardsTop.claimStatus == -1"
+          class="grayscale-container"
+          :src="imageUrl('receiveBt')"
+          alt=""
+          style="width: 40vw; display: block; object-fit: cover"
+        />
         <img
           v-if="rewardsTop.claimStatus == 0"
           :src="imageUrl('receiveBt')"
@@ -80,9 +180,8 @@
           @click="receiveReward(rewardsTop)"
         />
         <img
-          v-else
+          v-if="rewardsTop.claimStatus == 1"
-          class="grayscale-container"
+          :src="imageUrl('receivedBt')"
-          :src="imageUrl('receiveBt')"
           alt=""
           style="width: 40vw; display: block; object-fit: cover"
         />
@@ -128,12 +227,15 @@ const {
   // 抽奖模块
   lotteryRewards, // 抽奖奖池
   tickets, // 抽奖券数量
+  luckyUsers, // 中奖用户列表
   userInfo, // 用户信息
   userIdentity, // 用户身份
   currentEarnings, // 当前收益
+  selectedPayee, // 选择的收款人
   taskList, // 任务列表
 
   // 抽奖排名模块
+  lotteryPageNo, // 抽奖排名页码
   lotteryRanking, // 抽奖排名
   addLotteryRanking, // 补充的抽奖排名
   myLotteryRanking, // 我的抽奖排名
@@ -142,11 +244,13 @@ const {
   rankingRewards, // 排名奖池
 
   // 充值排名模块
+  rechargePageNo, // 充值排名页码
   rechargeRanking, // 充值排名
   addRechargeRanking, // 补充的充值排名
   myRechargeRanking, // 我的充值排名
 
   // 充值奖池模块
+  myRechargeRecode, // 我的充值记录
   RechargeRewards, // 充值奖池
 
   resultShow,
@@ -158,7 +262,12 @@ const {
   receiveRecordShow,
   receiveRecord, // 领取抽奖券记录
 
-  helpShow, // 帮助展示
+  taskListShow, // 任务列表展示
+  checkDate, // 对应周几
+  checkStatus, // 是否已看过
+
+  earningsHelpShow, // 收益help展示
+  rechargeHelpShow, // 充值help展示
 } = storeToRefs(springFestivalStore)
 
 const langStore = useLangStore()
@@ -175,6 +284,18 @@ const getImgName = (filename) => {
   return currentLangType.value === 'ar' ? `filename_ar` : filename
 }
 
+const rechargehidden = ref(true) //金额是否隐藏
+// 根据隐藏状态处理金额显示的方法
+const formatRechargeAmount = (amount) => {
+  if (rechargehidden.value) {
+    // 如果隐藏，则将数字替换为*
+    return String(amount || '0').replace(/\d/g, '*')
+  } else {
+    // 如果不隐藏，则正常显示
+    return amount || '0'
+  }
+}
+
 const topImg = ref([
   imageUrl('rechargeReward100'),
   imageUrl('rechargeReward500'),
@@ -199,6 +320,54 @@ const rewardContentLayer = (index) => {
   }
 }
 
+// 打开遮罩层
+const openPopup = (type) => {
+  switch (type) {
+    case 'result':
+      closedPopup() // 关闭弹窗
+      resultShow.value = true
+      break
+    case 'drawRecord':
+      closedPopup() // 关闭弹窗
+      drawRecordShow.value = true
+      break
+    case 'receiveRecord':
+      closedPopup() // 关闭弹窗
+      receiveRecordShow.value = true
+      break
+    case 'earningsHelp':
+      closedPopup() // 关闭弹窗
+      earningsHelpShow.value = true
+      break
+    case 'rechargeHelp':
+      closedPopup() // 关闭弹窗
+      rechargeHelpShow.value = true
+      break
+    case 'taskList':
+      closedPopup() // 关闭弹窗
+      taskListShow.value = true
+      break
+
+    default:
+      closedPopup() // 关闭弹窗
+      break
+  }
+}
+
+// 关闭弹窗
+const closedPopup = () => {
+  if (taskListShow.value) {
+    checkStatus.value = true
+  }
+
+  resultShow.value = false
+  drawRecordShow.value = false
+  receiveRecordShow.value = false
+  earningsHelpShow.value = false
+  rechargeHelpShow.value = false
+  taskListShow.value = false
+}
+
 // 领取充值奖励
 const receiveReward = async (rewards) => {
   let data = {
@@ -348,6 +517,23 @@ onUnmounted(() => {})
   }
 }
 
+.ruleBt {
+  width: 4vw;
+  min-width: 0;
+  display: block;
+  aspect-ratio: 1/1;
+  object-fit: cover;
+
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+[dir='rtl'] .ruleBt {
+  left: 0;
+  right: auto;
+}
+
 .grayscale-container {
   filter: grayscale(100%) brightness(90%);
 }

src/views/Activities/SpringFestival/Task.vue

@@ -259,7 +259,7 @@
             src="/src/assets/icon/helpWhite.png"
             alt=""
             class="ruleBt"
-            @click="openPopup('help')"
+            @click="openPopup('earningsHelp')"
           />
 
           <!-- 名称 -->
@@ -717,6 +717,7 @@ const {
   myRechargeRanking, // 我的充值排名
 
   // 充值奖池模块
+  myRechargeRecode, // 我的充值记录
   RechargeRewards, // 充值奖池
 
   resultShow,
@@ -730,7 +731,8 @@ const {
 
   taskListShow, // 任务列表展示
 
-  helpShow, // 帮助展示
+  earningsHelpShow, // 收益help展示
+  rechargeHelpShow, // 充值help展示
 } = storeToRefs(springFestivalStore)
 
 const langStore = useLangStore()
@@ -823,29 +825,52 @@ const drawerShowBt = (type) => {
   selectedCoin.value = null
 }
 
-// 打开弹窗
+// 打开遮罩层
 const openPopup = (type) => {
   switch (type) {
     case 'result':
+      closedPopup() // 关闭弹窗
       resultShow.value = true
       break
-    case 'history':
+    case 'drawRecord':
+      closedPopup() // 关闭弹窗
       drawRecordShow.value = true
       break
-    case 'help':
+    case 'receiveRecord':
-      helpShow.value = true
+      closedPopup() // 关闭弹窗
+      receiveRecordShow.value = true
+      break
+    case 'earningsHelp':
+      closedPopup() // 关闭弹窗
+      earningsHelpShow.value = true
+      break
+    case 'rechargeHelp':
+      closedPopup() // 关闭弹窗
+      rechargeHelpShow.value = true
+      break
+    case 'taskList':
+      closedPopup() // 关闭弹窗
+      taskListShow.value = true
+      break
+
+    default:
+      closedPopup() // 关闭弹窗
       break
   }
 }
 
 // 关闭弹窗
-const closedPopup = (clear = true) => {
+const closedPopup = () => {
-  resultShow.value = false
+  if (taskListShow.value) {
-  helpShow.value = false
+    checkStatus.value = true
-  helpShow.value = false
-  // 清空数据
-  if (clear) {
   }
+
+  resultShow.value = false
+  drawRecordShow.value = false
+  receiveRecordShow.value = false
+  earningsHelpShow.value = false
+  rechargeHelpShow.value = false
+  taskListShow.value = false
 }
 
 //奖盘布局

src/views/Activities/SpringFestival/index.vue

@@ -587,11 +587,21 @@
             </itemCenter>
           </itemCenter>
 
-          <!-- help弹窗 -->
+          <!-- 收益help弹窗 -->
           <img
             v-smart-img
-            v-show="helpShow"
+            v-show="earningsHelpShow"
-            :src="imageUrl(getImgName('helpInfo'))"
+            :src="imageUrl(getImgName('earningsHelpInfo'))"
+            alt=""
+            style="display: block; width: 100%; object-fit: cover; margin-bottom: 6vw"
+            @click.stop
+          />
+
+          <!-- 充值help弹窗 -->
+          <img
+            v-smart-img
+            v-show="rechargeHelpShow"
+            :src="imageUrl(getImgName('rechargeHelpInfo'))"
             alt=""
             style="display: block; width: 100%; object-fit: cover; margin-bottom: 6vw"
             @click.stop
@@ -631,6 +641,7 @@ import {
   apigetRewardConfigs, // 获取礼物排行榜奖励列表.
   winnerHistory, //获取历史中奖用户
   withdrawableAmount, //获取可提现金额
+  myRecharge, // 获取充值记录
 } from '@/api/lottery'
 
 import Task from './Task.vue'
@@ -673,6 +684,7 @@ const {
   myRechargeRanking, // 我的充值排名
 
   // 充值奖池模块
+  myRechargeRecode, // 我的充值记录
   RechargeRewards, // 充值奖池
 
   resultShow,
@@ -688,7 +700,8 @@ const {
   checkDate, // 对应周几
   checkStatus, // 是否已看过
 
-  helpShow, // 帮助展示
+  earningsHelpShow, // 收益help展示
+  rechargeHelpShow, // 充值help展示
 } = storeToRefs(springFestivalStore)
 
 const langStore = useLangStore()
@@ -837,7 +850,8 @@ const maskLayerShow = computed(() => {
     drawRecordShow.value ||
     receiveRecordShow.value ||
     taskListShow.value ||
-    helpShow.value
+    earningsHelpShow.value ||
+    rechargeHelpShow.value
   )
 })
 
@@ -848,7 +862,8 @@ const centerPopupShow = computed(() => {
     drawRecordShow.value ||
     receiveRecordShow.value ||
     taskListShow.value ||
-    helpShow.value
+    earningsHelpShow.value ||
+    rechargeHelpShow.value
   )
 })
 
@@ -860,14 +875,14 @@ const checkShow = () => {
   if (dailyDate != checkDate.value) {
     checkDate.value = dailyDate // 更新周几
     checkStatus.value = false // 更新今日状态
-    showPopup('taskList')
+    openPopup('taskList')
   } else if (!checkStatus.value) {
-    showPopup('taskList')
+    openPopup('taskList')
   }
 }
 
 // 打开遮罩层
-const showPopup = (type) => {
+const openPopup = (type) => {
   switch (type) {
     case 'result':
       closedPopup() // 关闭弹窗
@@ -881,9 +896,13 @@ const showPopup = (type) => {
       closedPopup() // 关闭弹窗
       receiveRecordShow.value = true
       break
-    case 'help':
+    case 'earningsHelp':
       closedPopup() // 关闭弹窗
-      helpShow.value = true
+      earningsHelpShow.value = true
+      break
+    case 'rechargeHelp':
+      closedPopup() // 关闭弹窗
+      rechargeHelpShow.value = true
       break
     case 'taskList':
       closedPopup() // 关闭弹窗
@@ -905,8 +924,9 @@ const closedPopup = () => {
   resultShow.value = false
   drawRecordShow.value = false
   receiveRecordShow.value = false
+  earningsHelpShow.value = false
+  rechargeHelpShow.value = false
   taskListShow.value = false
-  helpShow.value = false
 }
 
 // 展示任务目标
@@ -1224,6 +1244,16 @@ const getRechargeReward = async () => {
   }
 }
 
+//获取充值记录
+const getMyRecharge = async () => {
+  const resMyRecharge = await myRecharge('2007771533988204888')
+  if (resMyRecharge.status && resMyRecharge.body) {
+    myRechargeRecode.value = resMyRecharge.body
+  } else {
+    myRechargeRecode.value = {}
+  }
+}
+
 // 页面初始化数据
 const initData = async () => {
   await Promise.all([
@@ -1243,6 +1273,7 @@ const initData = async () => {
 
     getGameReward(), // 获取游戏奖励列表
     getRechargeReward(), // 获取充值奖励列表
+    getMyRecharge(), //获取充值记录
   ])
 }
 
@@ -1318,7 +1349,8 @@ const preloadOtherImages = async () => {
     imageUrl('recordBg'),
 
     // help弹窗
-    imageUrl(getImgName('helpInfo')),
+    imageUrl(getImgName('earningsHelpInfo')), // 收益help
+    imageUrl(getImgName('rechargeHelpInfo')), // 充值help
 
     // 抽奖组件
     imageUrl('lotteryBg'),
@@ -1342,6 +1374,7 @@ const preloadOtherImages = async () => {
 
     // 充值奖励组件
     imageUrl('receiveBt'),
+    imageUrl('receivedBt'),
     imageUrl('rechargeReward100'),
     imageUrl('rechargeReward500'),
     imageUrl('rechargeReward1000'),