大转盘更新

src/components/LuckyWheel.vue

@@ -37,7 +37,7 @@
 			<!-- 对照div 重点 -->
 			<div class="relative-box" ref="container"></div>
 
-			<div class="btn" @click="btn">开始抽奖</div>
+			<!-- <div class="btn" @click="btn">开始抽奖</div> -->
 		</div>
 	</div>
 </template>
@@ -89,6 +89,19 @@ const aniGroup = ref([]);
 const container = ref();
 
 const eqcode = ref(require("../assets/img/pop/eqcode.png"));
+const luckyWheelStatus = ref(false);
+
+
+
+// 大转盘结束回调
+const isStop = () => {
+  if (!luckyWheelStatus.value) {
+    luckyWheelStatus.value = true;
+    console.log("大转盘结束");
+	emit('luckyWheel')  //告诉主页弹出相应结果弹窗
+  }
+};
+
 
 // 页面挂载前
 onBeforeMount(() => {});
@@ -168,6 +181,14 @@ const showDrawAni = (bingo, repeat) => {
 					offsetY: 70,
 					alignOrigin: [0.5, 0],
 				},
+				onStart: ()=>{
+					if (i == pArr.length - 1) {
+            setTimeout(() => {
+            //   console.log("停止2");
+			  isStop()
+            }, 5000);
+          }
+				},
 				onUpdate: () => {
 					// if (i === 1) console.log(ani.progress());
 				},
@@ -195,22 +216,30 @@ const btn = () => {
 	// 第一个参数 对应奖品对应id, 第二个参数是是否多旋转一会儿 fasle旋转一圈就停止
 	showDrawAni(1, true);
 };
+
+// 暴露出方法给父组件调用
+defineExpose({
+  showDrawAni,
+});
+
+
 </script>
 
 <style lang="scss" scoped>
 .LuckyWheelCon {
 	width: 100%;
-	height: 100%;
-	position: fixed;
-	z-index: 10;
+	height: 800px;
+	position: absolute;
+	// z-index: 10;
 	top: 0;
 	left: 0;
+	pointer-events: none;
 	// right: 0;
 	// bottom: 0;
 	// display: flex;
 	// justify-content: center;
 	// align-items: center;
-	background-color: rgba(0, 0, 0, 0.3);
+	// background-color: rgba(0, 0, 0, 0.3);
 
 	.LuckyWheel_container {
 		position: absolute;