update

packages/qjkankan-editor/src/lang/_en.json

@@ -694,9 +694,9 @@
     "coverVideoInWayTit":"视频播放完自动进入",
     "coverVideoControl":"视频控件",
     "coverVideoControlTit":"视频控件是否显示",
-    "coverVideoOrder":"出现顺序",
-    "coverVideoOrderTit1":"开场图片先出现",
-    "coverVideoOrderTit2":"开场图片后出现",
+    "coverImageOrder":"出现顺序",
+    "coverImageOrderTit1":"开场图片先出现",
+    "coverImageOrderTit2":"开场图片后出现",
     "auto_pano": "Rotation",
     "enter_auto": "Enter the rotation mode (takes 3 mins to complete per rotation)",
     "set_bgm": "Set the BGM",

packages/qjkankan-editor/src/lang/_zh.json

@@ -696,9 +696,9 @@
     "coverVideoInWayTit":"视频播放完自动进入",
     "coverVideoControl":"视频控件",
     "coverVideoControlTit":"视频控件是否显示",
-    "coverVideoOrder":"出现顺序",
-    "coverVideoOrderTit1":"开场图片先出现",
-    "coverVideoOrderTit2":"开场图片后出现",
+    "coverImageOrder":"出现顺序",
+    "coverImageOrderTit1":"开场图片先出现",
+    "coverImageOrderTit2":"开场图片后出现",
     "auto_pano": "自动巡游",
     "enter_auto": "进入全景图自动巡游（3分钟完整巡游一次）",
     "set_bgm": "设置背景音乐",

packages/qjkankan-editor/src/views/base/coverBase.vue

@@ -61,7 +61,7 @@ pc端视频位置 videoPcLoc
 	0：不显示
 	1：显示
 
-视频的出场顺序 coverVideoOrder
+视频的出场顺序 coverImageOrder
 	before：开场图片前
 	later：开场图片后
  -->
@@ -466,11 +466,11 @@ pc端视频位置 videoPcLoc
         <!-- 出现顺序 -->
 
         <div class="coverImgTit" v-show="info.coverInfo.coverSelect === 'videoAndImg'">
-          {{ $i18n.t(`edit_settings.coverVideoOrder`) }}
+          {{ $i18n.t(`edit_settings.coverImageOrder`) }}
         </div>
-        <Select v-model="info.coverInfo.coverVideoOrder" v-show="info.coverInfo.coverSelect === 'videoAndImg'">
+        <Select v-model="info.coverInfo.coverImageOrder" v-show="info.coverInfo.coverSelect === 'videoAndImg'">
           <Option
-            v-for="item in coverVideoOrderList"
+            v-for="item in coverImageOrderList"
             :key="item.type"
             :label="item.txt"
             :value="item.type"
