Wed Dec 27 12:12:00 CST 2023 inscode

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