只用一个背景图片实现九宫格抽奖（uniapp纯代码）

<template>
    <view class="content">
        <view class="bar">
            <view class="line">
                <p :class="num == 0 ? 'block':'none'">
                    <view class="" v-if="type">
                        <image :src="url+data[0].img" mode=""></image>
                        <text>{{data[0].name}}</text>
                    </view>
                </p>
                <p :class="num == 1 ? 'block':'none'">
                    <view class="" v-if="type">
                        <image :src="url+data[1].img" mode=""></image>
                        <text>{{data[1].name}}</text>
                    </view>
                </p>
                <p :class="num == 2 ? 'block':'none'">
                    <view class="" v-if="type">
                        <image :src="url+data[2].img" mode=""></image>
                        <text>{{data[2].name}}</text>
                    </view>
                </p>
            </view>
            <view class="line">
                <p :class="num == 3 ? 'block':'none'">
                    <view class="" v-if="type">
                        <image :src="url+data[3].img" mode=""></image>
                        <text>{{data[3].name}}</text>
                    </view>
                </p>
                <p class="none" @click="click"></p>
                <p :class="num == 4 ? 'block':'none'">
                    <view class="" v-if="type">
                        <image :src="url+data[4].img" mode=""></image>
                        <text>{{data[4].name}}</text>
                    </view>
                </p>
            </view>
            <view class="line">
                <p :class="num == 5 ? 'block':'none'">
                    <view class="" v-if="type">
                        <image :src="url+data[5].img" mode=""></image>
                        <text>{{data[5].name}}</text>
                    </view>
                </p>
                <p :class="num == 6 ? 'block':'none'">
                    <view class="" v-if="type">
                        <image :src="url+data[6].img" mode=""></image>
                        <text>{{data[6].name}}</text>
                    </view>
                </p>
                <p :class="num == 7 ? 'block':'none'">
                    <view class="" v-if="type">
                        <image :src="url+data[7].img" mode=""></image>
                        <text>{{data[7].name}}</text>
                    </view>
                </p>
            </view>
        </view>
        <p @click="start" class="start"></p>
        <p @click="close" class="close"></p>
        <p class="zhong"> <text @click="show">查看攻略</text> <text>可抽奖次数：{{nums}}</text> <text @click="target('/success/myactive')">我的中奖记录</text></p>
        <image class="right" :src="url+'/uploads/20231115/bd89c46e0da9b7a025023fd31d51cfbe.png'" mode=""></image>
        <p class="reco"> <text style="width: 10%;">序号</text> <text style="width: 30%;">昵称</text> <text
                style="width: 30%;">奖品</text><text style="width: 30%;">时间</text></p>
        <view class="prize">
            <p class="list" v-for="(item,index) in winning_data" :key="index"> <text
                    style="width: 10%;">{{item.id}}</text> <text style="width: 30%;">{{item.nickname}}</text> <text
                    style="width: 30%;">{{item.name}}</text><text style="width: 30%;">{{item.create_time}}</text></p>
        </view>
    </view>
