update

src/App.vue

@@ -90,8 +90,8 @@
     });
     // SDK初始化
     app.use('MinMap', { theme: { camera_fillStyle: '#ED5D18' } }).then(() => {
-      // refMiniMap.value = '[xui_min_map]';
-      console.log('小地图SDK');
+      refMiniMap.value = '[xui_min_map]';
+      console.log('小地图init-SDK');
     });
     app.use('Tag');
 
@@ -158,7 +158,6 @@
     });
     app.Scene.on('loaded', (pano) => {
       appStore.setFloorId(pano.floorIndex);
-      refMiniMap.value = '[xui_min_map]';
 
       // store.commit("setFloorId", pano.floorIndex);
       // store.commit("rtc/setShowdaogou", true);
@@ -330,7 +329,7 @@
       {{ maxNumber }}
     </span> -->
     <span>
-      {{ t('base.debuginfo') }}：公告，测试1.1.0-0424-03,角色:{{ rtcStore.role }} rId:{{
+      {{ t('base.debuginfo') }}：公告，测试1.2.0-0704,角色:{{ rtcStore.role }} rId:{{
         rtcStore.roomId || browser.getURLParam('roomId')
       }}
       sceneIndex:{{ currentSceneIndex }} uid::

src/components/basic/miniMap.vue

@@ -1,5 +1,5 @@
 <template>
-  <teleport v-show="show" v-if="ifShow" :to="refMiniMap">
+  <Teleport v-show="show" v-if="ifShow" :to="refMiniMap">
     <span class="button-switch" @click.stop="toggleMap">
       <i
         class="iconfont ui-kankan-icon icon tip-h-center tip-v-bottom icon-show_map_collect iconzm-show_map_collect"
@@ -11,7 +11,7 @@
       ></i>
       <span> {{ t('base.threeDModel') }}</span>
     </div>
-  </teleport>
+  </Teleport>
 </template>
 <script lang="ts">
   import { computed, defineComponent, onMounted, ref, unref, watch } from 'vue';
@@ -44,13 +44,11 @@
       onMounted(() => {
         watch(
           () => [props.show, props.to],
-          () => {
-            if (props.to?.length && props.show) {
-              console.log('小地图must show', props.to, props.show);
-              setTimeout(() => {
-                ifShow.value = true;
-                refMiniMap.value = props.to;
-              }, 10);
+          ([val1, val2]) => {
+            if (val1 && String(val2).length > 0) {
+              console.error('小地图显示');
+              ifShow.value = true;
+              refMiniMap.value = props.to;
             }
           },
           {

src/components/hotspot/constant.js

@@ -1,69 +0,0 @@
-import i18n from '@/i18n';
-const { t } = i18n.global;
-
-export const custom = () => {
-  return {
-    image: {
-      icon: 'pic',
-      upload: true,
-      uploadPlace: t('common.upload') + t('common.image'),
-      accept: `.jpg,.png`,
-      multiple: true,
-      name: t('common.image'),
-      maxSize: 5 * 1024 * 1024,
-      maxNum: 9,
-      // othPlaceholder: '支持JPG、PNG图片格式，单张不超过5MB，最多支持上传9张。',
-      othPlaceholder: t('tag.toolbox.metaImageTips', {
-        form: 'jpg/png/gif',
-        size: '5MB',
-        maxlength: '9',
-      }),
-    },
-    video: {
-      icon: 'video',
-      upload: true,
-      uploadPlace: t('common.upload') + t('common.video'),
-      accept: `.mp4, .mov`,
-      multiple: false,
-      name: t('common.video'),
-      maxSize: 20 * 1024 * 1024,
-      // othPlaceholder: '支持MP4、MOV视频格式，码率小于2Mbps,不超过20MB',
-      othPlaceholder: t('tag.toolbox.metaVideoTips', {
-        form: 'mp4/mov',
-        size: '20MB',
-        bit: '2Mbps',
-      }),
-    },
-    audio: {
-      icon: 'music',
-      upload: true,
-      uploadPlace: t('common.upload') + t('common.audio'),
-      accept: '.mp3, .wav',
-      multiple: false,
-      name: t('common.audio'),
-      maxSize: 5 * 1024 * 1024,
-      // othPlaceholder: '支持MP3、WAV格式，不超过5MB',
-      othPlaceholder: t('tag.toolbox.metaAudioTips', { form: 'mp3/wav', size: '5MB' }),
-    },
-    link: {
-      icon: 'web',
-      name: t('common.link'),
-    },
-    text: {
-      icon: 'pic',
-      upload: true,
-      uploadPlace: t('common.upload') + t('common.image'),
-      accept: `.jpg,.png`,
-      multiple: true,
-      name: t('common.image'),
-      maxSize: 5 * 1024 * 1024,
-      maxNum: 9,
-      // othPlaceholder: '支持JPG、PNG图片格式，单张不超过5MB，最多支持上传9张。',
-      othPlaceholder: t('tag.toolbox.metaImageTips', {
-        form: 'jpg/png/gif',
-        size: '5MB',
-        maxlength: '9',
-      }),
-    },
-  };
-};

src/components/hotspot/index.vue

@@ -1,6 +1,6 @@
 <template>
   <teleport :to="tags$" v-if="tags$">
-    <template v-for="(tag, index) in tags" :key="tag.sid">
+    <template v-for="tag in tags" :key="tag.sid">
       <div
         :tag-sid="tag.sid"
         @mouseleave.prevent="onMouseLeave($event, tag)"
@@ -15,7 +15,7 @@
         <span
           class="point zoom"
           @mouseenter.prevent="onMouseEnter($event, tag)"
-          @click.stop="goTag($event, tag, index)"
+          @click.stop="goTag($event, tag)"
           :style="{ 'background-image': 'url(' + getUrl(tag.icon) + ')' }"
         ></span>
         <div class="content">
@@ -74,11 +74,12 @@
   const openLayer = (tag: tagType) => {
     showLayer.value = true;
     currentTag.value = tag;
+    console.error('open-layer');
   };
   const closeLayer = (tag: tagType) => {
     showLayer.value = false;
     currentTag.value = tag;
-    setTimeout(() => {}, 1000);
+    console.error('close-layer');
   };
 
   const closeTag = async () => {
@@ -86,23 +87,36 @@
     isClick.value = false;
   };
 
-  const goTag = async (_, item: tagType) => {
-    // const app = await useApp();
+  const goTag = (_, item: tagType) => {
+    console.warn('gototag', item.sid);
+    showLayer.value = false;
     if (unref(isClick)) {
       currentTag.value = null;
       isClick.value = false;
     } else {
+      currentTag.value = item;
       isClick.value = true;
-      focusTag(item);
+      try {
+        focusTag(item);
+      } catch (error) {
+        console.log('error', error);
+      }
     }
   };
   const onMouseLeave = (_, tag: tagType) => {
-    if (!unref(isClick) && currentTag.value?.sid === tag.sid && !unref(showLayer)) {
+    if (
+      !unref(isMobile) &&
+      !unref(isClick) &&
+      currentTag.value?.sid === tag.sid &&
+      !unref(showLayer)
+    ) {
       currentTag.value = null;
     }
   };
   const onMouseEnter = (_, tag: tagType) => {
-    currentTag.value = tag;
+    if (!unref(isMobile)) {
+      currentTag.value = tag;
+    }
   };
 
   onMounted(async () => {
@@ -117,24 +131,13 @@
         app.TagManager.updatePosition(tags.value);
       }
     });
-    app.Camera.on('flying.started', (pano) => {});
-    // app.Scene.on('loadeddata', () => {
-    //   if (browser.hasURLParam('t_id')) {
-    //     let t_id = browser.getURLParam('t_id');
-    //     for (let i = 0; i < tags.value.length; i++) {
-    //       if (tags.value[i].sid == t_id) {
-    //         goTag({}, tags.value[i], i);
-    //       }
-    //     }
-    //   }
-    // });
-    // app.Camera.on('flying.ended', ({ targetPano }) => {
-    // })
+    // app.Camera.on('flying.started', (pano) => {});
+    // app.Camera.on('flying.ended', ({ targetPano }) => {});
     await app.TagManager.tag();
 
     tags$.value = '[xui_tags]';
 
-    if (app.config.mobile) {
+    if (unref(isMobile)) {
       nextTick(() => {
         // let player = document.querySelector('.player')
         // player.addEventListener('touchstart', onClickHandler)
@@ -151,9 +154,9 @@
   };
 
   const focusTag = (tag: tagType) => {
-    console.log('focusTag');
-    nextTick(async () => {
-      const app = await useApp();
+    nextTick(() => {
+      const app = getApp();
+      // console.error('focusTag-1');
       let t = setTimeout(() => {
         clearTimeout(t);
         let tagBox = document.getElementById(`tagBox_${tag.sid}`);

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

@@ -21,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-  import { onMounted, computed, ref, nextTick, defineProps } from 'vue';
+  import { onMounted, computed, nextTick, defineProps } from 'vue';
   import { tagType } from '/@/store/modules/scene';
   import { changeUrl } from '../common';
 
@@ -40,11 +40,11 @@
     return props.data.media.image;
   });
 
-  const vmZoom = ref([]);
-  const zoomList = [];
+  // const vmZoom = ref([]);
+  // const zoomList = [];
   onMounted(() => {
-    let urls = [];
-    var swiper = new Swiper('.mySwiper', {
+    // let urls = [];
+    new (window as any).Swiper('.mySwiper', {
       zoom: {
         toggle: false,
         maxRatio: 5,
@@ -53,19 +53,19 @@
         el: '.swiper-pagination',
       },
       on: {
-        init: function (swiper) {
+        init: function (_) {
           // for (let i = 0; i < imageList.value.length; i++) {
           //     vmZoom.value[i] = document.getElementById(`vmRef_${i}`)
           //     zoomElement(vmZoom.value[i])
           // }
         },
-        transitionStart: function (swiper) {
+        transitionStart: function (_) {
           // alert(swiper.previousIndex)
           // console.log(vmZoom.value[swiper.previousIndex].style.transform)
           // let scale = getTransform(vmZoom.value[swiper.previousIndex])
         },
 
-        touchStart: function (swiper, event) {
+        touchStart: function () {
           // console.log(swiper.previousIndex)
         },
       },

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

@@ -12,7 +12,7 @@
 
 <script setup>
   import { computed } from 'vue';
-  import { changeUrl } from '../common';
+  // import { changeUrl } from '../common';
   // const store = useStore();
   // const audioNum = ref(0);
   // const type = ref('audio');

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

@@ -56,14 +56,14 @@
 </template>
 
 <script setup lang="ts">
-  import { onMounted, nextTick, ref, computed, defineProps, defineEmits } from 'vue';
+  import { onMounted, nextTick, ref, computed, defineProps } from 'vue';
   import { tagType } from '/@/store/modules/scene';
   import { changeUrl } from '../common';
   // import { useApp } from '/@/hooks/userApp';
   import browser from '/@/utils/browser';
   const isMobile = ref(false);
   // const type = ref('image');
-  const emit = defineEmits(['close']);
+  // const emit = defineEmits(['close']);
 
   const props = defineProps({
     data: {
@@ -100,33 +100,33 @@
       resetScale();
     }
   };
-  const hanlderFiles = (data) => {
-    // store.commit('tag/setImageList', data[0])
-    setImageList(data[0]);
-    // if (imageNum.value < imageList.value.length + data[0].length - 1) {
-    //     imageNum.value = imageList.value.length + data[0].length - 1
-    // }
-    imageNum.value = imageList.value.length - 1;
-  };
+  // const hanlderFiles = (data) => {
+  //   // store.commit('tag/setImageList', data[0])
+  //   setImageList(data[0]);
+  //   // if (imageNum.value < imageList.value.length + data[0].length - 1) {
+  //   //     imageNum.value = imageList.value.length + data[0].length - 1
+  //   // }
+  //   imageNum.value = imageList.value.length - 1;
+  // };
 
-  const setImageList = (data) => {
-    let picLength = 0;
-    let list = JSON.parse(JSON.stringify(imageList.value));
-    if (list.length > 0) {
-      picLength = list.length;
-    }
+  // const setImageList = (data) => {
+  //   let picLength = 0;
+  //   let list = JSON.parse(JSON.stringify(imageList.value));
+  //   if (list.length > 0) {
+  //     picLength = list.length;
+  //   }
 
-    for (let i = 0; i < data.length; i++) {
-      if (list.length < 9) {
-        list.push('');
-        var index = i + picLength;
-        list[index] = { src: URL.createObjectURL(data[i]), file: data[i] };
-      } else {
-        break;
-      }
-    }
-    // store.commit('tag/setImageList', list);
-  };
+  //   for (let i = 0; i < data.length; i++) {
+  //     if (list.length < 9) {
+  //       list.push('');
+  //       var index = i + picLength;
+  //       list[index] = { src: URL.createObjectURL(data[i]), file: data[i] };
+  //     } else {
+  //       break;
+  //     }
+  //   }
+  //   // store.commit('tag/setImageList', list);
+  // };
   let result = { width: 0, height: 0 },
     x,
     y,
@@ -135,8 +135,8 @@
     maxScale = 4,
     isPointerdown = false, // 按下标识
     diff = { x: 0, y: 0 }, // 相对于上一次pointermove移动差值
-    lastPointermove = { x: 0, y: 0 }, // 用于计算diff
-    transform = { x: 0, y: 0 };
+    lastPointermove = { x: 0, y: 0 }; // 用于计算diff
+  // transform = { x: 0, y: 0 };
 
   const drag = (image) => {
     // 绑定 pointerdown
@@ -161,13 +161,13 @@
       e.preventDefault();
     });
     // 绑定 pointerup
-    image.addEventListener('pointerup', function (e) {
+    image.addEventListener('pointerup', function (_) {
       if (isPointerdown) {
         isPointerdown = false;
       }
     });
     // 绑定 pointercancel
-    image.addEventListener('pointercancel', function (e) {
+    image.addEventListener('pointercancel', function (_) {
       if (isPointerdown) {
         isPointerdown = false;
       }
@@ -233,7 +233,7 @@
   };
   let imgEle: HTMLImageElement;
   const initScale = () => {
-    imgEle = document.getElementById(`domImg${imageNum.value}`);
+    imgEle = document.getElementById(`domImg${imageNum.value}`) as HTMLImageElement;
 
     x = 0;
     y = 0;

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

@@ -61,7 +61,7 @@
     return props.data.media.video;
   });
 
-  const filesError = (file) => {
+  const filesError = (_) => {
     loading.value = false;
     // Dialog.toast({
     //     content: '视频文件加载失败',

src/components/hotspot/metas/scale/index.js

@@ -1,145 +0,0 @@
-import Hammer from 'hammerjs' // 引用hammerjs
-// 定义缩放方法，接收一个element参数：使用export暴露该方法
-export function zoomElement(el) {
-    function point2D(x, y) {
-        return { x: x, y: y }
-    }
-    // 判断 正数，负数，不是数字
-    function checkNumType(num) {
-        var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
-        if (reg.test(num)) {
-            // 用于检测一个字符串是否匹配某个模式
-            var absVal = Math.abs(num) // 如果参数是非负数，则返回该参数；如果参数是负数，则返回该参数的相反数。
-            return num == absVal ? true : false
-        } else {
-            console.log('this is not number')
-        }
-    }
-    function exChangeNum(num, reNum) {
-        let flag = checkNumType(num)
-        let reFlag = checkNumType(reNum)
-        let realNum = 0
-        if (!flag && reFlag) {
-            realNum = Number('-' + reNum)
-        } else {
-            realNum = Number(reNum)
-        }
-        return realNum
-    }
-    var reqAnimationFrame = (function () {
-        return (
-            window[Hammer.prefixed(window, 'requestAnimationFrame')] ||
-            function (callback) {
-                window.setTimeout(callback, 1000 / 60)
-            }
-        )
-    })()
-    var ticking = false
-    var tMatrix = [1, 0, 0, 1, 0, 0] //x缩放，无，无，y缩放，x平移，y平移
-    var initScale = 1 //初始化scale
-    el.addEventListener('touchmove', function (e) {
-        e.preventDefault()
-    })
-    var mc = new Hammer.Manager(el)
-    var nowScale = 0
-    var poscenter = point2D(0, 0) // 缓存双指的中心坐标
-    var duration = '' // 设置过渡效果，用于双击缩放效果
-    var lastTranslate = point2D(0, 0) // 记录上次的偏移值
-    var lastcenter = point2D(el.offsetWidth / 2, el.offsetHeight / 2) // 图像的中心点，用于对比双指中心点
-    var center = lastcenter // 初始化为图片中心点
-    // 添加缩放事件
-    mc.add(new Hammer.Pan({ threshold: 0, pointers: 1 }))
-    mc.add(new Hammer.Pinch({ threshold: 0 }))
-    mc.add(new Hammer.Tap({ event: 'doubletap', taps: 2 }))
-    mc.on('pinchstart', onPinchStart) // 双指缩放
-    mc.on('pinchmove', onPinch) // 双指移动
-    mc.on('panmove', onPan)
-    mc.on('panstart', onPanStart)
-    // 缩放开始
-    function onPinchStart(ev) {
-        duration = ''
-        lastTranslate = point2D(tMatrix[4], tMatrix[5]) //记录上一次的偏移值 0 0
-        initScale = tMatrix[0] || 1
-        // 手势中心点
-        poscenter = point2D(ev.center.x, ev.center.y)
-        // 图像中心点  = 初始化图像中心点  + 上一次偏移量的中心点
-        lastcenter = point2D(center.x + lastTranslate.x, center.y + lastTranslate.y) //重新计算放大后的中心坐标
-        // 手势中心点 = 缩放中心点 - 图像中心点
-        poscenter = point2D(ev.center.x - lastcenter.x, ev.center.y - lastcenter.y)
-        requestElementUpdate('onpinchStart')
-    }
-    // 缩放途中
-    function onPinch(ev) {
-        // 缩放倍数 这里的缩放倍数
-        nowScale = initScale * ev.scale
-        // 如果倍数小于1 则等于1
-        if (nowScale < 1) {
-            nowScale = 1
-        }
-        // 缩放倍数
-        tMatrix[0] = tMatrix[3] = nowScale
-        let x = Number((1 - ev.scale) * poscenter.x + lastTranslate.x)
-        let y = Number((1 - ev.scale) * poscenter.y + lastTranslate.y)
-        let tempPosX = el.getBoundingClientRect().width / 2 - point2D(el.offsetWidth / 2, el.offsetHeight / 2).x
-        let tempPosY = el.getBoundingClientRect().height / 2 - point2D(el.offsetWidth / 2, el.offsetHeight / 2).y
-        if (Math.abs(x) > Math.abs(tempPosX)) {
-            x = exChangeNum(x, tempPosX)
-        }
-
-        if (Math.abs(y) > Math.abs(tempPosY)) {
-            y = exChangeNum(y, tempPosY)
-        }
-        tMatrix[4] = x
-        tMatrix[5] = y
-        requestElementUpdate('onpinch')
-    }
-    // 开始拖动
-    function onPanStart() {
-        lastTranslate = point2D(tMatrix[4], tMatrix[5]) // 缓存上一次的偏移值
-    }
-    // 拖动过程
-    function onPan(ev) {
-        tMatrix[0] = tMatrix[3] = nowScale || initScale
-        // 拖动的动画 1.6
-        duration = '1.6'
-        let x = Number(lastTranslate.x + ev.deltaX)
-        let y = Number(lastTranslate.y + ev.deltaY)
-        let tempPosX = el.getBoundingClientRect().width / 2 - point2D(el.offsetWidth / 2, el.offsetHeight / 2).x
-        let tempPosY = el.getBoundingClientRect().height / 2 - point2D(el.offsetWidth / 2, el.offsetHeight / 2).y
-        if (Math.abs(x) > Math.abs(tempPosX)) {
-            x = exChangeNum(x, tempPosX)
-        }
-        if (Math.abs(y) > Math.abs(tempPosY)) {
-            y = exChangeNum(y, tempPosY)
-        }
-        tMatrix[4] = x
-        tMatrix[5] = y
-        requestElementUpdate('onpan')
-    }
-
-    // 每次都会·更新 因为是在移动端 所以都采用rem 否则可以直接用matrix
-    function updateElementTransform() {
-        el.style.transition = duration
-        let x = tMatrix[4] + 'px'
-        let y = tMatrix[5] + 'px'
-        el.style.transform = 'translate(' + x + ',' + y + ') ' + 'scale(' + tMatrix[0] + ',' + tMatrix[3] + ')'
-        el.style.WebkitTransform = 'translate(' + x + ',' + y + ') ' + 'scale(' + tMatrix[0] + ',' + tMatrix[3] + ')'
-        el.style.msTransform = 'translate(' + x + ',' + y + ') ' + 'scale(' + tMatrix[0] + ',' + tMatrix[3] + ')'
-        // var tmp = tMatrix.join(',')
-        // el.style.transform = 'matrix(' + tmp + ')'
-        // el.style.WebkitTransform = 'matrix(' + tmp + ')'
-        // el.style.msTransform = 'matrix(' + tmp + ')'
-        ticking = false
-    }
-    function requestElementUpdate() {
-        if (!ticking) {
-            reqAnimationFrame(updateElementTransform)
-            ticking = true
-        }
-    }
-    /**
-  初始化设置
-  */
-
-    requestElementUpdate()
-}

src/components/hotspot/show-tag.vue

@@ -4,12 +4,6 @@
     <div class="tag-title">
       <h2>
         {{ tag.title }}
-        <!-- <ui-audio
-          v-if="tag.type == 'audio' && audioInfo.length > 0"
-          class="audio"
-          ref="audio"
-          :src="common.changeUrl(audioInfo[0].src)"
-        /> -->
         <kk-audio
           v-if="tag.type == 'audio' && audioInfo.length > 0"
           class="audio"
@@ -25,14 +19,11 @@
       class="tag-metas"
       @click.stop="open"
       :class="{ mask: tag.type == 'link', nocursor: tag.type == 'video' }"
-      v-if="tag.media[tag.type].length > 0 && tag.type != 'audio'"
+      v-if="show && tag.media[tag.type].length > 0 && tag.type != 'audio'"
     >
       <metasImage :data="tag" v-if="tag.type == 'image'" />
-      <metasWeb :data="tag" v-if="tag.type == 'link'" />
+      <metasWeb :data="tag" v-if="tag.type == 'link' && isUsingMiniApp" />
       <metasVideo :show="show" :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'" /> -->
     </div>
   </div>
 </template>
@@ -45,9 +36,10 @@
   import { tagType } from '/@/store/modules/scene';
   import { changeUrl } from './common';
   import { KkAudio } from 'kankan-components';
-  import { watchEffect } from 'vue';
-  import { unref } from 'vue';
+  import { watchEffect, unref } from 'vue';
+  import { useMiniApp } from '/@/hooks/useMiniApp';
 
+  const { isUsingMiniApp } = useMiniApp();
   const audio = ref(null);
   const props = defineProps({
     show: {
@@ -64,7 +56,7 @@
   });
   const emits = defineEmits(['open']);
   const open = () => {
-    if (props.tag.type !== 'video') {
+    if (props.tag.type !== 'video' && props.show) {
       emits('open');
     }
   };

src/store/modules/scene.ts

@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia';
 import { KankanMetaDataType } from '/#/sdk';
 import { getApp } from '/@/hooks/userApp';
+import { useMiniApp } from '/@/hooks/useMiniApp';
 // useApp,
 export interface FloorsType {
   id: string;
@@ -89,7 +90,12 @@ export const useSceneStore = defineStore({
     },
     loadTags(tags: tagType[]): void {
       if (tags?.length) {
-        this.tags = tags;
+        const { isUsingMiniApp } = useMiniApp();
+        if (isUsingMiniApp.value) {
+          this.tags = tags.filter((item) => item.type !== 'link');
+        } else {
+          this.tags = tags;
+        }
       }
     },
   },