feat(抽奖活动页): 对接获取历史中奖用户的接口

src/api/lottery.js

@@ -70,7 +70,7 @@ export const multiDraw = async (data) => {
   }
 }
 
-// 获取中奖记录
+// 获取我的中奖记录
 export const drawRecords = async () => {
   try {
     const response = await get(`/activity/lottery/my-records`)
@@ -82,6 +82,18 @@ export const drawRecords = async () => {
   }
 }
 
+// 获取历史中奖用户
+export const winnerHistory = async () => {
+  try {
+    const response = await get(`/activity/lottery/winner-history`)
+    return response
+  } catch (error) {
+    console.error('Failed to fetch get winners:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
 // 获取任务列表
 export const ActTaskList = async () => {
   try {

src/components/Lottery/Barrage.vue

@@ -31,7 +31,7 @@
         @animationend="handleAnimationEnd(item.id)"
       >
         <img
-          src=""
+          :src="item.avatar"
           alt=""
           @error="defaultAvatarUrl"
           style="
@@ -51,12 +51,12 @@
           "
           :style="{
             backgroundImage:
-              item.type == 'gift'
+              item.type != ''
                 ? '-webkit-linear-gradient(180deg, #FFF9A9 26.92%, #ED7D0A 52.08%, #FFFAB5 73.08%)'
                 : '-webkit-linear-gradient(180deg, #A9FFA9 26.92%, #0AED47 52.08%, #B5FFC5 73.08%)',
           }"
         >
-          {{ item.text }}
+          {{ barrageText(item) }}
         </div>
       </div>
     </div>
@@ -99,6 +99,13 @@ const currentIndex = ref(0)
 // 计算实际显示的轨道（过滤空轨道）
 const visibleTracks = computed(() => tracks.value.filter((track) => track.length > 0))
 
+// 显示的文本
+const barrageText = (item) => {
+  return item.prizeType == 'GOLD' || item.prizeType == 'MONEY'
+    ? `${item.nickname} won ${item.prizeName}`
+    : `${item.nickname} won the ${item.prizeName}`
+}
+
 const defaultAvatarUrl = (e) => {
   console.log('头像资源出错')
   e.target.onerror = null //防止循环
@@ -112,16 +119,16 @@ const getBarrageStyle = (item) => ({
 
   '--start-pos': `${item.startPos}px`,
 
-  border: item.type == 'gift' ? '0.667px solid #FFF677' : '0.667px solid #77FF87',
+  border: item.type != '' ? '0.667px solid #FFF677' : '0.667px solid #77FF87',
   background:
-    item.type == 'gift'
+    item.type != ''
       ? 'linear-gradient(270deg, rgba(218, 103, 2, 0.60) -16.85%, rgba(124, 41, 0, 0.60) 82.7%)'
       : 'linear-gradient(270deg, rgba(2, 218, 60, 0.60) -16.85%, rgba(0, 124, 54, 0.60) 82.7%)',
 })
 
 // 生成随机弹幕属性
 const generateBarrageProps = (item) => {
-  const textLength = item.text.length
+  const textLength = barrageText(item).length
   return {
     duration: Math.max(8 - textLength * 0.2, 5) * (100 / props.speed),
     startPos: Math.floor(Math.random() * 21) - 10,

src/views/Activities/Lottery/Lottery.vue

@@ -843,6 +843,7 @@ import {
   drawRecords, // 获取中奖记录
   ActTaskList, // 获取任务列表
   receiveTickets, // 领取任务奖励
+  winnerHistory, //获取历史中奖用户
 } from '@/api/lottery'
 import Barrage from '@/components/Lottery/Barrage.vue'
 
@@ -861,13 +862,10 @@ const images = Object.fromEntries(
 )
 
 // 弹幕数据（示例）
-const barrageList = ref([
-  { text: 'Junge won the jackpot', type: 'gift' },
-  { text: 'Junge withdrew $10', type: 'doller' },
-])
+const barrageList = ref([])
 
 // 活动详情
-const activity = ref({})
+const activity = ref({}) //活动详情和奖池
 
 const userInfo = ref({}) //用户信息
 const userIdentity = ref({}) //用户身份
@@ -1360,6 +1358,14 @@ const getDrawRecords = async () => {
   }
 }
 
+//获取中奖记录
+const getWinners = async () => {
+  const resWinners = await winnerHistory()
+  if (resWinners.status && resWinners.body) {
+    barrageList.value = resWinners.body
+  }
+}
+
 //获取中奖记录
 const receiveTaskReward = async (code) => {
   let data = {
@@ -1380,6 +1386,7 @@ onMounted(() => {
   getDrawRecords() // 获取中奖记录
   getTickets() //获取拥有的抽奖券
   getTaskList() //获取任务列表
+  getWinners() //获取历史中奖用户
 })
 
 onUnmounted(() => {