</template>
<script>
    import {
        active_list,
        winning,
        winning_add
    } from '@/api/api.js';
    import color from '../uni_modules/uview-ui/libs/config/color';
    export default {
        data() {
            return {
                data: [], //图片数据
                url: getApp().globalData.url, //全局数据
                list: [0, 1, 2, 4, 7, 6, 5, 3],
                num: 8,
                status: false,
                int: '',
                number: 0,
                type: true,
                datas: [], //概率数组
                close_status: false,
                randomNum: 0,
                nums: 1,
                winning_data: [],
                scenic_data:[]
            }
        },
        onLoad(options) {
            this.scenic_data = JSON.parse(options.data)
            this.active_list();
            this.winning()
        },
        methods: {
            target(url){
                uni.navigateTo({
                    url:url
                })
            },
            show() {
                uni.showModal({
                    title: this.data[0]['active'].name,
                    content: this.data[0]['active'].content,
                    success(res) {
                    }
                })
            },
            async winning() {
                const res = await winning()
                this.winning_data = res.data
            },
            // 打乱数组
            randomSortArrays(arr) {
                var stack = [];
                while (arr.length) {
                    //Math.random()：返回 [0,1) 之间的一个随机数
                    var index = parseInt(Math.random() * arr.length); // 利用数组长度生成随机索引值
                    stack.push(arr[index]); // 将随机索引对应的数组元素添加到新的数组中
                    arr.splice(index, 1); // 删除原数组中随机生成的元素
                }
                if (this.datas[this.randomNum].name == stack[this.num].name) {
                    uni.showToast({
                        title: '恭喜你抽中' + stack[this.num].name + '!',
                        icon: 'none'
                    })
                    return this.data = stack
                }
                this.randomSortArrays(stack)
            },
            click() {
                    // this.status = false
                    // this.close_status = false
                    // this.type = true
                    // clearInterval(this.int)
                    // this.randomNum = Math.floor(Math.random() * 100) + 1;
                    // this.randomSortArrays(this.data)
                            uni.showToast({
                    title: '点击下方蓝色按钮开始抽奖,红色按钮停止抽奖',
                    icon: 'none'
                })
            },
            start() {
                if (this.nums == 0) {
                    uni.showToast({
                        title: '没有次数了，请点击查看攻略获取次数',
                        icon: 'none'
                    })
                    return
                }
                if (!this.status) {
                    this.nums = this.nums - 1
                    this.status = true
                    this.type = false
                    if (this.num == 8) this.num = 0
                    this.int = setInterval(() => {
                        if (this.status == true) {
                            this.number += 1
                            if (this.number == 8) this.number = 0
                            this.num = this.list[this.number]
                        }
                    }, 500)
                    setTimeout(() => {
                        this.close_status = true
                    }, 4000)
                } else {
                    uni.showToast({
                        title: '手速太快了',
                        icon: 'none'
                    })
                }
            },
            close() {
                if (this.status && this.close_status) {
                    this.status = false
                    this.close_status = false
                    this.type = true
                    clearInterval(this.int)
                    this.randomNum = Math.floor(Math.random() * 100) + 1;
                    this.randomSortArrays(this.data)
                    this.winning_add()
                } else {
                    uni.showToast({
                        title: '至少转一圈',
                        icon: 'none'
                    })
                }
            },
            async winning_add(){
                const res = await winning_add({
                    user_id:JSON.parse(uni.getStorageSync('user')).id,
                    scenic_id:this.scenic_data.id,
                    active_id:this.datas[0]['active']['id'],
                    name:this.data[this.num].name,
                    status:2
                })
                this.winning()
            },
            async active_list() {
                try {
                    const res = await active_list({
                        scenic_id: this.scenic_data.id
                    });
                    for (let i in res.data) {
                        for (let s = 0; s < res.data[i].num; s++) {
                            this.datas.push(res.data[i])
                        }
                    }
                    this.data = res.data
                    console.log(this.data,111);
                } catch (err) {
                    console.log(err);
                }
            },
        }
    }
</script>
<style>
    .prize {
        width: 90%;
        margin-left: 5%;
        height: 450rpx;
        overflow: hidden;
        overflow-y: scroll;
        font-size: 13px;
    }
    .reco {
        width: 80%;
        margin-left: 5%;
        display: flex;
        justify-content: space-evenly;
        padding: 10px 15px;
        margin-top: 80rpx;
        font-size: 12px;
    }
    .reco text {
        display: block;
        text-align: center;
    }
    .list text {
        display: block;
        text-align: center;
    }
    .list {
        width: 90%;
        display: flex;
        justify-content: space-evenly;
        padding: 10px 15px;
    }
    .right {
        width: 80rpx;
        height: 80rpx;
        position: absolute;
        top: 1235rpx;
        right: 0px;
        z-index: 999;
    }
    .content {
        width: 100%;
        height: 2000rpx;
        background-image: url('https://wwz.jingyi.icu/uploads/20231114/a5a1a2f6f9d999445c5ad4f760b23267.png');
        background-repeat: no-repeat;
        background-size: 100% 2000rpx;
        padding: 0;
        margin: 0;
    }
    .bar {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        padding-top: 548rpx;
        /* display: none; */
    }
    .line {
        width: 76.3%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        align-content: center;
        margin-top: 10rpx;
    }
    .line image {
        width: 80rpx;
        height: 80rpx;
    }
    .none {
        width: 32%;
        height: 190rpx;
        border-radius: 20rpx;
        background-color: rgba(255, 255, 127, 0);
    }
    .block {
        width: 32%;
        height: 190rpx;
        border-radius: 20rpx;
        background-color: rgba(255, 255, 127, 1);
    }
    .none view {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        transition: all 2s;
    }
    .none text {
        width: 100%;
        display: inline;
        text-align: center;
        margin-top: -50rpx;
        font-size: 13px;
        transition: all 2s;
    }
    .block view {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        transition: all 2s;
    }
    .block text {
        width: 100%;
        display: inline;
        text-align: center;
        margin-top: -50rpx;
        font-size: 13px;
        transition: all 2s;
    }
    .start {
        position: absolute;
        top: 78vh;
        width: 80rpx;
        height: 60rpx;
        background-color: aqua;
        left: 54%;
        background-color: rgba(255, 255, 127, 0);
    }
    .close {
        position: absolute;
        top: 78vh;
        width: 80rpx;
        height: 60rpx;
        background-color: aqua;
        left: 36%;
        background-color: rgba(255, 255, 127, 0);
    }
    .zhong {
        width: 85%;
        margin-left: 5%;
        display: flex;
        justify-content: space-between;
        margin-top: 115rpx;
        font-size: 15px;
    }
    .zhong text {
        display: flex;
    }
</style>