q-turntable.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <template>
  2. <view>
  3. <view class="turntable_wp sol-class">
  4. <image
  5. src="http://t9.9026.com/imgs/banner03.png"
  6. :style="'-webkit-transform:rotate(' + deg + 'deg) translateZ(0);transform:rotate(' + deg + 'deg) translateZ(0)'"
  7. ></image>
  8. <view class="turntable_pointer" @tap="start"><image src="http://t9.9026.com/imgs/banner04.png"></image></view>
  9. </view>
  10. </view>
  11. </template>
  12. <script>
  13. export default {
  14. data() {
  15. return {
  16. deg: 0,
  17. singleAngle: '',
  18. // 每片扇形的角度
  19. isStart: false
  20. };
  21. },
  22. components: {},
  23. props: {
  24. // 划分区域
  25. areaNumber: {
  26. type: Number,
  27. default: 6
  28. },
  29. // 速度
  30. speed: {
  31. type: Number,
  32. default: 16
  33. }
  34. },
  35. beforeMount() {
  36. this.init();
  37. },
  38. methods: {
  39. init() {
  40. let { areaNumber } = this;
  41. const singleAngle = 360 / areaNumber;
  42. this.singleAngle = singleAngle;
  43. },
  44. // 点击开始抽奖
  45. start() {
  46. this.$emit('start');
  47. },
  48. begin(awardNumer) {
  49. var deg = this.deg;
  50. var singleAngle = this.singleAngle;
  51. var speed = this.speed;
  52. var isStart = this.isStart;
  53. if (isStart) return;
  54. this.isStart = true;
  55. let endAddAngle = 0;
  56. endAddAngle = 360 - ((awardNumer - 1) * singleAngle + singleAngle / 2); // 中奖角度
  57. const rangeAngle = (Math.floor(Math.random() * 4) + 4) * 360; // 随机旋转几圈再停止
  58. console.log(endAddAngle);
  59. let cAngle;
  60. deg = 0;
  61. this.timer = setInterval(() => {
  62. if (deg < rangeAngle) {
  63. deg += speed;
  64. } else {
  65. cAngle = (endAddAngle + rangeAngle - deg) / speed;
  66. cAngle = cAngle > speed ? speed : cAngle < 1 ? 1 : cAngle;
  67. deg += cAngle;
  68. if (deg >= endAddAngle + rangeAngle) {
  69. deg = endAddAngle + rangeAngle;
  70. this.isStart = false;
  71. clearInterval(this.timer);
  72. this.$emit('success');
  73. }
  74. }
  75. this.deg = deg;
  76. }, 1000 / 60);
  77. }
  78. }
  79. };
  80. </script>
  81. <style>
  82. .turntable_wp {
  83. width: 548rpx;
  84. height: 548rpx;
  85. position: relative;
  86. margin: 0 auto;
  87. }
  88. .turntable_wp image {
  89. display: block;
  90. width: 100%;
  91. height: 100%;
  92. }
  93. .turntable_wp .turntable_pointer {
  94. position: absolute;
  95. width: 132rpx;
  96. height: 150rpx;
  97. top: 50%;
  98. left: 50%;
  99. margin: -93rpx 0 0 -70rpx;
  100. }
  101. </style>