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" v-if="prizes.length && showPrizes">
                <view>
                    <LuckyGrid ref="myLucky" width="590rpx" height="590rpx" :prizes="prizes" :buttons="buttons"
                        :defaultStyle="defaultStyle" @start="startCallBack" @end="endCallBack" />
                </view>
            </view>
            <view class="usable-count">
                您还有<text class="count">{{ usableCount }}</text>抽奖机会
            </view>
        </view>
        <view class="winners-list" v-if="winningList.length">
            <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 in winningList" :key="item.sa_awardmxid">
                        <view v-if="item.createuserid" class="swiper-item u-line-2">
                            {{ item.name ? item.name : '用户' + item.createuserid }} <text
                                style="padding: 0 5px;">抽中了</text>{{ item.awardname }}
                        </view>
                        <view v-else></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: [],
            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,
            loading: false,
            winningList: [],
            tips: '',
            showPrizes: true,
        }
    },
    methods: {
        init() {
            console.log("this.sa_awardid", this.sa_awardid)
            try {
                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;
                    let prizes = [
                        { index: 0, x: 0, y: 0 },
                        { index: 2, x: 2, y: 0 },
                        { index: 6, x: 0, y: 2 },
                        { index: 4, x: 2, y: 2 },
                        { index: 1, x: 1, y: 0 },
                        { index: 3, x: 2, y: 1 },
                        { index: 5, x: 1, y: 2 },
                        { index: 7, x: 0, y: 1 },
                    ].map(v => {
                        v.borderRadius = '20rpx';
                        v.imgs = [{
                            src: 'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202405291716965428111B4602d616.webp',
                            width: '50%',
                            top: '20%'
                        }]
                        return v
                    })
                    res.data.forEach((v, i) => {
                        v.imgs = v.attinfos.map(img => {
                            return {
                                src: img.url,
                                width: '50%',
                                top: '25%'
                            }
                        })
                        prizes[i] = Object.assign(prizes[i], v);
                    });
                    this.prizes = prizes.sort((a, b) => {
                        return a.index - b.index
                    });
                })
            } catch (error) { }
            this.queryAwardCount();
            this.getWinningList();
        },
        startCallBack() {
            let that = this;
            if (this.tips) return uni.showToast({
                title: this.tips,
                icon: 'none',
                duration: 1500,
            });
            if (this.loading || this.usableCount == 0) return;
            this.loading = true;
            this.$refs.myLucky.play()
            that.$Http.basic({
                "content": {
                    "sa_awardid": that.sa_awardid,
                    "shareuserid": that.shareuserid,
                },
                "id": 20240514134002,
            }).then(res => {
                console.log('抽奖结果', res)
                if (this.cutoff(res.msg)) {
                    this.showPrizes = false;
                    setTimeout(() => {
                        this.showPrizes = true;
                    })
                    that.queryAwardCount();
                    that.getWinningList();
                    return
                };
                const index = that.prizes.findIndex(v => v.sa_awarditemsid == res.data.sa_awarditemsid);
                that.$refs.myLucky.stop(index)
                that.queryAwardCount();
                that.getWinningList();
                setTimeout(() => {
                    that.loading = false;
                    that.showWinningResult(res.data, index);
                }, 5000);
            })
        },
        showWinningResult(data, index) {
            console.log("中奖结果", data)
            let that = this;
            uni.showModal({
                title: '恭喜您抽中',
                content: data.awardname,
                showCancel: false,
                confirmText: '选择地址',
                success: function ({ confirm }) {
                    if (confirm) {
                        uni.navigateTo({
                            url: '/store/deliveryAddress/index'
                        })
                        that.$Http.selectAddress = (item) => {
                            uni.showModal({
                                title: '提示',
                                content: `是否确定选择“${item.address}”作为收货地址?`,
                                success: (success) => {
                                    if (success.confirm) that.$Http.basic({
                                        id: "2024052910464202",
                                        content: {
                                            sa_awardmxid: data.sa_awardmxid,
                                            name: item.name,
                                            phonenumber: item.phonenumber,
                                            province: item.province,
                                            city: item.city,
                                            county: item.county,
                                            address: item.address,
                                        }
                                    }).then(s => {
                                        if (that.cutoff(s.msg, '设置成功', true, '1000')) return;
                                    })
                                },
                            })
                        }
                    }
                },
                fail: (err) => {
                    console.log(err)
                }
            });
        },
        getWinningList() {
            this.$Http.basic({
                "content": {
                    "sa_awardid": this.sa_awardid,
                    "pageNumber": 1,
                    "pageSize": 20
                },
                "id": 20240514133902
            }).then(res => {
                console.log("中奖人员", res)
                if (this.cutoff(res.msg)) return;
                if (res.data.length < 7) {
                    let len = res.data.length;
                    for (let index = 0; index < (7 - len); index++) {
                        res.data.push({})
                    }
                }
                this.winningList = res.data;
            })
        },
        queryAwardCount() {
            if (uni.getStorageSync('userMsg').usertype == 99) {
                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;
                })
            } else {
                this.tips = '内部人员不可参与抽奖';
            }
        },
        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;
        }

        .usable-count {
            position: absolute;
            bottom: 15px;
            width: 100vw;
            text-align: center;
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-weight: bold;
            font-size: 14px;
            color: #FFFFFF;

            .count {
                height: 29px;
                font-family: Source Han Sans SC, Source Han Sans SC;
                font-weight: 800;
                font-size: 20px;
                color: #FAD96D;
                padding: 0 10px;
            }
        }
    }



    .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>