YXGJ/store/lottery/modules/sudoku.vue

<template>
    <view class="box">
        <view class="lottery-box">
            <navigator class="my-list" url="/cloud/winningNews/index">
                我的奖品
            </navigator>
            <image class="bg-image"
                src="https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202405281716860202553Be55ba55.webp" />
            <view class="lottery">
                <view>
                    <LuckyGrid ref="myLucky" width="590rpx" height="590rpx" :prizes="prizes" :buttons="buttons"
                        :defaultStyle="defaultStyle" @start="startCallBack" @end="endCallBack" />
                </view>
            </view>
        </view>
        <view class="winners-list">
            <image class="image"
                src="https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202405281716863577428B1faf5081.webp"
                mode="widthFix" />
            <view class="content">
                <view class="title">
                    <view class="text">
                        抽奖名单
                    </view>
                </view>
                <swiper class="swiper" autoplay easing-function="linear" interval="1000" duration="1000" circular vertical
                    display-multiple-items="7">
                    <swiper-item v-for="(item, index) in 20" :key="index">
                        <view class="swiper-item u-line-2">
                            {{ item }}df sdf 、
                        </view>
                    </swiper-item>
                </swiper>
            </view>
        </view>
    </view>
</template>

<script>
import LuckyGrid from '@/components/@lucky-canvas/uni/lucky-grid'
export default {
    components: { LuckyGrid },
    props: {
        sa_awardid: {
            type: [Number || String]
        },
        shareuserid: {
            type: [Number || String]
        }
    },
    data() {
        return {
            prizes: [
                { x: 0, y: 0, borderRadius: '20rpx' },
                { x: 2, y: 0, borderRadius: '20rpx' },
                { x: 0, y: 2, borderRadius: '20rpx' },
                { x: 2, y: 2, borderRadius: '20rpx' },
                { x: 1, y: 0, borderRadius: '20rpx' },
                { x: 2, y: 1, borderRadius: '20rpx' },
                { x: 1, y: 2, borderRadius: '20rpx' },
                { x: 0, y: 1, borderRadius: '20rpx' },
            ],
            buttons: [{
                background: 'rgba(0,0,0,0)',
                x: 1, y: 1,
                imgs: [{
                    src: 'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202405281716861339513B3a575413.webp',
                    width: '183.34rpx',
                    height: '183.34rpx',
                }],
            }],
            defaultStyle: {
                background: '#FFFFFF',
                width: '183.34rpx',
                height: '183.34rpx',
            },
            usableCount: 0,
        }
    },
    methods: {
        init() {
            console.log("this.sa_awardid", this.sa_awardid)
            this.$Http.basic({
                "id": 20240514131402,
                content: {
                    "sa_awardid": this.sa_awardid,
                    "where": {
                        "condition": "",
                        "type": ""
                    }
                }
            }).then(res => {
                console.log("奖品列表", res)
                if (this.cutoff(res.msg)) return;
            })

            this.$Http.basic({
                "classname": "sysmanage.develop.datafunction.datafunction",
                "method": "execute",
                "content": {
                    "functionname": "queryAwardCount",
                    "parameter": {
                        "sa_awardid": this.sa_awardid
                    }
                }
            }).then(res => {
                console.log("抽奖可用次数", res)
                if (this.cutoff(res.msg)) return;
                this.usableCount = res.data.length ? res.data[0].count : 0;
            })
        },
        startCallBack() {
            console.log("开始抽奖")
            this.$refs.myLucky.play()
            setTimeout(() => {
                // 假设后端返回的中奖索引是0
                const index = 0
                // 调用stop停止旋转并传递中奖索引
                this.$refs.myLucky.stop(index)
            }, 3000)
        },
        endCallBack(prize) {
            console.log("抽到的奖品", prize)
        }
    }
}
</script>

<style lang="scss" scoped>
.box {
    width: 100vw;
    min-height: 100vh;
    background: linear-gradient(90deg, #FE5A46 0%, #F11F46 100%);

    .lottery-box {
        position: relative;
        width: 100vw;
        height: 511px;

        .my-list {
            position: absolute;
            top: 20px;
            left: 0;
            width: 86px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: linear-gradient(180deg, #FAD96D 0%, #FFC300 4%, #FFCD2B 16%, #FFDF77 42%, #FFD241 70%, #FFC300 94%, #FC9228 100%);
            border-radius: 0px 20px 20px 0px;
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-weight: bold;
            font-size: 14px;
            color: #C30D23;
            z-index: 2;
        }

        .bg-image {
            position: absolute;
            width: 100vw;
            height: 511px;
            top: 0;
            left: 0;
            z-index: 1;
            vertical-align: bottom;
        }


        .lottery {
            position: absolute;
            width: 100%;
            z-index: 2;
            top: 140px;
        }
    }

    .winners-list {
        width: 100vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 20px;

        .image {
            width: 355px;
        }

        .title {
            position: relative;
            width: 80px;
            height: 29px;
            margin: 0 auto;

            .text {
                position: absolute;
                top: 0px;
                left: 0;
                width: 80px;
                line-height: 29px;
                text-align: center;
                font-family: Source Han Sans SC, Source Han Sans SC;
                font-weight: bold;
                font-size: 20px;
                color: #333333;
                z-index: 2;
            }
        }

        .title::after {
            content: '';
            position: absolute;
            bottom: 0px;
            left: 0;
            width: 80px;
            height: 8px;
            background: #FAD96D;
            border-radius: 5px;
            z-index: 1;
        }

        .content {
            background: #fff;
            padding: 0 15px 20px;
            width: 669.7672675rpx;
            box-sizing: border-box;

            .swiper {
                width: 100%;
                height: 300px;
                margin-top: 20px;

                .swiper-item {
                    width: 100%;
                    height: 40px;
                    text-align: center;
                    line-height: 20px;
                    font-family: Source Han Sans SC, Source Han Sans SC;
                    font-size: 14px;
                    color: #666666;
                    overflow: hidden;
                }
            }
        }
    }



}
</style>