合并大转盘逻辑
This commit is contained in:
tcubic
commit
a436e20577
BIN
src/assets/img/p_1.png
Normal file
BIN
src/assets/img/p_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
src/assets/img/p_2.png
Normal file
BIN
src/assets/img/p_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
BIN
src/assets/img/p_3.png
Normal file
BIN
src/assets/img/p_3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
BIN
src/assets/img/p_4.png
Normal file
BIN
src/assets/img/p_4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
BIN
src/assets/img/p_5.png
Normal file
BIN
src/assets/img/p_5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
File diff suppressed because it is too large
Load Diff
@ -1,128 +1,247 @@
|
||||
<template>
|
||||
<div class="LuckyWheelCon" @touchmove.prevent>
|
||||
<div class="LuckyWheel_container">
|
||||
<div class="LuckyWheel_box">
|
||||
<svg width="100%" height="100%" viewBox="-20 0 557 190" id="svg">
|
||||
<circle cx="100" cy="100" r="3" />
|
||||
<circle cx="300" cy="20" r="3" />
|
||||
<path id="path"
|
||||
d="M9,100c0,0,18.53-41.58,49.91-65.11c30-22.5,65.81-24.88,77.39-24.88c33.87,0,57.55,11.71,77.05,28.47c23.09,19.85,40.33,46.79,61.71,69.77c24.09,25.89,53.44,46.75,102.37,46.75c22.23,0,40.62-2.83,55.84-7.43c27.97-8.45,44.21-22.88,54.78-36.7c14.35-18.75,16.43-36.37,16.43-36.37" />
|
||||
<g id="rect">
|
||||
<rect width="85" height="30" fill="dodgerblue" />
|
||||
<text x="10" y="19" font-size="14">SVG <rect></text>
|
||||
</g>
|
||||
</svg>
|
||||
<div id="div">#div</div>
|
||||
</div>
|
||||
<div class="btn" @click="btn">开始抽奖</div>
|
||||
</div>
|
||||
</div>
|
||||
<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 {
|
||||
onBeforeMount,
|
||||
onMounted,
|
||||
defineEmits,
|
||||
defineProps,
|
||||
reactive,
|
||||
ref,
|
||||
toRefs,
|
||||
} from "vue";
|
||||
import gsap from "gsap";
|
||||
import axios from 'axios'
|
||||
import { Toast } from 'vant';
|
||||
import axios from "axios";
|
||||
import { Toast } from "vant";
|
||||
import { useStore } from "vuex";
|
||||
|
||||
import { PixiPlugin } from "gsap/PixiPlugin.js";
|
||||
// import { PixiPlugin } from "gsap/PixiPlugin.js";
|
||||
import { MotionPathPlugin } from "gsap/MotionPathPlugin.js";
|
||||
// import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";
|
||||
|
||||
gsap.registerPlugin(PixiPlugin, MotionPathPlugin)
|
||||
|
||||
gsap.registerPlugin(MotionPathPlugin);
|
||||
|
||||
// 初始化
|
||||
const emit = defineEmits(["ServicePop"]); // 声明触发事件，对应父组件上面的方法
|
||||
const props = defineProps({ sendMessage: Object }); // 获取props
|
||||
const store = useStore()
|
||||
|
||||
|
||||
const eqcode = ref(require('../assets/img/pop/eqcode.png'))
|
||||
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(() => { })
|
||||
|
||||
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('抽奖');
|
||||
// gsap.to('.LuckyWheel_box', { duration: 10, repeat: -1, "rotation": '+=360' })
|
||||
gsap.to("#rect", {
|
||||
duration: 5,
|
||||
repeat: 12,
|
||||
repeatDelay: 3,
|
||||
yoyo: true,
|
||||
ease: "power1.inOut",
|
||||
motionPath: {
|
||||
path: "#path",
|
||||
align: "#path",
|
||||
autoRotate: true,
|
||||
alignOrigin: [0.5, 0.5]
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
console.log("抽奖");
|
||||
// 中奖奖品ID
|
||||
// 奖品 1 - 1.08
|
||||
// 奖品 2 - 2.68
|
||||
// 奖品 3 - 6.66
|
||||
// 奖品 4 - 8.88
|
||||
// 奖品 5 - 谢谢参与
|
||||
// 第一个参数 对应奖品对应id, 第二个参数是是否多旋转一会儿 fasle旋转一圈就停止
|
||||
showDrawAni(1, true);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.LuckyWheelCon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
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);
|
||||
|
||||
.LuckyWheel_container {
|
||||
position: absolute;
|
||||
top: 770px;
|
||||
left: 0;
|
||||
width: 760px;
|
||||
height: 500px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.LuckyWheel_container {
|
||||
width: 750px;
|
||||
height: 1180px;
|
||||
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;
|
||||
|
||||
.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;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
}
|
||||
.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>
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user