zdsc/yudao-mall-uniapp-master/pages/user/prize.vue

<template>
    <s-layout class="set-wrap" title="活动" :bgStyle="{ color: '#FFF' }">
        <view class="_bgc">
            <view class="_bg1">
                <!-- <text class="_jf">5积分抽奖一次</text>
            <view class="_cont">
                <view class="_left">
                    <image src="https://obs-sdwh.cucloud.cn/cdz/jinbi.png" class="_jinbi"></image>
                    <text>开心贷</text>
                </view>
                <view class="_mid">抽到99元优惠券</view>
                <view class="_right">4秒前</view>
            </view> -->
            </view>
            <view class="container">
                <!-- <view class="container_circle" v-for="(v, i) in  circleList" :key="i"
                :style="{ 'top': v.topCircle + 'rpx', 'left': v.leftCircle + 'rpx', 'background-color': (i % 2 == 0) ? oneCircleColor : twoCircleColor }">
            </view> -->
                <view class="container_content">
                    <view class="content_out" v-for="(v, i) in prizeList" :key="i" :style="{
                    top: v.topAward + 'rpx',
                    left: v.leftAward + 'rpx',
                    background: i == indexSelect ? prizeCheckColor : '',

                    animation: 'animatebox 4s linear infinite'
                }">
                        <image class="award_image" :src="v.Img"></image>
                        <!-- {{ v.name }} -->
                    </view>
                    <view class="content_btn" @tap="handleStart"
                        :style="{ 'background-color': isRunning ? '#55ffff' : '' }">
                        <view class="_diji">点击</view>
                        <view>抽奖</view>
                    </view>
                </view>
                <!-- <view class="container_num">剩余抽奖次数：{{ luckDrawNum }}</view> -->
            </view>

            <view class="_btnWrap">
                <view class="_btn" @tap="sheep.$router.go('/pages/user/PrizesWon')">已获奖品</view>
                <view class="_btn" @tap="sheep.$router.go('/pages/user/ActivityRules')">活动规则</view>
            </view>
        </view>
    </s-layout>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad, onReachBottom, onShow, onUnload, onHide } from '@dcloudio/uni-app';
import MineApi from '@/sheep/api/prize/index'
import sheep from '@/sheep';
const prizeList = ref([]) // 奖品数组
const prizeCheckColor = ref('linear-gradient(72.5deg, #aa0000, #ff0000, #ff00ff, #550000, #ffaaff, #aa0000, #ff0000)') // 奖品的选中颜色
const indexSelect = ref(0) //被选中的奖品index
const isRunning = ref(false) //是否正在抽奖
const imgList = ref([
    'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202209261921_a1b840c267bd26bcf4dc654d52f259e5.png?w=800&h=800',
    'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0bcd64f412dfb5e15695fa96d21ecb23.png?w=800&h=800',
    'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202208111030_e3554c41e0484da99b16bb9e02142e68.png?w=800&h=800',
    'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1653393310.29013051.png',
    'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202209261921_a1b840c267bd26bcf4dc654d52f259e5.png?w=800&h=800',
    'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/9E253411E26FD16C7215D7E74321FA45.png',
    'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cc0be95d45d0063b0aa8bb541be22c77.png?w=800&h=800',
    'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0c4b5e30d14ca8b51dc6fa6917295ff5.png?w=800&h=800'
]) //奖品图片数组
const prizelist = ref([]) //奖品列表
let showFloag = ref(true)
let HDid = ref()
onLoad(async () => {
    const r = await MineApi.ActivityRules()
    HDid.value = r.data?.id
    const res = await MineApi.prizeImg(HDid.value)
    prizelist.value = res.data
    imgList.value = []
    res.data.forEach((value, index) => {
        imgList.value.push(value.imgUrl)
    })

    for (let i = 0; i < 24; i++) {
        let prizeList_on = []
        //间距,怎么顺眼怎么设置吧.
        let topAward = 10
        let leftAward = 10

        for (let j = 0; j < 8; j++) {
            if (j == 0) {
                topAward = 5
                leftAward = 10
            } else if (j < 3) {
                topAward = topAward
                //166.6666是宽.15是间距.下同
                leftAward = leftAward + 176.6666 + 15
            } else if (j < 5) {
                leftAward = leftAward
                //150是高,15是间距,下同
                topAward = topAward + 160 + 15
            } else if (j < 7) {
                leftAward = leftAward - 176.6666 - 15
                topAward = topAward
            } else if (j < 8) {
                leftAward = leftAward
                topAward = topAward - 160 - 15
            }
            // let imgList = this.imgList[j];
            let Img = imgList.value[j]
            prizeList_on.push({ topAward, leftAward, Img, id: res.data[j].id, name: res.data[j].name })
        }
        prizeList.value = prizeList_on
    }
})

