|
|
@@ -1,21 +1,40 @@
|
|
|
<template>
|
|
|
- <transition appear name="custom-classes-transition" leave-active-class="animated fadeOut faster">
|
|
|
- <div v-if="show" class="scene-opening" @touchmove.prevent>
|
|
|
-
|
|
|
- <div class="videocon"></div>
|
|
|
- <div class="imgcon" :style="{
|
|
|
- backgroundImage: `url(${coverData.coverPc})`,
|
|
|
- backgroundSize: coverData.coverPcLoc == 'center' ? 'contain' : 'cover'
|
|
|
- }">
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- </transition>
|
|
|
+ <!-- 视频 -->
|
|
|
+ <div class="videocon" :class="{ zidxhigh: coverData.coverVideoOrder == 'before' }"
|
|
|
+ v-if="coverData.coverSelect.indexOf('video') > -1 && showVideo" :style="{
|
|
|
+ backgroundColor: `${coverData.videoColorSelec}`,
|
|
|
+ }">
|
|
|
+ <video v-if="coverData.videoPc" x5-playsinline="true" playsinline="true" webkit-playsinline="true" class="video"
|
|
|
+ ref="openvideo$" preload autoplay :poster="coverData.videoPcIcon"
|
|
|
+ :class="coverData.videoPcLoc == 'center' ? 'contain' : 'cover'" :src="coverData.videoPc"
|
|
|
+ :controls="Boolean(coverData.coverVideoControl)"></video>
|
|
|
+ <img v-show="bofanging" @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"
|
|
|
+ :style="{
|
|
|
+ backgroundImage: `url(${coverData.coverPc})`,
|
|
|
+ backgroundColor: `${coverData.imgColorSelec}`,
|
|
|
+ backgroundSize: coverData.coverPcLoc == 'center' ? 'contain' : 'cover'
|
|
|
+ }">
|
|
|
+ <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 } from "vue";
|
|
|
import { useStore } from "vuex";
|
|
|
import { useApp } from "@/app";
|
|
|
+import { useI18n, getLocale } from "@/i18n";
|
|
|
+
|
|
|
+const { t } = useI18n({ useScope: "global" });
|
|
|
|
|
|
const props = defineProps({
|
|
|
coverData: {
|
|
|
@@ -24,43 +43,218 @@ const props = defineProps({
|
|
|
}
|
|
|
});
|
|
|
const store = useStore();
|
|
|
+const openvideo$ = ref(null);
|
|
|
+const bofanging = 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"]);
|
|
|
|
|
|
-useApp().then((app) => {
|
|
|
- app.Scene.on("ready", () => {
|
|
|
- if (show.value) {
|
|
|
- show.value = false;
|
|
|
+const closeImg = (isCall = false) => {
|
|
|
+ useApp().then((app) => {
|
|
|
+ showImg.value = false;
|
|
|
+ if (props.coverData.coverSelect.toLowerCase().indexOf('and') > -1) {
|
|
|
+ if (props.coverData.coverVideoOrder == 'later') {
|
|
|
+ showVideo.value = true
|
|
|
+ showVideoDaoji()
|
|
|
+ }
|
|
|
+ } 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);
|
|
|
+}
|
|
|
+
|
|
|
+jumpVideo = (isCall = false) => {
|
|
|
+ closeVideo(isCall)
|
|
|
+ if (isCall) {
|
|
|
+ showImg.value = true
|
|
|
+ showImgDaoji()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 执行图片封面
|
|
|
+executeImg = () => {
|
|
|
+ showImgDaoji(() => {
|
|
|
+ closeImg()
|
|
|
+
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ console.log(props.coverData);
|
|
|
+ switch (true) {
|
|
|
+ case props.coverData.coverSelect.toLowerCase().indexOf('and') > -1:
|
|
|
+ if (props.coverData.coverVideoOrder == 'before') {
|
|
|
+ // 倒计时结束需要唤起图片
|
|
|
+ showVideoDaoji(true)
|
|
|
+ showImg.value = false
|
|
|
+ } else {
|
|
|
+ showImgDaoji(true)
|
|
|
+ showVideo.value = false
|
|
|
+ }
|
|
|
+
|
|
|
+ break;
|
|
|
+ case props.coverData.coverSelect.toLowerCase().indexOf('video') > -1:
|
|
|
+
|
|
|
+ break;
|
|
|
+ case props.coverData.coverSelect.toLowerCase().indexOf('img') > -1:
|
|
|
+
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ if (props.coverData.coverSelect) {
|
|
|
+
|
|
|
+ }
|
|
|
+ if (openvideo$.value) {
|
|
|
+ openvideo$.value.addEventListener("ended", () => {
|
|
|
+ if (props.coverData.coverVideoInWay) {
|
|
|
+ closeVideo()
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ openvideo$.value.addEventListener("playing", () => {
|
|
|
+ if (bofanging.value) {
|
|
|
+ bofanging.value = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ openvideo$.value.addEventListener("pause", () => {
|
|
|
+ if (!bofanging.value) {
|
|
|
+ bofanging.value = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ document.addEventListener(
|
|
|
+ "WeixinJSBridgeReady",
|
|
|
+ () => {
|
|
|
+ openvideo$.value.play();
|
|
|
+ },
|
|
|
+ false
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+}),
|
|
|
+
|
|
|
+ useApp().then((app) => {
|
|
|
+ app.Scene.on("ready", () => {
|
|
|
+ if (show.value) {
|
|
|
+ show.value = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
-.scene-opening {
|
|
|
- display: table;
|
|
|
- table-layout: fixed;
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
- z-index: 111;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: 50%;
|
|
|
- background-size: cover;
|
|
|
- background-color: rgba($color: #000000, $alpha: 0.1);
|
|
|
+.imgcon,
|
|
|
+.videocon {
|
|
|
position: fixed;
|
|
|
- top: 0;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
+ top: 0;
|
|
|
bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
|
|
|
- .imgcon {
|
|
|
- width: 100%;
|
|
|
+.imgcon {
|
|
|
+ background-position: center;
|
|
|
+ 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%;
|
|
|
- background-position: center;
|
|
|
}
|
|
|
|
|
|
- .videocon {}
|
|
|
+ .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 {
|
tremble