@@ -570,7 +570,7 @@ export default {
         // 视频控件是否显示
         coverVideoControl: 0,
         // 视频的出现顺序
-        coverVideoOrder: "before",
+        coverImageOrder: "before",
         isShowCover: 0,
       },
       coverImgBacList: [
@@ -592,9 +592,9 @@ export default {
       isShowSelectionWindow: false,
       selectingFor: "", // 'pc', 'mobile'
 
-      coverVideoOrderList: [
-        { txt: i18n.t("edit_settings.coverVideoOrderTit1"), type: "before" },
-        { txt: i18n.t("edit_settings.coverVideoOrderTit2"), type: "later" },
+      coverImageOrderList: [
+        { txt: i18n.t("edit_settings.coverImageOrderTit1"), type: "before" },
+        { txt: i18n.t("edit_settings.coverImageOrderTit2"), type: "later" },
       ],
     };
   },

packages/qjkankan-view/src/components/UIGather/mobile/list.vue

@@ -1,51 +1,120 @@
 <template>
-  <div class="bar-list"
-    v-if="show && !((metadata.catalogRoot && metadata.catalogRoot.length == 1) && scenes.length == 1 && secondaryList.length == 1)"
-    :class="{ barshow: isShowScenesList }">
+  <div
+    class="bar-list"
+    v-if="
+      show &&
+      !(
+        metadata.catalogRoot &&
+        metadata.catalogRoot.length == 1 &&
+        scenes.length == 1 &&
+        secondaryList.length == 1
+      )
+    "
+    :class="{ barshow: isShowScenesList }"
+  >
     <div class="top-con">
-      <div class="swiper-container" id="swScenes" :style="`width:${Math.min(scenesListW, innerW)}px;
-      padding:${scenesListW > innerW ? '0 15px' : '0'}`" v-if="currentScenesList.length > 0">
+      <div
+        class="swiper-container"
+        id="swScenes"
+        :style="`width:${Math.min(scenesListW, innerW)}px;
+      padding:${scenesListW > innerW ? '0 15px' : '0'}`"
+        v-if="currentScenesList.length > 0"
+      >
         <ul class="swiper-wrapper">
-          <li @click="tabCurrentScene(item)" class="swiper-slide" :class="{
-            active: currentScene.sceneCode == item.sceneCode,
-            loopspan: item.sceneTitle.length > spanlength && currentScene.id == item.id,
-          }" :style="{ backgroundImage: `url(${item.icon})` }" v-for="(item, i) in currentScenesList" :key="i">
-            <i class="iconfont " :class="item.type == '4dkk' ? 'icon-editor_3d' : 'icon-editor_panoramic'"></i>
+          <li
+            @click="tabCurrentScene(item)"
+            class="swiper-slide"
+            :class="{
+              active: currentScene.sceneCode == item.sceneCode,
+              loopspan:
+                item.sceneTitle.length > spanlength &&
+                currentScene.id == item.id,
+            }"
+            :style="{ backgroundImage: `url(${item.icon})` }"
+            v-for="(item, i) in currentScenesList"
+            :key="i"
+          >
+            <i
+              class="iconfont"
+              :class="
+                item.type == '4dkk' ? 'icon-editor_3d' : 'icon-editor_panoramic'
+              "
+            ></i>
             <div>
-              <span v-if="currentScene.id == item.id">{{ item.sceneTitle }}</span>
-              <span v-else>{{ item.sceneTitle.length > spanlength ? item.sceneTitle.slice(0, spanlength) :
-                  item.sceneTitle
+              <span v-if="currentScene.id == item.id">{{
+                item.sceneTitle
+              }}</span>
+              <span v-else>{{
+                item.sceneTitle.length > spanlength
+                  ? item.sceneTitle.slice(0, spanlength)
+                  : item.sceneTitle
               }}</span>
             </div>
           </li>
         </ul>
       </div>
 
-      <div class="swiper-container" id="swSecondary" :style="`width:${Math.min(secondaryW, innerW)}px;
-      padding:${secondaryW > innerW ? '0 15px' : '0'}`" v-if="secondaryList.length > 1">
+      <div
+        class="swiper-container"
+        id="swSecondary"
+        :style="`width:${Math.min(secondaryW, innerW)}px;
+      padding:${secondaryW > innerW ? '0 15px' : '0'}`"
+        v-if="secondaryList.length > 1"
+      >
         <ul class="swiper-wrapper">
-          <li class="swiper-slide" @click="tabSecondary(item)" :class="{
-            active: currentSecondary.id == item.id,
-            loopspan: fixTitle(item.name).length > spanlength && currentSecondary.id == item.id,
-          }" v-for="(item, i) in secondaryList" :key="i">
-            <span v-if="currentSecondary.id == item.id">{{ fixTitle(item.name) }}</span>
-            <span v-else>{{ fixTitle(item.name).length > spanlength ? fixTitle(item.name).slice(0, spanlength) : fixTitle(item.name) }}</span>
+          <li
+            class="swiper-slide"
+            @click="tabSecondary(item)"
+            :class="{
+              active: currentSecondary.id == item.id,
+              loopspan:
+                fixTitle(item.name).length > spanlength &&
+                currentSecondary.id == item.id,
+            }"
+            v-for="(item, i) in secondaryList"
+            :key="i"
+          >
+            <span v-if="currentSecondary.id == item.id">{{
+              fixTitle(item.name)
+            }}</span>
+            <span v-else>{{
+              fixTitle(item.name).length > spanlength
+                ? fixTitle(item.name).slice(0, spanlength)
+                : fixTitle(item.name)
+            }}</span>
           </li>
         </ul>
       </div>
     </div>
 
-    <div class="swiper-container" id="swcatalogRoot" :style="`width:${Math.min(catalogRootW, innerW)}px;
+    <div
+      class="swiper-container"
+      id="swcatalogRoot"
+      :style="`width:${Math.min(catalogRootW, innerW)}px;
     padding:${catalogRootW > innerW ? '0 15px' : '0'}`"
-      v-if="metadata.catalogRoot.length > 0 && metadata.catalogs.length > 1">
+      v-if="metadata.catalogRoot.length > 0 && metadata.catalogs.length > 1"
+    >
       <ul class="swiper-wrapper" v-show="metadata.catalogRoot.length > 1">
-        <li class="swiper-slide" :class="{
-          active: currentCatalogRoot.id == item.id,
-          loopspan: fixTitle(item.name).length > spanlength && currentCatalogRoot.id == item.id,
-        }" @click="tabRoot(item)" v-for="(item, i) in metadata.catalogRoot" :key="i">
-          <span v-if="currentCatalogRoot.id == item.id">{{ fixTitle(item.name) }}</span>
-          <span v-else>{{ fixTitle(item.name).length > spanlength ? fixTitle(item.name).slice(0, spanlength) : fixTitle(item.name) }}</span>
-
+        <li
+          class="swiper-slide"
+          :class="{
+            active: currentCatalogRoot.id == item.id,
+            loopspan:
+              fixTitle(item.name).length > spanlength &&
+              currentCatalogRoot.id == item.id,
+          }"
+          @click="tabRoot(item)"
+          v-for="(item, i) in metadata.catalogRoot"
+          :key="i"
+        >
+          <span v-if="currentCatalogRoot.id == item.id">{{
+            fixTitle(item.name)
+          }}</span>
+          <span v-else>{{
+            fixTitle(item.name).length > spanlength
+              ? fixTitle(item.name).slice(0, spanlength)
+              : fixTitle(item.name)
+          }}</span>
         </li>
       </ul>
     </div>
@@ -56,8 +125,8 @@
 import { ref, watch, computed, onMounted, nextTick } from "vue";
 import { useStore } from "vuex";
 import { useApp } from "@/app";
-import { useI18n, getLocale } from '@/i18n'
-const { t } = useI18n({ useScope: 'global' })
+import { useI18n, getLocale } from "@/i18n";
+const { t } = useI18n({ useScope: "global" });
 
 const store = useStore();
 
@@ -67,29 +136,42 @@ const metadata = computed(() => store.getters["scene/metadata"]);
 const scenes = computed(() => store.getters["scene/list"]);
 const currentScene = computed(() => store.getters["scene/currentScene"]);
 
-const currentCatalogRoot = computed(() => store.getters["scene/currentCatalogRoot"]);
-const currentSecondary = computed(() => store.getters["scene/currentSecondary"]);
+const currentCatalogRoot = computed(
+  () => store.getters["scene/currentCatalogRoot"]
+);
+const currentSecondary = computed(
+  () => store.getters["scene/currentSecondary"]
+);
 
 const secondaryList = computed(() => store.getters["scene/secondaryList"]);
 
-const isShowScenesList = computed(() => store.getters["functions/isShowScenesList"]);
-
-const currentScenesList = computed(() => store.getters["scene/currentScenesList"]);
+const isShowScenesList = computed(
+  () => store.getters["functions/isShowScenesList"]
+);
 
+const currentScenesList = computed(
+  () => store.getters["scene/currentScenesList"]
+);
 
 const swidth = ref({
-  "swcatalogRoot": 104,
-  "swSecondary": 84,
-  "swScenes": 72,
-})
-
-const innerW = computed(() => window.innerWidth)
-
-const scenesListW = computed(() => currentScenesList.value.length * (swidth.value['swScenes'] + 10) - 10)
-const secondaryW = computed(() => secondaryList.value.length * (swidth.value['swSecondary'] + 10) - 10)
-const catalogRootW = computed(() => metadata.value.catalogRoot.length * (swidth.value['swcatalogRoot'] + 10) - 10)
+  swcatalogRoot: 104,
+  swSecondary: 84,
+  swScenes: 72,
+});
 
+const innerW = computed(() => window.innerWidth);
 
+const scenesListW = computed(
+  () => currentScenesList.value.length * (swidth.value["swScenes"] + 10) - 10
+);
+const secondaryW = computed(
+  () => secondaryList.value.length * (swidth.value["swSecondary"] + 10) - 10
+);
+const catalogRootW = computed(
+  () =>
+    metadata.value.catalogRoot.length * (swidth.value["swcatalogRoot"] + 10) -
+    10
+);
 
 const show = ref(false);
 
@@ -106,15 +188,15 @@ const tabRoot = (data) => {
 };
 
 const fixTitle = (name) => {
-  if (name == '默认二级分组') {
-    name = t('navigation.default_group_two')
-  } else if (name == '一级分组') {
-    name = t('navigation.group_one')
+  if (name == "默认二级分组") {
+    name = t("navigation.default_group_two");
+  } else if (name == "一级分组") {
+    name = t("navigation.group_one");
   } else {
-    name = name
+    name = name;
   }
-  return name
-}
+  return name;
+};
 
 const loadList = () => {
   nextTick(() => {
@@ -129,11 +211,13 @@ const loadList = () => {
           centeredSlidesBounds: true,
           freeMode: true,
           observer: true,
-          observeParents:true
+          observeParents: true,
         });
-        if (item == '#swScenes') {
+        if (item == "#swScenes") {
           setTimeout(() => {
-            tmp && tmp.slideTo(0, 80, false)
+            if (tmp && "slideTo" in tmp) {
+              // tmp.slideTo(0, 80, false);
+            }
           }, 0);
         }
 
@@ -168,7 +252,7 @@ onMounted(() => {
   text-align: center;
   overflow: hidden;
   max-height: 0;
-  transition: .3s all ease;
+  transition: 0.3s all ease;
   z-index: 9;
   width: 100%;
 
@@ -177,29 +261,27 @@ onMounted(() => {
     position: relative;
     margin: 0 auto;
 
-    >ul {
-      >li {
+    > ul {
+      > li {
         white-space: nowrap;
 
-        >span,
-        >div>span {
+        > span,
+        > div > span {
           cursor: pointer;
           display: inline-block;
           color: rgba(255, 255, 255, 0.6);
         }
 
         &.loopspan {
-
-          >span,
-          >div>span {
+          > span,
+          > div > span {
             animation: 5s wordsLoop linear infinite normal;
           }
         }
 
         &.active {
-
-          >span,
-          >div>span {
+          > span,
+          > div > span {
             color: rgba(255, 255, 255, 1);
           }
         }
@@ -217,8 +299,8 @@ onMounted(() => {
   #swcatalogRoot {
     padding: 0 15px;
 
-    >ul {
-      >li {
+    > ul {
+      > li {
         width: 104px;
         background: rgba(0, 0, 0, 0.5);
         border-radius: 4px;
@@ -227,7 +309,7 @@ onMounted(() => {
         box-sizing: border-box;
         overflow: hidden;
 
-        >span {
+        > span {
           width: 100%;
           word-break: keep-all;
         }
@@ -243,14 +325,14 @@ onMounted(() => {
     margin: 20px auto 10px;
     padding: 0 15px;
 
-    >ul {
-      >li {
+    > ul {
+      > li {
         width: 84px;
         box-sizing: border-box;
         overflow: hidden;
         padding-bottom: 6px;
 
-        >span {
+        > span {
           width: 100%;
           word-break: keep-all;
         }
@@ -276,10 +358,9 @@ onMounted(() => {
   }
 
   #swScenes {
-
     // padding: 0 15px;
-    >ul {
-      >li {
+    > ul {
+      > li {
         cursor: pointer;
         width: 72px;
         height: 72px;
@@ -310,7 +391,7 @@ onMounted(() => {
           }
         }
 
-        >div {
+        > div {
           position: absolute;
           bottom: 0;
           left: 0;
@@ -319,7 +400,7 @@ onMounted(() => {
           width: 100%;
           overflow: hidden;
 
-          >span {
+          > span {
             width: 100%;
             line-height: 20px;
             word-break: keep-all;
@@ -329,8 +410,9 @@ onMounted(() => {
         &.active {
           border: 1px solid var(--colors-primary-base);
 
-          >div {
-            >span {}
+          > div {
+            > span {
+            }
           }
         }
       }

packages/qjkankan-view/src/components/assembly/Opening.vue

@@ -2,12 +2,26 @@
   <!-- 视频 -->
   <div
     class="videocon"
-    :class="{ zidxhigh: coverData.coverVideoOrder == 'before' }"
-    v-if="coverData.coverSelect.indexOf('video') > -1 && showVideo"
+    v-if="isVideoMode || isMixinMode"
+    v-show="videoShow"
     :style="{
-      backgroundColor: `${coverData.videoColorSelec}`,
+      zIndex: videoIndex,
     }"
   >
+    <div
+      class="video-background"
+      v-if="coverData.videoPcLoc !== 'full'"
+      :style="{
+        backgroundImage:
+          coverData.coverVideoBac === 'imgTile'
+            ? `url(${coverData.videoBacImg})`
+            : 'none',
+        backgroundColor:
+          coverData.coverVideoBac === 'imgTile'
+            ? `rgba(0,0,0,1)`
+            : `${coverData.videoColorSelec}`,
+      }"
+    ></div>
     <video
       v-if="coverData.videoPc"
       x5-playsinline="true"
@@ -15,8 +29,8 @@
       webkit-playsinline="true"
       class="video"
       ref="openvideo$"
-      preload
       autoplay
+      preload
       :poster="coverData.videoPcIcon"
       :class="coverData.videoPcLoc == 'center' ? 'contain' : 'cover'"
       :src="coverData.videoPc"
@@ -25,13 +39,13 @@
     ></video>
     <img
       v-show="videoPlaying"
-      @click.stop="bofang"
-      class="bofang"
+      @click.stop="handleVideoPlay"
+      class="videoPlay"
       :src="require('@/assets/images/default/bofang.png')"
       alt=""
     />
 
-    <div @click.stop="jumpVideo(true)" class="jump">
+    <div @click.stop="jumpVideo" class="jump">
       {{
         countdownVideo > 0
           ? $t("common.jumpTips", { second: countdownVideo })
@@ -41,10 +55,14 @@
   </div>
 
   <!-- 图片 -->
-  <!-- coverImgBac === "colorFill" -->
+
   <div
     class="imgcon"
-    v-if="coverData.coverSelect.toLowerCase().indexOf('img') > -1 && showImg"
+    v-if="isImageMode || isMixinMode"
+    v-show="imgShow"
+    :style="{
+      zIndex: imgIndex,
+    }"
   >
     <div
       @click="closeImg"
@@ -56,16 +74,19 @@
     ></div>
     <div
       class="img-background"
-      v-if="coverData.coverPcLoc !=='full'"
+      v-if="coverData.coverPcLoc !== 'full'"
       :style="{
         backgroundImage:
           coverData.coverImgBac == 'imgTile'
             ? `url(${coverData.coverBac})`
             : `none`,
-        backgroundColor:  coverData.coverImgBac == 'imgTile' ? `none`:`${coverData.imgColorSelec}`,
+        backgroundColor:
+          coverData.coverImgBac == 'imgTile'
+            ? `none`
+            : `${coverData.imgColorSelec}`,
       }"
     ></div>
-    <div @click.stop="closeImg" class="jump" >
+    <div @click.stop="jumpImage" class="jump">
       {{
         countdownImg > 0
           ? $t("common.jumpTips", { second: countdownImg })
@@ -75,13 +96,25 @@
   </div>
 </template>
 <script setup>
-import { ref, watch, computed, onMounted, defineProps, unref } from "vue";
+import {
+  ref,
+  watch,
+  computed,
+  onMounted,
+  defineProps,
+  unref,
+  watchEffect,
+} from "vue";
 import { useStore } from "vuex";
 import { useApp } from "@/app";
 import { useI18n, getLocale } from "@/i18n";
 
 const { t } = useI18n({ useScope: "global" });
-
+const zIndex = ref(1);
+const useZIndex = () => {
+  zIndex.value++;
+  return unref(zIndex);
+};
 const props = defineProps({
   coverData: {
     type: [Boolean, Object],
@@ -94,116 +127,184 @@ const store = useStore();
 const openvideo$ = ref(null);
 const videoPlaying = ref(true);
 
+const isMixinMode = computed(
+  () => props.coverData.coverSelect.toLowerCase().indexOf("and") > -1
+);
+const isImageMode = computed(
+  () => props.coverData.coverSelect.toLowerCase() === "img"
+);
+const isVideoMode = computed(
+  () => props.coverData.coverSelect.toLowerCase() === "video"
+);
+// 字段意思有误
+const showImageFirst = computed(
+  () => props.coverData.coverImageOrder === "before"
+);
+
 const show = ref(true);
 const countdownImg = ref(3);
 const countdownVideo = ref(3);
-const timer = ref(null);
+const imgTimer = ref(null);
+const videotimer = ref(null);
 
-const showVideo = ref(true);
-const showImg = ref(true);
-// coverImgBac
+const isImageCountDone = ref(false);
+const isVideoCountDone = ref(false);
 
-const currentScene = computed(() => store.getters["scene/currentScene"]);
+const isImageAutoNext = computed(() => props.coverData.coverImageInWay === 1);
+const isVideoAutoNext = computed(() => props.coverData.coverVideoInWay === 1);
 
-const closeImg = (isCall = false) => {
-  useApp().then((app) => {
-    showImg.value = false;
+const imgShow = ref(false);
+const videoShow = ref(false);
 
-    if (props.coverData.coverSelect.toLowerCase().indexOf("and") > -1) {
-      // debugger
-      if (props.coverData.coverVideoOrder == "later") {
-        showVideo.value = true;
-        showVideoDaoji();
-      }
-      app.render();
+const imgIndex = ref(1);
+const videoIndex = ref(1);
+
+const currentScene = computed(() => store.getters["scene/currentScene"]);
+
+//手动跳转
+const jumpImage = () => {
+  if (unref(isMixinMode)) {
+    if (unref(showImageFirst)) {
+      imgShow.value = false;
+      videoShow.value = true;
+      startVideoCount();
     } else {
-      app.render();
+      toApp();
     }
-  });
+  }
 };
 
-const closeVideo = (isCall = false) => {
-  useApp().then((app) => {
-    showVideo.value = false;
-    if (!isCall) {
-      app.render();
+//手动跳转
+const jumpVideo = () => {
+  if (unref(isMixinMode)) {
+    if (!unref(showImageFirst)) {
+      imgShow.value = true;
+      videoShow.value = false;
+      startImageCount();
+    } else {
+      toApp();
     }
-  });
+  }
 };
 
-const showImgDaoji = (cb = () => {}) => {
-  timer.value = setInterval(() => {
+const startImageCount = () => {
+  imgTimer.value = setInterval(() => {
     countdownImg.value--;
     if (countdownImg.value == 0) {
-      clearInterval(timer.value);
-      timer.value = null;
-      cb();
-
+      clearInterval(imgTimer.value);
+      isImageCountDone.value = true;
+      imgTimer.value = null;
       return;
     }
   }, 1000);
 };
-
-const showVideoDaoji = (isCall = false) => {
-  timer.value = setInterval(() => {
+const startVideoCount = () => {
+  const nextIndex = useZIndex();
+  videoIndex.value = nextIndex;
+  videotimer.value = setInterval(() => {
     countdownVideo.value--;
     if (countdownVideo.value == 0) {
-      clearInterval(timer.value);
-      timer.value = null;
+      clearInterval(videotimer.value);
+      isVideoCountDone.value = true;
+      videotimer.value = null;
       return;
     }
   }, 1000);
 };
 
-const jumpVideo = (isCall = false) => {
-  closeVideo(isCall);
-  if (isCall) {
-    // debugger
-    showImg.value = true;
-    showImgDaoji(executeImg);
+//开始全监听
+watch(
+  [isMixinMode, isImageMode, isVideoMode, showImageFirst],
+  ([val1, val2, val3, val4]) => {
+    //混合模式
+    if (unref(val1)) {
+      //图片优先
+      if (unref(val4)) {
+        imgShow.value = true;
+        startImageCount();
+      } else {
+        videoShow.value = true;
+        startVideoCount();
+      }
+    } else {
+      if (unref(val2)) {
+        startImageCount();
+      }
+      if (unref(val3)) {
+        startVideoCount();
+      }
+      //非混合模式
+    }
+  },
+  {
+    deep: true,
+    immediate: true,
   }
-};
+);
+//倒数完全监听
+watch(
+  [isMixinMode, isImageCountDone, isVideoCountDone, showImageFirst],
+  ([val1, val2, val3, val4]) => {
+    //混合模式
+    if (unref(val1)) {
+      //图片优先
+      if (unref(val4)) {
+        //图片倒数完
+        if (unref(val2)) {
+          if (unref(isImageAutoNext)) {
+            imgShow.value = false;
+            videoShow.value = true;
+            startVideoCount();
+          }
+        }
+      } else {
+        //图片非优先
+        if (unref(val2)) {
+          if (unref(isImageAutoNext)) {
+            toApp();
+          }
+        }
+      }
+    } else {
+      //非混合模式
+    }
+  },
+  {
+    deep: true,
+  }
+);
 
-// 执行图片封面
-const executeImg = () => {
-  showImgDaoji(() => {
-    closeImg();
+//跳转到app
+const toApp = () => {
+  imgShow.value = false;
+  videoShow.value = false;
+
+  useApp().then((app) => {
+    setTimeout(() => {
+      app.render();
+    }, 1000);
   });
 };
 
 onMounted(() => {
   console.log("coverData", unref(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:
-      showVideoDaoji(() => {
-        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();
+      if (isVideoAutoNext.value) {
+        //混合模式
+        if (unref(isMixinMode)) {
+          //视频优先 直达图片
+          if (!unref(showImageFirst)) {
+            videoShow.value = false;
+            imgShow.value = true;
+            startImageCount();
+          } else {
+            toApp();
+          }
+        } else {
+          toApp();
+        }
       }
     });
 
@@ -219,13 +320,13 @@ onMounted(() => {
       }
     });
 
-    document.addEventListener(
-      "WeixinJSBridgeReady",
-      () => {
-        openvideo$.value.play();
-      },
-      false
-    );
+    // document.addEventListener(
+    //   "WeixinJSBridgeReady",
+    //   () => {
+    //     openvideo$.value.play();
+    //   },
+    //   false
+    // );
   }
 }),
   useApp().then((app) => {
@@ -246,10 +347,22 @@ onMounted(() => {
   bottom: 0;
   width: 100%;
   height: 100%;
+  z-index: 1;
+}
+.video-background {
+  background-repeat: repeat;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
 }
 
 .imgcon {
-  z-index: 10;
+  // z-index: 10;
   .image-front,
   .img-background {
     background-position: center;
@@ -307,7 +420,7 @@ onMounted(() => {
   }
 }
 
-.zidxhigh {
+.videoPlayFirst {
   z-index: 99;
 }
 

packages/qjkankan-view/src/components/assembly/OpeningMobile copy.vue

@@ -0,0 +1,337 @@
+<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>

packages/qjkankan-view/src/components/assembly/OpeningMobile.vue

@@ -2,12 +2,26 @@
   <!-- 视频 -->
   <div
     class="videocon"
-    :class="{ zidxhigh: coverData.coverVideoOrder == 'before' }"
-    v-if="coverData.coverSelect.indexOf('video') > -1 && showVideo"
+    v-if="isVideoMode || isMixinMode"
+    v-show="videoShow"
     :style="{
-      backgroundColor: `${coverData.videoColorSelec}`,
+      zIndex: videoIndex,
     }"
   >
+    <div
+      class="video-background"
+      v-if="coverData.videoMoLoc !== 'full'"
+      :style="{
+        backgroundImage:
+          coverData.coverVideoBac === 'imgTile'
+            ? `url(${coverData.videoBacImg})`
+            : 'none',
+        backgroundColor:
+          coverData.coverVideoBac === 'imgTile'
+            ? `rgba(0,0,0,1)`
+            : `${coverData.videoColorSelec}`,
+      }"
+    ></div>
     <video
       v-if="coverData.videoMo"
       x5-playsinline="true"
@@ -23,11 +37,10 @@
       :controls="Boolean(coverData.coverVideoControl)"
       muted
     ></video>
-
     <img
-      v-show="bofanging"
-      @click.stop="bofang"
-      class="bofang"
+      v-show="videoPlaying"
+      @click.stop="handleVideoPlay"
+      class="videoPlay"
       :src="require('@/assets/images/default/bofang.png')"
       alt=""
     />
@@ -45,15 +58,35 @@
 
   <div
     class="imgcon"
-    v-if="coverData.coverSelect.toLowerCase().indexOf('img') > -1 && showImg"
-    @click="closeImg"
+    v-if="isImageMode || isMixinMode"
+    v-show="imgShow"
     :style="{
-      backgroundImage: `url(${coverData.coverMo})`,
-      backgroundColor: `${coverData.imgColorSelec}`,
-      backgroundSize: coverData.coverMoLoc == 'center' ? 'contain' : 'cover',
+      zIndex: imgIndex,
     }"
   >
-    <div @click.stop="closeImg" class="jump">
+    <div
+      @click="closeImg"
+      class="image-front"
+      :style="{
+        backgroundImage: `url(${coverData.coverMo})`,
+        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="jumpImage" class="jump">
       {{
         countdownImg > 0
           ? $t("common.jumpTips", { second: countdownImg })
@@ -63,13 +96,25 @@
   </div>
 </template>
 <script setup>
-import { ref, watch, computed, onMounted, defineProps, unref } from "vue";
+import {
+  ref,
+  watch,
+  computed,
+  onMounted,
+  defineProps,
+  unref,
+  watchEffect,
+} from "vue";
 import { useStore } from "vuex";
 import { useApp } from "@/app";
 import { useI18n, getLocale } from "@/i18n";
 
 const { t } = useI18n({ useScope: "global" });
-
+const zIndex = ref(1);
+const useZIndex = () => {
+  zIndex.value++;
+  return unref(zIndex);
+};
 const props = defineProps({
   coverData: {
     type: [Boolean, Object],
@@ -80,138 +125,208 @@ const props = defineProps({
 });
 const store = useStore();
 const openvideo$ = ref(null);
-const bofanging = ref(true);
+const videoPlaying = ref(true);
+
+const isMixinMode = computed(
+  () => props.coverData.coverSelect.toLowerCase().indexOf("and") > -1
+);
+const isImageMode = computed(
+  () => props.coverData.coverSelect.toLowerCase() === "img"
+);
+const isVideoMode = computed(
+  () => props.coverData.coverSelect.toLowerCase() === "video"
+);
+// 字段意思有误
+const showImageFirst = computed(
+  () => props.coverData.coverImageOrder === "before"
+);
 
 const show = ref(true);
 const countdownImg = ref(3);
 const countdownVideo = ref(3);
-const timer = ref(null);
+const imgTimer = ref(null);
+const videotimer = ref(null);
 
-const showVideo = ref(true);
-const showImg = ref(true);
+const isImageCountDone = ref(false);
+const isVideoCountDone = ref(false);
+
+const isImageAutoNext = computed(() => props.coverData.coverImageInWay === 1);
+const isVideoAutoNext = computed(() => props.coverData.coverVideoInWay === 1);
+
+const imgShow = ref(false);
+const videoShow = ref(false);
+
+const imgIndex = ref(1);
+const videoIndex = ref(1);
 
 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();
-      }
-      app.render();
+//手动跳转
+const jumpImage = () => {
+  if (unref(isMixinMode)) {
+    if (unref(showImageFirst)) {
+      imgShow.value = false;
+      videoShow.value = true;
+      startVideoCount();
     } else {
-      app.render();
+      toApp();
     }
-  });
+  }
 };
 
-const closeVideo = (isCall = false) => {
-  useApp().then((app) => {
-    showVideo.value = false;
-    if (!isCall) {
-      app.render();
+//手动跳转
+const jumpVideo = () => {
+  if (unref(isMixinMode)) {
+    if (!unref(showImageFirst)) {
+      imgShow.value = true;
+      videoShow.value = false;
+      startImageCount();
+    } else {
+      toApp();
     }
-  });
+  }
 };
 
-const showImgDaoji = (cb = () => {}) => {
-  timer.value = setInterval(() => {
+const startImageCount = () => {
+  imgTimer.value = setInterval(() => {
     countdownImg.value--;
     if (countdownImg.value == 0) {
-      clearInterval(timer.value);
-      timer.value = null;
-      cb();
-
+      clearInterval(imgTimer.value);
+      isImageCountDone.value = true;
+      imgTimer.value = null;
       return;
     }
   }, 1000);
 };
-
-const showVideoDaoji = (isCall = false) => {
-  timer.value = setInterval(() => {
+const startVideoCount = () => {
+  const nextIndex = useZIndex();
+  videoIndex.value = nextIndex;
+  videotimer.value = setInterval(() => {
     countdownVideo.value--;
     if (countdownVideo.value == 0) {
-      clearInterval(timer.value);
-      timer.value = null;
+      clearInterval(videotimer.value);
+      isVideoCountDone.value = true;
+      videotimer.value = null;
       return;
     }
   }, 1000);
 };
 
-const jumpVideo = (isCall = false) => {
-  closeVideo(isCall);
-  if (isCall) {
-    showImg.value = true;
-    showImgDaoji();
+//开始全监听
+watch(
+  [isMixinMode, isImageMode, isVideoMode, showImageFirst],
+  ([val1, val2, val3, val4]) => {
+    //混合模式
+    if (unref(val1)) {
+      //图片优先
+      if (unref(val4)) {
+        imgShow.value = true;
+        startImageCount();
+      } else {
+        videoShow.value = true;
+        startVideoCount();
+      }
+    } else {
+      if (unref(val2)) {
+        startImageCount();
+      }
+      if (unref(val3)) {
+        startVideoCount();
+      }
+      //非混合模式
+    }
+  },
+  {
+    deep: true,
+    immediate: true,
   }
-};
+);
+//倒数完全监听
+watch(
+  [isMixinMode, isImageCountDone, isVideoCountDone, showImageFirst],
+  ([val1, val2, val3, val4]) => {
+    //混合模式
+    if (unref(val1)) {
+      //图片优先
+      if (unref(val4)) {
+        //图片倒数完
+        if (unref(val2)) {
+          if (unref(isImageAutoNext)) {
+            imgShow.value = false;
+            videoShow.value = true;
+            startVideoCount();
+          }
+        }
+      } else {
+        //图片非优先
+        if (unref(val2)) {
+          if (unref(isImageAutoNext)) {
+            toApp();
+          }
+        }
+      }
+    } else {
+      //非混合模式
+    }
+  },
+  {
+    deep: true,
+  }
+);
+
+//跳转到app
+const toApp = () => {
+  imgShow.value = false;
+  videoShow.value = false;
 
-// 执行图片封面
-const executeImg = () => {
-  showImgDaoji(() => {
-    closeImg();
+  useApp().then((app) => {
+    setTimeout(() => {
+      app.render();
+    }, 1000);
   });
 };
 
 onMounted(() => {
   console.log("coverData", unref(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:
-      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();
+      if (isVideoAutoNext.value) {
+        //混合模式
+        if (unref(isMixinMode)) {
+          //视频优先 直达图片
+          if (!unref(showImageFirst)) {
+            videoShow.value = false;
+            imgShow.value = true;
+            startImageCount();
+          } else {
+            toApp();
+          }
+        } else {
+          toApp();
+        }
       }
     });
 
     openvideo$.value.addEventListener("playing", () => {
-      if (bofanging.value) {
-        bofanging.value = false;
+      if (videoPlaying.value) {
+        videoPlaying.value = false;
       }
     });
 
     openvideo$.value.addEventListener("pause", () => {
-      if (!bofanging.value) {
-        bofanging.value = true;
+      if (!videoPlaying.value) {
+        videoPlaying.value = true;
       }
     });
 
-    document.addEventListener(
-      "WeixinJSBridgeReady",
-      () => {
-        console.log("WeixinJSBridgeReady", openvideo$.value);
-        openvideo$.value.play();
-      },
-      false
-    );
+    // document.addEventListener(
+    //   "WeixinJSBridgeReady",
+    //   () => {
+    //     openvideo$.value.play();
+    //   },
+    //   false
+    // );
   }
 }),
   useApp().then((app) => {
@@ -232,11 +347,40 @@ onMounted(() => {
   bottom: 0;
   width: 100%;
   height: 100%;
+  z-index: 1;
+}
+.video-background {
+  background-repeat: repeat;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
 }
 
 .imgcon {
-  background-position: center;
-  z-index: 10;
+  // 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 {
@@ -276,7 +420,7 @@ onMounted(() => {
   }
 }
 
-.zidxhigh {
+.videoPlayFirst {
   z-index: 99;
 }