【H5】封装抽奖大转盘组件

公司要做一个会员大转盘抽奖页面，所以我干脆就自己参考别人的代码自己封装了一个大转盘组件，参考链接如下：抽奖转盘链接

<template>
  <div class="largeTurntable">
    <div class="turntable_back">
      <img
        :style="{ transform: 'rotate(' + change_angle + 'deg)' }"
        :src="turntable"
      />
    </div>
    <div class="turntable_pointer" @click="luckDrawStart">
      <!-- <div class="text-click">点击抽奖</div> -->
      <div class="pointer-box">
        <img :src="pointer" />
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { Req } from "@s-a/js/Req/api";
import { MessageBox } from "mint-ui";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    is_play: {
      type: Boolean,
      default: false,
    }, // 是否在运动中，避免重复启动bug
    available_num: {
      type: Number,
      default: 1,
    }, // 可用抽奖的次数，可自定义设置或者接口返回
    start_angle: {
      type: Number,
      default: 0,
    }, // 转动开始时初始角度=0位置指向正上方，按顺时针设置，可自定义设置
    circle_num: {
      type: Number,
      default: 9,
    }, // 基本圈数，就是在转到（最后一圈）结束圈之前必须转够几圈 ，可自定义设置
    low_circle_num: {
      type: Number,
      default: 5,
    }, // 在第几圈开始进入减速圈（必须小于等于基本圈数），可自定义设置
    add_angle: {
      type: Number,
      default: 10,
    }, // 追加角度，此值越大转动越快，请保证360/add_angle=一个整数，比如1/2/3/4/5/6/8/9/10/12等
    use_speed: {
      type: Number,
      default: 1,
    }, // 当前速度，与正常转速值相等
    nor_speed: {
      type: Number,
      default: 1,
    }, // 正常转速，在减速圈之前的转速，可自定义设置
    low_speed: {
      type: Number,
      default: 10,
    }, // 减速转速，在减速圈的转速，可自定义设置
    end_speed: {
      type: Number,
      default: 20,
    }, // 最后转速，在结束圈的转速，可自定义设置
    random_angle: {
      type: Number,
      default: 0,
    }, // 中奖角度，也是随机数，也是结束圈停止的角度，这个值采用系统随机或者接口返回
    change_angle: {
      type: Number,
      default: 0,
    }, // 变化角度计数，0开始，一圈360度，基本是6圈，那么到结束这个值=6*360+random_angle；同样change_angle/360整除表示走过一整圈
    result_val: {
      type: String,
      default: "",
    }, // 存放奖项容器，可自定义设置
    turntable: "",
    pointer: "",
    Jack_pots: [],
    reqUrl: "",
  },

  data() {
    //这里存放数据
    return {
      available_num2: 1,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  //方法集合
  methods: {
    luckDrawStart() {
      console.log(this.available_num2);
      if (this.available_num2 > 0) {
        // 阻止运动中重复点击
        if (!this.is_play) {
          // 设置标识在运动中
          this.is_play = true;
          // 重置参数
          this.luckDrawReset();
          this.getPrizeData();
        }
      } else {
        MessageBox({
          message: "您的抽奖次数已用完",
        });
      }
    },
    /**
     * 转盘运动
     */
    luckDrawChange: function () {
      // 继续运动
      if (this.change_angle >= this.circle_num * 360 + this.random_angle) {
        // 已经到达结束位置
        // 提示中奖，
        this.getLuckDrawResult();
        // 运动结束设置可用抽奖的次数和激活状态设置可用
        this.luckDrawEndset();
      } else {
        // 运动
        if (this.change_angle < this.low_circle_num * 360) {
          // 正常转速
          //   console.log("正常转速");
          this.use_speed = this.nor_speed;
        } else if (
          this.change_angle >= this.low_circle_num * 360 &&
          this.change_angle <= this.circle_num * 360
        ) {
          // 减速圈
          //   console.log("减速圈");
          this.use_speed = this.low_speed;
        } else if (this.change_angle > this.circle_num * 360) {
          // 结束圈
          //   console.log("结束圈");
          this.use_speed = this.end_speed;
        }
        // 累加变化计数
        this.change_angle =
          this.change_angle + this.add_angle >=
          this.circle_num * 360 + this.random_angle
            ? this.circle_num * 360 + this.random_angle
            : this.change_angle + this.add_angle;
        setTimeout(() => {
          this.luckDrawChange();
        }, this.use_speed);
      }
    },
    /**
     * 获取抽奖结果
     */
    getLuckDrawResult: function () {
      for (var j = 0; j < this.Jack_pots.length; j++) {
        if (
          this.random_angle >= this.Jack_pots[j].startAngle &&
          this.random_angle <= this.Jack_pots[j].endAngle
        ) {
          console.log("结束！！！！");
          this.$emit("openPopup");
          // this.openPrize(this.Jack_pots[j].val);
          break;
        }
      }
    },
    getPrizeData() {
      Req.post(this.reqUrl, {}, "抽奖中").then(
        (res) => {
          console.log(res, "获奖数据");
          this.random_angle = res.angle;
          this.$emit("backPrize", res);
          //运动
          setTimeout(() => {
            this.luckDrawChange();
          }, this.use_speed);
        },
        (err) => {
          MessageBox({
            message: err.msg,
          });
          this.luckDrawEndset();
        }
      );
    },
    /**
     * 更新状态（运动结束设置可用抽奖的次数和激活状态设置可用）
     */
    luckDrawEndset: function () {
      // 是否在运动中，避免重复启动bug
      this.is_play = false;
      // 可用抽奖的次数，可自定义设置
      //   console.log(this.available_num);
      this.available_num2 = this.available_num2 - 1;
      console.log(this.available_num2);
    },
    /**
     * 重置参数
     */
    luckDrawReset() {
      // 转动开始时首次点亮的位置，可自定义设置
      this.start_angle = 0;
      // 当前速度，与正常转速值相等
      this.use_speed = this.nor_speed;
      // 中奖索引，也是随机数，也是结束圈停止的位置，这个值采用系统随机或者接口返回
      this.random_angle = 0;
      // 变化计数，0开始，必须实例有12个奖项，基本是6圈，那么到结束这个值=6*12+random_number；同样change_num/12整除表示走过一整圈
      this.change_angle = 0;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.available_num2 = this.available_num;
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='less' scoped>
//@import url(); 引入公共css类
.largeTurntable {
  position: relative;
  width: 100%;
  height: 15.45rem;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50%;
  margin-top: -7.725rem;
}
.turntable_back {
  width: 15.45rem;
  height: 100%;
  margin: auto;
}
.turntable_back img {
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: center center;
}
.turntable_pointer {
  width: 6.55rem;
  height: 6.55rem;
  text-align: center;
  position: absolute;
  top: 4.45rem;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pointer-box {
  width: 100%;
  height: 100%;
  position: absolute;
}
.pointer-box > img {
  display: block;
  width: 100%;
  height: 100%;
}
</style>

在所需页面引用组件

 <wheel
  :turntable="turntable"
  :pointer="pointer"
  :available_num="available_num"
  :random_angle="random_angle"
  :Jack_pots="Jack_pots"
  :reqUrl="reqUrl"
  :circle_num="circle_num"
  @backPrize="backPrize"
  @openPopup="openPopup"
></wheel>

效果图：