微信小程序转盘抽奖

<template>
    <div class="lottery">
        <div class="lottery_background">
            <div class="lottery_num"> 
                <img src="/static/image/number_icon.png" alt="">
                <span>次数</span>
                <span>{{LuckyClick}}</span>
            </div>
            <div class="rules">
                <span>规则 ></span>
            </div>
            <div class="lottery_turntable">
                <img class="turntable" src="/static/image/turntable.png" alt="" :style="{transform:rotate_deg,transition:rotate_transition}">
                <img class="turntable_back" src="/static/image/turntable_back.png" alt="">
                <img class="man" src="/static/image/man.png" alt="">
                <img class="pointer" src="/static/image/pointer.png" alt=""  @click="start">
            </div>
            <div class="lottery_btn">
                <div>
                    <!-- <img src="/static/image/yellow_btn.png" alt=""> -->
                    <span>我的积分:{{points}}</span><br>
                    <span>每次抽奖将消耗10积分</span>
                </div>
                <div>
                    <!-- <img src="/static/image/blue_btn.png" alt=""> -->
                    <span>中奖纪录</span>
                </div>
            </div>
            <div class="task">
                <div>
                    <div class="task_title">
                        <img src="/static/image/task_title.png" alt="">
                    </div>
                    <div class="task_content" v-for="(item,index) in task_list" :key="index" @click="goTask(item.url)">
                        <span>{{item.text}}</span>
                        <span>前往</span>
                    </div>
                </div>
                
            </div>
        </div>
       
    </div>
</template>

<script>
import API from '@/api'
export default {
    data(){
        return{
            task_list:[
                {
                    url:'../sign/main',
                    text:'完成每日签到'
                },
                {
                    url:'../indexscan/main',
                    text:'购买任意商品'
                },
                //   {
                //     url:'../recharge/main',
                //     text:'充值得积分'
                // },
                //   {
                //     url:'../membership/main',
                //     text:'购买会员获得抽奖机会'
                // },
                {
                    url:'../indexscan/main',
                    text:'去首页分享小程序'
                },
                {
                    url:'',
                    text:'邀请至少一位小伙伴'
                },
            ],
            LuckyClick: 3,//抽奖剩余次数
            cat: 45, //总共8个扇形区域，每个区域约45度
            isAllowClick: true, //是否能够点击
            rotate_deg: 0, //指针旋转的角度
            rotate_transition: "transform 3s ease-in-out", //初始化选中的过度属性控制
            award_list:[
                {
                    award_id:1,
                    award_text:'200积分'
                },
                 {
                    award_id:2,
                    award_text:'啤酒1瓶'
                },
                 {
                    award_id:3,
                    award_text:'10元优惠券'
                },
                 {
                    award_id:4,
                    award_text:'实物奖'
                },
                 {
                    award_id:5,
                    award_text:'50积分'
                },
                 {
                    award_id:6,
                    award_text:'随机勋章'
                },
                 {
                    award_id:7,
                    award_text:'5元优惠券'
                },
                 {
                    award_id:8,
                    award_text:'鼓励5积分'
                },
            ],
            points:0,
        }
    },
    methods:{
        start() {
            if (this.LuckyClick == 0) {
                wx.showToast({
                  title: '机会已经用完了',
                  icon: 'none',
                  duration: 2000,
                  mask: true,
                  success: res => {}
                });
                return;
            }
            //消耗积分
            wx.request({
                url: `${API.API_HOST}/restapi/patron/consume-point`,
                data: {
                    openid:  wx.getStorageSync('openid'),
                    point:10
                },
                header: {
                    'content-type': 'application/json'
                },
                method:'POST',
                success: (res) => {
                    if(res.data.success){
                        this.rotating();
                        this.getPoints();
                    }else{//签到失败
                        wx.showToast({
                            title: `${res.data.data.message}`, //提示的内容,
                            icon: 'none', //图标,
                            duration: 2000, //延迟时间,
                            mask: true, //显示透明蒙层，防止触摸穿透,
                            success: res => {}
                        });
                    }
                }
            })
           
        },
        //转盘的动作
        rotating() {
            if (!this.isAllowClick) return;
            this.isAllowClick = false;
            this.rotate_transition = "transform 3s ease-in-out";
            this.LuckyClick--;
            var rand_circle = 5; //默认多旋转5圈
            //   var winningIndex = Math.floor(Math.random() * 8); //获奖的下标   0-7   没有概率每个平均
            var winningIndex = this.set(); //设置了概率的
            console.log(winningIndex);
            var randomDeg = 360 - winningIndex * 45; //当前下标对应的角度    45是总共8个扇形区域，每个区域约45度
        
            var deg = rand_circle * 360 + randomDeg; //将要旋转的度数  由于是顺时针的转动方向需要用360度来减
            this.rotate_deg = "rotate(" + deg + "deg)";
         
            var that = this;
            setTimeout(()=>{
                wx.showToast({
                    title: `恭喜你获得 ${that.award_list[winningIndex].award_text}`,
                    icon: 'none',
                    duration: 3000, 
                    mask: true,
                    success: res => {}
                });
            },3000)
            setTimeout(function() {
                that.isAllowClick = true;
                that.rotate_deg = "rotate(" + 0 + "deg)"; //定时器关闭的时候重置角度
                that.rotate_transition = "";
            }, 5000);
           
        },
        //设置概率
        set() {
            var winIndex;
            var __rand__ = Math.random();
            if (__rand__ < 0.3) winIndex = 2;//30%的概率
            else if (__rand__ < 0.55) winIndex = 6;//25%
            else if (__rand__ < 0.75) winIndex = 1;//20%
            else if (__rand__ < 0.85) winIndex = 4;//10%
            else if (__rand__ < 0.92) winIndex = 3;//7%
            else if (__rand__ < 0.97) winIndex = 5;//5%
            else if (__rand__ < 0.99) winIndex = 7;//2%
            else if (__rand__ = 0.99) winIndex = 0;//1%
        
            return winIndex;
        },
        //去完成任务
        goTask(url){
            if(this.url=='../indexscan/main'){
                 wx.switchTab({ url});
            }
            wx.navigateTo({ url});
        },
        //获取积分
        getPoints(){
            wx.request({
                url: `${API.API_HOST}/restapi/patron/view`,
                data: {
                    openid: wx.getStorageSync('openid')
                },
                method: 'GET',
                success: res =>{
                    if(JSON.stringify(res.data.data) !== "{}"){
                        this.points=res.data.data.point
                    }
                }
            })
        }

    },
    onLoad(){
        wx.setNavigationBarTitle({
            title: '幸运大抽奖'
        });
        this.getPoints();
    }
}
</script>

