trun转盘zhuanpan KKK笔记

<template>
    <view class="backgb">
        <!-- 滚动视图 -->
        <view class="page" :style="'background-image:url(' + $image.getImage(imgList[0]) + ')'">
            <image :src="$image.getImage(imgList[1])" mode="widthFix" class="imgjl" @tap="winningrecord"></image>
            <!-- 转盘背景 -->
            <image :src="$image.getImage(imgList[2])" mode="widthFix" class="returnBg"
                :style="'transform: rotate('+ 0*(360/4) +'deg);'" :animation="animationData"></image>
            <!-- 转盘指针 -->
            <image :src="$image.getImage(imgList[5])" mode="widthFix" class="returnz"></image>
            <!-- 抽奖按钮 -->
            <image @click="goHandle" :src="$image.getImage(imgList[4])" mode="widthFix" class="returnstar"></image>
            <view class="myglod">我的金币：{{ memberInfo.gold }}</view>
            <view class="bottom_rap" :style="'background-image: url(' + $image.getImage(imgList[3]) + ');'">
                <view class="txtblock">
                    <view class="txtdian">·</view>
                    <view class="txt">活动所有奖品真实有效；金币奖励即时到账，实物奖品 1-7工作日内核对发出；</view>
                </view>
                <view class="txtblock">
                    <view class="txtdian">·</view>
                    <view class="txt">用户每次需消耗金币进行抽奖，有几率获得实物等大奖；</view>
                </view>
                <view class="txtblock">
                    <view class="txtdian">·</view>
                    <view class="txt">
                        活动期间，如存在违规操作，将自愿接受平台任何处理，消耗金币不予返还；所有参与者将视为已了解本活动规则，自愿承担所有责任及风险；</view>
                </view>
            </view>

            <!-- 滚动消息 -->
            <view class=""
                style="position: absolute;top: 270rpx;left: 195rpx;width: 60%;display: flex;align-items: center;">
                <u-notice-bar mode="vertical" :list="text1" font-size="24" color="#FFE0A5" bg-color="none"
                    :volume-icon="false" style="width: 100%;" padding="18rpx 0rpx"></u-notice-bar>
            </view>
        </view>

        <!-- 金币 -->
        <uni-popup type="center" :maskDeepColor="true" ref="popupgold" :maskClick="false">
            <view :style="'background-image: url(' + $image.getImage(imgList[9]) + ');'" class="popbox2">
                <view class="gold">{{ drawData.prizeDesc }}</view>
                <image class="getbtn" @tap="popuclose" :src="$image.getImage(imgList[13])" mode="widthFix"></image>
            </view>
        </uni-popup>
        <!-- 实体 -->
        <uni-popup type="center" :maskDeepColor="true" ref="popupwu" :maskClick="false">
            <view :style="'background-image: url(' + $image.getImage(imgList[drawData.prizeName=='小米手环'?11:10]) + ');'"
                class="popbox2 popbox3">
                <image class="returnS" :src="$image.getImage(imgList[16])" mode="widthFix"></image>
                <image class="getbtn" @tap="receive" :src="$image.getImage(imgList[12])" mode="widthFix"></image>
                <image class="closebtn" @tap="receiveclose" :src="$image.getImage(imgList[15])" mode="widthFix"></image>
            </view>
        </uni-popup>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                initialstate: false,
                residencetime: "",
                classify: [],
                classifyIndex: 0,
                prizeCode: null,
                list: [],
                //自定义排序规则
                sortRule: [1, 2, 3, 4, -1, 5, 6, 7, 8],
                rollList: [],
                roll: [0, 1, 2, 5, 8, 7, 6, 3],
                rollIndex: -1,
                progress: 0,
                rollStatus: true,
                timer: null,
                speed: 300,
                memberInfo: {
                    gold: 0
                },
                drawData: {},
                text1: [
                    '恭喜用户爱***M抽中了小米耳机',
                    '恭喜用户究***士抽中了500金币！',
                    '恭喜用户究***士抽中了500金币！',
                    '恭喜用户究***士抽中了500金币！',
                ],
                imgList: [],
                shiwugift: false, // 是否是实物
                animation: "",
                animationData: "",
                awardNumber: 5,
                isStart: false,
                rotated: 0,
                showpopupBool: false,
            };
        },
        onReady() {
            this.$titleText.getTitleText()
        },
        async onLoad() {
            this.getBackgroundImage()
            await this.getMemberInfo();
            await this.details();
        },
        onShow() {
            this.queryOne()
            //定义动画
            var animation = uni.createAnimation({
                duration: 4000,
                timingFunction: 'ease',
            })
            this.animation = animation
            if (uni.getStorageSync('memberInfo')) {
                this.$nextTick(async function() {
                    let state = await this.$server.addStart();
                    if (state.state) {
                        this.initialstate = true;
                        this.residencetime = state.residencetime
                    } else {
                        this.initialstate = false;
                    }
                });
            }
        },
        onUnload() {
            if (this.timer) {
                clearInterval(this.timer);
                this.timer = null;
            }
            if (this.initialstate) {
                this.$server.addFinish(this.residencetime)
            }
        },
        onHide() {
            if (this.initialstate) {
                this.$server.addFinish(this.residencetime)
            }
        },
        methods: {
            //动画
            rotate: function(deg) {
                setTimeout(function() {
                    //还原动画
                    this.animationData = ''
                    this.animation = ''
                    var animation = uni.createAnimation({
                        duration: 4500,
                        timingFunction: 'ease',
                    })
                    this.animation = animation
                    this.giftEven()
                }.bind(this), 4500)
                // 抽奖停止
                this.animation.rotate(deg).step()
                // 还原抽奖状态 
                // this.animation.rotate(1).step({
                //     duration: 0
                // })
                this.animationData = this.animation.export()
            },
            // 礼物弹框显示
            giftEven() {
                let this_ = this
                setTimeout(function() {
                    this_.rollStatus = true;
                    if (!this_.shiwugift)
                        this_.$refs.popupgold.open()
                    else {
                        this_.$refs.popupwu.open()
                    }
                }, 500)
            },
            // 获取背景图
            async getBackgroundImage() {
                const res = await this.$server.pR('/pic/getPicConfig', {
                    configCode: '100197'
                })
                if (res.data.code == 200) {
                    res.data.data.forEach(item => {
                        this.imgList.push(item.pic)
                    })
                }
            },
            //获取用户信息
            async getMemberInfo() {
                await this.$server.getMemberInfo().then(res => {
                    this.memberInfo = res.data.data;
                });
            },
            async details() {
                //请求抽奖的商品列表
                await this.$server.gR('/lucky/draw/query').then(res => {
                    if (res.data.code == 200) {
                        this.rollList = res.data.data;
                        //对数据进行排序
                        this.rollList.sort((a, b) => {
                            return this.sortRule.indexOf(a.sort) - this.sortRule.indexOf(b.sort);
                        });

                    }
                });
            },
            // 是否有待领取的礼物
            async queryOne() {
                //请求抽奖的商品列表
                await this.$server.pR('/lucky/draw/queryOne').then(res => {
                    if (res.data.code == 200) {
                        if (res.data.data != null) {
                            this.showpopupBool = true
                            this.drawData = res.data.data;
                            this.shiwugift = true
                            this.giftEven()
                        }
                    }
                });
            },
            historyHandle() {
                this.$server.navigateTo("pagesE/ShoppingMall/exchangerecord/exchangerecord")
            },
            navHandle(index) {
                this.classifyIndex = index;
                this.details();
            },
            btn(item) {
                this.$server.navigateTo("pagesE/ShoppingMall/exchange/exchange",
                    `id=${item.id}&prizeCode=${this.prizeCode}&availableNum=${item.availableNum}`)

            },
            winningrecord() {
                this.$server.navigateTo("pagesE/ShoppingMall/exchangerecord/winningrecord")

            },
            // 点击抽奖
            goHandle() {
                this.shiwugift = false
                this.rotate(3600 + 145)
                // return
            
                //判断抽奖状态
                if (this.rollStatus) {
                    //开始抽奖
                    this.rollStatus = false;
                    //请求抽奖接口
                    this.$server
                        .gR('/lucky/draw/execute', {
                            memberId: this.$storage.getMemberId()
                        })
                        .then(res => {
                            if (res.data.code == 200) {
                                // 获取抽奖结果
                                this.drawData = res.data.data;
                                this.showpopupBool = false
                                // 指针转动的角度
                                // 12 25 98 120 190 240 279 325
                                if (this.drawData.sort == 2) {
                                    this.shiwugift = true
                                    this.rotate(3600 + 15)
                                } else if (this.drawData.sort == 4) {
                                    this.shiwugift = false
                                    this.rotate(3600 + 310)
                                } else if (this.drawData.sort == 6) {
                                    this.shiwugift = false
                                    this.rotate(3600 + 280)
                                } else if (this.drawData.sort == 7) {
                                    this.shiwugift = true
                                    this.rotate(3600 + 240)
                                } else if (this.drawData.sort == 1) {
                                    this.shiwugift = false
                                    this.rotate(3600 + 190)
                                } else if (this.drawData.sort == 8) {
                                    this.shiwugift = false
                                    this.rotate(3600 + 145)
                                } else if (this.drawData.sort == 3) {
                                    this.shiwugift = false
                                    this.rotate(3600 + 80)
                                } else if (this.drawData.sort == 5) {
                                    this.shiwugift = false
                                    this.rotate(3600 + 40)
                                }
                            } else {
                                uni.showToast({
                                    title: res.data.msg,
                                    icon: 'none'
                                });
                            }
                            //更新金币信息
                            this.getMemberInfo();
                        })
                }
            },

            popuclose() {
                // 还原抽奖状态 
                this.animation.rotate(1).step({
                    duration: 0
                })
                this.animationData = this.animation.export()
                this.$refs.popupgold.close()
            },
            receiveclose() {
                // 还原抽奖状态
                this.animation.rotate(1).step({
                    duration: 0
                })
                this.animationData = this.animation.export()
                this.$refs.popupwu.close()
            },
            receive() {
                // 还原抽奖状态 
                this.animation.rotate(1).step({
                    duration: 0
                })
                this.animationData = this.animation.export()
                this.$refs.popupwu.close()

                var item = this.drawData;
                if (item.prizeType == 2) {
                    this.close();
                    uni.showToast({
                        title: '领取成功'
                    });
                } else if (this.showpopupBool) {
                    this.$server.navigateTo("pagesE/ShoppingMall/Orderfilling/Orderfillingtwo",
                        `productId=${item.configureId}&prizePictype=${item.prizePic}&prizeName=${item.prizeName}&prizeDesc=${item.prizeDesc}&remarks=${item.luckyDrawLogId}`
                    )
                } else {
                    this.$server.navigateTo("pagesE/ShoppingMall/Orderfilling/Orderfillingtwo",
                        `productId=${item.id}&prizePictype=${item.prizePic}&prizeName=${item.prizeName}&prizeDesc=${item.prizeDesc}&remarks=${item.luckyDrawLogId}&gold=${item.gold}`
                    )
                    `id=${this.list.id}&prizeCode=${this.prizeCode}&type=${this.type}&gold=${this.list.gold}`
                }

            },
            again() {
                this.close();
                this.rollIndex = -1;
                setTimeout(() => {
                    this.goHandle();
                }, 500);
            },
            close() {
                this.$refs.popup.close();
            },
            toTask() {
                this.$server.switchTab("pagesE/task/task/task")

            }
        }
    };
