修改弹幕内容数组

src/pages/index/index.vue

@@ -184,122 +184,186 @@
         :frequency="500"
         :speeds="5000"
         :top="10"
+        :rows="3"
       ></nut-barrage>
     </view>
   </view>
   <Tabbar></Tabbar>
 </template>
 
-<script setup lang="ts">
-import { ref, computed, onMounted, watch } from 'vue'
+<script lang="ts">
+import { ref, computed, watch } from 'vue'
 import Taro from '@tarojs/taro'
 import { useGameStore } from '@/stores/game'
 import GameCard from '@/components/GameCard/index.vue'
 import Tabbar from '@/components/Tabbar.vue'
 
-// 初始化store
-const gameStore = useGameStore()
+export default {
+  components: {
+    GameCard,
+    Tabbar
+  },
+  
+  setup() {
+    // 初始化store
+    const gameStore = useGameStore()
 
-// 搜索相关
-const searchValue = ref('')
-const activeTab = ref('0')
+    // 搜索相关
+    const searchValue = ref('')
+    const activeTab = ref('0')
 
-// 弹幕组件相关
-const barrageRef = ref()
-const barrageList = ref([
-  '在排队吗？',
-  '在团建吗？',
-  '快来玩海龟汤！',
-  '这个解谜游戏很有意思',
-  '周末约起来玩狼人杀',
-  '剧本杀真的很沉浸',
-  '这个游戏逻辑性很强',
-  '适合团建的好游戏'
-])
+    // 弹幕组件相关
+    const barrageRef = ref()
+    
+    // 弹幕列表
+    const allBarrages = [
+      '排队3小时，飞行5分钟……霍格沃茨的入学考试这么难吗？',
+      '分院帽说：你排队的毅力，适合去赫奇帕奇（干饭人学院）！',
+      '伏地魔当年要是知道排队这么痛苦，可能直接放弃复活了……',
+      '弹射4.5秒，排队4.5小时——这波是"速度与憋尿"！',
+      '威震天：你们人类排队的样子，比我的变形还慢！',
+      '建议园区卖"小黄人式躺平"排队专用垫……',
+      '这是一条广告招租位～～～',
+      '猜猜伏地魔为什么没鼻子？——来我游戏里开脑洞！',
+      '排队3小时，汤底5分钟……不如来玩「海龟汤」速开局！',
+      '建议园区WiFi覆盖「海龟汤」房间，拯救站麻的腿……',
+      '「海龟汤」新题：《为什么这个队永远不动？》——欢迎破解！',
+      '排队时玩「海龟汤」，智商碾压隔壁猜拳的！',
+      '优速通抢不到？「海龟汤」秒开房——快乐不排队！',
+      '等位2小时，瓜子嗑到上火？不如来「海龟汤」降降温！',
+      '服务员：您前面还有58桌……我：先来一局「海龟汤」压压惊！',
+      '海底捞隐藏福利：玩「海龟汤」猜对3题，送免费美甲！',
+      '猜猜这部片的凶手是谁？'
+    ]
+    
+    // 初始设置一个完整的弹幕列表（与原来一样）
+    const barrageList = ref(allBarrages)
+    
+    // 随机更新弹幕列表
+    const updateRandomBarrages = () => {
+      // 计算需要的弹幕数量（总数的三分之一）
+      const count = Math.ceil(allBarrages.length / 3)
+      
+      // 随机打乱数组并取前count个元素
+      barrageList.value = [...allBarrages]
+        .sort(() => Math.random() - 0.5)
+        .slice(0, count)
+      
+      console.log(`随机选择了${barrageList.value.length}条弹幕`)
+    }
 
-// 获取游戏数据
-onMounted(async () => {
-  await gameStore.fetchGames()
-  // 确保游戏数据加载后，立即检查筛选结果
-  console.log('游戏数据加载完成，总数:', gameStore.games.length)
-  console.log('热门游戏数量:', hotGames.value.length)
-  console.log('社交游戏数量:', socialGames.value.length)
-  console.log('音乐游戏数量:', musicGames.value.length)
-})
+    // 监听标签变化
+    watch(activeTab, (newVal) => {
+      console.log('标签切换为:', newVal)
+      // 根据不同标签输出对应的游戏数量
+      switch(newVal) {
+        case '0':
+          console.log('推荐游戏数量:', filteredGames.value.length)
+          break
+        case '1':
+          console.log('热门游戏数量:', hotGames.value.length)
+          break
+        case '2':
+          console.log('社交游戏数量:', socialGames.value.length)
+          break
+        case '3':
+          console.log('音乐游戏数量:', musicGames.value.length)
+          break
+      }
+    })
 
-// 监听标签变化
-watch(activeTab, (newVal) => {
-  console.log('标签切换为:', newVal)
-  // 根据不同标签输出对应的游戏数量
-  switch(newVal) {
-    case '0':
-      console.log('推荐游戏数量:', filteredGames.value.length)
-      break
-    case '1':
-      console.log('热门游戏数量:', hotGames.value.length)
-      break
-    case '2':
-      console.log('社交游戏数量:', socialGames.value.length)
-      break
-    case '3':
-      console.log('音乐游戏数量:', musicGames.value.length)
-      break
-  }
-})
+    // 过滤后的游戏列表
+    const filteredGames = computed(() => {
+      if (!searchValue.value) {
+        return gameStore.games
+      }
+      return gameStore.games.filter(game => 
+        game.title.toLowerCase().includes(searchValue.value.toLowerCase())
+      )
+    })
 
-// 过滤后的游戏列表
-const filteredGames = computed(() => {
-  if (!searchValue.value) {
-    return gameStore.games
-  }
-  return gameStore.games.filter(game => 
-    game.title.toLowerCase().includes(searchValue.value.toLowerCase())
-  )
-})
+    // 热门游戏
+    const hotGames = computed(() => {
+      return gameStore.games.filter(game => game.isHot === true)
+    })
 
-// 热门游戏
-const hotGames = computed(() => {
-  return gameStore.games.filter(game => game.isHot === true)
-})
+    // 社交游戏
+    const socialGames = computed(() => {
+      return gameStore.games.filter(game => {
+        const maxPlayers = parseInt(game.players.split('-')[1] || game.players)
+        return maxPlayers >= 6
+      })
+    })
 
-// 社交游戏
-const socialGames = computed(() => {
-  return gameStore.games.filter(game => {
-    const maxPlayers = parseInt(game.players.split('-')[1] || game.players)
-    return maxPlayers >= 6
-  })
-})
+    // 音乐游戏
+    const musicGames = computed(() => {
+      // 如果没有音乐类别的游戏，可以根据其他条件筛选一些游戏作为示例
+      const musicCategoryGames = gameStore.games.filter(game => game.category === '音乐')
+      
+      // 如果没有音乐类别的游戏，可以返回一些随机游戏作为示例
+      return musicCategoryGames.length > 0 ? musicCategoryGames : gameStore.games.slice(0, 2)
+    })
 
-// 音乐游戏
-const musicGames = computed(() => {
-  // 如果没有音乐类别的游戏，可以根据其他条件筛选一些游戏作为示例
-  const musicCategoryGames = gameStore.games.filter(game => game.category === '音乐')
-  
-  // 如果没有音乐类别的游戏，可以返回一些随机游戏作为示例
-  return musicCategoryGames.length > 0 ? musicCategoryGames : gameStore.games.slice(0, 2)
-})
+    // 处理搜索
+    const handleSearch = () => {
+      console.log('搜索:', searchValue.value)
+      // 可以在这里进行更复杂的搜索逻辑
+    }
 
-// 处理搜索
-const handleSearch = () => {
-  console.log('搜索:', searchValue.value)
-  // 可以在这里进行更复杂的搜索逻辑
-}
+    // 跳转到游戏详情页
+    const navigateToGameDetail = (gameId: string) => {
+      const game = gameStore.games.find(g => g.id === gameId)
+      if (game && (game.id === "1" || game.title.includes('海龟汤'))) {
+        Taro.navigateTo({
+          url: `/pages/game-detail/index?id=${gameId}`
+        })
+      } else {
+        // 使用Modal替代Toast
+        Taro.showModal({
+          title: '敬请期待',
+          content: '更多精彩游戏即将上线，请持续关注！',
+          showCancel: false,
+          confirmText: '知道了'
+        })
+      }
+    }
 
-// 跳转到游戏详情页
-const navigateToGameDetail = (gameId: string) => {
-  const game = gameStore.games.find(g => g.id === gameId)
-  if (game && (game.id === "1" || game.title.includes('海龟汤'))) {
-    Taro.navigateTo({
-      url: `/pages/game-detail/index?id=${gameId}`
-    })
-  } else {
-    // 使用Modal替代Toast
-    Taro.showModal({
-      title: '敬请期待',
-      content: '更多精彩游戏即将上线，请持续关注！',
-      showCancel: false,
-      confirmText: '知道了'
-    })
+    return {
+      gameStore,
+      searchValue,
+      activeTab,
+      barrageRef,
+      barrageList,
+      filteredGames,
+      hotGames,
+      socialGames,
+      musicGames,
+      handleSearch,
+      navigateToGameDetail,
+      updateRandomBarrages // 导出随机更新方法
+    }
+  },
+  
+  // 页面加载时
+  onLoad() {
+    console.log('页面加载')
+  },
+  
+  // 页面显示时
+  onShow() {
+    // 每次页面显示时随机更新弹幕
+    this.updateRandomBarrages()
+  },
+  
+  // 组件挂载时
+  async mounted() {
+    const gameStore = this.gameStore
+    await gameStore.fetchGames()
+    // 确保游戏数据加载后，立即检查筛选结果
+    console.log('游戏数据加载完成，总数:', gameStore.games.length)
+    console.log('热门游戏数量:', this.hotGames.length)
+    console.log('社交游戏数量:', this.socialGames.length)
+    console.log('音乐游戏数量:', this.musicGames.length)
   }
 }
 </script>