update0202

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

@@ -670,6 +670,7 @@
   "edit_settings": {
     "coverBase_button":"开场封面",
     "coverBase_button_tips":"整个作品的开场内容，可以设置为图片或视频形式。",
+    "cover_show": "显示开场封面",
     "cover_pull_tit":"封面类型",
     "coverSelecVideoAndImg":"图片+视频",
     "coverSelecImg":"图片",

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

@@ -673,6 +673,7 @@
     "coverBase_button":"开场封面",
     "coverBase_button_tips":"整个作品的开场内容，可以设置为图片或视频形式。",
     "cover_pull_tit":"封面类型",
+    "cover_show": "显示开场封面",
     "coverSelecVideoAndImg":"图片+视频",
     "coverSelecImg":"图片",
     "coverSelecVideo":"视频",

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

@@ -12,13 +12,13 @@
 pc端图片地址 coverPc
 
 pc端图片位置 coverPcLoc
-	centen：居中
+	center：居中
 	full：全屏
 
 移动端图片地址 coverMo
 
 移动端图片位置 coverMoLoc
-	centen：居中
+	center：居中
 	full：全屏
 
 图片的背景设置下拉框 coverImgBac
@@ -34,13 +34,13 @@ pc端图片位置 coverPcLoc
 pc端视频地址 videoPc
 
 pc端视频位置 videoPcLoc
-	centen：居中
+	center：居中
 	full：全屏
 
 移动端视频地址 videoMo
 
 移动端视频位置 videoMoLoc
-	centen：居中
+	center：居中
 	full：全屏
 
 视频的背景设置下拉框 coverVideoBac
@@ -72,6 +72,10 @@ pc端视频位置 videoPcLoc
     >
     </i>
     <br />
+    <div class="switch-wrapper">
+      <span class="label">{{$i18n.t('edit_settings.cover_show')}}</span>
+      <Switcher :value="info.coverInfo.isShowCover" @change="onSwitcherChange"></Switcher>
+    </div>
     <div class="cover_pull">
       <!-- 封面类型选择下拉框 -->
       <div class="cover_pull_tit">{{ cover_pull_tit }}</div>
@@ -119,8 +123,8 @@ pc端视频位置 videoPcLoc
                 <!-- 选择居中和全屏 -->
                 <div class="coverImglocBox">
                   <div
-                    :class="{ active: info.coverInfo.coverPcLoc === 'centen' }"
-                    @click="info.coverInfo.coverPcLoc = 'centen'"
+                    :class="{ active: info.coverInfo.coverPcLoc === 'center' }"
+                    @click="info.coverInfo.coverPcLoc = 'center'"
                   >
                     <div class="inco"></div>
                     <div class="txt">{{ coverImgLoc1 }}</div>
@@ -166,8 +170,8 @@ pc端视频位置 videoPcLoc
                 <!-- 选择居中和全屏 -->
                 <div class="coverImglocBox">
                   <div
-                    :class="{ active: info.coverInfo.coverMoLoc === 'centen' }"
-                    @click="info.coverInfo.coverMoLoc = 'centen'"
+                    :class="{ active: info.coverInfo.coverMoLoc === 'center' }"
+                    @click="info.coverInfo.coverMoLoc = 'center'"
                   >
                     <div class="inco"></div>
                     <div class="txt">{{ coverImgLoc1 }}</div>
@@ -282,8 +286,8 @@ pc端视频位置 videoPcLoc
                 <!-- 选择居中和全屏 -->
                 <div class="coverImglocBox">
                   <div
-                    :class="{ active: info.coverInfo.videoPcLoc === 'centen' }"
-                    @click="info.coverInfo.videoPcLoc = 'centen'"
+                    :class="{ active: info.coverInfo.videoPcLoc === 'center' }"
+                    @click="info.coverInfo.videoPcLoc = 'center'"
                   >
                     <div class="inco"></div>
                     <div class="txt">{{ coverImgLoc1 }}</div>
@@ -329,8 +333,8 @@ pc端视频位置 videoPcLoc
                 <!-- 选择居中和全屏 -->
                 <div class="coverImglocBox">
                   <div
-                    :class="{ active: info.coverInfo.videoMoLoc === 'centen' }"
-                    @click="info.coverInfo.videoMoLoc = 'centen'"
+                    :class="{ active: info.coverInfo.videoMoLoc === 'center' }"
+                    @click="info.coverInfo.videoMoLoc = 'center'"
                   >
                     <div class="inco"></div>
                     <div class="txt">{{ coverImgLoc1 }}</div>
@@ -510,9 +514,9 @@ export default {
         // 封面类型下拉框数据
         coverSelect: "img",
         // 图片pc端位置
-        coverPcLoc: "centen",
+        coverPcLoc: "center",
         // 图片移动端位置
-        coverMoLoc: "centen",
+        coverMoLoc: "center",
         // 图片的背景设置
         coverImgBac: "colorFill",
         // 图片的背景颜色
@@ -520,9 +524,9 @@ export default {
 
         // 有关上传视频
         // 视频pc端位置
-        videoPcLoc: "centen",
+        videoPcLoc: "center",
         // 视频移动端位置
-        videoMoLoc: "centen",
+        videoMoLoc: "center",
         // 视频的背景设置
         coverVideoBac: "colorFill",
         videoColorSelec: "#000000",
@@ -532,6 +536,7 @@ export default {
         coverVideoControl: 0,
         // 视频的出现顺序
         coverVideoOrder: "before",
+        isShowCover: 0
       },
       coverImgBacList: [
         { txt: i18n.t("edit_settings.coverImgBacSelec1"), type: "colorFill" },
@@ -565,6 +570,11 @@ export default {
   },
   watch: {},
   methods: {
+    //是否显示
+    onSwitcherChange(data) {
+      console.log(data,'dadad');
+      this.info.coverInfo.isShowCover = data
+    },
     // 视频的进入方式
     coverVideoInWayChange(val) {
       this.info.coverInfo.coverVideoInWay = val;
@@ -648,6 +658,16 @@ export default {
     font-size: 18px;
     color: #ffffff;
   }
+  .switch-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 18px 0;
+    .label {
+      color: rgba(255, 255, 255, 0.6);
+      font-size: 14px;
+    }
+  }
   .tool-tip-for-editor {
     margin-left: 4px;
     font-size: 12px;

packages/qjkankan-kankan-view/.env.development

@@ -17,5 +17,5 @@ VUE_APP_STATIC_DIR=viewer
 VUE_APP_REGION_URL=
 
 # 接口请求地址
-VUE_APP_APIS_URL=https://www.4dkankan.com/
+VUE_APP_APIS_URL=https://test.4dkankan.com/
 

packages/qjkankan-view/.env

@@ -1,8 +1,8 @@
 VUE_APP_STATIC_DIR=showviewer
 VUE_APP_CDN=https://4dkk.4dage.com
-VUE_APP_PROXY_URL_ROOT='https://www.4dkankan.com'
-VUE_APP_PROXY_URL='https://www.4dkankan.com/qjkankan/'
+VUE_APP_PROXY_URL_ROOT='https://test.4dkankan.com'
+VUE_APP_PROXY_URL='https://test.4dkankan.com/qjkankan/'
 VUE_APP_URL_FILL=
 
 # 接口请求地址
-VUE_APP_APIS_URL=https://www.4dkankan.com/
+VUE_APP_APIS_URL=https://test.4dkankan.com/

packages/qjkankan-view/.env.testdev

@@ -0,0 +1,9 @@
+VUE_APP_STATIC_DIR=showviewer
+VUE_APP_CDN=https://ossxiaoan.4dage.com
+VUE_APP_PROXY_URL_ROOT='https://test.4dkankan.com'
+VUE_APP_PROXY_URL='https://test.4dkankan.com/qjkankan/'
+VUE_APP_URL_FILL=
+
+# 接口请求地址
+VUE_APP_APIS_URL=https://test.4dkankan.com/
+

packages/qjkankan-view/package.json

@@ -6,6 +6,7 @@
     "serve": "vue-cli-service serve",
     "serve-eurtestdev": "vue-cli-service serve --mode eurtestdev",
     "serve-eurdev": "vue-cli-service serve --mode eurdev",
+    "serve-testdev": "vue-cli-service serve --mode testdev",
     "build": "vue-cli-service build",
     "build-testprod": "vue-cli-service build --mode testprod",
     "build-eurtestprod": "vue-cli-service build --mode eurtestprod",

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

@@ -0,0 +1,71 @@
+<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>
+</template>
+<script setup>
+import { ref, watch, computed, onMounted, defineProps } from "vue";
+import { useStore } from "vuex";
+import { useApp } from "@/app";
+
+const props = defineProps({
+  coverData: {
+    type: Boolean,
+    default: () => { return {} },
+  }
+});
+const store = useStore();
+
+const show = ref(true);
+
+const currentScene = computed(() => store.getters["scene/currentScene"]);
+
+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);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  .imgcon {
+    width: 100%;
+    height: 100%;
+    background-position: center;
+  }
+
+  .videocon {}
+}
+
+@keyframes loading {
+  100% {
+    left: -900px;
+  }
+}
+</style>

packages/qjkankan-view/src/pages/show.vue

@@ -1,6 +1,7 @@
 <template>
-  <LoadingLogo v-if="workEnable" />
   <template v-if="workEnable">
+    <LoadingLogo />
+    <!-- <Opening :coverData="coverInfo" v-if="coverInfo.isShowCover" /> -->
     <Password />
     <Share />
     <div class="ui-view-layout" :class="{ show: show }">
@@ -25,6 +26,7 @@ import TitieSlide from "@/components/assembly/titieSlide";
 import UiGather from "@/components/UIGather/";
 
 import LoadingLogo from "@/components/assembly/Loading";
+import Opening from "@/components/assembly/Opening";
 import { createApp } from "@/app";
 
 import { ref, onMounted, computed, watch, nextTick } from "vue";
@@ -47,6 +49,7 @@ const fixOpening = {
 const store = useStore();
 const show = ref(false);
 const workEnable = ref(true);
+const coverInfo = ref({});
 
 const lang = getLocale()
 
@@ -148,8 +151,12 @@ onMounted(async () => {
       passQueryParameters: true,
     });
 
+    coverInfo.value = data.coverInfo;
     app.Scene.lock();
-    app.render();
+    //如果不需要开场封面就直接渲染
+    if (!coverInfo.value.isShowCover) {
+      app.render();
+    }
 
     if (isHavePano) {
       app.Scene.on("sceneReady", () => {

packages/qjkankan-view/src/utils/browser.js

@@ -325,6 +325,9 @@ var browser = {
         //阿里系
         return window.navigator.userAgent.toLowerCase().match(/Alipay/i) == 'alipay'
     },
+    detectEdge: function () {
+        return window.navigator.userAgent.indexOf("Edge") > -1;
+    },
 
     detectTT: function () {
         //字节跳动