vue适配3到8个大转盘抽奖

vue实现适配奖品不固定的大转盘抽奖,里面的实现代码就是vue+js,不需要jq,原理就是根据接口传过来的奖品数量,计算出来每个奖品应该旋转的角度,然后渲染到页面上


export default {
        data() {
            return {
                winnum: '0', //中奖的下标
                indexa: '', //中奖的下标在第一个ul下li的index下标,背景变深颜色
                indexb: '', //中奖的下标在第二个ul下li的index下标,背景变深颜色
                toast_control: false, //抽奖结果和活动规则弹出框控制器
                click_flag: true, //是否可以旋转抽奖
                start_rotating_degree: 0, //转盘初始旋转角度
                rotate_angle: 0, //转盘将要旋转的角度
                start_rotating_degree_pointer: 0, //指针初始旋转角度
                rotate_angle_pointer: 0, //指针将要旋转的度数
                rotate_transition: "", //初始化选中的过度属性控制
                rotate_transition_pointer: "transform 12s ease-in-out", //初始化指针过度属性控制
                prize_list: [{
                        prizeType: 1, // 奖品数量
                        prizeName: "奖品000", // 奖品名称
                    },
                    {
                        prizeType: 3,
                        prizeName: "奖品111",
                    },
                    {
                        prizeType: 2,
                        prizeName: "奖品222",
                    },
                    {prizeType: 2,
                      prizeName: "奖品333"
                    },
                    {prizeType: 3,
                      prizeName: "奖品444"
                    },
//                  {prizeType: 3,
//                    prizeName: "奖品555"
//                  },
//                  {prizeType: 3,
//                    prizeName: "奖品666"
//                  },
//                  {prizeType: 3,
//                    prizeName: "奖品777"
//                  }
                ], //奖品列表
                arrOne: [],
                arrTwo: [],
                shopUid: '',
                userinfo: '',
                prizeinfo: {
                    isGet: '',
                    prizeInfos: [{
                        validTime: '',
                        invalidTime: '',
                        type: ''
                    }]
                }, //中奖优惠券或实物的信息
                hasPrize: {}, //抽奖之后弹出框信息
            }
        },
        mounted() {
            let _this = this;
            _this.setSan()
        },

        methods: {
            chou() {
                let _this = this;
                _this.indexa = ''
                _this.indexb = ''
                _this.winnum = Math.floor(Math.random() * Number(_this.prize_list.length - 1));
                console.log(_this.winnum)
                _this.rotating(_this.winnum)
            },
            setSan() {
                let _this = this
                _this.arrOne = [];
                _this.arrTwo = [];
                _this.rotate_angle = "rotate(" + Math.floor(-360 * 100 / _this.prize_list.length) / 200 + "deg)";
                _this.start_rotating_degree = Math.floor(-360 * 100 / _this.prize_list.length) / 200;
                for(var i = 0; i < _this.prize_list.length; i++) {
                    _this.prize_list[i].troter = "rotate(" + Math.floor(360 * 100 / _this.prize_list.length) / 100 * (0.5 + Number(i)) + "deg) translateX(-50%)"
                    _this.prize_list[i].width = Math.floor(3.14 * 5.6 / this.prize_list.length) + "rem"
                    var item = {
                        value: _this.prize_list[i].name,
                        zIndex: Number(i) + 1,
                        deg: "rotate(" + Math.floor(360 * 100 / this.prize_list.length) * i / 100 + "deg)",
                        degnum: i,
                    }
                    if(i < _this.prize_list.length / 2) {
                        _this.arrOne.push(item)
                    } else {
                        _this.arrTwo.push(item)
                    }
                }
            },
            rotating(index) { //转盘转动函数,index值为中奖的下标,后台会返回中奖的id,这边会首先for循环判断中奖的下标
                let _this = this;
                _this.rotate_transition = "transform 6s cubic-bezier(0.25,0.1,0.01,1)";
                if(!_this.click_flag) return;
                var type = 0; // 默认为 0  转盘转动 1 箭头和转盘都转动(暂且遗留)
                var during_time = 5; // 默认为1s
                var result_index = index; // 最终要旋转到哪一块,对应prize_list的下标
                var rand_circle = 6; // 附加多转几圈,2-3
                _this.click_flag = false; // 旋转结束前,不允许再次触发
                if(type == 0) {
                    if(this.start_rotating_degree < 0) {
                        this.start_rotating_degree = 0
                    } else {
                        this.start_rotating_degree = this.start_rotating_degree + Math.floor(360 * 100 / _this.prize_list.length) / 200
                    }
                    var rotate_angle = this.start_rotating_degree + 360 * 10 + Math.floor(-360 * 100 / this.prize_list.length) / 200 - Math.floor(360 * 100 / this.prize_list.length) * result_index / 100;
                    this.start_rotating_degree = rotate_angle;
                    _this.rotate_angle = "rotate(" + rotate_angle + "deg)";
                    // 旋转结束后,允许再次触发
                    setTimeout(function() {
                        _this.click_flag = true;
                        if(_this.winnum < _this.prize_list.length / 2) {
                            _this.indexb = ''
                            _this.indexa = _this.winnum;
                        } else {
                            _this.indexa = ''
                            _this.indexb = _this.winnum - (_this.arrOne.length);
                        }
                        setTimeout(function() {
                            _this.game_over();
                        }, 100)
                    }, during_time * 1000 + 1500); // 延时,保证转盘转完
                }
            },
            game_over() {
                let _this = this;
                _this.prizetype = 1
                if(_this.prizetype != -1) {
                    _this.toast_control = true;
                } else {
                    Alert.show("奖品已领完,下次请早到哦!")
                }
                var obj = {}
                if(_this.prize_list[_this.winnum].prizeType == 0) {
                    obj = {
                        type: 0,
                        words1: '谢谢参与',
                        words2: "不要气馁!",
                        words3: '还有更多大奖等着你~'
                    }
                } else if(_this.prize_list[_this.winnum].prizeType == 1 || _this.prize_list[_this.winnum].prizeType == 2) {
                    obj = {
                        type: 1,
                        words1: '恭喜您!',
                        words2: "获得" + _this.prize_list[_this.winnum].prizeName,
                        words3: '可在“个人中心”查看'
                    }
                } else if(_this.prize_list[_this.winnum].prizeType == 3) {
                    obj = {
                        type: 1,
                        words1: '恭喜您!',
                        words2: "获得" + _this.prize_list[_this.winnum].prizeName,
                        words3: ''
                    }
                }
                _this.hasPrize = obj
            },
        }

    }

