vue js 幸运大转盘

vue js 幸运大转盘

在写一个 vue 项目时，用到了转盘抽奖，发现网上没有现成的 vue 案例，于是将自己写的分享出来，用作交流使用

---

效果

流程

• 页面created时，加载奖品列表，根据和后台预先定义好的字段格式化奖品列表
• 检查是否有抽奖资格
• 点击抽奖，抽奖次数减一
• 发送http请求，获取后台反馈的奖品在奖品列表中的下标
• 跟据奖品，转盘开始转动，转到相应奖品区域
• 弹出奖品通知modal
• 关闭modal，重新开始

主要代码

这里是引入本地模拟数据，具体应用的话，配合http请求，数据格式可以参考下面这个格式，但应用到prize_list 上去时一定要经过 init_prize_list( )这个方法处理

 "prizes": [
        {
            "name": "",
            "change": "",
            "type": "nothing"
        },
        {
            "name": "easejoy_bean",
            "change": 10,
            "type": "10-beans"
        },
        {
            "name": "point",
            "change": 5,
            "type": "5-point"
        },
        {
            "name": "easejoy_bean",
            "change": 5,
            "type": "5-beans"
        },
        {
            "name": "point",
            "change": 10,
            "type": "10-point"
        },
        {
            "name": "easejoy_bean",
            "change": 2,
            "type": "2-beans"
        },
        {
            "name": "easejoy_bean",
            "change": 500,
            "type": "most-beans"
        },
        {
            "name": "easejoy_bean",
            "change": 1,
            "type": "1-bean"
        }
    ]

import { prize_list_json } from "../assets/js/database.js" //此奖品数组为服务器请求得到的json数据,进过处理，赋值给prize_list

声明一些变量，保存抽奖全局数值和状态

data() {
    return {
      easejoy_bean: 0, //金豆
      lottery_ticket: 0, //抽奖次数
      prize_list: [], //奖品列表
      toast_control: false, //抽奖结果弹出框控制器
      toast_pictrue: require("../assets/img/congratulation.png"), //抽奖结果标题图片src
      toast_title: "恭喜你，获得10积分", //抽奖结果文本反馈
      toast_back: false, //抽奖结果toast中是否为确认按钮
      start_rotating_degree: 0, //初始旋转角度
      rotate_angle: 0, //将要旋转的角度
      start_rotating_degree_pointer: 0, //指针初始旋转角度
      rotate_angle_pointer: 0, //指针将要旋转的度数
      rotate_transition: "transform 6s ease-in-out", //初始化选中的过度属性控制
      rotate_transition_pointer: "transform 12s ease-in-out", //初始化指针过度属性控制
      click_flag: true, //是否可以旋转抽奖
      i: 0 //测试使用
    };
  },  

 created(){//页面created时，调用方法初始化奖品列表
      this.init_prize_list(prize_list_json.prizes)
  },
  methods: {
      //此方法为处理奖品数据
    init_prize_list(list){
        for(var i=0;ivar tmp = list[i];
            if(tmp.name=='point'){
                list[i].zh_name = '积分'
            }else if(tmp.name == 'easejoy_bean'){
                list[i].zh_name = '金豆'
            }else{
                list[i].zh_name = " "
            }
            list[i].picture = require("../assets/img/"+this.init_prize_icon(list[i].type));            
        }
        this.prize_list = list;
    },
    //此方法为初始化奖品图标
    init_prize_icon(type){444
        switch (type) {
            case 'nothing':return 'give_up.png'

                break;
            case '10-beans':return 'bean_ten.png'

                break;
            case '5-point':return 'point_five.png'

                break;
            case '5-beans':return 'bean_five.png'

                break;
            case '10-point':return 'point_ten.png'

                break;
            case '2-beans':return 'bean_two.png'

                break;
            case 'most-beans':return 'bean_500.png'

                break;
            case '1-bean':return 'bean_one.png'

                break;

        }
    },
    rotate_handle() {// 这里是点击函数
      this.rotating(this.i);//这个函数是转动函数，需要传入奖品对应下标，如果没有传入,则随机
      this.i = this.i + 2;     
    },
    rotating(index) {
      if (!this.click_flag) return;
      var type = 0; // 默认为 0  转盘转动 1 箭头和转盘都转动(暂且遗留)
      var during_time = 5; // 默认为1s
      var random = var random = Math.floor(Math.random()*7) //随机下标
      var result_index = index || random; // 最终要旋转到哪一块，对应prize_list的下标
      var result_angle = [337.5, 292.5, 247.5, 202.5, 157.5, 112.5, 67.5, 22.5]; //最终会旋转到下标的位置所需要的度数
      var rand_circle = 6; // 附加多转几圈，6
      this.click_flag = false; // 旋转结束前，不允许再次触发
      if (type == 0) {
        // 转动盘子
        var rotate_angle =
          this.start_rotating_degree +
          rand_circle * 360 +
          result_angle[result_index] -
          this.start_rotating_degree % 360; // 这里为计算旋转的角度，考虑第一次旋转后的结果
        this.start_rotating_degree = rotate_angle;
        this.rotate_angle = "rotate(" + rotate_angle + "deg)";
        // // //转动指针,默认只旋转转盘，用户体验较好
        // this.rotate_angle_pointer = "rotate("+this.start_rotating_degree_pointer + 360*rand_circle+"deg)";
        // this.start_rotating_degree_pointer =360*rand_circle;
        var that = this;
        // 旋转结束后，允许再次触发
        setTimeout(function() {
          that.click_flag = true;
           that.winning()
        }, during_time * 1000);
      } else {
        //
      }
    },
    //中奖函数，需传入中奖结果 string 
    winning(result){
        this.toast_control = true;
        this.toast_title = result?result:this.toast_title;
        this.toast_back = true;
    },
    //没有中奖函数，无需传入
    fail(){
        this.toast_control = true;
        this.toast_pictrue =require('../assets/img/sorry.png');
        this.toast_title = '不要灰心';
        this.toast_back = true;
    },
    //我要金豆，-10换取抽奖机会,参数count number类型，使用count个金豆换取一次抽奖机会
    exchange(count){
       this.toast_control = true;     
       this.toast_title = '-'+count+"金豆换取一次抽奖机会";
       this.toast_back = false;
    },
    //金豆不足函数
    quantity(){
        this.toast_control = true;     
       this.toast_title = "金豆数量不够";
       this.toast_back = false;
    },
    //关闭抽奖结果
    close_toast(){
        this.toast_control = false;
    },
    //确认兑换函数
    confirm_exchange(){
        this.toast_control = false;
    }
  }

还有配套的CSS代码，CSS 代码我就不在这里贴出来，因为页面布局，用到了transform translate rotate ，旋转用到了transition，所以css要注意兼容问题，不过webpack帮我们做了兼容问题，所以也不用单独去写

全部代码地址

https://www.github.com/landluck/lucky_wheel s代码具体的运行我会在github上写出来