</script>

<style lang="scss" scoped>
    .backgb {
        background-color: #D51539;
        min-height: 100vh;
    }

    .page {
        background-size: 100%;
        box-sizing: border-box;
        background-repeat: no-repeat;
        height: 1830rpx;
        position: relative;

        .shopping {}
    }

    .material {
        width: 691rpx;
        height: 746rpx;
        position: relative;

        .close {
            width: 66rpx;
            height: 66rpx;
            position: absolute;
            left: 0;
            right: 0;
            bottom: -112rpx;
            margin: auto;
        }

        .receive {
            width: 450rpx;
            height: 110rpx;
            border-radius: 110rpx;
            position: absolute;
            left: 120rpx;
            bottom: 60rpx;
        }

        .receiveBox {
            width: 450rpx;
            height: 260rpx;
            position: absolute;
            top: 310rpx;
            left: 120rpx;

            .imgBox {
                width: 450rpx;
                height: 260rpx;

                image {
                    width: 450rpx;
                    height: 260rpx;
                }
            }
        }
    }

    .gold {
        position: relative;
        width: 420rpx;
        height: 384rpx;

        .gold-text {
            width: 100%;
            position: absolute;
            top: 132rpx;
            text-align: center;

            text {
                font-size: 40rpx;
                font-weight: bold;
                color: #900000;
            }
        }
    }

    .bottom_rap {
        position: relative;
        top: 1370rpx;
        height: 415rpx;
        width: 650rpx;
        background-size: 100%;
        padding: 80rpx 30rpx 10rpx;
        background-repeat: no-repeat;
        border-radius: 16rpx;
        box-sizing: border-box;
        margin: 0 auto;

        .txtblock {
            color: #AD061E;
            display: flex;
            margin-bottom: 20rpx;
            font-size: 40rpx;
        }

        .txtdian {
            font-size: 45rpx;
            line-height: 40rpx;
        }

        .txt {
            font-size: 26rpx;
            color: #AD061E;
        }
    }

    .returnBg {
        position: absolute;
        top: 395rpx;
        width: 650rpx;
        height: 600rpx;
        left: 50rpx;
        transform: translate(-50%);
    }

    .returnstar {
        position: absolute;
        top: 1153rpx;
        width: 270rpx;
        height: 80rpx;
        left: 50%;
        transform: translate(-50%);
    }

    .myglod {
        position: absolute;
        top: 1270rpx;
        left: 50%;
        color: #fff;
        transform: translate(-50%);
    }

    .returnz {
        position: absolute;
        top: 600rpx;
        width: 180rpx;
        height: 90rpx;
        left: 286rpx;
        transform-origin: 50% 57% !important;
    }

    .imgjl {
        width: 109rpx;
        height: 107rpx;
        position: absolute;
        top: 360rpx;
        right: 8rpx;
        z-index: 1;
    }

    .popbox2 {
        width: 400rpx;
        height: 530rpx;
        background-size: 100%;
        background-repeat: no-repeat;
        position: relative;

        .iconclose {
            width: 48rpx;
            height: 40rpx;
            position: absolute;
            top: -60rpx;
            right: -50rpx;
        }

        .gold {
            position: absolute;
            width: 75rpx;
            height: 50rpx;
            top: -5rpx;
            font-size: 36rpx;
            left: 250rpx;
            color: #FFE400;
            text-align: center;
        }

        .returnS {
            position: absolute;
            width: 380rpx;
            height: 250rpx;
            top: 100rpx;
            left: 160rpx;
            z-index: -1;
            animation: rotation 2.3s linear infinite;
        }

        .getbtn {
            position: absolute;
            width: 250rpx;
            height: 60rpx;
            top: 485rpx;
            left: 50%;
            transform: translate(-50%);
        }

        .closebtn {
            position: absolute;
            width: 45rpx;
            height: 40rpx;
            top: -50rpx;
            right: 90rpx;
        }

    }

    .popbox3 {
        width: 680rpx;
    }

    @keyframes rotation {
        0% {
            -webkit-transform: rotate(0deg) scale(1, 1);
        }

        50% {
            -webkit-transform: rotate(180deg) scale(1.2, 1.2);
        }

        100% {
            -webkit-transform: rotate(360deg) scale(1, 1);
        }
    }
</style>