1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114
| <template> <div> <BaseHeader title="大转盘" go_back="1" /> <div class="black_hr">div> <div class="turntable-bg rotateBg"> <div class="parent_box"> <div class="pointer"> <img src="@/assets/img/pointer.png" alt="pointer" @click="handleRotate" /> div> <div class="rotate"> <img id="rotate" src="@/assets/img/turntable2.png" alt="turntable" :style="{transform:rotate_deg,transition:rotate_transition}" /> div> div> div> div> template> <script> import BaseHeader from "@/components/public/BaseHeader"; export default { data() { return { cat: 360 / 7, isAllowClick: true, start_rotating_deg: 0, rotate_deg: 0, rotate: 0, rotate_angle: 0, rotate_transition: "transform 3s ease-in-out" }; }, components: { BaseHeader }, created() {}, methods: { handleRotate() { this.isAllowClick = true; this.rotating(); }, rotating() { let _this = this; if (!this.isAllowClick) return; this.isAllowClick = false; var rand_circle = 5; var randomDeg = Math.floor(Math.random() * 360); var deg = this.start_rotating_deg + rand_circle * 360 + randomDeg - (this.start_rotating_deg % 360); this.start_rotating_deg = deg; this.rotate_deg = "rotate(" + deg + "deg)"; this.rotate = deg % 360; var that = this; setTimeout(function() { that.isAllowClick = true; if (that.rotate <= that.cat * 1) { _this.$toast("恭喜您,获得1等奖"); } else if (that.rotate <= that.cat * 2) { _this.$toast("恭喜您,获得2等奖"); } else if (that.rotate <= that.cat * 3) { _this.$toast("恭喜您,获得3等奖"); } else if (that.rotate <= that.cat * 4) { _this.$toast("恭喜您,获得4等奖"); } else if (that.rotate <= that.cat * 5) { _this.$toast("恭喜您,获得5等奖"); } else if (that.rotate <= that.cat * 6) { _this.$toast("恭喜您,获得6等奖"); } else if (that.rotate <= that.cat * 7) { _this.$toast("再接再厉哦!"); } }, 3500); } } }; script> <style lang="less" scoped> .turntable-bg { height: 100vh; position: relative; .parent_box { width: 100vw; height: 100vw; position: relative; } .pointer { width: 66px; height: 100px; position: absolute; left: 50%; top: 50%; transform: translate(-55%, -50%); z-index: 8; img { width: 100%; } } .rotate { position: absolute; padding: 20%; img { width: 100%; } } } style>
|