Merge branch 'dev' of http://face3d.4dage.com:7005/chenzhiguang/qjkankan_v1.1.1 into dev

packages/qjkankan-editor/package.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^0.5.4",
+    "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^1.0.2",
     "core-js": "^3.8.2",
     "d3": "^7.8.0",

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

@@ -32,12 +32,14 @@ pc端图片位置 coverPcLoc
 --------视频
 
 pc端视频地址 videoPc
+pc端视频图片 videoPcIcon
 
 pc端视频位置 videoPcLoc
 	center：居中
 	full：全屏
 
 移动端视频地址 videoMo
+移动端端视频图片 videoMoIcon
 
 移动端视频位置 videoMoLoc
 	center：居中
@@ -261,7 +263,7 @@ pc端视频位置 videoPcLoc
             <div class="tit">{{ $i18n.t(`edit_settings.pc`) }}</div>
             <div class="coverImgMain">
               <SelectedImage
-                :imgSrc="info.coverInfo.videoPc"
+                :imgSrc="info.coverInfo.videoPcIcon"
                 :defaultImgSrc="require('@/assets/img/coverUpTit2.png')"
                 @cancel="clearVideoPc"
               ></SelectedImage>
@@ -308,7 +310,7 @@ pc端视频位置 videoPcLoc
             <!-- 移动端视频 -->
             <div class="coverImgMain">
               <SelectedImage
-                :imgSrc="info.coverInfo.videoMo"
+                :imgSrc="info.coverInfo.videoMoIcon"
                 :defaultImgSrc="require('@/assets/img/coverUpTit2.png')"
                 @cancel="claerVideoMo"
               ></SelectedImage>