.content {
        .conts {
            min-height: 11.5rem;
            .activitytime {
                height: 0.5rem;
                width: 100%;
                position: absolute;
                .timebg {
                    width: 100%;
                    height: 100%;
                    background: #000000;
                    opacity: 0.3;
                    position: absolute;
                    left: 0;
                    top: 0;
                }
                .time {
                    color: #ffffff;
                    line-height: 0.5rem;
                    padding-left: 0.2rem;
                    font-size: 0.24rem;
                    position: relative;
                    z-index: 2;
                }
            }
            .rule {
                height: 0.69rem;
                margin-bottom: 2.37rem;
                position: relative;
                .ruletop {
                    width: 1.35rem;
                    height: 0.46rem;
                    position: absolute;
                    right: 0;
                    bottom: 3px;
                    .rulebg {
                        height: 100%;
                        width: 100%;
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        background: #1201d5;
                        opacity: 0.3;
                        border-top-left-radius: 0.23rem;
                        border-bottom-left-radius: 0.23rem;
                    }
                    .ruletitle {
                        text-align: center;
                        line-height: 0.46rem;
                        font-size: 0.24rem;
                        color: #fff;
                        position: relative;
                        z-index: 3;
                        border-top-left-radius: 0.23rem;
                        border-bottom-left-radius: 0.23rem;
                        border-bottom: 3px solid #1201d5;
                    }
                }
            }
            .title {
                height: 0.46rem;
                text-align: center;
                color: #464ff4;
                font-size: 0.28rem;
                line-height: 0.46rem;
                font-weight: 700;
                margin-bottom: 0.24rem;
            }
            .box {
                width: 6.68rem;
                height: 6.67rem;
                margin: auto;
                position: relative;
                overflow: hidden;
                .pointer {
                    width: 1.81rem;
                    height: 2.07rem;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    z-index: 20;
                    transform: translate(-50%, -55%);
                    background: url(../../static/img/pointer.png) top center no-repeat;
                    background-size: 100%;
                    p {
                        font-size: 0.36rem;
                        color: #ff4027;
                        font-weight: 700;
                        text-align: center;
                    }
                    p:first-of-type {
                        margin-top: 0.6rem;
                    }
                }
                .boxbg {
                    width: 5.60rem;
                    height: 5.60rem;
                    background: url(../../static/img/box.png) top center no-repeat;
                    background-size: 100%;
                    padding: 0.54rem;
                    .turn {
                        width: 5.60rem;
                        height: 5.60rem;
                        border-radius: 50%;
                        overflow: hidden;
                        .slice {
                            box-sizing: border-box;
                            border: 1px solid #ffd8ad;
                        }
                        .win {
                            background: #fff4c9!important;
                        }
                        .wheel-bg6 {
                            width: 100%;
                            height: 100%;
                            position: relative;
                            div {
                                text-align: center;
                            }
                            .prize-list {
                                width: 100%;
                                height: 100%;
                                position: absolute;
                                ul {
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    width: 100%;
                                    height: 100%;
                                    border-radius: 50%;
                                    overflow: hidden;
                                    margin: 0;
                                    padding: 0;
                                    li {
                                        position: absolute;
                                        top: 0px;
                                        left: 50%;
                                        width: 50%;
                                        height: 50%;
                                        transform-origin: 0 100%;
                                        overflow: hidden;
                                        cursor: pointer;
                                        box-sizing: border-box;
                                        border-left: 1px solid #ffd8ae;
                                        background: #fff;
                                    }
                                }
                                .ulOne {
                                    clip: rect(0, 5.6rem, 5.6rem, 2.8rem);
                                }
                                .ulTwo {
                                    clip: rect(0, 2.8rem, 5.6rem, 0);
                                }
                                .prize-item {
                                    position: absolute;
                                    top: 0;
                                    z-index: 12;
                                    height: 2.8rem;
                                    left: 50%;
                                    transform: translateX(-50%);
                                    transform-origin: 0 100%;
                                    .prize-pic {
                                        padding-top: 0.3rem;
                                        text-align: center;
                                        img {
                                            width: 0.75rem;
                                        }
                                    }
                                    .prize-name {
                                        font-size: 0.24rem;
                                        color: #ff6600;
                                    }
                                }
                            }
                        }
                    }
                }
                .money {
                    position: absolute;
                    width: 0.57rem;
                    height: 0.55rem;
                    top: 2.17rem;
                    right: -0.2rem;
                }
            }
            .prizebox {
                margin: 0.3rem;
                position: relative;
                border-radius: 4px;
                overflow: hidden;
                padding: 0 0.27rem 0.28rem;
                .prizebg {
                    position: absolute;
                    border-radius: 4px;
                    background: #fff;
                    height: 100%;
                    width: 100%;
                    top: 0;
                    left: 0;
                    opacity: 0.2;
                }
                .pri {
                    .titname {
                        color: #fff;
                        font-size: 0.32rem;
                        text-align: center;
                        margin: 0.07rem;
                        span {
                            img {
                                width: 1.51rem;
                                height: 0.14rem;
                                margin: 0 0.2rem 0.03rem;
                            }
                        }
                        .xuanz {
                            img {
                                transform: rotate(180deg);
                            }
                        }
                    }
                    .prizez {
                        width: 100%;
                        border: 1px solid #fa54a7;
                        border-radius: 4px;
                        background: #fff;
                        display: flex;
                        .couponleft {
                            padding-left: 0.3rem;
                            width: 3.9rem;
                            position: relative;
                            height: 100%;
                            .iconright {
                                div {
                                    line-height: 1.1;
                                }
                                .couponname {
                                    font-size: 0.32rem;
                                    color: #333333;
                                    margin: 0.45rem 0 0.2rem;
                                }
                                .timevalidity {
                                    font-size: 0.24rem;
                                    color: #999999;
                                    margin-bottom: 0.2rem;
                                }
                                .timevalidity:last-of-type {
                                    margin-bottom: 0.45rem;
                                }
                            }
                        }
                        .couponright {
                            flex: 1;
                            line-height: 1.2rem;
                            text-align: center;
                            font-size: 0.24rem;
                            color: #ff4745;
                            vertical-align: top;
                            position: relative;
                            .money {
                                position: relative;
                                bottom: 0.02rem;
                                margin-right: 0.02rem;
                            }
                            .moneynum {
                                font-size: 0.5rem;
                            }
                            a {
                                position: absolute;
                                left: 0;
                                right: 0;
                                bottom: 0.3rem;
                                width: 1.5rem;
                                height: 0.54rem;
                                color: #fff;
                                background: #ff4745;
                                border-radius: 2px;
                                line-height: 0.54rem;
                                text-align: center;
                                font-size: 0.28rem;
                                margin: auto;
                                display: block;
                            }
                            .tel {
                                bottom: 0;
                                top: 0;
                            }
                            div {
                                position: absolute;
                                right: -0.2rem;
                                top: 0;
                                bottom: 0;
                                margin: auto;
                                width: 1.28rem;
                                height: 1.28rem;
                                img {
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                        }
                    }
                }
            }
        }
        .popup {
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: 30;
            top: 0;
            left: 0;
            .popbg {
                width: 100%;
                height: 100%;
                background: #000;
                opacity: 0.7;
            }
            .popbox {
                width: 5.54rem;
                height: 4.98rem;
                position: absolute;
                top: 27%;
                left: 0;
                right: 0;
                margin: auto;
                background: url(../../static/img/giftboxbg.png) top center no-repeat;
                background-size: 100%;
                text-align: center;
                .img {
                    width: 3.06rem;
                    height: 1.4rem;
                    margin: auto;
                    margin-top: 1.07rem;
                    margin-left: 1.1rem;
                    background: url(../../static/img/gift.png) top center no-repeat;
                    background-size: 100%;
                }
                .img1 {
                    background: url(../../static/img/regret.png) top center no-repeat;
                    background-size: 100%;
                }
                .words1 {
                    font-size: 0.4rem;
                    color: #ff7d12;
                    margin-top: 0.2rem;
                }
                .words2 {
                    font-size: 0.28rem;
                    color: #ff8422;
                }
                .words3 {
                    font-size: 0.24rem;
                    color: #999999;
                    margin-top: 0.07rem;
                }
            }
            .activityrule {
                width: 5.54rem;
                height: 6.32rem;
                position: absolute;
                top: 20%;
                left: 0;
                right: 0;
                margin: auto;
                background: url(../../static/img/rulebg.png) top center no-repeat;
                background-size: 100%;
                .rulecnt {
                    padding: 1.3rem 0.77rem 0;
                    p {
                        font-size: 0.24rem;
                        line-height: 0.4rem;
                        text-align: justify;
                        color: #333333;
                    }
                    p:last-of-type {
                        color: #ff4928;
                    }
                }
            }
            .close {
                width: 0.5rem;
                height: 0.5rem;
                background: url(../../static/img/close.png) top center no-repeat;
                background-size: 100%;
                position: absolute;
                top: 75%;
                left: 0;
                right: 0;
                margin: auto;
            }
        }
    }

效果图:
15300834431-239x300.png

你可能感兴趣的:(vue适配3到8个大转盘抽奖)