// 点击开始
const handleStart = async () => {
    console.log('抽奖开始，');

    if (isRunning.value) return
    const res = await MineApi.lottery(HDid.value)
    isRunning.value = true
    let floag = ref()
    for (let i = 0; i < prizelist.value.length; i++) {
        if (prizelist.value[i]?.id == res.data?.id) {
            floag.value = res.data.id
            break
        }
    }

    indexSelect.value = 0
    let indexSelect_med = 0
    let i = 0
    let timer = setInterval(() => {
        console.log('floag', floag.value);
        //去除循环
        if (!showFloag.value) {
            clearInterval(timer)
            isRunning.value = false
        }
        indexSelect_med++
        // 光标跳动
        indexSelect_med = indexSelect_med % 8
        indexSelect.value = indexSelect_med
        i += 30
        let randomNum = 1000 + Math.ceil(Math.random() * 1000) //控制奖品
        if (i > randomNum && prizeList.value[indexSelect.value].id  === floag.value) {
            //去除循环
            clearInterval(timer)
            //获奖提示
            // if (showFloag.value) {
            //     if (!res.data?.id) {
            //         uni.showModal({
            //             title: '很遗憾',
            //             content: '祝君好运',
            //             showCancel: false,
            //             success: (res) => {
            //                 if (res.confirm) {
            //                     isRunning.value = false
            //                 }
            //             }
            //         })
            //         return
            //     }
                uni.showModal({
                    // title: '恭喜您',
                    // content: '获得了第' + (indexSelect.value) + '个奖品',
                    content: '抽中' + (res.data.name) + '',
                    showCancel: false,
                    success: (res) => {
                        if (res.confirm) {
                            isRunning.value = false
                        }
                    }
                })
            // }
            isRunning.value = false
        }



       
    }, 200 + i)
}
onHide(() => {
    showFloag.value = false
})
onUnload(() => {
    showFloag.value = false
})
onShow(() => {
    showFloag.value = true
})
</script>

<style lang="scss" scoped>
._bg1 {
    background-image: url('https://obs-sdwh.cucloud.cn/cdz/beijing1.png');
    width: 80%;
    height: 150rpx;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    margin: 370rpx auto 0;
    font-size: 22rpx;
    position: relative;

    ._jf {
        position: absolute;
        left: 240rpx;
        top: 40rpx;
        color: white;
    }

    ._cont {
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: white;
        letter-spacing: 2rpx;
        height: 100%;
        margin-top: 35rpx;

        ._left {
            display: flex;
            align-items: center;

            ._jinbi {
                width: 40rpx;
                height: 40rpx;
                margin-right: 10rpx;
            }
        }
    }
}

._bgc {
    background-image: url('https://obs-sdwh.cucloud.cn/cdz/cjBg.png');
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
}

.container {
    position: relative;
    height: 600rpx;
    width: 650rpx;
    margin: 0 auto;
    border-radius: 40rpx;
    // background: linear-gradient(72.5deg, #e9f78c, #ffffb9, #cc55e5, #ef9bcb, #e5b8d8, #ffb140, #f7ed54);
    // background-color: #FFB62F;
    background-image: url('https://obs-sdwh.cucloud.cn/cdz/beijing2.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    // background-size: 400%;
    animation: animatebox 4s linear infinite;

    @keyframes animatebox {
        0% {
            background-position: 0%;
        }

        50% {
            background-position: 100%;
        }

        100% {
            background-position: 0%;
        }
    }

    .container_circle {
        position: absolute;
        display: block;
        border-radius: 50%;
        height: 20rpx;
        width: 20rpx;
    }

    .container_content {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 580rpx;
        height: 530rpx;
        background-color: #ca2c01;

        border-radius: 40rpx;
        margin: auto;

        // background: linear-gradient(72.5deg, #ef499c, #cc55e5, #ffb140, #f7ed54, #ffb140, #cc55e5, #ef499c);
        background-size: 400%;
        animation: animate1 4s linear infinite;

        @keyframes animate1 {
            0% {
                background-position: 0%;
            }

            50% {
                background-position: 100%;
            }

            100% {
                background-position: 0%;
            }
        }

        .content_out {
            position: absolute;
            height: 160rpx;
            width: 176.6666rpx;
            // background-color: #f5f0fc;
            background-image: url('https://obs-sdwh.cucloud.cn/cdz/g1.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            border-radius: 15rpx;
            box-shadow: 0 5px 0 #ff8327;

            .award_image {
                position: absolute;
                margin: auto;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                height: 140rpx;
                width: 130rpx;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-image: url('https://obs-sdwh.cucloud.cn/cdz/xxcy.png');
            }
        }

        .content_btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 15rpx;
            height: 160rpx;
            width: 176.6666rpx;
            background-color: #ffe400;
            box-shadow: 0 5rpx 0 #e7930a;
            color: white;
            text-align: center;
            font-size: 44rpx;
            font-weight: bolder;
            background-color: #ff8859;
            // line-height: 150rpx;
            // background: linear-gradient(72.5deg, #f7a0ec, #ffb140, #e58da0, #ef7ecb, #ab9ae5, #ffec8a, #f6f7a6);
            // background-size: 400%;
            background-image: url('https://obs-sdwh.cucloud.cn/cdz/g5.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            animation: animate 4s linear infinite;

            ._diji {
                margin-top: 14rpx;
            }

            @keyframes animate {
                0% {
                    background-position: 0%;
                }

                50% {
                    background-position: 100%;
                }

                100% {
                    background-position: 0%;
                }
            }
        }
    }

    .container_num {
        position: absolute;
        top: -130rpx;
        left: 50%;
        transform: translateX(-50%);
        color: white;
        // background-image: -webkit-linear-gradient(left, #083a96, #e63609 25%, #083a96 50%, #e63609 75%, #083a96);
        // -webkit-text-fill-color: transparent;
        background-clip: text;
        background-size: 200% 100%;
        animation: masked-animation 4s infinite linear;

        @keyframes masked-animation {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: -100% 0;
            }
        }
    }
}

._btnWrap {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 40rpx;

    ._btn {
        background-image: url('https://obs-sdwh.cucloud.cn/cdz/anniu.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 40%;
        height: 100rpx;
        text-align: center;
        line-height: 90rpx;
        color: white;
        font-weight: bold;
        font-size: 32rpx;
    }
}
</style>