<style lang="scss" scoped>
    .lottery{
        width: 100%;      
        background: url('http://jujiuwo.xiaoniren.cn/images/lottery_background.png') no-repeat;        
        background-size: 100% auto;
        position: fixed;
        top:0;
        left:0;
        height:100%;
        overflow: auto;  
        .lottery_background{
            width:100%;
            height:auto;
            position: relative;
            z-index:0;
            >img{
                width:100%;
                height:1000px;
            }
            .lottery_num{
                position: absolute;
                width:78px;
                height:48px;
                top:10px;
                left:20px;
                img{
                    width:80px;
                    height:40px;
                }
                span{
                    color:#6153FE;
                    font-size:11px;
                    position: absolute;
                    top:12px;
                    left:12px;
                }
                span:last-child{
                    left:57px;
                    top:12px;
                }
            }
            .rules{ 
                position: absolute;
                top:30px;
                right:5px;
                span{
                    width:50px;
                    display: inline-block;
                    line-height: 22px;
                    font-size:11px;
                    color:#fff;
                    background: #c8000a;
                    border-radius:15px;
                    text-align: center;
                }
            }
            .lottery_turntable{
                width:100%;
                text-align: center;
                position: absolute;
                top:60px;
                .turntable_back{
                    width:90%;
                    height:500px;
                    position: absolute;
                    left: 0; 
                    top: 500px;
                    right: 0; 
                    bottom: 0;   
                    margin: auto; 
                    z-index:0;
                }
                .turntable{ 
                    width:90%;
                    height:335px;
                    z-index:1;
                    position: absolute;
                    left: 0; 
                    top: 420px;
                    right: 0; 
                    bottom: 0;   
                    margin: auto; 
                }
                .man{
                    margin:0 auto;
                    width:54px;
                    height:94px;
                    position: absolute;
                    top:314px;
                    left:51px;
                    z-index:2;
                }
                .pointer{
                    width:80px;
                    height:100px;
                    position: absolute;
                    top:384px;
                    right:0;
                    z-index:3;
                    left: 0; 
                    bottom: 0;   
                    margin: auto; 
                }

            }
            .lottery_btn{
                position: absolute;
                top:570px;
                width:100%;
                box-sizing: border-box;
                padding:0 15px;
                display: flex;
                justify-content: space-around;
                align-items: center;
                >div{
                    background:linear-gradient(#FED741 0%, #FDB41A 50%, #F78E02 100%);
                    width:160px;
                    text-align: center;
                    border-radius:30px;
                    box-shadow:2px 1px 3px #F78E02;
                    span{
                        color:#fff;
                        font-size:17px;
                        font-weight: bold;
                    }
                    span:last-child{
                        color:#000;
                        font-size:10px;
                    }
                }
                >div:last-child{
                    background:linear-gradient(#6B77FF 0%, #5A55FF 50%, #4940FA 100%);
                    box-shadow:2px 1px 3px #4940FA;
                    width:130px;
                    text-align: center;
                    border-radius:30px;
                    span{
                        color:#fff;
                        font-size:13px;
                        font-weight: bold;
                        line-height: 35px;
                    }
                }
            }
            .task{
                width:70%;
                margin:0 auto; 
                >div{
                    margin-bottom:20px;
                    top:650px;
                    position: absolute;
                    width:70%;
                    .task_title{
                        text-align: center;
                        img{
                            width:100%;
                            height:37px;
                        }
                    }
                    .task_content{
                        background: #F1A1C6;
                        width:100%;
                        height:40px;
                        display:flex;
                        justify-content: space-between;
                        align-items: center;
                        box-sizing: border-box;
                        padding:0 10px;
                        margin:0 auto;
                        margin-top:10px;
                        border-radius:4px;
                        span{
                            color:#CA0008;
                            font-size:12px;
                            line-height: 24px;
                        }
                        span:last-child{
                            background:#c8000a;
                            color:#fff;
                            border-radius:3px;
                            display: inline-block;
                            width:40px;
                            font-size:11px;
                            text-align: center;
                            line-height:20px;
                        }
                    }
                }
            }
        }
        

       
    }
</style>