合并大转盘逻辑

src/components/Index.vue

@@ -76,7 +76,7 @@
 		<!-- 添加专属服务人员企微弹窗 -->
 		<ServiceList v-if="showServicePop" @ServicePop="hideServicePop" />
 
-		<LuckyWheel v-if="true" />
+		<LuckyWheel v-if="false" />
 	</div>
 </template>
 
@@ -190,8 +190,10 @@ const btn = () => {
 
 // 抽奖按钮
 const drawBtn = () => {
+
 	console.log("抽奖：");
 	getluckyBag(1);
+
 };
 
 // 活动点击
@@ -258,42 +260,35 @@ const getInfo = () => {
 };
 
 // 我的红包记录
-const getMyPrizeRecored = () => {
+
+const getMyPrizeRecored = ()=>{
   service
-		.post(process.env.VUE_APP_API + "/cms-activity/cms88/prize/list", {})
+    .post(process.env.VUE_APP_API + "/cms-activity/cms88/prize/list",{})
     .then((res) => {
-			console.log(res);
+      console.log("红包记录：",res);
     });
-};
+}
 
 // 查询是否添加了企微： isInActivityDate 0否 1是
-const getIsAddService = () => {
-	let isInActivityDate = 0;
+const getIsAddService = ()=>{
+  let isInActivityDate = 0
   service
-		.post(
-			process.env.VUE_APP_API +
-				"/cms-activity/cms88/qywx/isadded/" +
-				isInActivityDate
-		)
+    .post(process.env.VUE_APP_API + "/cms-activity/cms88/qywx/isadded/"+ isInActivityDate)
     .then((res) => {
-			console.log(res);
+      console.log("是否添加了企微",res);
     });
-};
+}
 
 // 抽取红包 type为红包类型 1为参与红包 2为加企微
-const getluckyBag = (id) => {
-	let type = id;
+const getluckyBag = (id)=>{
+  let type = id
   service
-		.post(
-			process.env.VUE_APP_API +
-				"/cms-activity/cms88/redpacket/draw/" +
-				type,
-			{}
-		)
+    .post(process.env.VUE_APP_API + "/cms-activity/cms88/redpacket/draw/"+ type,{})
     .then((res) => {
-			console.log(res);
+      console.log("抽取红包结果：",res);
     });
-};
+}
+
 
 // 活动参与人数
 const getActivityNum = () => {

src/components/LuckyWheel.vue

@@ -1,16 +1,6 @@
 <template>
 	<div class="LuckyWheelCon" @touchmove.prevent>
 		<div class="LuckyWheel_container">
-			<!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 665.32 321.7">
-				<g id="图层_2" data-name="图层 2">
-					<path
-						id="path"
-						ref="path"
-						class="cls-1"
-						d="M129.65,82.55c69.31-110.8,389.54-108,471.58-3.88,170.2,201.08,294.62,282.86-236.59,282.86C-136,361.53-22.92,279.75,129.65,82.55Z"
-					/>
-				</g>
-			</svg> -->
 			<div class="LuckyWheel_box">
 				<div class="prize p-1" ref="p1"></div>
 				<div class="prize p-2" ref="p2"></div>
@@ -33,10 +23,6 @@
 				<div class="prize p-5" ref="p19"></div>
 				<!-- <div class="prize p-3" ref="p20"></div> -->
 			</div>
-
-			<!-- 对照div 重点 -->
-			<div class="relative-box" ref="container"></div>
-
 			<div class="btn" @click="btn">开始抽奖</div>
 		</div>
 	</div>
@@ -87,7 +73,6 @@ const p17 = ref(null);
 const p18 = ref(null);
 const p19 = ref(null);
 const aniGroup = ref([]);
-const container = ref();
 
 const eqcode = ref(require("../assets/img/pop/eqcode.png"));
 
@@ -95,27 +80,7 @@ const eqcode = ref(require("../assets/img/pop/eqcode.png"));
 onBeforeMount(() => {});
 
 onMounted(() => {
-	// 根据适配后的大小去修改对应div便宜
-	const fontSize = getComputedStyle(window.document.documentElement)[
-		"font-size"
-	].replace("px", "");
-	const ratio = fontSize / 37.5;
-	// alert(fontSize);
-	console.log(ratio);
-	gsap.set(container.value, {
-		scale: ratio,
-		x:
-			200 * (ratio - 1) +
-			(ratio < 0.9 ? 10 * ratio : ratio > 1.2 ? 65 * ratio : 0),
-		y:
-			230 * (ratio - 1) +
-			(ratio < 0.9 ? 10 * ratio : ratio > 1.2 ? 35 * ratio : 0),
-	});
-
 	showDrawAni();
-	// let a = path.value.getBBox();
-	// console.log(a);
-	// console.log(window.innerWidth / 375);
 });
 
 // bingo 为中奖index  对应 pArr的index
@@ -161,12 +126,12 @@ const showDrawAni = (bingo, repeat) => {
 				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: ".relative-box", //让内容根据对照div调整
+					// align: [1, 1],
 					autoRotate: true,
 					start: i * singleRate + rotateDelta - delta, // 动画开始于路径的位置 0-1
 					end: i * singleRate + 1 + rotateDelta - delta, // 动画结束于路径的位置 0-无穷
-					offsetX: -22, //-177,
-					offsetY: 70,
+					offsetX: -177,
+					offsetY: -43,
 					alignOrigin: [0.5, 0],
 				},
 				onUpdate: () => {
@@ -215,9 +180,9 @@ const btn = () => {
 
 	.LuckyWheel_container {
 		position: absolute;
-		top: 700px;
+		top: 770px;
 		left: 0;
-		width: 750px;
+		width: 760px;
 		height: 500px;
 		display: flex;
 		justify-content: center;
@@ -228,12 +193,9 @@ const btn = () => {
 			// // border-width: 123px;
 			// border-style: solid;
 			// border-radius: 50%;
-			// // box-sh
-			position: absolute;
-			left: 0;
-			top: 0;
-			width: 750px;
-			height: 500px;
+			// // box-shadow: -1.569px -17.932px 16px 0px rgba(234, 6, 16, 0.16);
+			// width: 831px;
+			// height: 305px;
 
 			.li {
 				width: 100px;
@@ -242,19 +204,7 @@ const btn = () => {
 			}
 		}
 
-		.relative-box {
-			position: absolute;
-			left: 0;
-			top: 0;
-			width: 750px;
-			height: 500px;
-		}
-		.cls-1 {
-			fill: none;
-		}
 		.btn {
-			position: relative;
-			z-index: 111;
 			width: 200px;
 			height: 100px;
 			text-align: center;

src/components/MyPrize.vue

@@ -7,7 +7,7 @@
                     <div class="prize_title"></div>
                 </div>
                 <div class="prize_middle">
-                    <div class="prize_item" v-for="item in prizeList" v-show="item.isHas">
+                    <div class="prize_item" v-for="(item,key) in prizeList" :key="key" v-show="item.isHas">
                         <div class="prize_li">
                             <div class="prize_num">{{ item.prizeNum }}元红包</div>
                             <div class="prize_spe">{{ item.spe }}</div>