|
|
@@ -1,337 +0,0 @@
|
|
|
-<template>
|
|
|
- <!-- 视频 -->
|
|
|
- <div
|
|
|
- class="videocon"
|
|
|
- v-if="coverData.coverSelect.indexOf('video') > -1 && showVideo"
|
|
|
- :style="{
|
|
|
- backgroundColor: `${coverData.videoColorSelec}`,
|
|
|
- }"
|
|
|
- >
|
|
|
- <video
|
|
|
- v-if="coverData.videoMo"
|
|
|
- x5-playsinline="true"
|
|
|
- playsinline="true"
|
|
|
- webkit-playsinline="true"
|
|
|
- class="video"
|
|
|
- ref="openvideo$"
|
|
|
- preload
|
|
|
- autoplay
|
|
|
- :poster="coverData.videoMoIcon"
|
|
|
- :class="coverData.videoMoLoc == 'center' ? 'contain' : 'cover'"
|
|
|
- :src="coverData.videoMo"
|
|
|
- :controls="Boolean(coverData.coverVideoControl)"
|
|
|
- muted
|
|
|
- ></video>
|
|
|
-
|
|
|
- <img
|
|
|
- v-show="playing"
|
|
|
- @click.stop="bofang"
|
|
|
- class="bofang"
|
|
|
- :src="require('@/assets/images/default/bofang.png')"
|
|
|
- alt=""
|
|
|
- />
|
|
|
-
|
|
|
- <div @click.stop="jumpVideo" class="jump">
|
|
|
- {{
|
|
|
- countdownVideo > 0
|
|
|
- ? $t("common.jumpTips", { second: countdownVideo })
|
|
|
- : $t("common.jump")
|
|
|
- }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 图片 -->
|
|
|
-
|
|
|
- <div
|
|
|
- class="imgcon"
|
|
|
- v-if="coverData.coverSelect.toLowerCase().indexOf('img') > -1 && showImg"
|
|
|
- @click="closeImg"
|
|
|
- >
|
|
|
- <div
|
|
|
- @click="closeImg"
|
|
|
- class="image-front"
|
|
|
- :style="{
|
|
|
- backgroundImage: `url(${coverData.coverPc})`,
|
|
|
- backgroundSize: coverData.coverMoLoc == 'center' ? 'contain' : 'cover',
|
|
|
- }"
|
|
|
- ></div>
|
|
|
- <div
|
|
|
- class="img-background"
|
|
|
- v-if="coverData.coverMoLoc !== 'full'"
|
|
|
- :style="{
|
|
|
- backgroundImage:
|
|
|
- coverData.coverImgBac == 'imgTile'
|
|
|
- ? `url(${coverData.coverBac})`
|
|
|
- : `none`,
|
|
|
- backgroundColor:
|
|
|
- coverData.coverImgBac == 'imgTile'
|
|
|
- ? `none`
|
|
|
- : `${coverData.imgColorSelec}`,
|
|
|
- }"
|
|
|
- ></div>
|
|
|
- <div @click.stop="closeImg" class="jump">
|
|
|
- {{
|
|
|
- countdownImg > 0
|
|
|
- ? $t("common.jumpTips", { second: countdownImg })
|
|
|
- : $t("common.jump")
|
|
|
- }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-<script setup>
|
|
|
-import { ref, watch, computed, onMounted, defineProps, unref } from "vue";
|
|
|
-import { useStore } from "vuex";
|
|
|
-import { useApp } from "@/app";
|
|
|
-import { useI18n, getLocale } from "@/i18n";
|
|
|
-
|
|
|
-const { t } = useI18n({ useScope: "global" });
|
|
|
-
|
|
|
-const props = defineProps({
|
|
|
- coverData: {
|
|
|
- type: [Boolean, Object],
|
|
|
- default: () => {
|
|
|
- return {};
|
|
|
- },
|
|
|
- },
|
|
|
-});
|
|
|
-const store = useStore();
|
|
|
-const openvideo$ = ref(null);
|
|
|
-const playing = ref(true);
|
|
|
-
|
|
|
-const show = ref(true);
|
|
|
-const countdownImg = ref(3);
|
|
|
-const countdownVideo = ref(3);
|
|
|
-const timer = ref(null);
|
|
|
-
|
|
|
-const showVideo = ref(true);
|
|
|
-const showImg = ref(true);
|
|
|
-
|
|
|
-const currentScene = computed(() => store.getters["scene/currentScene"]);
|
|
|
-
|
|
|
-const closeImg = (isCall = false) => {
|
|
|
- useApp().then((app) => {
|
|
|
- showImg.value = false;
|
|
|
- if (props.coverData.coverSelect.toLowerCase().indexOf("and") > -1) {
|
|
|
- if (props.coverData.coverImageOrder == "later") {
|
|
|
- showVideo.value = true;
|
|
|
- showVideoDaoji();
|
|
|
- }
|
|
|
- app.render();
|
|
|
- } else {
|
|
|
- app.render();
|
|
|
- }
|
|
|
- });
|
|
|
-};
|
|
|
-
|
|
|
-const closeVideo = (isCall = false) => {
|
|
|
- useApp().then((app) => {
|
|
|
- showVideo.value = false;
|
|
|
- if (!isCall) {
|
|
|
- app.render();
|
|
|
- }
|
|
|
- });
|
|
|
-};
|
|
|
-
|
|
|
-const showImgDaoji = (cb = () => {}) => {
|
|
|
- timer.value = setInterval(() => {
|
|
|
- countdownImg.value--;
|
|
|
- if (countdownImg.value == 0) {
|
|
|
- clearInterval(timer.value);
|
|
|
- timer.value = null;
|
|
|
- cb();
|
|
|
-
|
|
|
- return;
|
|
|
- }
|
|
|
- }, 1000);
|
|
|
-};
|
|
|
-
|
|
|
-const showVideoDaoji = (isCall = false) => {
|
|
|
- timer.value = setInterval(() => {
|
|
|
- countdownVideo.value--;
|
|
|
- if (countdownVideo.value == 0) {
|
|
|
- clearInterval(timer.value);
|
|
|
- timer.value = null;
|
|
|
- return;
|
|
|
- }
|
|
|
- }, 1000);
|
|
|
-};
|
|
|
-
|
|
|
-const jumpVideo = (isCall = false) => {
|
|
|
- closeVideo(isCall);
|
|
|
- if (isCall) {
|
|
|
- showImg.value = true;
|
|
|
- showImgDaoji();
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-// 执行图片封面
|
|
|
-const executeImg = () => {
|
|
|
- showImgDaoji(() => {
|
|
|
- closeImg();
|
|
|
- });
|
|
|
-};
|
|
|
-
|
|
|
-onMounted(() => {
|
|
|
- console.log("coverData", unref(props.coverData));
|
|
|
- switch (true) {
|
|
|
- case props.coverData.coverSelect.toLowerCase().indexOf("and") > -1:
|
|
|
- if (props.coverData.coverImageOrder == "before") {
|
|
|
- // 倒计时结束需要唤起图片
|
|
|
- showVideoDaoji(true);
|
|
|
- showImg.value = false;
|
|
|
- } else {
|
|
|
- showImgDaoji(true);
|
|
|
- showVideo.value = false;
|
|
|
- }
|
|
|
-
|
|
|
- break;
|
|
|
- case props.coverData.coverSelect.toLowerCase().indexOf("video") > -1:
|
|
|
- showVideoDaoji(() => {
|
|
|
- props.coverData.coverVideoInWay == 1 && closeVideo();
|
|
|
- });
|
|
|
- break;
|
|
|
- case props.coverData.coverSelect.toLowerCase().indexOf("img") > -1:
|
|
|
- showImgDaoji(() => {
|
|
|
- props.coverData.coverImageInWay == 1 && closeImg();
|
|
|
- });
|
|
|
- break;
|
|
|
- default:
|
|
|
- break;
|
|
|
- }
|
|
|
- if (props.coverData.coverSelect) {
|
|
|
- }
|
|
|
-
|
|
|
- if (openvideo$.value) {
|
|
|
- openvideo$.value.addEventListener("ended", () => {
|
|
|
- if (props.coverData.coverVideoInWay) {
|
|
|
- closeVideo();
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- openvideo$.value.addEventListener("playing", () => {
|
|
|
- if (playing.value) {
|
|
|
- playing.value = false;
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- openvideo$.value.addEventListener("pause", () => {
|
|
|
- if (!playing.value) {
|
|
|
- playing.value = true;
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- document.addEventListener(
|
|
|
- "WeixinJSBridgeReady",
|
|
|
- () => {
|
|
|
- console.log("WeixinJSBridgeReady", openvideo$.value);
|
|
|
- openvideo$.value.play();
|
|
|
- },
|
|
|
- false
|
|
|
- );
|
|
|
- }
|
|
|
-}),
|
|
|
- useApp().then((app) => {
|
|
|
- app.Scene.on("ready", () => {
|
|
|
- if (show.value) {
|
|
|
- show.value = false;
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
-</script>
|
|
|
-<style lang="scss" scoped>
|
|
|
-.imgcon,
|
|
|
-.videocon {
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- top: 0;
|
|
|
- bottom: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.imgcon {
|
|
|
- background-position: center;
|
|
|
- z-index: 10;
|
|
|
- .image-front,
|
|
|
- .img-background {
|
|
|
- background-position: center;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: absolute;
|
|
|
-
|
|
|
- top: 0;
|
|
|
- z-index: 1;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- }
|
|
|
- .img-background {
|
|
|
- background-repeat: repeat;
|
|
|
- }
|
|
|
- .image-front {
|
|
|
- z-index: 10;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.videocon {
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- > video {
|
|
|
- max-width: inherit;
|
|
|
- height: auto;
|
|
|
- min-height: 100%;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- z-index: 99;
|
|
|
- display: inline-block;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- position: absolute;
|
|
|
- }
|
|
|
-
|
|
|
- .contain {
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .cover {
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
- object-fit: cover;
|
|
|
- }
|
|
|
-
|
|
|
- .bofang {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- left: 50%;
|
|
|
- width: 80px;
|
|
|
- height: 80px;
|
|
|
- z-index: 99999;
|
|
|
- pointer-events: none;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.zidxhigh {
|
|
|
- z-index: 99;
|
|
|
-}
|
|
|
-
|
|
|
-.jump {
|
|
|
- position: absolute;
|
|
|
- right: 15px;
|
|
|
- top: 20px;
|
|
|
- background: rgba(255, 255, 255, 0.5);
|
|
|
- text-align: center;
|
|
|
- line-height: 28px;
|
|
|
- font-size: 16px;
|
|
|
- z-index: 999;
|
|
|
- color: #333333;
|
|
|
- border-radius: 1px;
|
|
|
- padding: 4px 12px;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes loading {
|
|
|
- 100% {
|
|
|
- left: -900px;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
gemercheung