|
@@ -1,32 +1,64 @@
|
|
|
<template>
|
|
|
<!-- 视频 -->
|
|
|
- <div class="videocon" :class="{ zidxhigh: coverData.coverVideoOrder == 'before' }"
|
|
|
- v-if="coverData.coverSelect.indexOf('video') > -1 && showVideo" :style="{
|
|
|
+ <div
|
|
|
+ class="videocon"
|
|
|
+ :class="{ zidxhigh: coverData.coverVideoOrder == 'before' }"
|
|
|
+ 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="bofanging" @click.stop="bofang" class="bofang" :src="require('@/assets/images/default/bofang.png')"
|
|
|
- alt="" />
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <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="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>
|
|
|
-
|
|
|
+ {{
|
|
|
+ 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
|
|
|
+ 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'
|
|
|
- }">
|
|
|
+ backgroundSize: coverData.coverPcLoc == 'center' ? 'contain' : 'cover',
|
|
|
+ }"
|
|
|
+ >
|
|
|
<div @click.stop="closeImg" class="jump">
|
|
|
- {{ countdownImg> 0 ? $t('common.jumpTips', { second: countdownImg }) : $t('common.jump') }}</div>
|
|
|
-
|
|
|
+ {{
|
|
|
+ countdownImg > 0
|
|
|
+ ? $t("common.jumpTips", { second: countdownImg })
|
|
|
+ : $t("common.jump")
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup>
|
|
@@ -39,9 +71,11 @@ const { t } = useI18n({ useScope: "global" });
|
|
|
|
|
|
const props = defineProps({
|
|
|
coverData: {
|
|
|
- type: [Boolean,Object],
|
|
|
- default: () => { return {} },
|
|
|
- }
|
|
|
+ type: [Boolean, Object],
|
|
|
+ default: () => {
|
|
|
+ return {};
|
|
|
+ },
|
|
|
+ },
|
|
|
});
|
|
|
const store = useStore();
|
|
|
const openvideo$ = ref(null);
|
|
@@ -60,98 +94,94 @@ 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.coverVideoOrder == 'later') {
|
|
|
- showVideo.value = true
|
|
|
- showVideoDaoji()
|
|
|
+ if (props.coverData.coverSelect.toLowerCase().indexOf("and") > -1) {
|
|
|
+ if (props.coverData.coverVideoOrder == "later") {
|
|
|
+ showVideo.value = true;
|
|
|
+ showVideoDaoji();
|
|
|
}
|
|
|
- app.render()
|
|
|
+ app.render();
|
|
|
} else {
|
|
|
- app.render()
|
|
|
+ app.render();
|
|
|
}
|
|
|
});
|
|
|
-}
|
|
|
+};
|
|
|
|
|
|
const closeVideo = (isCall = false) => {
|
|
|
useApp().then((app) => {
|
|
|
showVideo.value = false;
|
|
|
if (!isCall) {
|
|
|
- app.render()
|
|
|
+ app.render();
|
|
|
}
|
|
|
});
|
|
|
-}
|
|
|
+};
|
|
|
|
|
|
-const showImgDaoji = (cb = () => { }) => {
|
|
|
+const showImgDaoji = (cb = () => {}) => {
|
|
|
timer.value = setInterval(() => {
|
|
|
- countdownImg.value--
|
|
|
+ countdownImg.value--;
|
|
|
if (countdownImg.value == 0) {
|
|
|
- clearInterval(timer.value)
|
|
|
- timer.value = null
|
|
|
- cb()
|
|
|
+ clearInterval(timer.value);
|
|
|
+ timer.value = null;
|
|
|
+ cb();
|
|
|
|
|
|
- return
|
|
|
+ return;
|
|
|
}
|
|
|
}, 1000);
|
|
|
-}
|
|
|
+};
|
|
|
|
|
|
const showVideoDaoji = (isCall = false) => {
|
|
|
timer.value = setInterval(() => {
|
|
|
- countdownVideo.value--
|
|
|
+ countdownVideo.value--;
|
|
|
if (countdownVideo.value == 0) {
|
|
|
- clearInterval(timer.value)
|
|
|
- timer.value = null
|
|
|
- return
|
|
|
+ clearInterval(timer.value);
|
|
|
+ timer.value = null;
|
|
|
+ return;
|
|
|
}
|
|
|
}, 1000);
|
|
|
-}
|
|
|
+};
|
|
|
|
|
|
const jumpVideo = (isCall = false) => {
|
|
|
- closeVideo(isCall)
|
|
|
+ closeVideo(isCall);
|
|
|
if (isCall) {
|
|
|
- showImg.value = true
|
|
|
- showImgDaoji()
|
|
|
+ showImg.value = true;
|
|
|
+ showImgDaoji();
|
|
|
}
|
|
|
-}
|
|
|
+};
|
|
|
|
|
|
// 执行图片封面
|
|
|
const executeImg = () => {
|
|
|
showImgDaoji(() => {
|
|
|
- closeImg()
|
|
|
-
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
+ closeImg();
|
|
|
+ });
|
|
|
+};
|
|
|
|
|
|
onMounted(() => {
|
|
|
- console.log('coverData',unref(props.coverData));
|
|
|
+ console.log("coverData", unref(props.coverData));
|
|
|
switch (true) {
|
|
|
- case props.coverData.coverSelect.toLowerCase().indexOf('and') > -1:
|
|
|
- if (props.coverData.coverVideoOrder == 'before') {
|
|
|
+ case props.coverData.coverSelect.toLowerCase().indexOf("and") > -1:
|
|
|
+ if (props.coverData.coverVideoOrder == "before") {
|
|
|
// 倒计时结束需要唤起图片
|
|
|
- showVideoDaoji(true)
|
|
|
- showImg.value = false
|
|
|
+ showVideoDaoji(true);
|
|
|
+ showImg.value = false;
|
|
|
} else {
|
|
|
- showImgDaoji(true)
|
|
|
- showVideo.value = false
|
|
|
+ showImgDaoji(true);
|
|
|
+ showVideo.value = false;
|
|
|
}
|
|
|
|
|
|
break;
|
|
|
- case props.coverData.coverSelect.toLowerCase().indexOf('video') > -1:
|
|
|
-
|
|
|
+ case props.coverData.coverSelect.toLowerCase().indexOf("video") > -1:
|
|
|
break;
|
|
|
- case props.coverData.coverSelect.toLowerCase().indexOf('img') > -1:
|
|
|
-
|
|
|
+ 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()
|
|
|
+ closeVideo();
|
|
|
}
|
|
|
});
|
|
|
|
|
@@ -168,17 +198,15 @@ onMounted(() => {
|
|
|
});
|
|
|
|
|
|
document.addEventListener(
|
|
|
- "WeixinJSBridgeReady",
|
|
|
- () => {
|
|
|
- window.alert('weixin');
|
|
|
- openvideo$.value.play();
|
|
|
- },
|
|
|
- false
|
|
|
- );
|
|
|
+ "WeixinJSBridgeReady",
|
|
|
+ () => {
|
|
|
+ console.log("WeixinJSBridgeReady", openvideo$.value);
|
|
|
+ openvideo$.value.play();
|
|
|
+ },
|
|
|
+ false
|
|
|
+ );
|
|
|
}
|
|
|
-
|
|
|
}),
|
|
|
-
|
|
|
useApp().then((app) => {
|
|
|
app.Scene.on("ready", () => {
|
|
|
if (show.value) {
|
|
@@ -207,7 +235,7 @@ onMounted(() => {
|
|
|
.videocon {
|
|
|
text-align: center;
|
|
|
|
|
|
- >video {
|
|
|
+ > video {
|
|
|
max-width: inherit;
|
|
|
height: auto;
|
|
|
min-height: 100%;
|