update

src/components/hotspot/index.vue

@@ -25,25 +25,20 @@
               active: isShowTag(tag),
             }"
           >
-            <!-- :class="{
-              fixed: isPlay,
-              active:
-                (isFixed && hotData && tag.sid == hotData.sid) ||
-                (showInfo && hotData && tag.sid == hotData.sid),
-            }" -->
-            <template v-if="tag && !showMsg">
+            <template v-if="tag && !showLayer">
               <div class="arrow" :id="`arrow_${tag.sid}`">
                 <i
                   @click.stop="closeTag"
+                  v-if="isMobile"
                   class="iconfont ui-kankan-icon icon tip-h-center tip-v-bottom icon-close"
                 ></i>
               </div>
-              <ShowTag @click.stop="" :tag="tag" v-if="tag" @open="openInfo" />
+              <ShowTag @click.stop="" :tag="tag" v-if="tag" @open="openLayer" />
             </template>
           </div>
         </div>
 
-        <!-- <TagView @click.stop="" v-if="showMsg && toggleIndex == index" @close="closeInfo" /> -->
+        <TagView @click.stop="" :data="tag" v-if="showLayer" @close="closeLayer" />
       </div>
     </template>
   </teleport>
@@ -54,6 +49,7 @@
   import { computed } from 'vue';
   import { getApp, useApp } from '/@/hooks/userApp';
   import browser from '/@/utils/browser';
+  import TagView from './tag-view.vue';
   // import { getApp, useApp } from '@/app';
   // import { useStore } from 'vuex';
   import { changeUrl } from './common';
@@ -66,19 +62,20 @@
 
   const showInfo = ref<tagType | null>(null);
   const isClick = ref(false);
-  const showMsg = ref(false);
+  const showLayer = ref(false);
   const isShowTag = computed(() => {
     return (tag: tagType) => {
       return showInfo.value && showInfo.value.sid === tag.sid;
     };
   });
+  const isMobile = computed(() => browser.isMobile());
   // const toggleIndex = ref(null)
