update

.npmrc

@@ -1 +1 @@
-registry=https://mirrors.cloud.tencent.com/npm/
+registry=http://192.168.0.47:4873/

package.json

@@ -23,6 +23,7 @@
     "consola": "^2.15.3",
     "crypto-js": "^4.1.1",
     "dayjs": "^1.11.6",
+    "kankan-components": "^0.0.3",
     "lodash-es": "^4.17.21",
     "pinia": "^2.0.23",
     "pinia-plugin-persistedstate": "^2.3.0",

src/App.vue

@@ -29,7 +29,7 @@
   import { useRoom, roomId, currentSceneIndex } from './hooks/useRoom';
   import dayjs from 'dayjs';
   import Dialog from './components/basic/dialog';
-
+  import 'kankan-components/theme-chalk/index.css';
   const { createTourPlayer } = useTourPlayer();
   const showDebug = ref(Number(import.meta.env.VITE_SHOW_DEBUGPANEL) === 1);
   const { t } = useI18n();

src/components/hotspot/index.vue

@@ -33,7 +33,7 @@
                   class="iconfont ui-kankan-icon icon tip-h-center tip-v-bottom icon-close"
                 ></i>
               </div>
-              <ShowTag :tag="tag" v-if="tag" @open="openLayer(tag)" />
+              <ShowTag :show="isShowTag(tag)" :tag="tag" v-if="tag" @open="openLayer(tag)" />
             </template>
           </div>
         </div>
@@ -66,7 +66,7 @@
 
   const isShowTag = computed(() => {
     return (tag: tagType) => {
-      return currentTag.value && currentTag.value.sid === tag.sid;
+      return currentTag.value ? currentTag.value.sid === tag.sid : false;
     };
   });
   const isMobile = computed(() => browser.isMobile());

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

@@ -8,7 +8,7 @@
             <div
               :id="`vmRef_${index}`"
               class="swiper-zoom-target"
-              :style="`background-image: url(${common.changeUrl(i.src)})`"
+              :style="`background-image: url(${changeUrl(i.src)})`"
             ></div>
           </div>
         </div>
@@ -21,20 +21,25 @@
 </template>
 
 <script setup lang="ts">
