352 lines
8.1 KiB
Vue
352 lines
8.1 KiB
Vue
<template>
|
||
<div class="home" @click.once="firstClick">
|
||
<div class="home-container">
|
||
<Index v-if="showIndex" @IndexPage="indexFn"></Index>
|
||
<QuestionList v-if="showQuestionList" ref="QuestionListRef" @QuestionList="questionListFn"
|
||
@showResult="onShowResult"></QuestionList>
|
||
<Question v-if="showQuestion" @QuestionPage="questionFn"></Question>
|
||
<Result v-if="showResult" @ResultPage="resultFn"></Result>
|
||
<MyPrize v-if="showMyPrize" @MyPrizePage="myPrizeFn"></MyPrize>
|
||
<Draw v-if="showDraw" @DrawPage="drawFn"></Draw>
|
||
<Rule v-if="showRule" @RulePage="ruleFn"></Rule>
|
||
<Loading v-if="showLoad" @LoadPage="loadFn"></Loading>
|
||
<!-- 音乐图标 -->
|
||
<div class="music_icon" @click="musicPlay">
|
||
<audio style="display: none; height: 0" id="bg-music" autoplay="autoplay" preload="auto" :src="musicUrl"
|
||
loop="loop"></audio>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import gsap from "gsap";
|
||
import Loading from "@/components/Loading";
|
||
import Index from "@/components/Index";
|
||
import Question from "@/components/Question";
|
||
import QuestionList from "@/components/QuestionList";
|
||
import MyPrize from "@/components/MyPrize";
|
||
import Draw from "@/components/Draw";
|
||
import Result from "@/components/Result";
|
||
import Rule from "@/components/Rule";
|
||
import {
|
||
getQueryString,
|
||
screenOrientation,
|
||
fontAdpat,
|
||
} from "@/plugins";
|
||
import { authorize, getUserInfo } from "@/api";
|
||
import { Toast } from "vant";
|
||
import { useMainStore } from "@/store";
|
||
|
||
|
||
const userStore = useMainStore();
|
||
|
||
const musicUrl = new URL(`@/assets/media/bgm.mp3`, import.meta.url).href
|
||
|
||
const showLoad = ref(false);
|
||
const loadFn = (item) => {
|
||
if (item.action == "hide") {
|
||
showLoad.value = false;
|
||
showIndex.value = true;
|
||
}
|
||
};
|
||
|
||
const showIndex = ref(false);
|
||
const indexFn = (item) => {
|
||
if (item.action == "hide") {
|
||
showIndex.value = false;
|
||
}
|
||
if (item.action == "showMyPrize") {
|
||
showMyPrize.value = true;
|
||
}
|
||
if (item.action == "start") {
|
||
showQuestionList.value = true;
|
||
}
|
||
|
||
if (item.action == "showRule") {
|
||
showRule.value = true;
|
||
}
|
||
};
|
||
|
||
const showQuestion = ref(false);
|
||
const questionFn = (item) => {
|
||
if (item.action == "hide") {
|
||
showQuestion.value = false;
|
||
}
|
||
|
||
if (item.action == "showResult") {
|
||
showResult.value = true;
|
||
showQuestion.value = false;
|
||
}
|
||
};
|
||
|
||
const showMyPrize = ref(false);
|
||
const myPrizeFn = (item) => {
|
||
if (item.action == "hide") {
|
||
showMyPrize.value = false;
|
||
}
|
||
};
|
||
|
||
const QuestionListRef = ref(null)
|
||
const showQuestionList = ref(false);
|
||
const questionListFn = (item) => {
|
||
if (item.action == "hide") {
|
||
showQuestionList.value = false;
|
||
}
|
||
};
|
||
const posterId = ref(1)
|
||
const onShowResult = (item) => {
|
||
// posterId.value = item.pid || 1
|
||
posterId.value = 1
|
||
showResult.value = true;
|
||
}
|
||
|
||
|
||
const showDraw = ref(false);
|
||
const drawFn = (item) => {
|
||
if (item.action == "hide") {
|
||
showDraw.value = false;
|
||
}
|
||
};
|
||
|
||
const showResult = ref(false);
|
||
const resultFn = (item) => {
|
||
if (item.action == "hide") {
|
||
showResult.value = false;
|
||
console.log('hide', showResult.value);
|
||
}
|
||
if(item.action == "showQuestion"){
|
||
showQuestionList.value = true;
|
||
showResult.value = false;
|
||
}
|
||
if (item.action == "showDraw") {
|
||
showDraw.value = true;
|
||
}
|
||
};
|
||
|
||
const showRule = ref(false);
|
||
const ruleFn = (item) => {
|
||
if (item.action == "hide") {
|
||
showRule.value = false;
|
||
}
|
||
};
|
||
|
||
onMounted(() => {
|
||
fontAdpat(); //字体适配
|
||
screenOrientation(); //横竖屏检测
|
||
|
||
let code = getQueryString("code");
|
||
let url = import.meta.env.VITE_URL;
|
||
|
||
let dev = import.meta.env.VITE_MODE;
|
||
if (dev != "dev") {
|
||
if (code) {
|
||
getUserInfo({ code: code }).then((res) => {
|
||
if (res.code == 0) {
|
||
console.log("我的信息：", res.data);
|
||
userStore.updateToken(res.data);
|
||
// 开始加载组件
|
||
showLoad.value = true;
|
||
iosMusic() //自动播放音乐
|
||
gsap.set('.music_icon', { autoAlpha: 1 })
|
||
return;
|
||
} else {
|
||
authorize({ scopeType: 1, redirectUri: url }).then((res) => {
|
||
if (res.code == 0) {
|
||
console.log("重定向地址：", res.data);
|
||
location.replace(res.data);
|
||
} else {
|
||
// 活动已结束：6001
|
||
if (res.code == "6001") {
|
||
Toast.fail({
|
||
message: res.msg,
|
||
duration: 0,
|
||
forbidClick: true,
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 活动未开启：6002
|
||
if (res.code == "6002") {
|
||
Toast({
|
||
message: res.msg,
|
||
duration: 0,
|
||
icon: "flag-o",
|
||
forbidClick: true,
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 其余情况
|
||
Toast({
|
||
message: res.msg,
|
||
duration: 0,
|
||
forbidClick: true,
|
||
});
|
||
}
|
||
});
|
||
}
|
||
});
|
||
} else {
|
||
authorize({ scopeType: 1, redirectUri: url }).then((res) => {
|
||
if (res.code == 0) {
|
||
console.log("重定向地址：", res.data);
|
||
location.replace(res.data);
|
||
} else {
|
||
// 活动已结束：6001
|
||
if (res.code == "6001") {
|
||
Toast.fail({
|
||
message: "活动已结束",
|
||
duration: 0,
|
||
forbidClick: true,
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 活动未开启：6002
|
||
if (res.code == "6002") {
|
||
Toast({
|
||
message: "活动未开始",
|
||
duration: 0,
|
||
icon: "flag-o",
|
||
forbidClick: true,
|
||
});
|
||
return;
|
||
}
|
||
|
||
Toast.fail({
|
||
message: "活动已结束",
|
||
duration: 0,
|
||
forbidClick: true,
|
||
});
|
||
}
|
||
});
|
||
}
|
||
} else {
|
||
showLoad.value = true;
|
||
iosMusic() //自动播放音乐
|
||
gsap.set('.music_icon', { autoAlpha: 1 })
|
||
}
|
||
});
|
||
|
||
|
||
|
||
// ios端音乐自动播放
|
||
const iosMusic = () => {
|
||
// ios自动播放音乐
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
function audioAutoPlay() {
|
||
var audio = document.getElementById("bg-music");
|
||
audio.play();
|
||
document.addEventListener(
|
||
"WeixinJSBridgeReady",
|
||
function () {
|
||
WeixinJSBridge.invoke("getNetworkType", {}, function (e) {
|
||
audio.play();
|
||
});
|
||
},
|
||
false
|
||
);
|
||
}
|
||
audioAutoPlay();
|
||
});
|
||
|
||
musicBtnAni.fromTo(
|
||
".music_icon",
|
||
{ rotation: "0" },
|
||
{ rotation: "+=360", repeat: -1, duration: 7, ease: "none" }
|
||
);
|
||
musicBtnAni.play();
|
||
};
|
||
|
||
|
||
// 音乐播放
|
||
const musicBtnAni = gsap.timeline();
|
||
const playStatu = ref(true);
|
||
const musicPlay = () => {
|
||
let audio = document.getElementById("bg-music");
|
||
if (playStatu.value == true) {
|
||
musicBtnAni.pause();
|
||
audio.pause();
|
||
playStatu.value = false;
|
||
console.log("暂停");
|
||
} else {
|
||
musicBtnAni.play();
|
||
audio.play();
|
||
playStatu.value = true;
|
||
console.log("播放");
|
||
}
|
||
};
|
||
|
||
const firstClick = () => {
|
||
let audio = document.getElementById("bg-music");
|
||
|
||
musicBtnAni.play();
|
||
audio.play();
|
||
playStatu.value = true;
|
||
console.log("播放");
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
#app {
|
||
overflow: hidden;
|
||
background: linear-gradient(135deg, #d6d1ca, #e5dccf);
|
||
font-family: "HarmonyOS_Sans_SC_Regular";
|
||
}
|
||
|
||
#__vconsole {
|
||
visibility: hidden;
|
||
}
|
||
|
||
|
||
.music_icon {
|
||
@include pos(60px, 60px, 50px, 245px);
|
||
@include bg_pos("music-on.png");
|
||
z-index: 99;
|
||
visibility: hidden;
|
||
}
|
||
|
||
.home {
|
||
@include pos(100%, 100vh, 0px, 0px);
|
||
overflow: hidden;
|
||
|
||
.home-container {
|
||
@include pos(750px, 1624px, 0px, 50%);
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
}
|
||
|
||
|
||
// 音乐-on样式
|
||
.music-on {
|
||
@include bg_pos("music-on.png");
|
||
}
|
||
|
||
// 音乐-off样式
|
||
.music-off {
|
||
@include bg_pos("music-off.png");
|
||
}
|
||
|
||
.orientationPop {
|
||
@include fixed();
|
||
@include flexCen();
|
||
background-color: rgba($color: #000000, $alpha: 1);
|
||
visibility: hidden;
|
||
}
|
||
|
||
.orientation-icon {
|
||
@include box(60px, 60px);
|
||
@include bg_pos("orientation-icon.png");
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.orientation-text {
|
||
color: #fff;
|
||
font-size: 30px;
|
||
margin-top: 10px;
|
||
}
|
||
</style>
|