<template>
<div class="turntable" v-wechat-title="$route.meta.title">
<!-- 转盘包裹 -->
<div class="rotate">
<!-- 转盘图片 -->
<image class="dish" src="../../static/secondYear/dial.png" :style="{ width: w, height: h, transform: rotate_deg, transition: rotate_transition }" />
<!-- 指针图片 -->
<image class="pointer" src="../../static/secondYear/click.png" @click="start" :style="{ width: clickW, height: clickH }"/>
</div>
<div class="times">剩余抽奖次数 {{ LuckyClick }}</div>
</div>
</template>
<script>
export default {
name: "turntable",
data() {
return {
LuckyClick: 3,
circleList: [], //原点设置
colorCircleFirst: "#FE4D32", //圆点颜色
colorCircleSecond: "#fff", //圆点颜色
cat: 45, //总共8个扇形区域，每个区域约45度
isAllowClick: true, //是否能够点击
rotate_deg: 0, //指针旋转的角度
rotate_transition: "transform 3s ease-in-out", //初始化选中的过度属性控制
w: "710rpx", // 转盘图片的宽
h: "710rpx", // 转盘图片的高
clickW: '162rpx',
clickH: '162rpx',
winningIndex: 0, // 获奖的index
lastDeg: 0, // 最后一次旋转的度数
isFistClick: true, // 是否是第一次点击
};
},
components: {
// Calendar: Calendar
},
created() {
// this.showcircleList();
},
watch: {},
mounted() { },
methods: {
start() {
if (this.LuckyClick == 0) {
return uni.showToast({
title: "您的抽奖次数已使用完毕，请稍后再试",
icon: "none",
duration: 2000
});
} else {
this.rotating();
}
},
rotating() {
const that = this
if (!this.isAllowClick) return;
this.isAllowClick = false;
this.rotate_transition = "transform 3s ease-in-out";
this.LuckyClick--;
var rand_circle = 5; //默认多旋转5圈
// this.winningIndex = this.getAward(); //设置了概率的
this.winningIndex = 8;
console.log(this.winningIndex);
const randomDeg = this.winningIndex * 45 - 20; //当前下标对应的角度 45是总共8个扇形区域，每个区域约45度
let deg = 0
if(this.isFistClick) {
deg = rand_circle * 360 + randomDeg
} else {
deg = rand_circle * 360 + randomDeg + this.lastDeg
}
console.log(this.isFistClick, deg, '22222')
this.rotate_deg = "rotate(" + deg + "deg)"
this.isFistClick = false
this.lastDeg = deg + Math.abs(360 - randomDeg)
setTimeout(function () {
that.isAllowClick = true;
that.rotate_transition = "";
if (this.winningIndex == 0) {
console.log("恭喜您，IphoneX");
} else if (this.winningIndex == 1) {
console.log("恭喜您，获得10元现金");
} else if (this.winningIndex == 2) {
console.log("很遗憾，重在参与");
} else if (this.winningIndex == 3) {
console.log("恭喜您，获得30元现金");
} else if (this.winningIndex == 4) {
console.log("恭喜您，获得20元现金");
} else if (this.winningIndex == 5) {
console.log("恭喜您，获得50元现金");
} else if (this.winningIndex == 6) {
console.log("恭喜您，获得5元现金");
} else if (this.winningIndex == 7) {
console.log("恭喜您，获得100元现金");
}
}, 2000);
},
//设置概率
getAward() {
const winIndex = 2;
return winIndex;
}
},
};
</script>
<style scoped lang="scss">
.turntable {
.rotate {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.pointer {
position: absolute;
top: 44%;
left: 49%;
transform: translate(-45%, -50%);
}
}
.times {
font-size: 26rpx;
color: #FFE3B4;
position: absolute;
bottom: 7rpx;
left: 50%;
transform: translateX(-50%);
}
}
</style>