-  // import Swiper from './swiper/swiper.js'
-  // import './swiper/swiper.css'
-  // 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();
-  const hotData = computed(() => store.getters['tag/hotData']);
-  const imageList = computed(() => {
-    let list = hotData.value.media.image;
+  import { onMounted, computed, ref, nextTick, defineProps } from 'vue';
+  import { tagType } from '/@/store/modules/scene';
+  import { changeUrl } from '../common';
 
-    return list;
+  const props = defineProps({
+    data: {
+      type: Object,
+      default: {} as any as tagType,
+    },
+    metasHeight: {
+      type: Number,
+      default: null,
+    },
   });
+
+  const imageList = computed(() => {
+    return props.data.media.image;
+  });
+
   const vmZoom = ref([]);
   const zoomList = [];
   onMounted(() => {

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

@@ -11,18 +11,18 @@
 </template>
 
 <script setup>
-  import { ref, computed } from 'vue';
+  import { computed } from 'vue';
+  import { changeUrl } from '../common';
+  // const store = useStore();
+  // const audioNum = ref(0);
+  // const type = ref('audio');
 
-  const store = useStore();
-  const audioNum = ref(0);
-  const type = ref('audio');
-  const hotData = computed(() => store.getters['tag/hotData']);
   const audioInfo = computed(() => {
     return hotData.value.media.audio;
   });
-  const delAudio = () => {
-    store.commit('tag/delMetas', { type: type.value, index: audioNum.value });
-  };
+  // const delAudio = () => {
+  //   store.commit('tag/delMetas', { type: type.value, index: audioNum.value });
+  // };
 </script>
 <style lang="scss" scoped>
   .del-btn {

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

@@ -64,7 +64,7 @@
   const isMobile = ref(false);
   // const type = ref('image');
   const emit = defineEmits(['close']);
-  
+
   const props = defineProps({
     data: {
       type: Object,

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

@@ -12,38 +12,31 @@
       class="video-item"
       x5-video-player-type="h5-page"
       controlslist="nodownload"
-      disablepictureinpicture=""
+      disable-picture-in-picture
       webkit-playsinline=""
       x-webkit-airplay=""
-      playsinline=""
+      playsinline
       :controls="controls"
       autoplay
-      :src="common.changeUrl(i.src)"
+      :src="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']);
+<script setup lang="ts">
+  import { onMounted, nextTick, ref, computed, defineProps } from 'vue';
+  import { changeUrl } from '../common';
+  import { tagType } from '/@/store/modules/scene';
+
+  // const videoNum = ref(0);
+  // const type = ref('video');
+  // const hotData = computed(() => store.getters['tag/hotData']);
+
   const props = defineProps({
+    data: {
+      type: Object,
+      default: {} as any as tagType,
+    },
     controls: {
       type: Boolean,
       default: true,
@@ -55,17 +48,10 @@
   });
   const loading = ref(true);
 
-  const isEdit = computed(() => store.getters['tag/isEdit']);
   const videoSrc = computed(() => {
-    return hotData.value.media.video;
+    return props.data.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;
     // Dialog.toast({

src/components/hotspot/show-tag.vue

@@ -10,6 +10,12 @@
           ref="audio"
           :src="common.changeUrl(audioInfo[0].src)"
         /> -->
+        <kk-audio
+          v-if="tag.type == 'audio' && audioInfo.length > 0"
+          class="audio"
+          ref="audio"
+          :src="changeUrl(audioInfo[0].src)"
+        />
       </h2>
     </div>
     <div class="desc" v-if="tag.content != ''">
@@ -23,6 +29,7 @@
     >
       <metasImage :data="tag" v-if="tag.type == 'image'" />
       <metasWeb :data="tag" v-if="tag.type == 'link'" />
+      <metasVideo :data="tag" v-if="tag.type == 'video'" />
       <!-- <metasImage v-if="tag.type == 'image'" />
       <metasVideo v-if="tag.type == 'video'" />
       <metasWeb v-if="tag.type == 'link'" /> -->
@@ -33,19 +40,48 @@
 <script setup lang="ts">
   import metasImage from './metas/metas-image.vue';
   import metasWeb from './metas/metas-web.vue';
-  import { onMounted } from 'vue';
+  import metasVideo from './metas/metas-video.vue';
+  import { ref, onMounted, computed } from 'vue';
   import { tagType } from '/@/store/modules/scene';
-  defineProps({
+  import { changeUrl } from './common';
+  import { KkAudio } from 'kankan-components';
+  import { watchEffect } from 'vue';
+  import { unref } from 'vue';
+
+  const audio = ref(null);
+  const props = defineProps({
+    show: {
+      type: Boolean,
+      default: false,
+    },
     tag: {
       type: Object,
       default: {} as any as tagType,
     },
   });
+  const audioInfo = computed(() => {
+    return props.tag.media.audio;
+  });
   const emits = defineEmits(['open']);
   const open = () => {
     emits('open');
   };
-  onMounted(() => {});
+  onMounted(() => {
+    watchEffect(() => {
+      if (props.show) {
+        if (unref(audioInfo)?.length && unref(audio)) {
+          console.log('audio-play');
+          // @ts-ignore
+          audio.value?.play();
+        }
+      } else {
+        if (unref(audioInfo)?.length && unref(audio)) {
+          // @ts-ignore
+          audio.value?.pause();
+        }
+      }
+    });
+  });
 </script>
 <style lang="scss" scoped>
   .show-tag {
@@ -110,6 +146,10 @@
         color: #ffffff;
         position: relative;
 
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+
         .ui-audio {
           float: right;
 

src/components/hotspot/tag-view.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-  import { defineEmits, onMounted, ref, computed } from 'vue';
+  import { defineEmits, onMounted, computed } from 'vue';
   import metasImage from './metas/metas-image.vue';
   import imageView from './metas/image-view.vue';
   import browser from '/@/utils/browser';