@@ -523,10 +525,20 @@ export default {
         imgColorSelec: "#000000",
 
         // 有关上传视频
+        // 视频pc端地址
+        videoPc:'',
         // 视频pc端位置
         videoPcLoc: "center",
+        // 视频pc端图片
+        videoPcIcon:'',
+
+        // 视频移动端地址
+        videoMo:'',
         // 视频移动端位置
         videoMoLoc: "center",
+        // 视频移动端图片
+        videoMoIcon:'',
+
         // 视频的背景设置
         coverVideoBac: "colorFill",
         videoColorSelec: "#000000",
@@ -599,10 +611,16 @@ export default {
         else this.info.coverInfo.coverBac = selected[0].icon;
       } else {
         // 视频上传
-        if (this.selectingFor === "pc")
-          this.info.coverInfo.videoPc = selected[0].icon;
-        else if (this.selectingFor === "mobile")
-          this.info.coverInfo.videoMo = selected[0].icon;
+        if (this.selectingFor === "pc"){
+          console.log(selected[0],'selected[0]');
+          this.info.coverInfo.videoPc = selected[0].ossPath;
+          this.info.coverInfo.videoPcIcon = selected[0].icon;
+        }
+
+        else if (this.selectingFor === "mobile"){
+          this.info.coverInfo.videoMo = selected[0].ossPath;
+          this.info.coverInfo.videoMoIcon = selected[0].icon;
+        }
         else this.info.coverInfo.videoBacImg = selected[0].icon;
       }
       this.isShowSelectionWindow = false;
@@ -618,10 +636,14 @@ export default {
     },
     // 关于视频
     clearVideoPc() {
+      console.log(165168484);
+      console.log(this.info.coverInfo.videoPc);
       this.info.coverInfo.videoPc = "";
+      this.info.coverInfo.videoPcIcon = "";
     },
     claerVideoMo() {
       this.info.coverInfo.videoMo = "";
+      this.info.coverInfo.videoMoIcon = "";
     },
     onCancelBac2() {
       this.info.coverInfo.videoBacImg = "";

packages/qjkankan-editor/src/views/hotspot/EditPanel.vue

@@ -6,16 +6,14 @@
     leave-active-class="animated slideOutRight speed"
   >
     <div class="hots-panel" v-show="show">
-
       <div class="ui-between header">
-        <span>{{ editTitle }}{{ $i18n.t('hotspot.hotspot_name') }}</span>
+        <span>{{ editTitle }}{{ $i18n.t("hotspot.hotspot_name") }}</span>
         <i class="iconfont icon_close" @click="cancel"></i>
       </div>
-      
+
       <div class="content" ref="content">
-        
         <div class="type-setting">
-          <div class="remark">{{ $i18n.t('hotspot.hotspot_type') }}</div>
+          <div class="remark">{{ $i18n.t("hotspot.hotspot_type") }}</div>
           <combox
             class="combox"
             :data="hotspotTypeList"
@@ -23,9 +21,9 @@
             @change="onHotSpotTypeChange"
           />
         </div>
-        
+
         <div class="icon-setting">
-          <div class="remark">{{ $i18n.t('hotspot.hotspot_icon') }}</div>
+          <div class="remark">{{ $i18n.t("hotspot.hotspot_icon") }}</div>
           <combox
             class="combox"
             :data="hotspotIconTypeList"
@@ -37,7 +35,10 @@
             :is="iconTypeComponent"
             ref="icon-setting-component"
           />
-          <div class="bars" v-if="hotspot.hotspotIconType !== 'personalized_tag'">
+          <div
+            class="bars"
+            v-if="hotspot.hotspotIconType !== 'personalized_tag'"
+          >
             <RangeItem :value="rang" @input="onRangeChange" />
           </div>
         </div>
@@ -46,19 +47,20 @@
           class="title-setting"
           v-if="hotspot.hotspotIconType !== 'personalized_tag'"
         >
-          <div class="remark-highlight">{{ $i18n.t('hotspot.hotspot_title') }}</div>
+          <div class="remark-highlight">
+            {{ $i18n.t("hotspot.hotspot_title") }}
+          </div>
           <div class="title-input-wrapper">
             <input
               v-model.trim="hotspot.hotspotTitle"
-              type="text" maxlength="15"
+              type="text"
+              maxlength="15"
               :placeholder="$i18n.t('hotspot.title_placeholder')"
             />
             <span class="count">{{ hotspot.hotspotTitle.length }}/15</span>
           </div>
-          <div
-            class="remark"
-          >
-            {{ $i18n.t('hotspot.title_show_mode') }}
+          <div class="remark">
+            {{ $i18n.t("hotspot.title_show_mode") }}
           </div>
           <TabbarSwitcher
             class="display-mode-selector"
@@ -70,10 +72,8 @@
             :activeIdx="currentTitleDispayModeIdx"
             @select="onSelectTitleDisplayMode"
           />
-          <div
-            class="remark"
-          >
-            {{ $i18n.t('hotspot.title_position') }}
+          <div class="remark">
+            {{ $i18n.t("hotspot.title_position") }}
           </div>
           <TabbarSwitcherIcon
             class="display-mode-selector"
@@ -103,53 +103,85 @@
             @select="onSelectTitlePosition"
           />
         </div>
-        
+
         <div class="effect-setting">
           <div class="title-line">
             <div
               class="remark-highlight"
-              v-if="$i18n.t(`hotspot.hotspot_type_specific_settings_title.${hotspot.hotspotType}`)"
+              v-if="
+                $i18n.t(
+                  `hotspot.hotspot_type_specific_settings_title.${hotspot.hotspotType}`
+                )
+              "
             >
-              {{ $i18n.t(`hotspot.hotspot_type_specific_settings_title.${hotspot.hotspotType}`) }}
+              {{
+                $i18n.t(
+                  `hotspot.hotspot_type_specific_settings_title.${hotspot.hotspotType}`
+                )
+              }}
             </div>
             <div class="tip" v-if="currentHotspotTypeConfigData.tip">
-              {{currentHotspotTypeConfigData.tip}}
+              {{ currentHotspotTypeConfigData.tip }}
             </div>
           </div>
           <component
             class="effect-setting-component"
             @sceneSelect="handleSceneSelect"
             :scene="hotspot.secne"
-            @imageChange="data => { hotspot.image = data }"
+            @imageChange="
+              (data) => {
+                hotspot.image = data;
+              }
+            "
             :image="hotspot.image"
-            @linkChange="data => { hotspot.hyperlink = data }"
+            @linkChange="
+              (data) => {
+                hotspot.hyperlink = data;
+              }
+            "
             :link="hotspot.hyperlink"
-            @linkOpenType="data => { hotspot.linkOpenType = data }"
+            @linkOpenType="
+              (data) => {
+                hotspot.linkOpenType = data;
+              }
+            "
             :linkOpenType="hotspot.linkOpenType"
-            @textChange="data => { hotspot.textarea = data }"
+            @textChange="
+              (data) => {
+                hotspot.textarea = data;
+              }
+            "
             :textarea="hotspot.textarea"
-            @audioChange="data => { hotspot.audio = data }"
+            @audioChange="
+              (data) => {
+                hotspot.audio = data;
+              }
+            "
             :audio="hotspot.audio"
-            @videoChange="data => { hotspot.video = data }"
+            @videoChange="
+              (data) => {
+                hotspot.video = data;
+              }
+            "
             :video="hotspot.video"
             :is="effectSettingComponent"
           />
         </div>
       </div>
       <div class="ui-between footer" app-border dir-top>
-        <button 
+        <button
           class="ui-button deepcancel"
           :class="{ disable: false }"
           @click="cancel"
         >
-          {{$i18n.t('hotspot.cancel')}}
+          {{ $i18n.t("hotspot.cancel") }}
         </button>
-        <button 
+        <button
           class="ui-button submit"
           :class="{ disable: !canSubmit }"
           @click="save"
         >
-          {{$i18n.t('hotspot.finish')}}
+          {{ $i18n.t("hotspot.finish") }}
         </button>
       </div>
     </div>
@@ -164,10 +196,10 @@ import Switcher from "@/components/shared/Switcher.vue";
 import TabbarSwitcher from "@/components/shared/TabbarSwitcher.vue";
 import TabbarSwitcherIcon from "@/components/shared/TabbarSwitcherIcon.vue";
 import hotspotTypeList from "./hotspotTypeList.js";
-import { isValidPhoneNumber } from 'libphonenumber-js/max'
+import { isValidPhoneNumber } from "libphonenumber-js/max";
 
 export default {
-  props: ['show', 'data', 'editTitle'],
+  props: ["show", "data", "editTitle"],
   components: {
     RangeItem,
     Combox,
@@ -181,163 +213,178 @@ export default {
       hotspotIconTypeList: [
         {
           name: this.$i18n.t("hotspot.hotspot_icon_type.system_icon"),
-          id: 'system_icon',
+          id: "system_icon",
         },
         {
           name: this.$i18n.t("hotspot.hotspot_icon_type.custom_image"),
-          id: 'custom_image',
+          id: "custom_image",
         },
         {
           name: this.$i18n.t("hotspot.hotspot_icon_type.serial_frame"),
-          id: 'serial_frame',
+          id: "serial_frame",
         },
         {
           name: this.$i18n.t("hotspot.hotspot_icon_type.personalized_tag"),
-          id: 'personalized_tag',
+          id: "personalized_tag",
         },
       ],
       rang: {
-        label: this.$i18n.t('hotspot.icon_size'),
-        unit: this.$i18n.t('hotspot.unit'),
+        label: this.$i18n.t("hotspot.icon_size"),
+        unit: this.$i18n.t("hotspot.unit"),
         gradient: 0.1,
         value: 1,
         min: 0.5,
         max: 2,
       },
-    }
+    };
   },
   watch: {
-    'hotspot.hotspotTitle': function () {
-      this.$getKrpano().set('layer[tooltip_' + this.hotspot.name + '].html', this.hotspot.hotspotTitle)
+    "hotspot.hotspotTitle": function () {
+      this.$getKrpano().set(
+        "layer[tooltip_" + this.hotspot.name + "].html",
+        this.hotspot.hotspotTitle
+      );
     },
     // 'hotspot.visible': function () {
     //   this.$getKrpano().set('layer[tooltip_' + this.hotspot.name + '].visible', this.hotspot.visible)
     // },
-    'hotspot.size': {
+    "hotspot.size": {
       immediate: true,
       handler: function (newVal) {
-        let h = 52
-        let scaleH = h * newVal
+        let h = 52;
+        let scaleH = h * newVal;
 
-        let offset = '-130%'
+        let offset = "-130%";
 
-        this.rang = { ...this.rang, value: newVal }
-        this.$getKrpano().set(`hotspot[${this.hotspot.name}].height`, scaleH)
+        this.rang = { ...this.rang, value: newVal };
+        this.$getKrpano().set(`hotspot[${this.hotspot.name}].height`, scaleH);
 
         if (newVal < 1) {
-          offset = '-200%'
+          offset = "-200%";
         }
 
         if (newVal > 1) {
-          offset = '-100%'
+          offset = "-100%";
         }
-        this.$getKrpano().set('layer[tooltip_' + this.hotspot.name + '].y', `${offset}`)
-      }
+        this.$getKrpano().set(
+          "layer[tooltip_" + this.hotspot.name + "].y",
+          `${offset}`
+        );
+      },
     },
-    'hotspot.fontSize': {
+    "hotspot.fontSize": {
       handler: function (newVal) {
-        this.$getKrpano().set('layer[tooltip_' + this.hotspot.name + '].css', `text-align:center; color:#FFFFFF;
-          font-family:STXihei;font-size:${newVal}px;`)
-      }
+        this.$getKrpano().set(
+          "layer[tooltip_" + this.hotspot.name + "].css",
+          `text-align:center; color:#FFFFFF;
+          font-family:STXihei;font-size:${newVal}px;`
+        );
+      },
     },
   },
   beforeDestroy() {
-    this.$bus.removeListener('resethotspotTitle', this.listerFnReset)
+    this.$bus.removeListener("resethotspotTitle", this.listerFnReset);
   },
   computed: {
     ...mapGetters({
-      hotspot: 'hotspot',
-      backupHotSpot: 'backupHotSpot',
+      hotspot: "hotspot",
+      backupHotSpot: "backupHotSpot",
     }),
     iconTypeComponent() {
-      let tmp = this.hotspot.hotspotIconType
+      let tmp = this.hotspot.hotspotIconType;
       return () => import(`./hotspotIconType/${tmp}.vue`);
     },
     currentTitleDispayModeIdx() {
       switch (this.hotspot.titleDisplayMode) {
-        case 'hover':
-          return 0
-        case 'always':
-          return 1
-        case 'never':
-          return 2
+        case "hover":
+          return 0;
+        case "always":
+          return 1;
+        case "never":
+          return 2;
         default:
-          return 0
+          return 0;
       }
     },
     currentTitlePositionIdx() {
       switch (this.hotspot.titlePosition) {
-        case 'top':
-          return 0
-        case 'bottom':
-          return 1
-        case 'left':
-          return 2
-        case 'right':
-          return 3
-        case 'custom':
-          return 4
+        case "top":
+          return 0;
+        case "bottom":
+          return 1;
+        case "left":
+          return 2;
+        case "right":
+          return 3;
+        case "custom":
+          return 4;
         default:
-          return 0
+          return 0;
       }
     },
     effectSettingComponent() {
-      let tmp = this.hotspot.hotspotType
+      let tmp = this.hotspot.hotspotType;
       return () => import(`./hotspotType/${tmp}.vue`);
     },
     canSubmit() {
       // 热点类型相关设置项
       switch (this.hotspot.hotspotType) {
-        case 'scene':
+        case "scene":
           if (!this.hotspot.secne) {
-            return false
+            return false;
           }
           break;
-        case 'image':
+        case "image":
           if (!this.hotspot.image || this.hotspot.image.length === 0) {
-            return false
+            return false;
           }
           break;
-        case 'video':
+        case "video":
           if (!this.hotspot.video) {
-            return false
+            return false;
           }
           break;
-        case 'audio':
+        case "audio":
           if (!this.hotspot.audio) {
-            return false
+            return false;
           }
           break;
-        case 'link':
+        case "link":
           if (!this.hotspot.hyperlink) {
-            return false
+            return false;
           }
           break;
-        case 'textarea':
+        case "textarea":
           if (!this.hotspot.textarea) {
-            return false
+            return false;
           }
           break;
-        case 'tag':
+        case "tag":
           break;
-        case 'imageText':
-          if (this.hotspot.imageTextInfo.imageList.length === 0 && !this.hotspot.imageTextInfo.text) {
-            return false
+        case "imageText":
+          if (
+            this.hotspot.imageTextInfo.imageList.length === 0 &&
+            !this.hotspot.imageTextInfo.text
+          ) {
+            return false;
           }
           break;
-        case 'article':
+        case "article":
           if (!this.hotspot.articleInfo.html) {
-            return false
+            return false;
           }
           break;
-        case 'pdf':
+        case "pdf":
           if (!this.hotspot.pdfInfo.name || !this.hotspot.pdfInfo.url) {
-            return false
+            return false;
           }
           break;
-        case 'phone':
-          if (!isValidPhoneNumber(this.hotspot.phoneInfo.phone) && !isValidPhoneNumber('+86' + this.hotspot.phoneInfo.phone)) {
-            return false
+        case "phone":
+          if (
+            !isValidPhoneNumber(this.hotspot.phoneInfo.phone) &&
+            !isValidPhoneNumber("+86" + this.hotspot.phoneInfo.phone)
+          ) {
+            return false;
           }
           break;
         default:
@@ -346,96 +393,106 @@ export default {
 
       // 热点图标类型相关设置项
       switch (this.hotspot.hotspotIconType) {
-        case 'system_icon':
+        case "system_icon":
           break;
-        case 'custom_image':
+        case "custom_image":
           if (!this.hotspot.customIconInfo.img) {
-            return false
+            return false;
           }
           break;
-        case 'serial_frame':
-          if (!this.hotspot.serialFrameInfo.url || this.hotspot.serialFrameInfo.frameNumber <= 0 || this.hotspot.serialFrameInfo <= 0) {
-            return false
+        case "serial_frame":
+          if (
+            !this.hotspot.serialFrameInfo.url ||
+            this.hotspot.serialFrameInfo.frameNumber <= 0 ||
+            this.hotspot.serialFrameInfo <= 0
+          ) {
+            return false;
           }
           break;
-        case 'personalized_tag':
-          if (this.hotspot.personalizedTagInfo.isTextWrap && this.hotspot.personalizedTagInfo.textNumPerLine <= 0) {
-            return false
+        case "personalized_tag":
+          if (
+            this.hotspot.personalizedTagInfo.isTextWrap &&
+            this.hotspot.personalizedTagInfo.textNumPerLine <= 0
+          ) {
+            return false;
           }
           break;
         default:
           break;
       }
-      
+
       // 其他设置项
       if (!this.hotspot.hotspotTitle) {
-        return false
+        return false;
       }
-      
-      return true
+
+      return true;
     },
     currentHotspotTypeConfigData() {
       return hotspotTypeList.find((item) => {
-        return item.id === this.hotspot.hotspotType
-      })
-    }
+        return item.id === this.hotspot.hotspotType;
+      });
+    },
   },
   mounted() {
-    this.$bus.on('resethotspotTitle', this.listerFnReset)
+    this.$bus.on("resethotspotTitle", this.listerFnReset);
 
-    this.$bus.on('delhotspot', () => {
-      this.cancel()
-    })
+    this.$bus.on("delhotspot", () => {
+      this.cancel();
+    });
 
     setTimeout(() => {
-      if (this.editTitle != '编辑' && this.editTitle != this.$i18n.t('hotspot.edit')) {
-        this.rang.value = window.g_hotspotCurrentScale
-        this.onRangeChange({ value: window.g_hotspotCurrentScale })
+      if (
+        this.editTitle != "编辑" &&
+        this.editTitle != this.$i18n.t("hotspot.edit")
+      ) {
+        this.rang.value = window.g_hotspotCurrentScale;
+        this.onRangeChange({ value: window.g_hotspotCurrentScale });
       }
-    }, 300)
+    }, 300);
   },
 
   methods: {
     handleSceneSelect(data) {
       this.hotspot.secne = {
         ...data,
-        someData: {}
-      }
+        someData: {},
+      };
     },
     onHotSpotTypeChange(data) {
-      this.hotspot.hotspotType = data.id
+      this.hotspot.hotspotType = data.id;
     },
     onHotspotIconTypeChange(data) {
-      this.hotspot.hotspotIconType = data.id
+      this.hotspot.hotspotIconType = data.id;
     },
     onRangeChange(data) {
       console.log(data);
-      this.rang = { ...this.rang, value: data.value }
-      this.hotspot.size = data.value
+      this.rang = { ...this.rang, value: data.value };
+      this.hotspot.size = data.value;
       switch (data.value) {
         case 0.5:
         case 0.6:
         case 0.7:
-          this.hotspot.fontSize = 12
+          this.hotspot.fontSize = 12;
           break;
         case 0.8:
         case 0.9:
         case 1.0:
         case 1.1:
         case 1.2:
-          this.hotspot.fontSize = 14
+          this.hotspot.fontSize = 14;
           break;
         case 1.3:
         case 1.4:
         case 1.5:
         case 1.6:
         case 1.7:
-          this.hotspot.fontSize = 17
+          this.hotspot.fontSize = 17;
           break;
         case 1.8:
         case 1.9:
         case 2:
-          this.hotspot.fontSize = 20
+          this.hotspot.fontSize = 20;
           break;
         default:
           break;
@@ -444,13 +501,13 @@ export default {
     onSelectTitleDisplayMode(idx) {
       switch (idx) {
         case 0:
-          this.hotspot.titleDisplayMode = 'hover'
+          this.hotspot.titleDisplayMode = "hover";
           break;
         case 1:
-          this.hotspot.titleDisplayMode = 'always'
+          this.hotspot.titleDisplayMode = "always";
           break;
         case 2:
-          this.hotspot.titleDisplayMode = 'never'
+          this.hotspot.titleDisplayMode = "never";
           break;
         default:
           break;
@@ -459,48 +516,51 @@ export default {
     onSelectTitlePosition(idx) {
       switch (idx) {
         case 0:
-          this.hotspot.titlePosition = 'top'
+          this.hotspot.titlePosition = "top";
           break;
         case 1:
-          this.hotspot.titlePosition = 'bottom'
+          this.hotspot.titlePosition = "bottom";
           break;
         case 2:
-          this.hotspot.titlePosition = 'left'
+          this.hotspot.titlePosition = "left";
           break;
         case 3:
-          this.hotspot.titlePosition = 'right'
+          this.hotspot.titlePosition = "right";
           break;
         case 4:
-          this.hotspot.titlePosition = 'custom'
+          this.hotspot.titlePosition = "custom";
           break;
         default:
           break;
       }
     },
     listerFnReset() {
-      if (this.hotspot.hotspotTitle == '单击确定热点位置'||this.hotspot.hotspotTitle == this.$i18n.t('hotspot.click_to_comfirm')) {
-        this.hotspot.hotspotTitle = ''
+      if (
+        this.hotspot.hotspotTitle == "单击确定热点位置" ||
+        this.hotspot.hotspotTitle == this.$i18n.t("hotspot.click_to_comfirm")
+      ) {
+        this.hotspot.hotspotTitle = "";
       }
     },
 
     cancel() {
       this.$store.commit("SetHotspot", this.backupHotSpot);
       this.$emit("close", {
-        type: this.editTitle == this.$i18n.t('hotspot.edit') ? 'edit' : 'add',
-        data: this.backupHotSpot
+        type: this.editTitle == this.$i18n.t("hotspot.edit") ? "edit" : "add",
+        data: this.backupHotSpot,
       });
     },
     reset(data) {
-      this.$bus.emit('edithotspotTitle', data)
-      this.$bus.emit('edithotspotTitleisShow', data)
-      this.$getKrpano().set(`hotspot[${data.name}].url`, data.img)
+      this.$bus.emit("edithotspotTitle", data);
+      this.$bus.emit("edithotspotTitleisShow", data);
+      this.$getKrpano().set(`hotspot[${data.name}].url`, data.img);
     },
     save() {
       this.$store.commit("SetHotspot", this.hotspot);
       this.$emit("close");
       this.$emit("save", this.hotspot);
     },
-  }
+  },
 };
 </script>
 
@@ -537,7 +597,7 @@ export default {
     .icon-setting {
       .icon-setting-title {
         font-size: 18px;
-        color: #FFFFFF;
+        color: #ffffff;
       }
       .remark {
         margin-top: 16px;
@@ -559,21 +619,21 @@ export default {
       .remark-highlight {
         margin-top: 16px;
         font-size: 18px;
-        color: #FFFFFF;
+        color: #ffffff;
       }
-      >.title-input-wrapper {
+      > .title-input-wrapper {
         position: relative;
         border: 1px solid rgba(151, 151, 151, 0.2);
         padding: 0 16px;
-        background: #1A1B1D;
+        background: #1a1b1d;
         border-radius: 2px;
         height: 36px;
         width: 100%;
         margin-top: 18px;
         &:focus-within {
-          border-color: #0076F6;
+          border-color: #0076f6;
         }
-        >input {
+        > input {
           border: none;
           background: transparent;
           outline: none;
@@ -584,7 +644,7 @@ export default {
           letter-spacing: 1px;
           font-size: 14px;
         }
-        >.count {
+        > .count {
           position: absolute;
           top: 50%;
           transform: translateY(-50%);
@@ -611,11 +671,11 @@ export default {
         align-items: center;
         > .remark-highlight {
           font-size: 18px;
-          color: #FFFFFF;
+          color: #ffffff;
         }
         > .tip {
           font-size: 14px;
-          color: #FFFFFF;
+          color: #ffffff;
           opacity: 0.6;
         }
       }

packages/qjkankan-editor/src/views/material/popup/MoveFolder.vue

@@ -38,7 +38,7 @@
 
 <script>
 import Popup from "@/components/shared/popup";
-import NestedFolder from "@/components/NestedFolder.vue";
+import NestedFolder from "@/components/nestedFolder.vue";
 
 export default {
   components: {

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

@@ -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 {

packages/qjkankan-view/src/locales/en.json

@@ -28,7 +28,10 @@
     "image_fail": "Failed to load image",
     "exit_vr": "Exit VR",
     "no_title": "No title",
-    "name":"4DPano"
+    "name":"4DPano",
+    "jumpTips":"跳过（{second}s）",
+    "jump":"跳过"
+
   },
   "menu":{
     "introduce": "Introduction ",

packages/qjkankan-view/src/locales/zh.json

@@ -28,8 +28,9 @@
     "image_fail": "图片加载失败",
     "exit_vr": "退出VR模式",
     "no_title": "无标题",
-    "name":"四维全景"
-
+    "name":"四维全景",
+    "jumpTips":"跳过（{second}s）",
+    "jump":"跳过"
   },
   "menu":{
     "introduce": "简介",

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

@@ -1,7 +1,7 @@
 <template>
   <template v-if="workEnable">
     <LoadingLogo />
-    <!-- <Opening :coverData="coverInfo" v-if="coverInfo.isShowCover" /> -->
+    <Opening :coverData="coverInfo" v-if="coverInfo.isShowCover" />
     <Password />
     <Share />
     <div class="ui-view-layout" :class="{ show: show }">
@@ -151,7 +151,7 @@ onMounted(async () => {
       passQueryParameters: true,
     });
 
-    coverInfo.value = data.coverInfo;
+    coverInfo.value = data.coverInfo || {};
     app.Scene.lock();
     //如果不需要开场封面就直接渲染
     if (!coverInfo.value?.isShowCover) {
@@ -185,7 +185,12 @@ onMounted(async () => {
           app.krpanoDom.set(`layer[webvr_exitbutton].html`, t('common.exit_vr'));
 
         }
-        app.Tags.initHotspot(currentScene.value.someData.hotspots, false);
+        let hotspots = []
+        if (currentScene.value.someData) {
+          hotspots = typeof currentScene.value.someData == 'string' ? JSON.parse(currentScene.value.someData).hotspots : currentScene.value.someData.hotspots
+        }
+        console.log(hotspots,'hotspotshotspotshotspotshotspots');
+        app.Tags.initHotspot(hotspots, false);
       });
 
     }

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

@@ -177,7 +177,12 @@ onMounted(async () => {
           app.krpanoDom.set(`layer[webvr_exitbutton].html`, t('common.exit_vr'));
 
         }
-        app.Tags.initHotspot(currentScene.value.someData ? currentScene.value.someData.hotspots : [], false);
+ 
+        let hotspots = []
+        if (currentScene.value.someData) {
+          hotspots = typeof currentScene.value.someData == 'string' ? JSON.parse(currentScene.value.someData).hotspots : currentScene.value.someData.hotspots
+        }
+        app.Tags.initHotspot(hotspots, false);
       });
       
     }

packages/qjkankan-view/src/sdk/QJKanKan/modules/Tags.js

@@ -23,7 +23,7 @@ export default class Tags extends Emiter {
     let ath = this.app.krpanoDom.get("curscreen_ath");
     let atv = this.app.krpanoDom.get("curscreen_atv");
     this.app.krpanoDom.call(`addImgTextHotSpot(
-        ${param.img.replace('static/','showviewer/').replace('.svg','.png')},
+        ${param.img.replace('static/','showviewer/').replace('.svg','.png').replace('@2x','')},
         ${param.name},
         ${param.hotspotTitle},
         ${param.ath != '' ? param.ath : ath},

packages/qjkankan-view/src/store/modules/scene.js

@@ -95,6 +95,13 @@ export default {
 
     // 设置当前场景
     setCurrentScene(state, payload) {
+      if (payload.someData) {
+        try {
+          // someData旧数据有可能是字符串，要parse一下
+          payload.someData = typeof payload.someData == 'string' ? JSON.parse(payload.someData) : payload.someData
+        } catch (error) {
+        }
+      }
       state.currentScene = payload;
       this.commit('fdkk/setReset')
     },