udpate

packages/qjkankan-editor/.env.testprod

@@ -7,4 +7,4 @@ VUE_APP_PROXY_URL_ROOT='https://test.4dkankan.com'
 VUE_APP_PROXY_URL='https://test.4dkankan.com/qjkankan/'
 VUE_APP_ORIGIN=
 VUE_APP_URL_FILL=/qjkankan
-VUE_APP_DEBBUG_FLAG=0506-01
+VUE_APP_DEBBUG_FLAG=0506-03

packages/qjkankan-editor/src/Store/index.js

@@ -131,7 +131,7 @@ const store = new Vuex.Store({
         case "serial_frame":
           return {
             ...state.hotspot.serialFrameInfo,
-            img: state.hotspot.serialFrameInfo.url,
+            img: state.hotspot.serialFrameInfo.img,
             type: "serial_frame",
           };
         case "personalized_tag":

packages/qjkankan-editor/src/components/crumbs/index.vue

@@ -52,9 +52,9 @@ export default {
     display: flex;
     align-items: center;
     >li{
-      font-size: 18px;
+      font-size: 14px;
       color: #969799;
-      line-height: 28px;
+      // line-height: 28px;
       .name{
         max-width: 285px;
         overflow: hidden;
@@ -68,8 +68,8 @@ export default {
         margin-right: 7px;
       }
       &:last-of-type{
-        font-size: 18px;
-        font-weight: bold;
+        font-size: 14px;
+        // font-weight: bold;
         color: #333333;
         line-height: 28px;
         .name {

packages/qjkankan-editor/src/components/materialListInMaterialSelector.vue

@@ -124,7 +124,7 @@
                     {{ item.title }}
                   </div>
                   <div v-if="item.ifKnowProgress" class="upload-status">
-                    {{ $i18n.t(`gather.upload_material`) }}
+                    {{ $i18n.t(`gather.upload_material`) }}xxxx
                     {{ Math.round(item.progress * 100) }}%
                   </div>
                   <div v-else class="upload-status">
@@ -302,7 +302,7 @@
         class="ui-button upload-btn"
         @click="onClickUpload"
       >
-        <span>{{ $i18n.t("gather.upload_material") }}</span>
+        <span>{{ $i18n.t("gather.upload_material") }}xxx</span>
         <i
           class="iconfont icon-material_prompt tool-tip-for-editor"
           v-tooltip="fileInputBtnTip"
@@ -637,7 +637,7 @@ export default {
     onFileInputChange(e) {
       e.files.forEach(async (eachFile, i) => {
         const extension = eachFile.name.split(".").pop();
-        console.log("extension", extension);
+        console.log("extension", extension, this.fileInputAcceptType);
         if (
           this.fileInputAcceptType.indexOf(
             String(extension).toLocaleLowerCase()

packages/qjkankan-editor/src/components/materialSelector.vue

@@ -97,7 +97,7 @@
       :fileInputBtnTip="$i18n.t(`gather.pano_size`)"
       :fileInputFailString="$i18n.t(`gather.pano_fail`)"
       :fileInputLimitFailStr="$i18n.t(`gather.pano_limit`)"
-      :fileInputAcceptType="'image/jpeg'"
+      :fileInputAcceptType="'image/png,image/jpeg,image/jpg'"
       :fileInputMediaType="'image'"
       :fileInputLimit="120"
 
@@ -159,7 +159,7 @@
       :fileInputBtnTip="$i18n.t(`gather.img_size`)"
       :fileInputFailString="$i18n.t(`gather.img_fail`)"
       :fileInputLimitFailStr="$i18n.t(`gather.img_limit`)"
-      :fileInputAcceptType="'image/png,image/jpeg'"
+      :fileInputAcceptType="'image/png,image/jpeg,image/jpg'"
       :fileInputMediaType="'image'"
       :fileInputLimit="10"
 

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

@@ -443,13 +443,8 @@ export default {
           }
           break;
         case "serial_frame":
-       
-          console.log(
-            "checker",
-            this.hotspot.serialFrameInfo
-          );
           if (
-            this.hotspot.serialFrameInfo.img &&
+            !this.hotspot.serialFrameInfo.img ||
             this.hotspot.serialFrameInfo.img.length === 0
           ) {
             return false;

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

@@ -304,7 +304,7 @@ export default {
           },
           serialFrameInfo: {
             // 热点图标类型为序列帧时，序列帧的数据
-            url: "",
+            img: "",
             frameNumber: 0, // 总帧数
             duration: 0, // 总播放时长（秒）
           },

packages/qjkankan-view/.env.testprod

@@ -6,4 +6,4 @@ VUE_APP_PROXY_URL='https://test.4dkankan.com/qjkankan/'
 VUE_APP_URL_FILL=/qjkankan
 # 接口请求地址
 VUE_APP_APIS_URL=https://test.4dkankan.com/
-VUE_APP_DEBBUG_FLAG=0506-01
+VUE_APP_DEBBUG_FLAG=0506-03

packages/qjkankan-view/src/components/assembly/MobileTags/index.vue

@@ -2,8 +2,12 @@
   <teleport to="body" v-if="currentTag.hotspotType">
     <div class="tag-layer" @click.stop>
       <div class="tag-header">
-        <span>{{currentTag.hotspotTitle}}</span>
-        <ui-icon  v-if="!['image'].includes(currentTag.hotspotType) " class="close" @click.stop="close" type="player_close"></ui-icon>
+        <span>{{ currentTag.hotspotTitle }}</span>
+        <ui-icon
+          class="close"
+          @click.stop="close"
+          type="player_close"
+        ></ui-icon>
       </div>
       <metasImage @close="close" v-if="currentTag.hotspotType == 'image'" />
       <metasWeb v-if="currentTag.hotspotType == 'link'" />
@@ -12,26 +16,39 @@
       <metasText v-if="currentTag.hotspotType == 'textarea'" />
       <metasPdf v-if="currentTag.hotspotType == 'pdf'" />
       <metasArticle v-if="currentTag.hotspotType == 'article'" />
-      <metasImageText @close="close" v-if="currentTag.hotspotType == 'imageText'" />
+      <metasImageText
+        @close="close"
+        v-if="currentTag.hotspotType == 'imageText'"
+      />
     </div>
   </teleport>
 </template>
 
 <script setup>
-import metasImage from './metas/metas-image'
-import metasWeb from './metas/metas-web'
-import metasAudio from './metas/metas-audio'
-import metasVideo from './metas/metas-video'
-import metasText from './metas/metas-text'
-import metasPdf from './metas/metas-pdf.vue'
-import metasArticle from './metas/metas-article.vue'
-import metasImageText from './metas/metas-imagetext.vue'
+import metasImage from "./metas/metas-image";
+import metasWeb from "./metas/metas-web";
+import metasAudio from "./metas/metas-audio";
+import metasVideo from "./metas/metas-video";
+import metasText from "./metas/metas-text";
+import metasPdf from "./metas/metas-pdf.vue";
+import metasArticle from "./metas/metas-article.vue";
+import metasImageText from "./metas/metas-imagetext.vue";
 
-import { reactive, defineEmits, onBeforeMount, onMounted, ref, watchEffect, computed, watch, nextTick } from "vue";
+import {
+  reactive,
+  defineEmits,
+  onBeforeMount,
+  onMounted,
+  ref,
+  watchEffect,
+  computed,
+  watch,
+  nextTick,
+} from "vue";
 import { useStore } from "vuex";
 const store = useStore();
 
-const currentTag = computed(() => store.getters['tags/currentTag'])
+const currentTag = computed(() => store.getters["tags/currentTag"]);
 
 const emit = defineEmits(["close"]);
 
@@ -61,8 +78,8 @@ const close = () => {
     font-size: 18px;
     border-bottom: solid 1px rgba(255, 255, 255, 0.16);
     color: #fff;
-    
-    >span{
+
+    > span {
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -71,7 +88,6 @@ const close = () => {
     .close {
       color: rgba(255, 255, 255, 0.6);
       z-index: 999;
-  
     }
   }
 }

packages/qjkankan-view/src/components/assembly/MobileTags/metas/metas-image.vue

@@ -1,120 +1,137 @@
+<template>
+  <div class="image-container">
+    <div class="metas-image">
+      <div class="image-content">
+        <!--:free-mode="true" -->
+        <Swiper
+          :pagination="{
+            type: 'fraction',
+          }"
+         
+          :zoom="{
+            maxRatio: 10,
+            minRatio: 1,
+           
+          }"
+          class="mySwiper"
+          :modules="modules"
+          :slides-per-view="1"
+          :free-mode="true"
+         
+        >
+          <swiper-slide v-for="(item, index) in currentTag.image" :key="index">
+            <div class="swiper-zoom-container">
+              <img :src="item.ossPath" />
+            </div>
+          </swiper-slide>
+        </Swiper>
+      </div>
+    </div>
+  </div>
+</template>
 <script setup>
-import PhotoSwipe from "photoswipe";
-import "photoswipe/style.css";
 import {
   reactive,
-  defineEmits,
-  onBeforeMount,
+  nextTick,
   onMounted,
   ref,
-  watchEffect,
   computed,
-  watch,
-  nextTick,
+  onUnmounted,
+  unref,
+  watchEffect,
 } from "vue";
 import { useStore } from "vuex";
 import { useI18n, getLocale } from "@/i18n";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import { Pagination, Navigation, Zoom } from "swiper";
+// Import Swiper styles
+import "swiper/css";
+import "swiper/css/zoom";
+
+// import "swiper/swiper.scss";
+// swiper-bundle.min.css 决定了小圆点和左右翻页标签，如果不需要可以不引用
 
 const store = useStore();
 const { t } = useI18n({ useScope: "global" });
 
-let closeicon = `<svg t="1666060310188" class="pswp__icn" viewBox="0 0 1024 1024" version="1.1"
-class="pswp__icn" p-id="9000" width="24" height="24">
-  <path d="M199.232 132.096l5.376 4.608L512 444.16l307.392-307.392a48 48 0 0 1 72.512 62.528l-4.608 5.376L579.84 512l307.456 307.392a48 48 0 0 1-62.528 72.512l-5.376-4.608L512 579.84l-307.392 307.456a48 48 0 0 1-72.512-62.528l4.608-5.376L444.16 512 136.704 204.608a48 48 0 0 1 62.528-72.512z" p-id="9001" fill="#ffffff"></path>
-</svg>`;
-let options = {
-  bgOpacity: 0,
-  index: 0,
-  zoom: false,
-  indexIndicatorSep: "/",
-  mainClass: "m-img-tag",
-  errorMsg: t("common.image_fail"),
-  closeSVG: closeicon,
-  pinchToClose: false,
-  closeOnVerticalDrag: false,
-  showHideAnimationType: "none",
-};
-
 const currentTag = computed(() => store.getters["tags/currentTag"]);
-const pswp = ref(null);
-const emit = defineEmits(["close"]);
 
-onMounted(() => {
-  if (!pswp.value) {
-    pswp.value = new PhotoSwipe({
-      ...options,
-      dataSource: currentTag.value.image.map((item) => {
-        let dpiarr = item.dpi.replace("px", "").split("*");
-        console.log(dpiarr);
-        return {
-          src: item.ossPath,
-          width: dpiarr[0],
-          height: dpiarr[1],
-          alt: item.name,
-        };
-      }),
-    });
-    pswp.value.init();
-    pswp.value.on("close", () => {
-      emit("close");
-    });
-  }
-});
-</script>
+const modules = ref([Pagination, Navigation, Zoom]);
+const hasAudio = computed(
+  () =>
+    currentTag.value.imageTextInfo.audio.ossPath &&
+    currentTag.value.imageTextInfo.audio.ossPath.length > 0
+);
+const hasImages = computed(
+  () =>
+    currentTag.value.imageTextInfo.imageList &&
+    currentTag.value.imageTextInfo.imageList.length > 0
+);
+// debugger
 
-<style lang="scss">
-.m-img-tag {
-  height: calc(100% - 100px);
-  top: 50px;
-  overflow: visible;
-  .pswp__zoom-wrap img{
-    margin-bottom: 200px;
-  }
-  .pswp__counter {
-    position: fixed;
-    left: 50%;
-    bottom: 20px;
-    margin: 0;
-    opacity: 1;
-    padding: 0 10px;
-    transform: translateX(-50%);
-    height: 32px;
-    background: rgba(0, 0, 0, 0.4);
-    border-radius: 16px;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    backdrop-filter: blur(1px);
-  }
+onMounted(() => {});
 
-  .pswp__top-bar {
-    height: 50px;
-    justify-content: flex-end;
-
-    .pswp__preloader {
-      height: 50px;
-      margin-right: 0;
+onUnmounted(() => {});
+</script>
 
-      .pswp__icn {
-        top: 9px;
-      }
+<style lang="scss">
+.image-container {
+  height: calc(100vh - 50px);
+  width: 100%;
+  overflow: hidden;
+}
+.metas-image {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  .image-content {
+    height: 100%;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    .mySwiper {
+      width: 100%;
+      height: 100%;
     }
+    .swiper-slide {
+      text-align: center;
+      font-size: 18px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .swiper-slide .swiper-zoom-container img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+    // .swiper-slide .main-img {
+    //   // display: block;
+    //   width: 100%;
+    //   height: 100%;
+    //   object-fit: contain;
+    // }
 
-    .pswp__button--close {
-      height: 50px;
-      margin-right: 0;
-
-      .pswp__icn {
-        top: 50%;
-        width: 16px;
-        height: 16px;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        fill: rgba(255, 255, 255, 0.6);
 
-        > path {
-          fill: rgba(255, 255, 255, 0.6);
-        }
-      }
-    }
+  }
+}
+.swiper-pagination {
+  width: 56px;
+  height: 32px;
+  background: rgba(0, 0, 0, 0.4);
+  opacity: 1;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: #fff;
+  border-radius: 15px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  bottom: 34px;;
+  .swiper-pagination-total {
+    color: #858586;
   }
 }
 </style>

packages/qjkankan-view/src/components/assembly/MobileTags/metas/metas-imagetext.vue

@@ -2,11 +2,15 @@
   <div class="imagetext-container">
     <div class="metas-imagetext">
       <div class="image-content">
+        <!--:free-mode="true" -->
         <Swiper
           :pagination="{
             type: 'fraction',
           }"
-          :zoom="true"
+          :zoom="{
+            maxRatio: 10,
+            minRatio: 1,
+          }"
           class="mySwiper"
           :modules="modules"
           :slides-per-view="1"
@@ -17,7 +21,9 @@
             v-for="(item, index) in currentTag.imageTextInfo.imageList"
             :key="index"
           >
-            <img :src="item.ossPath" />
+            <div class="swiper-zoom-container">
+              <img :src="item.ossPath" />
+            </div>
           </swiper-slide>
         </Swiper>
         <div class="audio-control" v-if="hasAudio">
@@ -56,9 +62,11 @@ import {
 import { useStore } from "vuex";
 import { useI18n, getLocale } from "@/i18n";
 import { Swiper, SwiperSlide } from "swiper/vue";
-import { Pagination, Navigation } from "swiper";
+import { Pagination, Navigation, Zoom } from "swiper";
 // Import Swiper styles
 import "swiper/css";
+import "swiper/css/zoom";
+
 // import "swiper/swiper.scss";
 // swiper-bundle.min.css 决定了小圆点和左右翻页标签，如果不需要可以不引用
 
@@ -67,12 +75,18 @@ const { t } = useI18n({ useScope: "global" });
 
 const currentTag = computed(() => store.getters["tags/currentTag"]);
 
-const modules = ref([Pagination, Navigation]);
+const modules = ref([Pagination, Navigation, Zoom]);
 const hasAudio = computed(
   () =>
     currentTag.value.imageTextInfo.audio.ossPath &&
     currentTag.value.imageTextInfo.audio.ossPath.length > 0
 );
+const hasImages = computed(
+  () =>
+    currentTag.value.imageTextInfo.imageList &&
+    currentTag.value.imageTextInfo.imageList.length > 0
+);
+// debugger
 const time = ref("00:00");
 const audioAllTime = ref("00:00");
 const isPlaying = ref(false);
@@ -92,8 +106,17 @@ function transTime(time) {
   }
   return minute + isM0 + sec;
 }
+
 onMounted(() => {
   const audio = document.querySelector("#audioTag");
+  watchEffect(() => {
+    if (!unref(hasImages)) {
+      const audioControl = document.querySelector(".audio-control");
+      console.log("audioControl", audioControl);
+      audioControl.style.left = "50%";
+      audioControl.style.transform = "translateX(-50%)";
+    }
+  });
   nextTick(() => {
     if (unref(hasAudio)) {
       audio.addEventListener("durationchange", (e) => {
@@ -137,13 +160,16 @@ const pauseAudio = () => {
   audio && audio.pause();
 };
 onUnmounted(() => {
+  const audio = document.querySelector("#audioTag");
+  if (audio) {
+  }
   pauseAudio();
 });
 
 function handlePageRender(_, el) {
   if (unref(hasAudio)) {
-    el.style.left = "20%";
-    el.style.transform = "translateX(-20%)";
+    el.style.left = "20px";
+    el.style.transform = "translateX(0)";
   }
 }
 </script>
@@ -176,18 +202,22 @@ function handlePageRender(_, el) {
       justify-content: center;
       align-items: center;
     }
-
-    .swiper-slide img {
-      display: block;
+    .swiper-slide .swiper-zoom-container img {
       width: 100%;
       height: 100%;
       object-fit: contain;
     }
+    // .swiper-slide .main-img {
+    //   // display: block;
+    //   width: 100%;
+    //   height: 100%;
+    //   object-fit: contain;
+    // }
 
     .audio-control {
       position: absolute;
       z-index: 10000;
-      bottom: 50px;
+      bottom: 20px;
       border-radius: 8px;
       background: rgba(0, 0, 0, 0.6);
       width: 122px;
@@ -196,8 +226,9 @@ function handlePageRender(_, el) {
       background: rgba(0, 0, 0, 0.4);
       opacity: 1;
       border: 1px solid rgba(255, 255, 255, 0.2);
-      left: 75%;
-      transform: translateX(-75%);
+      // left: 75%;
+      right: 20px;
+      // transform: translateX(-75%);
       line-height: 32px;
       display: flex;
       justify-content: center;
@@ -250,7 +281,10 @@ function handlePageRender(_, el) {
   border-radius: 15px;
   left: 50%;
   transform: translateX(-50%);
-  bottom: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  bottom: 20px;
   .swiper-pagination-total {
     color: #858586;
   }

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

@@ -453,8 +453,9 @@ onMounted(() => {
   }
 
   .contain {
-    height: 100%;
-    object-fit: contain;
+    width: 100%;
+    height: auto;
+    object-fit: scale-down;
   }
 
   .cover {