zszq-celebration-88/src/components/LuckyWheel.vue

<template>
	<div class="LuckyWheelCon" @touchmove.prevent>
		<div class="LuckyWheel_container">
			<div class="LuckyWheel_box">
				<div class="prize p-1" ref="p1"></div>
				<div class="prize p-2" ref="p2"></div>
				<div class="prize p-3" ref="p3"></div>
				<div class="prize p-4" ref="p4"></div>
				<div class="prize p-5" ref="p5"></div>
				<div class="prize p-1" ref="p6"></div>
				<div class="prize p-2" ref="p7"></div>
				<div class="prize p-3" ref="p8"></div>
				<div class="prize p-4" ref="p9"></div>
				<div class="prize p-5" ref="p10"></div>
				<div class="prize p-1" ref="p11"></div>
				<div class="prize p-2" ref="p12"></div>
				<div class="prize p-3" ref="p13"></div>
				<div class="prize p-4" ref="p14"></div>
				<div class="prize p-5" ref="p15"></div>
				<div class="prize p-5" ref="p16"></div>
				<div class="prize p-5" ref="p17"></div>
				<div class="prize p-5" ref="p18"></div>
				<div class="prize p-5" ref="p19"></div>
				<!-- <div class="prize p-3" ref="p20"></div> -->
			</div>
			<!-- <div class="btn" @click="btn">开始抽奖</div> -->
		</div>
	</div>
</template>

<script setup>
import {
	onBeforeMount,
	onMounted,
	defineEmits,
	defineProps,
	reactive,
	ref,
	toRefs,
} from "vue";
import gsap from "gsap";
import axios from "axios";
import { Toast } from "vant";
import { useStore } from "vuex";

// import { PixiPlugin } from "gsap/PixiPlugin.js";
import { MotionPathPlugin } from "gsap/MotionPathPlugin.js";
// import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";

gsap.registerPlugin(MotionPathPlugin);

// 初始化
const emit = defineEmits(["ServicePop"]); // 声明触发事件，对应父组件上面的方法
const props = defineProps({ sendMessage: Object }); // 获取props
const store = useStore();
const p1 = ref(null);
const p2 = ref(null);
const p3 = ref(null);
const p4 = ref(null);
const p5 = ref(null);
const p6 = ref(null);
const p7 = ref(null);
const p8 = ref(null);
const p9 = ref(null);
const p10 = ref(null);
const p11 = ref(null);
const p12 = ref(null);
const p13 = ref(null);
const p14 = ref(null);
const p15 = ref(null);
const p16 = ref(null);
const p17 = ref(null);
const p18 = ref(null);
const p19 = ref(null);
const aniGroup = ref([]);

const eqcode = ref(require("../assets/img/pop/eqcode.png"));

// 页面挂载前
onBeforeMount(() => {});

onMounted(() => {
	showDrawAni();
});

// bingo 为中奖index  对应 pArr的index
const showDrawAni = (bingo, repeat) => {
	const pArr = [
		p1, // 1.08
		p2, // 2.68
		p3, // 6.66
		p4, // 8.88
		p5, // 谢谢  默认选中值
		p6, //以下皆为填充奖品 可随便填充
		p7,
		p8,
		p9,
		p10,
		p11,
		p12,
		p13,
		p14,
		p15,
		p16,
		p17,
		p18,
		p19,
	];
	const singleRate = 1 / pArr.length; // 路径平均分 单个元素在路径上的位置
	const delta = singleRate + 0.068; // 修正偏移量
	let rotateDelta = 0; //转到哪一个停止 | 默认为第五个奖品 谢谢参与
	if (bingo) {
		rotateDelta = (5 - bingo) * singleRate;
	}
	for (let i = 1; i < pArr.length + 1; i++) {
		let ani = gsap.to(
			[pArr[i - 1].value],
			{
				duration: 10,
				paused: bingo ? false : true, //没有中奖结果则为初始化
				// repeat: -1,
				// delay: i * 0.5 - 1,
				// stagger: 0.5,
				// repeatDelay: 3,
				// yoyo: true,
				ease: "back.out(1.4)",
				motionPath: {
					path: "M115.37,73.45C177.05-25.14,462-22.69,535,70,686.45,248.93,797.17,321.7,324.48,321.7-121,321.7-20.39,248.93,115.37,73.45Z",
					// align: [1, 1],
					autoRotate: true,
					start: i * singleRate + rotateDelta - delta, // 动画开始于路径的位置 0-1
					end: i * singleRate + 1 + rotateDelta - delta, // 动画结束于路径的位置 0-无穷
					offsetX: -177,
					offsetY: -43,
					alignOrigin: [0.5, 0],
				},
				onUpdate: () => {
					// if (i === 1) console.log(ani.progress());
				},
			},
			"same"
		);
		// 更新视图
		ani.seek(0);
		if (bingo && repeat) {
			setTimeout(() => {
				showDrawAni(bingo, false);
			}, 800);
		}
	}
};

const btn = () => {
	console.log("抽奖");
	// 中奖奖品ID
	// 奖品 1 - 1.08
	// 奖品 2 - 2.68
	// 奖品 3 - 6.66
	// 奖品 4 - 8.88
	// 奖品 5 - 谢谢参与
	// 第一个参数 对应奖品对应id, 第二个参数是是否多旋转一会儿 fasle旋转一圈就停止
	showDrawAni(2, true);
};
</script>

<style lang="scss" scoped>
.LuckyWheelCon {
	width: 100%;
	height: 800px;
	position: absolute;
	// z-index: 10;
	top: 0;
	left: 0;
	// right: 0;
	// bottom: 0;
	// display: flex;
	// justify-content: center;
	// align-items: center;
	// background-color: rgba(0, 0, 0, 0.3);
	pointer-events: none;

	.LuckyWheel_container {
		position: absolute;
		top: 770px;
		left: 0;
		width: 760px;
		height: 500px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.LuckyWheel_box {
			// // border-width: 123px;
			// border-style: solid;
			// border-radius: 50%;
			// // box-shadow: -1.569px -17.932px 16px 0px rgba(234, 6, 16, 0.16);
			// width: 831px;
			// height: 305px;

			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 20px;

			.li {
				width: 100px;
				height: 100px;
				background-color: #ff6000;
			}
		}

		.btn {
			width: 200px;
			height: 100px;
			text-align: center;
			line-height: 100px;
			font-size: 30px;
			color: #fff;
			background: #ff6000;
		}
	}
	.prize {
		position: absolute;
		width: 160px;
		height: 96px;
		left: 0;
		top: 10px;
		// 奖品图
		&.p-1 {
			background-image: url("~@/assets/img/p_1.png");
			background-size: 160px 96px;
		}
		&.p-2 {
			background-image: url("~@/assets/img/p_2.png");
			background-size: 160px 96px;
		}
		&.p-3 {
			background-image: url("~@/assets/img/p_3.png");
			background-size: 160px 96px;
		}
		&.p-4 {
			background-image: url("~@/assets/img/p_4.png");
			background-size: 160px 96px;
		}
		&.p-5 {
			background-image: url("~@/assets/img/p_5.png");
			background-size: 160px 96px;
		}
		// background-color: #f00;
	}
}
</style>