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

2026-02-11 17:13:29 +08:00 · 2026-02-11 17:13:29 +08:00 · 951ed222a4
commit 951ed222a4
parent 5311d89076
6 changed files with 282 additions and 32 deletions
--- a/src/stores/springFestival.js
+++ b/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的属性
--- a/src/views/Activities/SpringFestival/Ranking.vue
+++ b/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()
--- a/src/views/Activities/SpringFestival/RankingReward.vue
+++ b/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()
--- a/src/views/Activities/SpringFestival/RechargeReward.vue
+++ b/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
-          class="grayscale-container"
-          :src="imageUrl('receiveBt')"
+          v-if="rewardsTop.claimStatus == 1"
+          :src="imageUrl('receivedBt')"
          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%);
 }
--- a/src/views/Activities/SpringFestival/Task.vue
+++ b/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':
-      helpShow.value = true
+    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 = (clear = true) => {
-  resultShow.value = false
-  helpShow.value = false
-  helpShow.value = false
-  // 清空数据
-  if (clear) {
+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
 }

 //奖盘布局
--- a/src/views/Activities/SpringFestival/index.vue
+++ b/src/views/Activities/SpringFestival/index.vue
@ -587,11 +587,21 @@
            </itemCenter>
          </itemCenter>

-          <!-- help弹窗 -->
+          <!-- 收益help弹窗 -->
          <img
            v-smart-img
-            v-show="helpShow"
-            :src="imageUrl(getImgName('helpInfo'))"
+            v-show="earningsHelpShow"
+            :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'),