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

添加抽奖ui动画等

Browse Source
This commit is contained in:
rucky 2022-08-02 17:10:20 +08:00
parent d419800cdc
commit 4ac1bef80a
7 changed files with 628 additions and 502 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/p_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
src/assets/img/p_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
src/assets/img/p_3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
src/assets/img/p_4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
src/assets/img/p_5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

817
src/components/Index.vue
View File

@ -1,96 +1,100 @@
<template> <template>
<div class="indexPage"> <div class="indexPage">
<div class="indexCon"> <div class="indexCon">
<div class="logo"></div> <div class="logo"></div>
<div class="title_main"></div> <div class="title_main"></div>
<div class="cloud_left_1"></div> <div class="cloud_left_1"></div>
<div class="cloud_right_1"></div> <div class="cloud_right_1"></div>
<div class="luckybag_left"></div> <div class="luckybag_left"></div>
<div class="luckybag_right"></div> <div class="luckybag_right"></div>
<div class="icon_left_1"></div> <div class="icon_left_1"></div>
<div class="lucky_bag"></div> <div class="lucky_bag"></div>
<div class="lucky_bag_2"> <div class="lucky_bag_2">
<div class="prize_num">{{ prizeResult }}<span>元</span></div> <div class="prize_num">{{ prizeResult }}<span>元</span></div>
</div> </div>
<div class="notice"> <div class="notice">
<span class="icon" <span class="icon"
><img src="../assets/img/laba.png" alt="" srcset="" ><img src="../assets/img/laba.png" alt="" srcset=""
/></span> /></span>
<span class="num">活动已有{{ participantNum }}人参与</span> <span class="num">活动已有{{ participantNum }}人参与</span>
</div> </div>
<div class="cloud_left_2"></div> <div class="cloud_left_2"></div>
<div class="icon_left_2"></div> <div class="icon_left_2"></div>
<div class="cloud_right_2"></div> <div class="cloud_right_2"></div>
<!-- 大转盘 --> <!-- 大转盘 -->
<div class="zhuanpan"> <div class="zhuanpan">
<!-- <div class="liwu"> <!-- <div class="liwu">
<div>1.99</div> <div>1.99</div>
<div>2.99</div> <div>2.99</div>
<div>3.99</div> <div>3.99</div>
<div>4.99</div> <div>4.99</div>
<div>5.99</div> <div>5.99</div>
</div> --> </div> -->
</div> </div>
<div class="icon_right_2"></div> <div class="icon_right_2"></div>
<div class="icon_right_3"></div> <div class="icon_right_3"></div>
<div class="cloud_left_3"></div> <div class="cloud_left_3"></div>
<div class="cloud_right_3"></div> <div class="cloud_right_3"></div>
<div class="icon_right_1"></div> <div class="icon_right_1"></div>
<div class="select_box"></div> <div class="select_box"></div>
<div class="draw_btn" @click="drawBtn"></div> <div class="draw_btn" @click="drawBtn"></div>
<div class="rule_btn" @click="showRluesBtn"></div> <div class="rule_btn" @click="showRluesBtn"></div>
<div class="prize_btn" @click="showMyPrizePop"></div> <div class="prize_btn" @click="showMyPrizePop"></div>
<div class="rule_btn_text"></div> <div class="rule_btn_text"></div>
<div class="prize_btn_text"></div> <div class="prize_btn_text"></div>
<div class="caidai"></div> <div class="caidai"></div>
</div> </div>
<!-- 活动列表 --> <!-- 活动列表 -->
<div class="activityCon"> <div class="activityCon">
<div class="activity_box"> <div class="activity_box">
<div class="activity_title"> <div class="activity_title">
<img src="../assets/img/activity_title.png" alt="" /> <img src="../assets/img/activity_title.png" alt="" />
</div> </div>
<div class="activity_list"> <div class="activity_list">
<div <div
class="activity_li" class="activity_li"
v-for="(item, index) in activityList" v-for="(item, index) in activityList"
:key="index" :key="index"
:style="{ 'background-image': 'url(' + item.banner + ')' }" :style="{
v-show="item.show" 'background-image': 'url(' + item.banner + ')',
> }"
<div v-show="item.show"
class="btn" >
:style="{ 'background-image': 'url(' + item.btnImg + ')' }" <div
@click="activityBtn(item)" class="btn"
></div> :style="{
</div> 'background-image': 'url(' + item.btnImg + ')',
</div> }"
</div> @click="activityBtn(item)"
<div class="cloud_bottom"></div> ></div>
</div> </div>
</div>
</div>
<div class="cloud_bottom"></div>
</div>
<!-- 活动规则弹窗 --> <!-- 活动规则弹窗 -->
<Rules v-if="showRulesPop" @RulesPop="hideRulesPop" /> <Rules v-if="showRulesPop" @RulesPop="hideRulesPop" />
<!-- 我的奖品弹窗 --> <!-- 我的奖品弹窗 -->
<MyPrize v-if="showMyPrize" @MyPrize="myPrizePop" /> <MyPrize v-if="showMyPrize" @MyPrize="myPrizePop" />
<!-- 添加专属服务人员企微弹窗 --> <!-- 添加专属服务人员企微弹窗 -->
<ServiceList v-if="showServicePop" @ServicePop="hideServicePop" /> <ServiceList v-if="showServicePop" @ServicePop="hideServicePop" />
<LuckyWheel v-if="false" /> <LuckyWheel v-if="false" />
</div> </div>
</template> </template>
<script setup> <script setup>
import { import {
onBeforeMount, onBeforeMount,
onMounted, onMounted,
defineEmits, defineEmits,
defineProps, defineProps,
reactive, reactive,
ref, ref,
toRefs, toRefs,
getCurrentInstance, getCurrentInstance,
computed, computed,
} from "vue"; } from "vue";
import gsap from "gsap"; import gsap from "gsap";
import axios from "axios"; import axios from "axios";
@ -122,36 +126,36 @@ const showServicePop = ref(false);
// 活动列表 // 活动列表
const activityList = reactive([ const activityList = reactive([
{ {
id: 1, id: 1,
show: true, show: true,
banner: require("../assets/img/activity_1.png"), banner: require("../assets/img/activity_1.png"),
btnImg: require("../assets/img/li_btn_1.png"), btnImg: require("../assets/img/li_btn_1.png"),
}, },
{ {
id: 2, id: 2,
show: true, show: true,
banner: require("../assets/img/activity_2.png"), banner: require("../assets/img/activity_2.png"),
btnImg: require("../assets/img/li_btn_2.png"), btnImg: require("../assets/img/li_btn_2.png"),
}, },
{ {
id: 3, id: 3,
show: true, show: true,
banner: require("../assets/img/activity_3.png"), banner: require("../assets/img/activity_3.png"),
btnImg: require("../assets/img/li_btn_3.png"), btnImg: require("../assets/img/li_btn_3.png"),
}, },
{ {
id: 4, id: 4,
show: true, show: true,
banner: require("../assets/img/activity_4.png"), banner: require("../assets/img/activity_4.png"),
btnImg: require("../assets/img/li_btn_4.png"), btnImg: require("../assets/img/li_btn_4.png"),
}, },
{ {
id: 5, id: 5,
show: true, show: true,
banner: require("../assets/img/activity_5.png"), banner: require("../assets/img/activity_5.png"),
btnImg: require("../assets/img/li_btn_5.png"), btnImg: require("../assets/img/li_btn_5.png"),
}, },
]); ]);
// 页面挂载前 // 页面挂载前
@ -161,384 +165,387 @@ onBeforeMount(() => {});
onMounted(() => {}); onMounted(() => {});
const btn = () => { const btn = () => {
// Toast('项目开发中'); // Toast('项目开发中');
emit("indexPage", "hello"); emit("indexPage", "hello");
Dialog.alert({ Dialog.alert({
title: "招商证券88司庆活动", title: "招商证券88司庆活动",
message: "项目开发中", message: "项目开发中",
confirmButtonText: "确定", confirmButtonText: "确定",
showCancelButton: true, showCancelButton: true,
}) })
.then((e) => { .then((e) => {
// 更新openid // 更新openid
store.commit({ type: "updateOpenid", openid: "openid110" }); store.commit({ type: "updateOpenid", openid: "openid110" });
console.log(e, store.state.userAccount); console.log(e, store.state.userAccount);
}) })
.catch((e) => { .catch((e) => {
console.log(e); console.log(e);
}); });
}; };
// 抽奖按钮 // 抽奖按钮
const drawBtn = () => { const drawBtn = () => {
console.log("抽奖22："); console.log("抽奖22：");
service.get(process.env.VUE_APP_API + '/cms88/card/qrcode/',cardId=store.state.userAccount.cardId ) service
.then((res) => { .get(
process.env.VUE_APP_API + "/cms88/card/qrcode/",
(cardId = store.state.userAccount.cardId)
)
.then((res) => {
console.log(res);
});
console.log(res); // console.log("授权：",getAuthorize(1));
}) // if (h5plugin.getQueryString("forceauth")) {
// console.log("yes-forceauth");
// console.log("授权：",getAuthorize(1)); // getAuthorize(0);
// if (h5plugin.getQueryString("forceauth")) { // } else {
// console.log("yes-forceauth"); // console.log("no-forceauth");
// getAuthorize(0); // getAuthorize(1);
// } else { // }
// console.log("no-forceauth");
// getAuthorize(1);
// }
}; };
// 活动点击 // 活动点击
const activityBtn = (item) => { const activityBtn = (item) => {
console.log(item.id); console.log(item.id);
if (item.id == 1) { if (item.id == 1) {
showServicePop.value = true; showServicePop.value = true;
} }
}; };
// 活动规则弹窗 // 活动规则弹窗
const showRluesBtn = () => { const showRluesBtn = () => {
showRulesPop.value = true; showRulesPop.value = true;
}; };
const hideRulesPop = () => { const hideRulesPop = () => {
showRulesPop.value = false; showRulesPop.value = false;
}; };
// 我的奖品页面 // 我的奖品页面
const showMyPrizePop = () => { const showMyPrizePop = () => {
showMyPrize.value = true; showMyPrize.value = true;
}; };
const myPrizePop = () => { const myPrizePop = () => {
showMyPrize.value = false; showMyPrize.value = false;
}; };
// 企微弹窗 // 企微弹窗
const hideServicePop = () => { const hideServicePop = () => {
showServicePop.value = false; showServicePop.value = false;
}; };
// 招商证券授权 // 招商证券授权
const getAuthorize = (scopeState) => { const getAuthorize = (scopeState) => {
let href = window.location.href; let href = window.location.href;
let h_idx = window.location.href.indexOf("#"); let h_idx = window.location.href.indexOf("#");
let out_href = href.slice(0, h_idx); let out_href = href.slice(0, h_idx);
// return `${process.env.VUE_APP_ZS_DOMAIN}/wxauth/official/account/authorize?redirectUrl=${out_href}&scope=${1}"`; // return `${process.env.VUE_APP_ZS_DOMAIN}/wxauth/official/account/authorize?redirectUrl=${out_href}&scope=${1}"`;
window.location.href = `${process.env.VUE_APP_ZS_DOMAIN}/wxauth/official/account/authorize?redirectUrl=${out_href}&scope=${scopeState}`; window.location.href = `${process.env.VUE_APP_ZS_DOMAIN}/wxauth/official/account/authorize?redirectUrl=${out_href}&scope=${scopeState}`;
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.indexPage { .indexPage {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
overflow: hidden; overflow: hidden;
overflow-y: scroll; overflow-y: scroll;
.indexCon { .indexCon {
// @include pos(100%, 1090px, 0, 0); // @include pos(100%, 1090px, 0, 0);
width: 100%; width: 100%;
height: 1090px; height: 1090px;
position: relative; position: relative;
top: 0; top: 0;
left: 0; left: 0;
@include bg_pos("../assets/img/top_bg.jpg"); @include bg_pos("../assets/img/top_bg.jpg");
// overflow: hidden; // overflow: hidden;
.logo { .logo {
@include pos(241px, 36px, 31px, 41px); @include pos(241px, 36px, 31px, 41px);
@include bg_pos("../assets/img/logo.png"); @include bg_pos("../assets/img/logo.png");
pointer-events: none; pointer-events: none;
} }
.notice { .notice {
@include pos(350px, 48px, 200px, 592px); @include pos(350px, 48px, 200px, 592px);
@include bg_pos("../assets/img/notice_box.png"); @include bg_pos("../assets/img/notice_box.png");
pointer-events: none; pointer-events: none;
align-self: center; align-self: center;
justify-content: center; justify-content: center;
display: flex; display: flex;
font-size: 20px; font-size: 20px;
.icon { .icon {
width: 26px; width: 26px;
height: 48px; height: 48px;
// @include bg_pos('../assets/img/laba.png'); // @include bg_pos('../assets/img/laba.png');
line-height: 54px; line-height: 54px;
img { img {
width: 26px; width: 26px;
height: 25px; height: 25px;
} }
} }
.num { .num {
height: 48px; height: 48px;
line-height: 48px; line-height: 48px;
} }
} }
.title_main { .title_main {
@include pos(547px, 221px, 107px, 108px); @include pos(547px, 221px, 107px, 108px);
@include bg_pos("../assets/img/title_main.png"); @include bg_pos("../assets/img/title_main.png");
pointer-events: none; pointer-events: none;
} }
.caidai { .caidai {
@include pos(641px, 503px, 47px, 79px); @include pos(641px, 503px, 47px, 79px);
@include bg_pos("../assets/img/caidai.png"); @include bg_pos("../assets/img/caidai.png");
pointer-events: none; pointer-events: none;
} }
.luckybag_left { .luckybag_left {
@include pos(144px, 138px, 0px, 551px); @include pos(144px, 138px, 0px, 551px);
@include bg_pos("../assets/img/luckybag_left.png"); @include bg_pos("../assets/img/luckybag_left.png");
pointer-events: none; pointer-events: none;
} }
.luckybag_right { .luckybag_right {
@include pos(118px, 110px, 615px, 503px); @include pos(118px, 110px, 615px, 503px);
@include bg_pos("../assets/img/luckybag_right_2.png"); @include bg_pos("../assets/img/luckybag_right_2.png");
pointer-events: none; pointer-events: none;
} }
.icon_left_1 { .icon_left_1 {
@include pos(54px, 52px, 104px, 605px); @include pos(54px, 52px, 104px, 605px);
@include bg_pos("../assets/img/icon_left_1.png"); @include bg_pos("../assets/img/icon_left_1.png");
pointer-events: none; pointer-events: none;
} }
.icon_left_2 { .icon_left_2 {
@include pos(63px, 61px, 11px, 652px); @include pos(63px, 61px, 11px, 652px);
@include bg_pos("../assets/img/icon_left_2.png"); @include bg_pos("../assets/img/icon_left_2.png");
pointer-events: none; pointer-events: none;
} }
.icon_right_1 { .icon_right_1 {
@include pos(81px, 80px, 556px, 400px); @include pos(81px, 80px, 556px, 400px);
@include bg_pos("../assets/img/icon_right_1.png"); @include bg_pos("../assets/img/icon_right_1.png");
pointer-events: none; pointer-events: none;
} }
.icon_right_2 { .icon_right_2 {
@include pos(70px, 65px, 567px, 573px); @include pos(70px, 65px, 567px, 573px);
@include bg_pos("../assets/img/icon_right_2.png"); @include bg_pos("../assets/img/icon_right_2.png");
pointer-events: none; pointer-events: none;
} }
.icon_right_3 { .icon_right_3 {
@include pos(103px, 108px, 633px, 600px); @include pos(103px, 108px, 633px, 600px);
@include bg_pos("../assets/img/luckybag_right.png"); @include bg_pos("../assets/img/luckybag_right.png");
pointer-events: none; pointer-events: none;
} }
.cloud_left_1 { .cloud_left_1 {
@include pos(214px, 147px, 0px, 523px); @include pos(214px, 147px, 0px, 523px);
@include bg_pos("../assets/img/cloud_left_1.png"); @include bg_pos("../assets/img/cloud_left_1.png");
pointer-events: none; pointer-events: none;
} }
.cloud_left_2 { .cloud_left_2 {
@include pos(375px, 176px, 0px, 616px); @include pos(375px, 176px, 0px, 616px);
@include bg_pos("../assets/img/cloud_left_2.png"); @include bg_pos("../assets/img/cloud_left_2.png");
pointer-events: none; pointer-events: none;
} }
.cloud_left_3 { .cloud_left_3 {
@include pos(151px, 136px, 0px, 645px); @include pos(151px, 136px, 0px, 645px);
@include bg_pos("../assets/img/cloud_left_3.png"); @include bg_pos("../assets/img/cloud_left_3.png");
pointer-events: none; pointer-events: none;
} }
.cloud_right_1 { .cloud_right_1 {
@include pos(270px, 215px, 480px, 477px); @include pos(270px, 215px, 480px, 477px);
@include bg_pos("../assets/img/cloud_right_1.png"); @include bg_pos("../assets/img/cloud_right_1.png");
pointer-events: none; pointer-events: none;
} }
.cloud_right_2 { .cloud_right_2 {
@include pos(375px, 202px, 375px, 595px); @include pos(375px, 202px, 375px, 595px);
@include bg_pos("../assets/img/cloud_right_2.png"); @include bg_pos("../assets/img/cloud_right_2.png");
pointer-events: none; pointer-events: none;
} }
.cloud_right_3 { .cloud_right_3 {
@include pos(113px, 108px, 639px, 686px); @include pos(113px, 108px, 639px, 686px);
@include bg_pos("../assets/img/cloud_right_3.png"); @include bg_pos("../assets/img/cloud_right_3.png");
pointer-events: none; pointer-events: none;
} }
.lucky_bag { .lucky_bag {
@include pos(308px, 355px, 227px, 356px); @include pos(308px, 355px, 227px, 356px);
@include bg_pos("../assets/img/luckybag.png"); @include bg_pos("../assets/img/luckybag.png");
pointer-events: none; pointer-events: none;
visibility: hidden; visibility: hidden;
} }
.lucky_bag_2 { .lucky_bag_2 {
@include pos(330px, 345px, 210px, 348px); @include pos(330px, 345px, 210px, 348px);
@include bg_pos("../assets/img/luckybag_2.png"); @include bg_pos("../assets/img/luckybag_2.png");
pointer-events: none; pointer-events: none;
// display: flex; // display: flex;
.prize_num { .prize_num {
@include pos(330px, 50px, 0px, 79px); @include pos(330px, 50px, 0px, 79px);
font-weight: 700; font-weight: 700;
font-size: 59px; font-size: 59px;
color: #ff480e; color: #ff480e;
text-align: center; text-align: center;
span { span {
color: #ca2f0a; color: #ca2f0a;
font-size: 24px; font-size: 24px;
font-weight: 700; font-weight: 700;
} }
} }
} }
.select_box { .select_box {
@include pos(270px, 325px, 239px, 666px); @include pos(270px, 325px, 239px, 666px);
@include bg_pos("../assets/img/select_box.png"); @include bg_pos("../assets/img/select_box.png");
pointer-events: none; pointer-events: none;
} }
.draw_btn { .draw_btn {
@include pos(216px, 252px, 273px, 810px); @include pos(216px, 252px, 273px, 810px);
@include bg_pos("../assets/img/draw_btn.png"); @include bg_pos("../assets/img/draw_btn.png");
} }
.rule_btn { .rule_btn {
@include pos(137px, 153px, 75px, 883px); @include pos(137px, 153px, 75px, 883px);
@include bg_pos("../assets/img/rule_btn.png"); @include bg_pos("../assets/img/rule_btn.png");
} }
.rule_btn_text { .rule_btn_text {
@include pos(98px, 26px, 92px, 1035px); @include pos(98px, 26px, 92px, 1035px);
@include bg_pos("../assets/img/rule_btn_text.png"); @include bg_pos("../assets/img/rule_btn_text.png");
} }
.prize_btn { .prize_btn {
@include pos(137px, 153px, 541px, 883px); @include pos(137px, 153px, 541px, 883px);
@include bg_pos("../assets/img/prize_btn.png"); @include bg_pos("../assets/img/prize_btn.png");
} }
.prize_btn_text { .prize_btn_text {
@include pos(98px, 26px, 558px, 1035px); @include pos(98px, 26px, 558px, 1035px);
@include bg_pos("../assets/img/prize_btn_text.png"); @include bg_pos("../assets/img/prize_btn_text.png");
} }
.zhuanpan { .zhuanpan {
@include pos(750px, 465px, 0px, 657px); @include pos(750px, 465px, 0px, 657px);
@include bg_pos("../assets/img/zhuanpan.png"); @include bg_pos("../assets/img/zhuanpan.png");
pointer-events: none; pointer-events: none;
overflow: hidden; overflow: hidden;
.liwu { .liwu {
@include pos(750px, 465px, 0px, 40px); @include pos(750px, 465px, 0px, 40px);
display: flex; display: flex;
border-radius: 50%; border-radius: 50%;
// background-color: rgb(255, 0, 0); // background-color: rgb(255, 0, 0);
// width: 1146px; // width: 1146px;
// height: 812px; // height: 812px;
div { div {
border: 2px solid #000; border: 2px solid #000;
width: 20%; width: 20%;
height: 110px; height: 110px;
font-size: 36px; font-size: 36px;
font-weight: 700; font-weight: 700;
color: #fc4638; color: #fc4638;
text-align: center; text-align: center;
line-height: 110px; line-height: 110px;
border-radius: 50%; border-radius: 50%;
transform: rotate(30deg); transform: rotate(30deg);
} }
} }
} }
} }
.activityCon { .activityCon {
width: 750px; width: 750px;
@include bg_pos("../assets/img/activity_bg.jpg"); @include bg_pos("../assets/img/activity_bg.jpg");
.activity_box { .activity_box {
width: 700px; width: 700px;
// height: 100%; // height: 100%;
margin: 0 auto; margin: 0 auto;
margin-top: 30px; margin-top: 30px;
@include bg_pos("../assets/img/activity_box.png"); @include bg_pos("../assets/img/activity_box.png");
box-sizing: border-box; box-sizing: border-box;
.activity_title { .activity_title {
width: 633px; width: 633px;
height: 120px; height: 120px;
margin: 0 auto; margin: 0 auto;
// margin-top: 55px; // margin-top: 55px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
img { img {
width: 633px; width: 633px;
height: 29px; height: 29px;
} }
// @include bg_pos('../assets/img/activity_title.png'); // @include bg_pos('../assets/img/activity_title.png');
} }
.activity_list { .activity_list {
width: 633px; width: 633px;
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-top: 20px; margin-top: 20px;
.activity_li { .activity_li {
width: 633px; width: 633px;
height: 166px; height: 166px;
margin-bottom: 30px; margin-bottom: 30px;
background-size: 100%; background-size: 100%;
position: relative; position: relative;
.btn { .btn {
width: 121px; width: 121px;
height: 121px; height: 121px;
position: absolute; position: absolute;
top: 16px; top: 16px;
left: 479px; left: 479px;
background-size: 100%; background-size: 100%;
} }
} }
} }
} }
.cloud_bottom { .cloud_bottom {
width: 750px; width: 750px;
height: 255px; height: 255px;
margin-top: -160px; margin-top: -160px;
@include bg_pos("../assets/img/cloud_bottom.png"); @include bg_pos("../assets/img/cloud_bottom.png");
} }
} }
} }
</style> </style>

313
src/components/LuckyWheel.vue
View File

@ -1,128 +1,247 @@
<template> <template>
<div class="LuckyWheelCon" @touchmove.prevent> <div class="LuckyWheelCon" @touchmove.prevent>
<div class="LuckyWheel_container"> <div class="LuckyWheel_container">
<div class="LuckyWheel_box"> <div class="LuckyWheel_box">
<svg width="100%" height="100%" viewBox="-20 0 557 190" id="svg"> <div class="prize p-1" ref="p1"></div>
<circle cx="100" cy="100" r="3" /> <div class="prize p-2" ref="p2"></div>
<circle cx="300" cy="20" r="3" /> <div class="prize p-3" ref="p3"></div>
<path id="path" <div class="prize p-4" ref="p4"></div>
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" /> <div class="prize p-5" ref="p5"></div>
<g id="rect"> <div class="prize p-1" ref="p6"></div>
<rect width="85" height="30" fill="dodgerblue" /> <div class="prize p-2" ref="p7"></div>
<text x="10" y="19" font-size="14">SVG &lt;rect&gt;</text> <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 id="div">#div</div> <div class="prize p-1" ref="p11"></div>
</div> <div class="prize p-2" ref="p12"></div>
<div class="btn" @click="btn">开始抽奖</div> <div class="prize p-3" ref="p13"></div>
</div> <div class="prize p-4" ref="p14"></div>
</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> </template>
<script setup> <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 gsap from "gsap";
import axios from 'axios' import axios from "axios";
import { Toast } from 'vant'; import { Toast } from "vant";
import { useStore } from "vuex"; 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(PixiPlugin, MotionPathPlugin) gsap.registerPlugin(MotionPathPlugin);
// 初始化 // 初始化
const emit = defineEmits(["ServicePop"]); // 声明触发事件，对应父组件上面的方法 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 p2 = ref(null);
const eqcode = ref(require('../assets/img/pop/eqcode.png')) 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 = () => { const btn = () => {
console.log('抽奖'); console.log("抽奖");
// gsap.to('.LuckyWheel_box', { duration: 10, repeat: -1, "rotation": '+=360' }) // 中奖奖品ID
gsap.to("#rect", { // 奖品 1 - 1.08
duration: 5, // 奖品 2 - 2.68
repeat: 12, // 奖品 3 - 6.66
repeatDelay: 3, // 奖品 4 - 8.88
yoyo: true, // 奖品 5 - 谢谢参与
ease: "power1.inOut", // 第一个参数 对应奖品对应id, 第二个参数是是否多旋转一会儿 fasle旋转一圈就停止
motionPath: { showDrawAni(1, true);
path: "#path", };
align: "#path",
autoRotate: true,
alignOrigin: [0.5, 0.5]
}
});
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.LuckyWheelCon { .LuckyWheelCon {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: fixed; position: fixed;
top: 0; z-index: 10;
left: 0; top: 0;
right: 0; left: 0;
bottom: 0; // right: 0;
display: flex; // bottom: 0;
justify-content: center; // display: flex;
align-items: center; // justify-content: center;
background-color: rgba(0, 0, 0, 0.7); // 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 { .LuckyWheel_box {
width: 750px; // // border-width: 123px;
height: 1180px; // border-style: solid;
display: flex; // border-radius: 50%;
justify-content: center; // // box-shadow: -1.569px -17.932px 16px 0px rgba(234, 6, 16, 0.16);
align-items: center; // width: 831px;
flex-direction: column; // height: 305px;
.LuckyWheel_box { .li {
width: 100px;
border-width: 123px; height: 100px;
border-style: solid; background-color: #ff6000;
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;
}
}
.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> </style>