feat(春节活动页面): 抽奖模块中奖用户滚动模块完成

src/stores/springFestival.js

@@ -5,6 +5,7 @@ export const useSpringFestival = defineStore('springFestival', {
     // 抽奖模块
     lotteryRewards: {}, // 抽奖奖池
     tickets: 0, // 抽奖券数量
+    luckyUsers: [], //中奖用户列表
     userInfo: {}, // 用户信息
     userIdentity: {}, // 用户身份
     currentEarnings: 0, // 当前收益

src/views/Activities/SpringFestival/Task.vue

@@ -14,6 +14,46 @@
         @click="getDrawRecords"
       />
 
+      <!-- 中奖历史轮播 -->
+      <div
+        style="
+          position: absolute;
+          z-index: 2;
+          top: -22vw;
+          left: 0;
+          width: 100%;
+          height: 11vw;
+
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          padding-right: 1vw;
+        "
+      >
+        <div style="width: 33%; min-width: 0; overflow: hidden; position: relative">
+          <!-- 滚动容器 -->
+          <div
+            class="scroll-wrapper"
+            ref="scrollWrapper"
+            :style="{ animationDuration: `${duration}s` }"
+          >
+            <!-- 2套内容 -->
+            <div class="scroll-content" v-for="value in 2">
+              <div
+                v-for="(item, index) in luckyUsers"
+                :key="index"
+                style="align-self: stretch; display: flex; align-items: center; gap: 2vw"
+              >
+                <div style="font-size: 1.2em; font-weight: 700; color: #fff; white-space: nowrap">
+                  {{ barrageText(item) }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <!-- 抽奖转盘 -->
       <div
         style="
@@ -587,7 +627,7 @@
 </template>
 
 <script setup>
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { connectToApp } from '@/utils/appConnector.js'
 import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
@@ -634,6 +674,7 @@ const {
   // 抽奖模块
   lotteryRewards, // 抽奖奖池
   tickets, // 抽奖券数量
+  luckyUsers, // 中奖用户列表
   userInfo, // 用户信息
   userIdentity, // 用户身份
   currentEarnings, // 当前收益
@@ -692,6 +733,42 @@ const props = defineProps({
   },
 })
 
+const duration = ref(0) // 弹幕滚动时长
+
+// 显示的文本
+const barrageText = (item) => {
+  const params = { nickname: item.nickname, prizeName: item.prizeName }
+  return item.prizeType == 'GOLD' || item.prizeType == 'MONEY'
+    ? t('barrage_won_prize', params)
+    : t('barrage_won_the_prize', params)
+}
+
+const scrollWrapper = ref(null) //滚动模块
+
+watch(luckyUsers, async () => {
+  await nextTick()
+
+  const calculateWidth = () => {
+    const wrapper = scrollWrapper.value
+    if (!wrapper) return
+
+    const contentWidth = wrapper.scrollWidth
+    console.log('luckyUsers 更新后的宽度:', contentWidth)
+
+    if (contentWidth === 0) {
+      console.warn('宽度为 0，稍后重试...')
+      setTimeout(calculateWidth, 100) // 延时重试
+    } else {
+      // 正常处理逻辑
+      const speed = 80
+      duration.value = contentWidth / speed
+      console.log('计算总时长（秒）:', duration.value)
+    }
+  }
+
+  calculateWidth()
+})
+
 const isRolling = ref(false) // 是否正在抽奖
 const activeIndex = ref(0)
 
@@ -987,45 +1064,11 @@ const getMyLotteryTicketCount = async () => {
   }
 }
 
-// 刷新页面数据
+onMounted(async () => {
-const initData = async () => {
-  await Promise.all([])
-}
-
-// 预加载关键图片
-const preloadCriticalImages = async () => {
-  const criticalImages = []
-
-  await preloadImages(criticalImages)
-}
-
-// 完成预加载
-const completePreloading = async () => {
-  try {
-    // 执行所有初始化操作
-    await Promise.all([initData(), preloadCriticalImages()])
-  } catch (error) {
-    console.error('预加载过程中发生错误:', error)
-  } finally {
-    // 无论成功或失败都结束加载状态
-    isLoading.value = false
-  }
-}
-
-// 使用工具函数连接APP
-const connectToAppHandler = async () => {
-  await connectToApp(() => {
-    // 连接成功回调
-    completePreloading() // 完成预加载
-  })
-}
-
-onMounted(() => {
   console.log('route.query.activeAction:', route.query.activeAction)
   if (route.query.activeAction == 'TaskShow') {
     drawerShowBt('transfer')
   }
-  // connectToAppHandler()
 })
 
 onUnmounted(() => {})
@@ -1146,6 +1189,57 @@ onUnmounted(() => {})
   transform: scale(0.98);
 }
 
+.scroll-wrapper {
+  display: flex;
+  width: fit-content;
+}
+
+.scroll-content {
+  display: flex;
+  align-items: center;
+}
+
+@keyframes scroll-left {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+}
+
+@keyframes scroll-right {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(50%);
+  }
+}
+
+[dir='ltr'] .scroll-content {
+  margin-left: 4vw;
+}
+
+[dir='rtl'] .scroll-content {
+  margin-left: auto;
+  margin-right: 4vw;
+}
+
+[dir='ltr'] .scroll-wrapper {
+  animation-name: scroll-left;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  will-change: transform;
+}
+
+[dir='rtl'] .scroll-wrapper {
+  animation-name: scroll-right;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  will-change: transform;
+}
+
 .scrollY::-webkit-scrollbar {
   display: none;
 }

src/views/Activities/SpringFestival/index.vue

@@ -634,6 +634,7 @@ import {
 import {
   ranklist, //获取排行榜
   activityRewardConfigs, // 获取活动奖励配置列表
+  winnerHistory, //获取历史中奖用户
   withdrawableAmount, //获取可提现金额
 } from '@/api/lottery'
 
@@ -654,6 +655,7 @@ const {
   // 抽奖模块
   lotteryRewards, // 抽奖奖池
   tickets, // 抽奖券数量
+  luckyUsers, // 中奖用户列表
   userInfo, // 用户信息
   userIdentity, // 用户身份
   currentEarnings, // 当前收益
@@ -931,6 +933,14 @@ const getMyLotteryTicketCount = async () => {
   }
 }
 
+//获取中奖用户列表
+const getWinners = async () => {
+  const resWinners = await winnerHistory()
+  if (resWinners.status && resWinners.body) {
+    luckyUsers.value = resWinners.body
+  }
+}
+
 //获取任务列表
 const getTaskList = async () => {
   // const resTaskList = await ActTaskList()
@@ -1185,6 +1195,8 @@ const initData = async () => {
     getActivityDetail(), //获取奖池
     getMyLotteryTicketCount(), //获取抽奖券
 
+    getWinners(), //获取历史中奖用户
+
     getTaskList(), //获取任务列表
 
     getUserInfo(), //获取用户信息