Wed Oct 11 01:06:00 CST 2023 inscode

src/App.vue

 <script setup>
 import GameChart from './components/GameChart.vue'
 import SearchGrade from './components/SearchGrade.vue'
+import Draw from './components/draw/Draw.vue'
 import { reactive, onBeforeMount } from 'vue';
 const state = reactive({
-  current: 'grade查询分数'
+  current: '抽奖'
 })
+
 onBeforeMount(() => {
   const href = window.location.href
   const data = {}
@@ -35,10 +37,12 @@ onBeforeMount(() => {
       <a-radio-group v-model:value="state.current" name="radioGroup">
         <a-radio value="grade查询分数">grade查询分数</a-radio>
         <a-radio value="新星赛道选手信息可视化">新星赛道选手信息可视化</a-radio>
+        <a-radio value="抽奖">抽奖</a-radio>
       </a-radio-group>
     </div>
     <SearchGrade v-if="state.current === 'grade查询分数'" />
-    <GameChart v-else />
+    <GameChart v-else-if="state.current === '新星赛道选手信息可视化'" />
+    <Draw v-else />
   </div>
 </template>
 

src/components/draw/Draw.vue

+<template>
+    <div>
+        <!-- 抽奖用户 列表 -->
+        <div v-for="item in state.list" :key="item.id" style="display: inline-block;padding:20px">
+            <div style="display: inline-block;text-align: center;">
+                <div>
+                    {{ item.name }}
+                </div>
+                <div>
+                    <a-avatar :size="{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }">
+                        <template #icon>
+                            <img :src="item.img">
+                        </template>
+                    </a-avatar>
+                </div>
+            </div>
+        </div>
+        <!-- 抽奖用户 随机旋转的用户-->
+        <!-- 0.5s 游戏开始不断轮播用户头像  -->
+        <div style="display: flex;justify-content: center;align-items: center;margin-top:50px"
+            v-if="state.gameStatus !== 'init'">
+            <div style="display: inline-block;text-align: center;">
+
+                <a-card hoverable style="width: 240px">
+                    <template #cover>
+                        <img :src="state.currentPerson?.img">
+                    </template>
+                    <a-card-meta :title="state.currentPerson?.name">
+                        <template #description>抽奖中 角色id:{{ state.currentPerson?.id }} </template>
+                    </a-card-meta>
+                </a-card>
+
+            </div>
+        </div>
+        <!-- 中奖结束弹框 -->
+        <a-modal v-model:open="state.openModal" title="恭喜你中奖" :footer="null" @afterClose="afterCloseModal">
+            <p>中奖用户名称：{{ state.currentPerson?.name }}</p>
+            <p>中奖用户id：{{ state.currentPerson?.id }}</p>
+            <p><img :src="state.currentPerson?.img"></p>
+        </a-modal>
+
+        <!-- 开始游戏按钮 -->
+        <div style="position:absolute;bottom:50px;text-align: center;width:100%">
+            <a-button type="primary" @click="startGameBtn" v-if="state.gameStatus === 'init'">开始抽奖</a-button>
+            <a-button type="primary" disabled v-if="state.gameStatus === 'run'">进行中</a-button>
+            <a-button type="primary" @click="restartGameBtn" v-if="state.gameStatus === 'end'">重新开始</a-button>
+        </div>
+
+
+    </div>
+</template>
+
+<script setup>
+import { reactive, onMounted } from 'vue'
+
+const state = reactive({
+    list: [],
+    currentPerson: {
+        name: '',
+        img: '',
+        id: ''
+    },
+    gameStatus: 'init',// init 初始化 状态  run 运行 状态 end 结束状态
+    count: 100,
+    displayCount: 0,
+    openModal: false
+})
+
+// mock 用户数据
+const mockUserData = (n) => {
+    let data = []
+    for (let i = 0; i < n; ++i) {
+        data.push({
+            img: `https://t.mwm.moe/pc/?ts=${i+9}`,// 随机头像
+            name: '角色' + i,
+            id: i
+        })
+    }
+    state.list = data
+    console.log(state.list)
+}
+
+// 延时 delay
+const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))
+
+// 开始抽奖
+const startGameBtn = async () => {
+
+    let n = state.count
+    while (n--) {
+        state.displayCount = n
+        await sleep(20)
+        const max = state.list.length - 1;
+        const min = 0;
+        const randomIndex = Math.floor(Math.random() * (max - min)) + min;
+        state.currentPerson = state.list[randomIndex]
+        console.log('randomIndex', randomIndex)
+        console.log('state.currentPerson', state.currentPerson)
+        state.gameStatus = 'run'
+    }
+    state.gameStatus = 'end'
+    state.openModal = true
+}
+
+const afterCloseModal = () => {
+    state.openModal = false
+}
+
+// 重新开始抽奖
+const restartGameBtn = () => {
+    startGameBtn()
+}
+onMounted(() => {
+    mockUserData(13)
+})
+</script>
\ No newline at end of file