vue3仿照掘金抽奖转盘（演示版）

<template>
    <div class="box">
        <div class="imgBox">
            <div :class="['item', {'active': index === activeIndex}]" v-for="(item, index) in arrayList">
                <img :src="item.src" alt="">
                <div>{{ item.name }}</div>
            </div>
        </div>
        <div class="btn" @click="start">点击抽奖</div>
    </div>
</template>

<script setup lang="ts">
import { reactive , ref} from 'vue';

interface imgs {
    id?: number;
    src?: string;
    name?: string;
}
let activeIndex = ref(-1)
let selectIndex = ref(5)
let timer: any = null  // 定时器
const arrayList: Array<imgs> = reactive([
    { id: 0, src: "https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/32ed6a7619934144882d841761b63d3c~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp", name: "随机矿石" },
    { id: 1, src: "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0a4ce25d48b8405cbf5444b6195928d4~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp", name: "Bug" },
    { id: 2, src: "https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/77d5e1e091a944b1b894029d22cdfcf0~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp?", name: "「码赛克」掘金贴纸" },
    { id: 3, src: "https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b9cb9f9a3e354d358653071eeb586606~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp?", name: "码赛克系列运动毛巾" },
    { id: 4, src: "https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a8a65cb2605c493faa24351c8c4590ef~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp?", name: "曼秀雷敦唇膏" },
    { id: 5, src: "https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/35f3358d60834e6e8dce52e684ce8aab~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp?", name: "「睡眠日」小夜灯" },
    { id: 6, src: "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d748a2d93d6840da84e9f9c2ac347241~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp?", name: "稀土掘金兔年春节礼盒" },
    { id: 7, src: "https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ef82c2f354b44e91b70e0fcaa6e321f2~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp", name: "索尼降噪耳机" },
    { id: 8, src: "https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dcd370642600427c9c32bee96040f67b~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp?", name: "苹果耳机AIRPOD" }
])

const start = ()=>{
    activeIndex.value = -1
    move(1)
   
}
// 抽奖函数
const move = (times: number)=> {
    if(times > 500) {
        // 未中奖
        if(activeIndex.value !== selectIndex.value) {
            timer = setTimeout(() => {
                let n = activeIndex.value! + 1
                activeIndex.value = n % 9
                move(times+ times*0.1) // 调整速率
            }, times);
        } else {
            activeIndex.value= 4
            clearTimeout(timer)
            alert('中奖了')
        }
    } else {
        timer = setTimeout(() => {
            let n = activeIndex.value! + 1
            activeIndex.value = n % 9
            move(times+ times*0.1)
        }, times);
    }
}
</script>

<style lang="scss" scoped>
.box {
    width: 600px;
}
.imgBox {
    width: 100%;
    height: 100%;
    background: #e37815;
    border-radius: 8px;
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: space-between;
   
}

.item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fdf3f3;
    border-radius: 4px;
    position: relative;
    width: 33%;
    height: 33%;
    .block {
        position: absolute;
        width: 33%;
        height: 33%;
        top: 0;
        left: 0;
        background: #e37815;
    }
    img {
        width: 80%;
        height: 80%;
    }
}
.active {
    background: #edc299;
}
.btn {
    width: 100px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    background: #e37815;
    color: #fff;
    font-size: 14px;
    border-radius: 5px solid;
    margin: 10px;
    cursor: pointer;
}

</style>