feat(新组件): 弹幕组件

src/components/Lottery/Barrage.vue

@@ -0,0 +1,257 @@
+<!-- Barrage.vue 优化版 -->
+<template>
+  <div
+    style="position: relative; width: 100%; height: 32vw; overflow: hidden; pointer-events: none"
+  >
+    <!-- 双行弹幕轨道 -->
+    <div
+      v-for="(track, index) in visibleTracks"
+      :key="index"
+      style="position: absolute; width: 100%; height: 50px"
+      :style="{ top: `calc(${index} * 16vw)` }"
+    >
+      <div
+        v-for="item in track"
+        :key="item.id"
+        class="barrage-item"
+        style="
+          position: absolute;
+          left: 0;
+
+          border-radius: 48px;
+          padding: 4px;
+
+          transform: translateX(100vw);
+
+          display: flex;
+          align-items: center;
+          gap: 4px;
+        "
+        :style="getBarrageStyle(item)"
+        @animationend="handleAnimationEnd(item.id)"
+      >
+        <img
+          src=""
+          alt=""
+          @error="defaultAvatarUrl"
+          style="
+            width: 10vw;
+            border-radius: 50%;
+            display: block;
+            aspect-ratio: 1/1;
+            object-fit: cover;
+          "
+        />
+        <div
+          style="
+            font-weight: 700;
+            background-clip: text;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+          "
+          :style="{
+            backgroundImage:
+              item.type == 'gift'
+                ? '-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 }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+
+const props = defineProps({
+  barrageList: {
+    type: Array,
+    required: true,
+    default: () => [],
+  },
+
+  speed: {
+    type: Number,
+    default: 80, // 基础速度系数
+  },
+
+  maxItems: {
+    type: Number,
+    default: 6, // 每行最大弹幕数
+  },
+
+  loopInterval: {
+    type: Number,
+    default: 2000, // 弹幕生成间隔(ms)
+  },
+})
+
+// 弹幕轨道数据
+const tracks = ref([[], []])
+// 弹幕ID计数器
+const idCounter = ref(0)
+// 当前播放索引（用于循环）
+const currentIndex = ref(0)
+
+// 计算实际显示的轨道（过滤空轨道）
+const visibleTracks = computed(() => tracks.value.filter((track) => track.length > 0))
+
+const defaultAvatarUrl = (e) => {
+  console.log('头像资源出错')
+  e.target.onerror = null //防止循环
+  e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
+}
+
+// 获取弹幕样式
+const getBarrageStyle = (item) => ({
+  animationDuration: `${item.duration}s`,
+  animationDelay: `${item.delay}s`,
+
+  '--start-pos': `${item.startPos}px`,
+
+  border: item.type == 'gift' ? '0.667px solid #FFF677' : '0.667px solid #77FF87',
+  background:
+    item.type == 'gift'
+      ? '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
+  return {
+    duration: Math.max(8 - textLength * 0.2, 5) * (100 / props.speed),
+    startPos: Math.floor(Math.random() * 21) - 10,
+  }
+}
+
+// 添加弹幕到轨道
+const addToTrack = (item) => {
+  // 寻找最短的轨道
+  const trackIndex = tracks.value.reduce(
+    (minIndex, track, index) => (track.length < tracks.value[minIndex].length ? index : minIndex),
+    0
+  )
+
+  if (tracks.value[trackIndex].length < props.maxItems) {
+    tracks.value[trackIndex].push({
+      ...item,
+      id: idCounter.value++,
+      delay: Math.random() * 4, // 随机延迟（0-4秒）
+      ...generateBarrageProps(item),
+    })
+  }
+}
+
+// 清理完成动画的弹幕
+const cleanCompleted = () => {
+  tracks.value.forEach((track) => {
+    for (let i = track.length - 1; i >= 0; i--) {
+      if (track[i].completed) {
+        track.splice(i, 1)
+      }
+    }
+  })
+}
+
+// 弹幕动画结束处理
+const handleAnimationEnd = (id) => {
+  tracks.value.forEach((track) => {
+    const item = track.find((item) => item.id === id)
+    if (item) item.completed = true
+  })
+}
+
+// 获取下一项弹幕（循环逻辑）
+const getNextBarrage = () => {
+  if (props.barrageList.length === 0) return null
+
+  // 循环获取弹幕
+  const item = props.barrageList[currentIndex.value]
+  currentIndex.value = (currentIndex.value + 1) % props.barrageList.length
+
+  return { ...item } // 返回副本避免污染原始数据
+}
+
+// 弹幕循环逻辑
+let barrageInterval = null
+const startBarrage = () => {
+  barrageInterval = setInterval(() => {
+    cleanCompleted()
+
+    const nextBarrage = getNextBarrage()
+    if (nextBarrage) {
+      addToTrack(nextBarrage)
+    }
+  }, props.loopInterval)
+}
+
+onMounted(startBarrage)
+onUnmounted(() => clearInterval(barrageInterval))
+
+// 监听数据源变化
+watch(
+  () => props.barrageList,
+  (newList) => {
+    // 重置索引，确保重新开始循环
+    currentIndex.value = 0
+
+    // 如果列表为空，停止生成新弹幕
+    if (newList.length === 0) {
+      clearInterval(barrageInterval)
+    } else {
+      // 重启弹幕循环
+      clearInterval(barrageInterval)
+      startBarrage()
+    }
+  },
+  { deep: true }
+)
+</script>
+
+<style scoped>
+* {
+  font-family: 'SF Pro Text';
+}
+
+/* 样式保持不变（同之前版本） */
+.barrage-item {
+  will-change: transform;
+  animation: moveLeft linear forwards;
+}
+@keyframes moveLeft {
+  0% {
+    transform: translateX(100vw);
+  }
+  100% {
+    transform: translateX(calc(-100% - var(--start-pos, 0px)));
+  }
+}
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 16px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  * {
+    font-size: 32px;
+  }
+}
+</style>

src/views/Activities/Lottery/Lottery.vue

@@ -7,7 +7,10 @@
       <img :src="images.pageTitle" alt="" width="100%" style="display: block" />
 
       <!-- 弹幕 -->
-      <!-- <Barrage></Barrage> -->
+      <Barrage
+        style="width: 100vw; position: relative; left: -10px; margin: 10px 0"
+        :barrageList="barrageList"
+      ></Barrage>
 
       <!-- 模块切换按钮 -->
       <div style="display: flex; justify-content: space-around">
@@ -624,7 +627,7 @@ import maskLayer from '@/components/MaskLayer.vue'
 import { useDebounce, useThrottle } from '@/utils/useDebounce'
 import { getMemberProfile } from '@/api/wallet'
 import { useRouter } from 'vue-router'
-// import Barrage from '@/components/Lottery/Barrage.vue'
+import Barrage from '@/components/Lottery/Barrage.vue'
 
 const router = useRouter()
 
@@ -640,6 +643,12 @@ const images = Object.fromEntries(
   })
 )
 
+// 弹幕数据（示例）
+const barrageList = ref([
+  { text: 'Junge won the jackpot', type: 'gift' },
+  { text: 'Junge withdrew $10', type: 'doller' },
+])
+
 // 奖品数据 (8个位置)
 const prizes = ref([
   { value: '奖品1' },