liangzejun/zszq-celebration-88
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

大转盘调试

Browse Source
This commit is contained in:
tcubic 2022-08-05 17:45:13 +08:00
parent 5eff916173
commit 4b9f4586c8
2 changed files with 512 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

280
src/components/LuckyWheel copy.vue Normal file
View File

@ -0,0 +1,280 @@
<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,
defineExpose,
} 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(["luckyWheel"]); // 声明触发事件，对应父组件上面的方法
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"));
const luckyWheelStatus = ref(false);
// 大转盘结束回调
const isStop = () => {
if (!luckyWheelStatus.value) {
luckyWheelStatus.value = true;
console.log("大转盘结束");
emit('luckyWheel') //告诉主页弹出相应结果弹窗
}
};
// 页面挂载前
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());
},
onStart: () => {
if (i == pArr.length - 1) {
setTimeout(() => {
// console.log("停止2");
isStop()
}, 5000);
}
},
onComplete: () => {},
},
"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);
};
// 暴露出方法给父组件调用
defineExpose({
showDrawAni,
});
</script>
<style lang="scss" scoped>
.LuckyWheelCon {
width: 100%;
height: 800px;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
.LuckyWheel_container {
position: absolute;
top: 770px;
left: 0px;
width: 760px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.LuckyWheel_box {
width: 760px;
height: 500px;
// // 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: 0px;
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>

446
src/components/LuckyWheel.vue
View File

@ -1,44 +1,56 @@
<template> <template>
<div class="LuckyWheelCon" @touchmove.prevent> <div class="LuckyWheelCon" @touchmove.prevent>
<div class="LuckyWheel_container"> <div class="LuckyWheel_container">
<div class="LuckyWheel_box"> <!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 665.32 321.7">
<div class="prize p-1" ref="p1"></div> <g id="图层_2" data-name="图层 2">
<div class="prize p-2" ref="p2"></div> <path
<div class="prize p-3" ref="p3"></div> id="path"
<div class="prize p-4" ref="p4"></div> ref="path"
<div class="prize p-5" ref="p5"></div> class="cls-1"
<div class="prize p-1" ref="p6"></div> 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"
<div class="prize p-2" ref="p7"></div> />
<div class="prize p-3" ref="p8"></div> </g>
<div class="prize p-4" ref="p9"></div> </svg> -->
<div class="prize p-5" ref="p10"></div> <div class="LuckyWheel_box">
<div class="prize p-1" ref="p11"></div> <div class="prize p-1" ref="p1"></div>
<div class="prize p-2" ref="p12"></div> <div class="prize p-2" ref="p2"></div>
<div class="prize p-3" ref="p13"></div> <div class="prize p-3" ref="p3"></div>
<div class="prize p-4" ref="p14"></div> <div class="prize p-4" ref="p4"></div>
<div class="prize p-5" ref="p15"></div> <div class="prize p-5" ref="p5"></div>
<div class="prize p-5" ref="p16"></div> <div class="prize p-1" ref="p6"></div>
<div class="prize p-5" ref="p17"></div> <div class="prize p-2" ref="p7"></div>
<div class="prize p-5" ref="p18"></div> <div class="prize p-3" ref="p8"></div>
<div class="prize p-5" ref="p19"></div> <div class="prize p-4" ref="p9"></div>
<!-- <div class="prize p-3" ref="p20"></div> --> <div class="prize p-5" ref="p10"></div>
</div> <div class="prize p-1" ref="p11"></div>
<!-- <div class="btn" @click="btn">开始抽奖</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> <!-- 对照div 重点 -->
</div> <div class="relative-box" ref="container"></div>
<div class="btn" @click="btn">开始抽奖</div>
</div>
</div>
</template> </template>
<script setup> <script setup>
import { import {
onBeforeMount, onBeforeMount,
onMounted, onMounted,
defineEmits, defineEmits,
defineProps, defineProps,
reactive, reactive,
ref, ref,
toRefs, toRefs,
defineExpose,
} from "vue"; } from "vue";
import gsap from "gsap"; import gsap from "gsap";
import axios from "axios"; import axios from "axios";
@ -48,11 +60,10 @@ import { useStore } from "vuex";
// import { PixiPlugin } from "gsap/PixiPlugin.js"; // import { PixiPlugin } from "gsap/PixiPlugin.js";
import { MotionPathPlugin } from "gsap/MotionPathPlugin.js"; import { MotionPathPlugin } from "gsap/MotionPathPlugin.js";
// import { MorphSVGPlugin } from "gsap/MorphSVGPlugin"; // import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";
gsap.registerPlugin(MotionPathPlugin); gsap.registerPlugin(MotionPathPlugin);
// 初始化 // 初始化
const emit = defineEmits(["luckyWheel"]); // 声明触发事件，对应父组件上面的方法 const emit = defineEmits(["ServicePop"]); // 声明触发事件，对应父组件上面的方法
const props = defineProps({ sendMessage: Object }); // 获取props const props = defineProps({ sendMessage: Object }); // 获取props
const store = useStore(); const store = useStore();
const p1 = ref(null); const p1 = ref(null);
@ -75,206 +86,211 @@ const p17 = ref(null);
const p18 = ref(null); const p18 = ref(null);
const p19 = ref(null); const p19 = ref(null);
const aniGroup = ref([]); const aniGroup = ref([]);
const container = ref();
const eqcode = ref(require("../assets/img/pop/eqcode.png")); 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(() => {}); onBeforeMount(() => {});
onMounted(() => { onMounted(() => {
showDrawAni(); // 根据适配后的大小去修改对应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 // bingo 为中奖index 对应 pArr的index
const showDrawAni = (bingo, repeat) => { const showDrawAni = (bingo, repeat) => {
const pArr = [
const pArr = [ p1, // 1.08
p1, // 1.08 p2, // 2.68
p2, // 2.68 p3, // 6.66
p3, // 6.66 p4, // 8.88
p4, // 8.88 p5, // 谢谢 默认选中值
p5, // 谢谢 默认选中值 p6, //以下皆为填充奖品 可随便填充
p6, //以下皆为填充奖品 可随便填充 p7,
p7, p8,
p8, p9,
p9, p10,
p10, p11,
p11, p12,
p12, p13,
p13, p14,
p14, p15,
p15, p16,
p16, p17,
p17, p18,
p18, p19,
p19, ];
]; const singleRate = 1 / pArr.length; // 路径平均分 单个元素在路径上的位置
const singleRate = 1 / pArr.length; // 路径平均分 单个元素在路径上的位置 const delta = singleRate + 0.068; // 修正偏移量
const delta = singleRate + 0.068; // 修正偏移量 let rotateDelta = 0; //转到哪一个停止 | 默认为第五个奖品 谢谢参与
let rotateDelta = 0; //转到哪一个停止 | 默认为第五个奖品 谢谢参与 if (bingo) {
if (bingo) { rotateDelta = (5 - bingo) * singleRate;
rotateDelta = (5 - bingo) * singleRate; }
} for (let i = 1; i < pArr.length + 1; i++) {
for (let i = 1; i < pArr.length + 1; i++) { let ani = gsap.to(
let ani = gsap.to( [pArr[i - 1].value],
[pArr[i - 1].value], {
{ duration: 10,
duration: 10, paused: bingo ? false : true, //没有中奖结果则为初始化
paused: bingo ? false : true, //没有中奖结果则为初始化 // repeat: -1,
// repeat: -1, // delay: i * 0.5 - 1,
// delay: i * 0.5 - 1, // stagger: 0.5,
// stagger: 0.5, // repeatDelay: 3,
// repeatDelay: 3, // yoyo: true,
// yoyo: true, ease: "back.out(1.4)",
ease: "back.out(1.4)", motionPath: {
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",
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,
autoRotate: true, start: i * singleRate + rotateDelta - delta, // 动画开始于路径的位置 0-1
start: i * singleRate + rotateDelta - delta, // 动画开始于路径的位置 0-1 end: i * singleRate + 1 + rotateDelta - delta, // 动画结束于路径的位置 0-无穷
end: i * singleRate + 1 + rotateDelta - delta, // 动画结束于路径的位置 0-无穷 offsetX: -22, //-177,
offsetX: -177, offsetY: 70,
offsetY: -43, alignOrigin: [0.5, 0],
alignOrigin: [0.5, 0], },
}, onUpdate: () => {
onUpdate: () => { // if (i === 1) console.log(ani.progress());
// if (i === 1) console.log(ani.progress()); },
}, },
onStart: () => { "same"
if (i == pArr.length - 1) { );
setTimeout(() => { // 更新视图
// console.log("停止2"); ani.seek(0);
isStop() if (bingo && repeat) {
}, 5000); setTimeout(() => {
} showDrawAni(bingo, false);
}, }, 800);
}
onComplete: () => {}, }
},
"same"
);
// 更新视图
ani.seek(0);
if (bingo && repeat) {
setTimeout(() => {
showDrawAni(bingo, false);
}, 800);
}
}
}; };
const btn = () => { const btn = () => {
console.log("抽奖"); console.log("抽奖");
// 中奖奖品ID // 中奖奖品ID
// 奖品 1 - 1.08 // 奖品 1 - 1.08
// 奖品 2 - 2.68 // 奖品 2 - 2.68
// 奖品 3 - 6.66 // 奖品 3 - 6.66
// 奖品 4 - 8.88 // 奖品 4 - 8.88
// 奖品 5 - 谢谢参与 // 奖品 5 - 谢谢参与
// 第一个参数 对应奖品对应id, 第二个参数是是否多旋转一会儿 fasle旋转一圈就停止 // 第一个参数 对应奖品对应id, 第二个参数是是否多旋转一会儿 fasle旋转一圈就停止
showDrawAni(2, true); showDrawAni(1, true);
}; };
// 暴露出方法给父组件调用
defineExpose({
showDrawAni,
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.LuckyWheelCon { .LuckyWheelCon {
width: 100%; width: 100%;
height: 800px; height: 100%;
position: absolute; position: fixed;
top: 0; z-index: 10;
left: 0; top: 0;
pointer-events: none; left: 0;
// right: 0;
// bottom: 0;
// display: flex;
// justify-content: center;
// align-items: center;
background-color: rgba(0, 0, 0, 0.3);
.LuckyWheel_container {
position: absolute;
top: 700px;
left: 0;
width: 750px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.LuckyWheel_container { .LuckyWheel_box {
position: absolute; // // border-width: 123px;
top: 770px; // border-style: solid;
left: 0px; // border-radius: 50%;
width: 760px; // // box-sh
height: 500px; position: absolute;
display: flex; left: 0;
justify-content: center; top: 0;
align-items: center; width: 750px;
flex-direction: column; height: 500px;
.LuckyWheel_box { .li {
width: 100px;
height: 100px;
background-color: #ff6000;
}
}
width: 760px; .relative-box {
height: 500px; position: absolute;
left: 0;
// // border-width: 123px; top: 0;
// border-style: solid; width: 750px;
// border-radius: 50%; height: 500px;
// // box-shadow: -1.569px -17.932px 16px 0px rgba(234, 6, 16, 0.16); }
// width: 831px; .cls-1 {
// height: 305px; fill: none;
}
// width: 100%; .btn {
// height: 100%; position: relative;
// position: absolute; z-index: 111;
// top: 0; width: 200px;
// left: 20px; height: 100px;
text-align: center;
.li { line-height: 100px;
width: 100px; font-size: 30px;
height: 100px; color: #fff;
background-color: #ff6000; background: #ff6000;
} }
} }
.prize {
.btn { position: absolute;
width: 200px; width: 160px;
height: 100px; height: 96px;
text-align: center; left: 0;
line-height: 100px; top: 10px;
font-size: 30px; // 奖品图
color: #fff; &.p-1 {
background: #ff6000; background-image: url("~@/assets/img/p_1.png");
} background-size: 160px 96px;
} }
.prize { &.p-2 {
position: absolute; background-image: url("~@/assets/img/p_2.png");
width: 160px; background-size: 160px 96px;
height: 96px; }
left: 0px; &.p-3 {
top: 10px; background-image: url("~@/assets/img/p_3.png");
// 奖品图 background-size: 160px 96px;
&.p-1 { }
background-image: url("~@/assets/img/p_1.png"); &.p-4 {
background-size: 160px 96px; background-image: url("~@/assets/img/p_4.png");
} background-size: 160px 96px;
&.p-2 { }
background-image: url("~@/assets/img/p_2.png"); &.p-5 {
background-size: 160px 96px; background-image: url("~@/assets/img/p_5.png");
} background-size: 160px 96px;
&.p-3 { }
background-image: url("~@/assets/img/p_3.png"); // background-color: #f00;
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> </style>