palc-newyear2024/src/page/Home/App.vue

<template>
  <div class="home" @click.once="playMusic">
    <Index v-if="showIndex" @IndexPage="indexFn"></Index>
    <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>
</template>

<script setup>
import gsap from "gsap";
import Loading from "@/components/Loading";
import Index from "@/components/Index";
import Question from "@/components/Question";
import MyPrize from "@/components/MyPrize";
import Draw from "@/components/Draw";
import Result from "@/components/Result";
import Rule from "@/components/Rule";
import {
  createBGM,
  getQueryString,
  screenOrientation,
  isAndriod,
  fontAdpat,
} from "@/plugins";
import { authorize, getUserInfo } from "@/api";
import { Toast } from "vant";
import { useMainStore } from "@/store";

const userStore = useMainStore();

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") {
    showQuestion.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 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;
  }
  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);
          createBGM();
          // 开始加载组件
          showLoad.value = true;

          // ios自动播放音乐
          document.addEventListener("DOMContentLoaded", function () {
            function audioAutoPlay() {
              var audio = document.getElementById("musicBtn");
              audio.play();
              document.addEventListener(
                "WeixinJSBridgeReady",
                function () {
                  WeixinJSBridge.invoke("getNetworkType", {}, function (e) {
                    audio.play();
                  });
                },
                false
              );
            }
            audioAutoPlay();
          });
          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;
    createBGM();
  }
});

const playMusic = () => {
  var audioEle = document.getElementById("audio");
  audioEle.play();
};
</script>

<style lang="scss" >
#app {
  overflow: hidden;
  background: linear-gradient(135deg, #a11b15, #f80c00);
}

#__vconsole {
  visibility: hidden;
}

#musicBtn {
  @include pos(60px, 60px, 50px, 35px);
  z-index: 99;
}

// 音乐-on样式
.music-on {
  @include bg_pos("music-on.png");
}

// 音乐-off样式
.music-off {
  @include bg_pos("music-off.png");
}

.home {
  @include box(750px, 100vh);
  overflow: hidden;
  margin: 0 auto;
}

.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>