supermyc/components/ljs-turntable/index.js

const powerMax = 200; // 最大力量值
const powerMin = Math.floor(powerMax/2) + 1; // 最小力量值
const decline = powerMax/10000; // 衰退
export default {
	data() {
		return {
			truntableData: [], // 转盘数据
			color: ["#014EB5","#A800FF","#e82edb","#B5454C","#443bff","#e8a425","#ff7aab","#e84b1e","#552ce2","#e8861e","#d441ff","#9c7aff","#014EB5","#A800FF","#e82edb","#B5454C","#443bff","#e8a425","#ff7aab","#e84b1e","#552ce2","#e8861e","#d441ff","#9c7aff","#014EB5","#A800FF","#e82edb","#B5454C","#443bff","#e8a425","#ff7aab","#e84b1e","#552ce2","#e8861e","#d441ff","#9c7aff","#014EB5","#A800FF","#e82edb","#B5454C","#443bff","#e8a425","#ff7aab","#e84b1e","#552ce2","#e8861e","#d441ff","#9c7aff","#014EB5","#A800FF","#e82edb","#B5454C","#443bff","#e8a425","#ff7aab","#e84b1e","#552ce2","#e8861e","#d441ff","#9c7aff","#014EB5","#A800FF","#e82edb","#B5454C","#443bff","#e8a425","#ff7aab","#e84b1e","#552ce2","#e8861e","#d441ff","#9c7aff"],
			timerRun: false, // 工具是否已开始
			transform: null, 
			allPower: [], // 力量集合
		}
	},
	props: {
		list: Array, // 转盘基础数据。基础数据参照‘list参数’
		show: Boolean, // 显示组件：默认不显示
		// 每次转完是否默认回起始位置
		startPosition: {
			type: Boolean,
			default: true
		},
		// 是否启用概率算法，默认按照扇形面积占比的大小出奖。开启概率算法，需要同时设置startPosition为true，否则会出现异常。
		probabilityTag: {
			type: Boolean,
			default: false
		},
	},
	mounted() {
		this.init();
	},
	methods: {
		// 隐藏组件
		close(){
			if(this.timerRun){
				uni.showToast({
					title: '请耐心等待',
					duration: 1500,
					icon: "none"
				});
				return
			}
			this.$emit("turntableState", false);
		},
		// 点击开始按钮
		go(){
			if(this.timerRun){
				uni.showToast({
					title: '请耐心等待',
					duration: 1500,
					icon: "none"
				});
				return
			}
			this.timerRun = true;
			let power = 0;
			if (this.probabilityTag) {
				power = this.allPower[Math.floor((Math.random()*this.allPower.length))]; //随机获取一个力量值 - 有概率
			} else {
				power = this.rand(powerMin, powerMax); //随机获取一个力量值 - 无概率
			}
			let jiaodu = 0; // 旋转的角度
			let timer = setInterval(()=>{
				if(Number(power.toFixed(4)) <= 0){
					clearInterval(timer);
					this.getData(jiaodu%360);
				}
				jiaodu += power;
				// #ifdef H5
				document.getElementById("rotateBoard").style.transform = 'rotate('+ jiaodu +'deg)';
				// #endif
				// #ifdef MP-WEIXIN || APP-PLUS
				this.transform = 'rotate('+ jiaodu +'deg)'
				// #endif
				
				power = (power - power*decline) < decline?0:power - power*decline;
				// console.log(power)
			}, 10)
		},
		// 获取[m, n]的随机数
		rand(m, n)  {
		    return Math.ceil(Math.random() * (n-m+1) + m-1)
		},
		// 按照概率获取力量的中奖数据集合
		getPowerResult() {
			const allPower = [];
			for(let i = powerMin; i <= powerMax; i++){
				allPower.push(i);
			}
			this.allPower = this.getModeResult(allPower);
		},
		// 获取模拟结果
		getModeResult(allPower){
			const powerPrizes = [];
			const tempJs = powerMax - powerMin + 1;
			allPower.forEach((item) => {
				let power = item; //随机获取一个力量值
				let jiaodu = 0; // 旋转的角度
				while (Number(power.toFixed(4)) > 0) {
					jiaodu += power;				
					power = (power - power*decline) < decline?0:power - power*decline;
				}
				const deg = 360 - jiaodu%360;
				let prize = null;
				let nums = this.list.length;
				for(let i = 0; i < nums; i++){
					if(this.list[i].start <= deg && deg < this.list[i].start + this.list[i].prop*10){
						if (this.list[i].result.length/tempJs < this.list[i].probability) {
							this.list[i].result.push(item);
							powerPrizes.push(item);
						}
						break;
					}
				}
			});
			// 不够的进行补入
			let nums = this.list.length;
			for(let i = 0; i < nums; i++){
				if (this.list[i].result.length/tempJs < this.list[i].probability) {
					const n = Number((Number((this.list[i].probability - this.list[i].result.length/tempJs).toFixed(2)) * tempJs).toFixed(0));
					for(let j = 0; j < n; j++){
						this.list[i].result.push(this.list[i].result[0]);
						powerPrizes.push(this.list[i].result[0]);
					}
				}
			}
			return powerPrizes;
		},
		// 通过旋转得角度，获取当前指向得奖品
		getData(deg){
			deg = 360 - deg;
			let prize = null;
			let nums = this.list.length;
			for(let i = 0; i < nums; i++){
				if(this.list[i].start <= deg && deg < this.list[i].start + this.list[i].prop*10){
					prize = this.list[i];
					
					this.$emit("getPrize", prize.state, prize.id, prize.name)
					this.timerRun = false;
					if (this.startPosition) {
						this.initJiaodu();
					}
					// this.BASE.msg(prize.name, 2000);
					break;
				}
			}
		},
		// 重置角度
		initJiaodu(){
			const jiaodu = 0;
			setTimeout(() => {
				// #ifdef H5
				document.getElementById("rotateBoard").style.transform = 'rotate('+ jiaodu +'deg)';
				// #endif
				// #ifdef MP-WEIXIN || APP-PLUS
				this.transform = 'rotate('+ jiaodu +'deg)'
				// #endif
			}, 10);
		},
		init(){
			let tempStart = 0;
			let tempScale = 0;
			this.list.forEach((item, i)=>{
				item["result"] = []; // 中奖的力量集合
				item["scale"] = item.prop*10 - 90; // 所占弧度的度数
				item["scaleText"] = tempScale + (90 + (item.prop*10 - 90))/2; // 文字的回旋角度
				item["sin"] = Math.sin(Math.PI*2*item.scaleText/360)*160; // 正弦
				item["cos"] = Math.cos(Math.PI*2*item.scaleText/360)*160; // 余弦
				tempScale = tempScale + 90 + (item.prop*10 - 90);
				if(i !== 0){
					tempStart = tempStart + this.list[i - 1].prop*10;
				}
				item["start"] = tempStart;
			});
			this.truntableData = this.list;
			
			// 按照概率获取力量的中奖数据集合
			if (this.probabilityTag) {
				this.getPowerResult();
			}
		},
	}
}