-  const openInfo = () => {
-    showMsg.value = true;
-    // store.commit('tag/setData', { isFixed: false, isClick: true });
+  const openLayer = () => {
+    showLayer.value = true;
     showInfo.value = null;
+    debugger;
   };
-  const closeInfo = () => {};
+  const closeLayer = () => {};
 
   const closeTag = async () => {
     showInfo.value = null;

src/components/hotspot/metas/image-view.vue

@@ -26,9 +26,9 @@
   // import './scale/previewImage.min'
   // import { zoomElement } from './scale/index.js'
   import { onMounted, computed, ref, nextTick } from 'vue';
-  import { useStore } from 'vuex';
-  import common from '@/utils/common';
-  const store = useStore();
+  // import { useStore } from 'vuex';
+  // import common from '@/utils/common';
+  // const store = useStore();
   const hotData = computed(() => store.getters['tag/hotData']);
   const imageList = computed(() => {
     let list = hotData.value.media.image;

src/components/hotspot/metas/metas-audio.vue

@@ -11,11 +11,8 @@
 </template>
 
 <script setup>
-  import {ref, computed } from 'vue';
-  import { useStore } from 'vuex';
-  import { Cropper, Loading, Dialog } from '@/global_components';
-  import { custom } from '../constant.js';
-  import common from '@/utils/common';
+  import { ref, computed } from 'vue';
+
   const store = useStore();
   const audioNum = ref(0);
   const type = ref('audio');

src/components/hotspot/metas/metas-image.vue

@@ -7,14 +7,14 @@
   >
     <div>
       <div class="ctrl-btn left-btn" v-if="imageNum != 0" @click.stop="changeImage('pre')">
-        <!-- <ui-icon type="left"></ui-icon> -->
+        <i class="iconfont ui-kankan-icon icon tip-h-center tip-v-bottom icon-left"></i>
       </div>
       <div
         class="ctrl-btn right-btn"
         v-if="imageNum < imageList.length - 1"
         @click.stop="changeImage('next')"
       >
-        <!-- <ui-icon type="right"></ui-icon> -->
+        <i class="iconfont ui-kankan-icon icon tip-h-center tip-v-bottom icon-right"></i>
       </div>
     </div>
     <div class="over-box" ref="containerRef">
@@ -45,18 +45,6 @@
       </div>
       <!-- <ui-icon v-show="loading" class="loading-icon" type="_loading_"></ui-icon> -->
     </div>
-
-    <!-- 移动端缩放 -->
-    <!-- swiper新增后，此功能无用 -->
-    <!-- <teleport to="body">
-            <div class="showPicBox" v-if="zoomInImg">
-                <span class="close" @click="closePhoto">
-                    <ui-icon type="close"></ui-icon>
-                </span>
-                <ui-icon v-show="loading" class="loading-icon" type="_loading_"></ui-icon>
-                <div @click="closePhoto" class="imgbox" ref="topology" :style="`background-image:url(${zoomInImg});`"></div>
-            </div>
-        </teleport> -->
   </div>
 </template>
 
@@ -66,7 +54,6 @@
   import { changeUrl } from '../common';
   import { useApp } from '/@/hooks/userApp';
   const isMobile = ref(false);
-  // const store = useStore();
   const type = ref('image');
   const emit = defineEmits(['close']);
   const props = defineProps({
@@ -128,7 +115,7 @@
         break;
       }
     }
-    store.commit('tag/setImageList', list);
+    // store.commit('tag/setImageList', list);
   };
   let result = { width: 0, height: 0 },
     x,
@@ -269,20 +256,7 @@
         }
       };
       img.src = changeUrl(imageList.value[0].src);
-      // if (imageList.value.length > 1) {
-      //     //监听移动端手势
-      //     if (props.scale) {
-      //         var el = document.getElementById('image-list')
-      //         // var hammer = new Hammer(square)
-      //         var mc = new Hammer.Manager(el)
-      //         mc.add(new Hammer.Pinch({ threshold: 0 }))
-      //         mc.on('pinchstart', ev => {
-      //             // 双指缩放
-      //             console.log('双指缩放')
-      //             openScale(imageList.value[imageNum.value].src)
-      //         })
-      //     }
-      // }
+
       if (props.scale) {
         if (imageList.value.length == 1) {
           openScale(imageList.value[0].src);
@@ -294,6 +268,8 @@
     loading.value = false;
   };
   const zoomInImg = ref(null);
+
+  
   const closePhoto = () => {
     if (imageList.value.length == 1) {
       emit('close');

src/components/hotspot/metas/metas-video.vue

@@ -1,83 +1,93 @@
 <!--  -->
 <template>
-    <!-- <div class="video-box" :style="metasHeight ? `height:${metasHeight}px;` : ''"> -->
-    <div class="video-box">
-        <div v-if="isEdit" class="del-btn" @click="delVideo()">
-            <ui-icon type="del"></ui-icon>
-        </div>
-        <ui-icon v-show="loading" class="loading-icon" type="_loading_"></ui-icon>
-        <video
-            @error="filesError"
-            v-show="!loading"
-            id="video"
-            v-for="(i, index) in videoSrc"
-            class="video-item"
-            x5-video-player-type="h5-page"
-            controlslist="nodownload"
-            disablepictureinpicture=""
-            webkit-playsinline=""
-            x-webkit-airplay=""
-            playsinline=""
-            :controls="controls"
-            autoplay
-            :src="common.changeUrl(i.src)"
-        ></video>
+  <!-- <div class="video-box" :style="metasHeight ? `height:${metasHeight}px;` : ''"> -->
+  <div class="video-box">
+    <div v-if="isEdit" class="del-btn" @click="delVideo()">
+      <ui-icon type="del"></ui-icon>
     </div>
+    <ui-icon v-show="loading" class="loading-icon" type="_loading_"></ui-icon>
+    <video
+      @error="filesError"
+      v-show="!loading"
+      :key="index"
+      id="video"
+      v-for="(i, index) in videoSrc"
+      class="video-item"
+      x5-video-player-type="h5-page"
+      controlslist="nodownload"
+      disablepictureinpicture=""
+      webkit-playsinline=""
+      x-webkit-airplay=""
+      playsinline=""
+      :controls="controls"
+      autoplay
+      :src="common.changeUrl(i.src)"
+    ></video>
+  </div>
 </template>
 
 <script setup>
-import { reactive, toRefs, onBeforeMount, onMounted, nextTick, ref, computed, defineProps } from 'vue'
-import { useStore } from 'vuex'
-import { custom } from '../constant.js'
-import { getApp, useApp } from '@/app'
-import common from '@/utils/common'
-import { Dialog } from '@/global_components'
-const videoNum = ref(0)
-const store = useStore()
-const type = ref('video')
-const hotData = computed(() => store.getters['tag/hotData'])
-const props = defineProps({
+  import {
+    reactive,
+    toRefs,
+    onBeforeMount,
+    onMounted,
+    nextTick,
+    ref,
+    computed,
+    defineProps,
+  } from 'vue';
+  import { useStore } from 'vuex';
+  import { custom } from '../constant.js';
+  import { getApp, useApp } from '@/app';
+  import common from '@/utils/common';
+  import { Dialog } from '@/global_components';
+  const videoNum = ref(0);
+  const store = useStore();
+  const type = ref('video');
+  const hotData = computed(() => store.getters['tag/hotData']);
+  const props = defineProps({
     controls: {
-        type: Boolean,
-        default: true,
+      type: Boolean,
+      default: true,
     },
     metasHeight: {
-        type: Number,
-        default: null,
+      type: Number,
+      default: null,
     },
-})
-const loading = ref(true)
+  });
+  const loading = ref(true);
 
-const isEdit = computed(() => store.getters['tag/isEdit'])
-const videoSrc = computed(() => {
-    return hotData.value.media.video
-})
-const delVideo = () => {
-    store.commit('tag/delMetas', { type: type.value, index: videoNum.value })
-}
+  const isEdit = computed(() => store.getters['tag/isEdit']);
+  const videoSrc = computed(() => {
+    return hotData.value.media.video;
+  });
+  const delVideo = () => {
+    store.commit('tag/delMetas', { type: type.value, index: videoNum.value });
+  };
 
-const initVideo = file => {
-    store.commit('tag/setVideo', file)
-}
-const filesError = file => {
-    loading.value = false
+  const initVideo = (file) => {
+    store.commit('tag/setVideo', file);
+  };
+  const filesError = (file) => {
+    loading.value = false;
     // Dialog.toast({
     //     content: '视频文件加载失败',
     //     type: 'warn',
     // })
-}
+  };
 
-onMounted(() => {
+  onMounted(() => {
     nextTick(() => {
-        let myVideo = document.getElementById('video')
-        myVideo.oncanplay = function () {
-            loading.value = false
-        }
-    })
-})
+      let myVideo = document.getElementById('video');
+      myVideo.oncanplay = function () {
+        loading.value = false;
+      };
+    });
+  });
 </script>
 <style lang="scss" scoped>
-.del-btn {
+  .del-btn {
     width: 24px;
     height: 24px;
     background: rgba(0, 0, 0, 0.3);
@@ -90,8 +100,8 @@ onMounted(() => {
     display: flex;
     align-items: center;
     justify-content: center;
-}
-.video-box {
+  }
+  .video-box {
     width: 100%;
     height: 100%;
     overflow: hidden;
@@ -102,26 +112,26 @@ onMounted(() => {
     left: 0;
     z-index: 10;
     .loading-icon {
-        color: var(--editor-main-color);
-        animation: rotate 2s infinite linear;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        font-size: 30px;
+      color: var(--editor-main-color);
+      animation: rotate 2s infinite linear;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 30px;
     }
     @keyframes rotate {
-        0% {
-            transform: translate(-50%, -50%) rotate(0deg);
-        }
-        100% {
-            transform: translate(-50%, -50%) rotate(360deg);
-        }
+      0% {
+        transform: translate(-50%, -50%) rotate(0deg);
+      }
+      100% {
+        transform: translate(-50%, -50%) rotate(360deg);
+      }
     }
     .video-item {
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
     }
-}
+  }
 </style>

src/components/hotspot/metas/metas-web.vue

@@ -1,74 +1,72 @@
 <!--  -->
 <template>
-    <div class="web-box" :style="metasHeight ? `height:${metasHeight}px;` : ''">
-        <div class="show-tips" v-if="link.length == 0">
-            <span>{{ $t('tag.toolbox.webShow') }}</span>
-        </div>
-        <div class="iframe-box" v-if="link.length > 0">
-            <div v-if="isEdit" class="del-btn" @click="delWeb()">
-                <ui-icon type="del"></ui-icon>
-            </div>
-            <iframe v-for="(i, index) in link" :src="i.src" frameborder="0"></iframe>
-        </div>
-        <div v-if="isEdit" class="input-web" :class="{ disabled: link.length > 0 }">
-            <input type="text" v-model="inputValue" placeholder="https://" autocomplete="off" />
-            <div class="ok-web" v-if="link.length <= 0" @click="confirmWeb">
-                <ui-icon type="checkbox1"></ui-icon>
-            </div>
-        </div>
+  <div class="web-box" :style="metasHeight ? `height:${metasHeight}px;` : ''">
+    <div class="show-tips" v-if="link.length == 0">
+      <span>{{ $t('tag.toolbox.webShow') }}</span>
     </div>
+    <div class="iframe-box" v-if="link.length > 0">
+      <div v-if="isEdit" class="del-btn" @click="delWeb()">
+        <ui-icon type="del"></ui-icon>
+      </div>
+      <iframe v-for="(i, index) in link" :src="i.src" frameborder="0"></iframe>
+    </div>
+    <div v-if="isEdit" class="input-web" :class="{ disabled: link.length > 0 }">
+      <input type="text" v-model="inputValue" placeholder="https://" autocomplete="off" />
+      <div class="ok-web" v-if="link.length <= 0" @click="confirmWeb">
+        <ui-icon type="checkbox1"></ui-icon>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
-import { reactive, toRefs, onBeforeMount, onMounted, ref, computed, defineProps } from 'vue'
-import { useStore } from 'vuex'
-import { Cropper, Loading, Dialog } from '@/global_components'
-import { custom } from '../constant.js'
-const store = useStore()
-const linkNum = ref(0)
-const hotData = computed(() => store.getters['tag/hotData'])
-const link = computed(() => {
-    return hotData.value.media.link
-})
-const props = defineProps({
+  import { ref, computed, defineProps } from 'vue';
+
+  const store = useStore();
+  const linkNum = ref(0);
+  const hotData = computed(() => store.getters['tag/hotData']);
+  const link = computed(() => {
+    return hotData.value.media.link;
+  });
+  defineProps({
     metasHeight: {
-        type: Number,
-        default: null,
+      type: Number,
+      default: null,
     },
-})
-const inputLink = computed(() => store.getters['tag/inputLink'])
-const isEdit = computed(() => store.getters['tag/isEdit'])
-const inputValue = computed({
+  });
+  const inputLink = computed(() => store.getters['tag/inputLink']);
+  const isEdit = computed(() => store.getters['tag/isEdit']);
+  const inputValue = computed({
     get() {
-        if (inputLink.value && inputLink.value != void 0) {
-            return inputLink.value
-        }
-        return inputLink.value || ''
+      if (inputLink.value && inputLink.value != void 0) {
+        return inputLink.value;
+      }
+      return inputLink.value || '';
     },
     set(value) {
-        store.commit('tag/setLink', value)
+      store.commit('tag/setLink', value);
     },
-})
-const type = ref('link')
-const showIframe = ref(false)
+  });
+  const type = ref('link');
+  const showIframe = ref(false);
 
-const delWeb = () => {
-    store.commit('tag/delMetas', { type: type.value, index: linkNum.value })
-    showIframe.value = false
-    inputValue.value = null
-}
-const confirmWeb = () => {
+  const delWeb = () => {
+    store.commit('tag/delMetas', { type: type.value, index: linkNum.value });
+    showIframe.value = false;
+    inputValue.value = null;
+  };
+  const confirmWeb = () => {
     if (inputValue.value.indexOf('http' || 'https') == -1) {
-        inputValue.value = 'https://' + inputValue.value
+      inputValue.value = 'https://' + inputValue.value;
     }
-    console.log(inputValue.value)
-    store.commit('tag/setWeb', inputValue.value)
-    showIframe.value = false
-    showIframe.value = true
-}
+    console.log(inputValue.value);
+    store.commit('tag/setWeb', inputValue.value);
+    showIframe.value = false;
+    showIframe.value = true;
+  };
 </script>
 <style lang="scss" scoped>
-.del-btn {
+  .del-btn {
     width: 24px;
     height: 24px;
     background: rgba(0, 0, 0, 0.3);
@@ -81,8 +79,8 @@ const confirmWeb = () => {
     display: flex;
     align-items: center;
     justify-content: center;
-}
-.web-box {
+  }
+  .web-box {
     width: 100%;
     height: 100%;
     overflow: hidden;
@@ -94,68 +92,68 @@ const confirmWeb = () => {
     left: 0;
     z-index: 10;
     .show-tips {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        span {
-            color: rgba(255, 255, 255, 0.3);
-            font-size: 16px;
-            font-weight: bold;
-        }
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      span {
+        color: rgba(255, 255, 255, 0.3);
+        font-size: 16px;
+        font-weight: bold;
+      }
     }
     .iframe-box {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      iframe {
         width: 100%;
         height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        iframe {
-            width: 100%;
-            height: 100%;
-        }
+      }
     }
     .input-web {
-        height: 32px;
-        background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, #000000 200%) !important;
-        border-radius: 0px 0px 4px 4px;
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 0 10px 0 0;
-        &.disabled {
-            background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, #000000 200%) !important;
-            opacity: 0.8 !important;
+      height: 32px;
+      background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, #000000 200%) !important;
+      border-radius: 0px 0px 4px 4px;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 10px 0 0;
+      &.disabled {
+        background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, #000000 200%) !important;
+        opacity: 0.8 !important;
+      }
+      input {
+        background: none;
+        border: none;
+        padding: 0 0 0 10px;
+        width: 94%;
+        box-sizing: border-box;
+        &:focus {
+          border: none;
         }
-        input {
-            background: none;
-            border: none;
-            padding: 0 0 0 10px;
-            width: 94%;
-            box-sizing: border-box;
-            &:focus {
-                border: none;
-            }
-            &::placeholder {
-                color: rgba(255, 255, 255, 0.6);
-            }
-        }
-        .ok-web {
-            width: 16px;
-            height: 16px;
-            border-radius: 50%;
-            background: rgba(255, 255, 255, 0.6);
-            color: rgba(0, 0, 0, 0.6);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
+        &::placeholder {
+          color: rgba(255, 255, 255, 0.6);
         }
+      }
+      .ok-web {
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.6);
+        color: rgba(0, 0, 0, 0.6);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+      }
     }
-}
+  }
 </style>

src/components/hotspot/show-tag.vue

@@ -39,7 +39,10 @@
       default: {} as any as tagType,
     },
   });
-  const open = () => {};
+  const emits = defineEmits(['open']);
+  const open = () => {
+    emits('open');
+  };
   onMounted(() => {});
 </script>
 <style lang="scss" scoped>

src/components/hotspot/tag-view.vue

@@ -1,25 +1,18 @@
 <!--  -->
 <template>
   <teleport to="body">
-    <div
-      class="tag-layer"
-      @click.stop=""
-      :class="{ mobile: isMobile, full: hotData.type == 'image' }"
-    >
+    <div class="tag-layer" @click.stop="" :class="{ mobile: isMobile, full: tag.type == 'image' }">
       <div class="tag-info" @click.stop="" id="tag-info">
-        <ui-icon class="close-btn" @click.stop="close" type="close" />
-        <div
-          class="tag-metas"
-          v-if="hotData.media[hotData.type].length > 0 && hotData.type != 'audio'"
-        >
+        <!-- <ui-icon class="close-btn" @click.stop="close" type="close" /> -->
+        <div class="tag-metas" v-if="tag.media[tag.type].length > 0 && tag.type != 'audio'">
           <metasImage
             @close="close"
             :scale="true"
             :viewer="true"
-            v-if="hotData.type == 'image' && !isMobile"
+            v-if="tag.type == 'image' && !isMobile"
           />
-          <imageView v-if="hotData.type == 'image' && isMobile" />
-          <metasWeb v-if="hotData.type == 'link'" />
+          <!-- <imageView v-if="tag.type == 'image' && isMobile" /> -->
+          <!-- <metasWeb v-if="tag.type == 'link'" /> -->
         </div>
       </div>
     </div>
@@ -28,41 +21,41 @@
 
 <script setup lang="ts">
   import { defineEmits, onMounted, ref, watchEffect, computed, nextTick } from 'vue';
-  // import { Dialog } from '@/global_components';
-  import metasImage from './metas/metas-image';
-  import imageView from './metas/image-view';
 
-  import metasWeb from './metas/metas-web';
-  import common from '@/utils/common';
-  import { useStore } from 'vuex';
-  import { getApp, useApp } from '@/app';
+  import metasImage from './metas/metas-image.vue';
+  import imageView from './metas/image-view.vue';
+
+  import metasWeb from './metas/metas-web.vue';
+  import { useApp } from '/@/hooks/userApp';
+  import { tagType } from '/@/store/modules/scene';
+
   const isMobile = ref(false);
   const metasHeight = ref(0);
+  const props = defineProps({
+    data: {
+      type: Object,
+      default: {} as any as tagType,
+    },
+  });
   onMounted(async () => {
     const app = await useApp();
     isMobile.value = app.config.mobile;
     nextTick(() => {
       let Layer = document.getElementById('tag-info');
-      let layerHeight = Layer.getBoundingClientRect().height;
+      let layerHeight = Layer ? Layer.getBoundingClientRect().height : 0;
       metasHeight.value = layerHeight * 0.85;
     });
   });
-  import { useMusicPlayer } from '@/utils/sound';
-  const musicPlayer = useMusicPlayer();
-  const store = useStore();
+
   const emit = defineEmits(['close']);
-  const hotData = computed(() => {
-    let data = store.getters['tag/hotData'];
-    if ((data && data.type == 'audio') || (data && data.type == 'video')) {
-      // musicPlayer.pause(true)
-    }
-    return store.getters['tag/hotData'];
-  });
+
+  const tag = computed(() => props.data);
 
   const audioInfo = computed(() => {
-    return hotData.value.media.audio;
+    return tag.value.media.audio;
   });
   const audio = ref(null);
+
   watchEffect(() => {
     if (audio.value) {
       audio.value.play();