编辑器-热点 进行中

packages/qjkankan-editor/src/lang/_en.json

@@ -817,6 +817,7 @@
     "setting_screen": "Set the current view to the start screen"
   },
   "hotspot": {
+    "hotspot_type": "热点类型",
     "img_size":"Upload up to 20 images",
     "hotspot_setting": "Hotspot settings",
     "hotspot_tips": "Add icon hotspots to the panorama and configure their effect",
@@ -831,6 +832,12 @@
     "close_dialog": "Hotspot content is not fully edited, confirm to close it",
     "hotspot_name": "Hotspots",
     "hotspot_icon": "Hotspot icon",
+    "hotspot_icon_type": {
+      "system_icon": "系统图标",
+      "custom_image": "自定义图片",
+      "serial_frame": "序列帧",
+      "personalized_tag": "个性标签"
+    },
     "select_hotspot_icon": "Select the hotspot icon",
     "input_hotspot_title": "Enter the hotspot title",
     "select_icon": "Select Icon",
@@ -849,13 +856,18 @@
     "effect_settings": "Effect settings",
     "cancel": "Cancel",
     "finish": "Finish",
-    "secne": "Scene",
-    "audio": "Audio",
-    "video": "Video",
+    "scene": "Scene",
     "image": "Image",
+    "video": "Video",
+    "audio": "Audio",
     "link": "Hyperlink",
     "textarea": "Text",
-    "secne_errortxt": "Please select a scene",
+    "tag": "标签",
+    "image_text": "图文",
+    "article": "文章",
+    "pdf": "PDF",
+    "phone": "电话",
+    "scene_errortxt": "Please select a scene",
     "audio_errortxt": "Please select audio",
     "video_errortxt": "Please choose a video",
     "image_errortxt": "Please select pictures",

packages/qjkankan-editor/src/lang/_zh.json

@@ -822,6 +822,7 @@
     "setting_screen": "将当前视角设为初始画面"
   },
   "hotspot": {
+    "hotspot_type": "热点类型",
     "img_size":"最多添加20张图片",
     "hotspot_setting": "热点设置",
     "hotspot_tips": "在全景图中添加图标热点，并设置热点的效果。",
@@ -836,6 +837,12 @@
     "close_dialog": "热点内容未编辑完，确定要关闭吗",
     "hotspot_name": "热点",
     "hotspot_icon": "热点图标",
+    "hotspot_icon_type": {
+      "system_icon": "系统图标",
+      "custom_image": "自定义图片",
+      "serial_frame": "序列帧",
+      "personalized_tag": "个性标签"
+    },
     "select_hotspot_icon": "请选择热点图标",
     "input_hotspot_title": "请输入热点标题",
     "select_icon": "热点图标",
@@ -854,13 +861,18 @@
     "effect_settings": "效果设置",
     "cancel": "取消",
     "finish": "完成",
-    "secne": "场景",
-    "audio": "音频",
-    "video": "视频",
+    "scene": "切换场景",
     "image": "图片",
-    "link": "超链接",
+    "video": "视频",
+    "audio": "音频",
+    "link": "链接",
     "textarea": "文本",
-    "secne_errortxt": "请选择场景",
+    "tag": "标签",
+    "image_text": "图文",
+    "article": "文章",
+    "pdf": "PDF",
+    "phone": "电话",
+    "scene_errortxt": "请选择场景",
     "audio_errortxt": "请选择音频",
     "video_errortxt": "请选择视频",
     "image_errortxt": "请选择图片",

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

@@ -15,12 +15,11 @@
       <div class="content" ref="content">
         
         <div class="type-setting">
-          <div class="remark">热点类型</div>
+          <div class="remark">{{ $i18n.t('hotspot.hotspot_type') }}</div>
           <combox
             class="combox"
             :data="hotspotTypeList"
             :selected-id="hotspot.hotspotType"
-            :bottomSpace="comboxBottomSpace"
             @change="onHotSpotTypeChange"
           />
         </div>
@@ -31,12 +30,11 @@
             class="combox"
             :data="hotspotIconTypeList"
             :selected-id="hotspot.hotspotIconType"
-            :bottomSpace="comboxBottomSpace"
             @change="onHotspotIconTypeChange"
           />
           <component
             class="icon-setting-component"
-            :is="iconSettingComponent"
+            :is="iconTypeComponent"
             ref="icon-setting-component"
             @addHotspot="addHotspot"
           />
@@ -160,16 +158,20 @@ export default {
       hotspotTypeList,
       hotspotIconTypeList: [
         {
-          name: '系统图标',
-          id: 'system',
+          name: this.$i18n.t("hotspot.hotspot_icon_type.system_icon"),
+          id: 'system_icon',
         },
         {
-          name: '自定义图标',
-          id: 'custom',
+          name: this.$i18n.t("hotspot.hotspot_icon_type.custom_image"),
+          id: 'custom_image',
         },
         {
-          name: '个性标签',
-          id: 'personalized',
+          name: this.$i18n.t("hotspot.hotspot_icon_type.serial_frame"),
+          id: 'serial_frame',
+        },
+        {
+          name: this.$i18n.t("hotspot.hotspot_icon_type.personalized_tag"),
+          id: 'personalized_tag',
         },
       ],
       rang: {
@@ -181,7 +183,6 @@ export default {
         max: 2,
       },
       isAdd: true,
-      comboxBottomSpace: 0,
     }
   },
   watch: {
@@ -227,7 +228,7 @@ export default {
       hotspot: 'hotspot',
       backupHotSpot: 'backupHotSpot',
     }),
-    iconSettingComponent() {
+    iconTypeComponent() {
       let tmp = this.hotspot.hotspotIconType
       return () => import(`./hotspotIconType/${tmp}.vue`);
     },
@@ -294,7 +295,6 @@ export default {
         this.rang.value = window.g_hotspotCurrentScale
         this.onRangeChange({ value: window.g_hotspotCurrentScale })
       }
-      this.comboxBottomSpace = this.$refs.content.getBoundingClientRect().bottom
     }, 300)
   },
 

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

@@ -247,7 +247,7 @@ export default {
           atv: '',
           size: 1,
           hotspotType: data.hotspotType, // 热点类型，切换场景、图片、视频、音频、链接、文本等等
-          hotspotIconType: 'system', // 热点图标的类型，系统图标、自定义图标、个性标签
+          hotspotIconType: 'system_icon', // 热点图标的类型，系统图标(system_icon)、自定义图片(custom_image)、序列帧(serial_frame)、个性标签(personalized_tag)
           secne: '',
           hyperlink: '',
           textarea: '',
@@ -259,7 +259,7 @@ export default {
         hotspotData = browser.CloneObject(data)
         // v1.3新增了“热点图标类型”
         if (!hotspotData.hotspotIconType) {
-          hotspotData.hotspotIconType = 'system'
+          hotspotData.hotspotIconType = 'system_icon'
         }
         // v1.3把visible: Boolean换成了titleDisplayMode
         if (hotspotData.visible) {
@@ -319,7 +319,7 @@ export default {
       position: relative;
       display: inline-flex;
       flex-direction: column;
-      // justify-content: center;
+      justify-content: center;
       align-items: center;
       width: 72px;
       height: 72px;
@@ -330,9 +330,9 @@ export default {
       margin-bottom: 9px;
       cursor: pointer;
       > .icon {
-        width: 50px;
-        height: 50px;
-        margin-bottom: -5px;
+        width: 28px;
+        height: 28px;
+        margin-bottom: 3px;
       }
       > .type-name {
         font-size: 12px;

packages/qjkankan-editor/src/views/hotspot/hotspotIconType/custom.vue

@@ -1,3 +0,0 @@
-<template>
-  <div>自定义图标</div>
-</template>

packages/qjkankan-editor/src/views/hotspot/hotspotIconType/custom_image.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="hotspot-icon-custom">
+    <button
+      v-if="!selectedIcon"
+      class="add-icon"
+      @click="isShowSelectionWindow = true"
+    >
+      <img src="@/assets/images/default/hotspot_scene_add.png" alt="">
+      <div class="button-name">添加图标</div>
+      <div class="tip">300*300px，支持jpg/png格式</div>
+    </button>
+    <div v-if="selectedIcon" class="icon-selected">
+      <div class="icon-wrap">
+        <img class="thumb" :src="selectedIcon" alt="">
+        <button class="delete-btn" @click="onClickDelete">
+          <img class="normal" src="@/assets/images/icons/close01_normal@2x.png" alt="">
+          <img class="hover" src="@/assets/images/icons/close01_hover@2x.png" alt="">
+        </button>
+      </div>
+      <div class="right-wrap">
+        <button class="select-icon ui-button submit" @click="isShowSelectionWindow = true">选择图标</button>
+        <div class="tip">300*300px，支持jpg/png格式</div>
+      </div>
+    </div>
+
+    <div class="dialog" style="z-index: 2000" v-if="isShowSelectionWindow">
+      <MaterialSelector
+        :title="$i18n.t(`gather.select_material`)"
+        @cancle="isShowSelectionWindow = false"
+        @submit="handleSubmitFromMaterialSelector"
+        :selectableType="['image']"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import MaterialSelector from "@/components/materialSelector.vue";
+
+export default {
+  components: {
+    MaterialSelector,
+  },
+  data() {
+    return {
+      selectedIcon: null,
+      isShowSelectionWindow: false,
+    }
+  },
+  methods: {
+    handleSubmitFromMaterialSelector(data) {
+      this.isShowSelectionWindow = false
+      this.selectedIcon = data[0].icon
+      this.$emit('addHotspot', {
+        type: 'custom_image',
+        img: data[0].icon,
+      })
+    },
+    onClickDelete() {
+      this.selectedIcon = null
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.hotspot-icon-custom {
+  height: 110px;
+  width: 100%;
+  > button.add-icon {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: #1A1B1D;
+    border-radius: 2px;
+    border: 1px solid #404040;
+    cursor: pointer;
+    > img {
+      width: 30px;
+      height: 30px;
+      margin-bottom: 6px;
+    }
+    > .button-name {
+      font-size: 14px;
+      color: #0076F6;
+      margin-bottom: 4px;
+    }
+    > .tip {
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.3);
+    }
+  }
+  > .icon-selected {
+    display: flex;
+    justify-content: space-between;
+    > .icon-wrap {
+      width: 110px;
+      height: 110px;
+      position: relative;
+      > .thumb {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: 2px;
+      }
+      > .delete-btn {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 20px;
+        height: 20px;
+        background: none;
+        border: none;
+        padding: 0;
+        cursor: pointer;
+        &:hover {
+          .normal {
+            display: none;
+          }
+          .hover {
+            display: initial;
+          }
+        }
+        > .normal {
+          display: initial;
+          width: 100%;
+          height: 100%;
+        }
+        > .hover {
+          display: none;
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    > .right-wrap {
+      width: 108px;
+      > button.select-icon {
+        margin-bottom: 14px;
+      }
+      > .tip {
+        font-size: 14px;
+        color: rgba(255,255,255,0.3);
+      }
+    }
+  }
+}
+</style>

packages/qjkankan-editor/src/views/hotspot/hotspotIconType/serial_frame.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="hotspot-icon-serial-frame">
+    序列帧
+  </div>
+</template>

packages/qjkankan-editor/src/views/hotspot/hotspotIconType/system.vue

@@ -22,7 +22,7 @@ export default {
     let hotspotIconList = []
     for (let i = 0; i < 17; i++) {
       hotspotIconList[i] = {
-        type: 'system',
+        type: 'system_icon',
         id: 'icon' + (i + 1),
         img: cdn + `img_doticon_${String(i + 1).padStart(2, '0')}.svg`,
         thumb: cdn + `img_doticon_${String(i + 1).padStart(2, '0')}.svg`

packages/qjkankan-editor/src/views/hotspot/hotspotTypeList.js

@@ -1,97 +1,70 @@
+import { i18n } from "@/lang"
+
 export default [
   {
-    icon: require('@/assets/images/icons/hotspot-type/link.png'),
-    name: '切换场景',
+    icon: require('@/assets/images/icons/hotspot-type/scene.png'),
+    name: i18n.t('hotspot.scene'),
     id: 'scene',
     isExperience: false,
   },
   {
-    icon: require('@/assets/images/icons/hotspot-type/link.png'),
-    name: '图片',
+    icon: require('@/assets/images/icons/hotspot-type/image.png'),
+    name: i18n.t('hotspot.image'),
     id: 'image',
     isExperience: false,
   },
   {
-    icon: require('@/assets/images/icons/hotspot-type/link.png'),
-    name: '视频',
+    icon: require('@/assets/images/icons/hotspot-type/video.png'),
+    name: i18n.t('hotspot.video'),
     id: 'video',
     isExperience: false,
   },
   {
-    icon: require('@/assets/images/icons/hotspot-type/link.png'),
-    name: '音频',
+    icon: require('@/assets/images/icons/hotspot-type/audio.png'),
+    name: i18n.t('hotspot.audio'),
     id: 'audio',
     isExperience: false,
   },
   {
     icon: require('@/assets/images/icons/hotspot-type/link.png'),
-    name: '链接',
+    name: i18n.t('hotspot.link'),
     id: 'link',
     isExperience: false,
   },
   {
-    icon: require('@/assets/images/icons/hotspot-type/link.png'),
-    name: '文本',
+    icon: require('@/assets/images/icons/hotspot-type/textarea.png'),
+    name: i18n.t('hotspot.textarea'),
     id: 'textarea',
     isExperience: false,
   },
   {
-    icon: require('@/assets/images/icons/hotspot-type/link.png'),
-    name: '标签',
+    icon: require('@/assets/images/icons/hotspot-type/tag.png'),
+    name: i18n.t('hotspot.tag'),
     id: 'tag',
     isExperience: true,
   },
   {
-    icon: require('@/assets/images/icons/hotspot-type/link.png'),
-    name: '图文',
+    icon: require('@/assets/images/icons/hotspot-type/image-text.png'),
+    name: i18n.t('hotspot.image_text'),
     id: 'imgText',
     isExperience: true,
   },
   {
-    icon: require('@/assets/images/icons/hotspot-type/link.png'),
-    name: '文章',
+    icon: require('@/assets/images/icons/hotspot-type/article.png'),
+    name: i18n.t('hotspot.article'),
     id: 'article',
     isExperience: true,
   },
   {
-    icon: require('@/assets/images/icons/hotspot-type/link.png'),
-    name: 'PDF',
+    icon: require('@/assets/images/icons/hotspot-type/pdf.png'),
+    name: i18n.t('hotspot.pdf'),
     id: 'pdf',
     isExperience: true,
   },
   {
-    icon: require('@/assets/images/icons/hotspot-type/link.png'),
-    name: '电话',
+    icon: require('@/assets/images/icons/hotspot-type/phone.png'),
+    name: i18n.t('hotspot.phone'),
     id: 'phone',
     isExperience: true,
   },
-]
-
-/*
-      hotSpotTypeList: [
-        {
-          id: 'scene',
-          name: this.$i18n.t('hotspot.secne')
-        },
-        {
-          id: 'link',
-          name: this.$i18n.t('hotspot.link')
-        },
-        {
-          id: 'textarea',
-          name: this.$i18n.t('hotspot.textarea')
-        },
-        {
-          id: 'image',
-          name: this.$i18n.t('hotspot.image')
-        },
-        {
-          id: 'audio',
-          name: this.$i18n.t('hotspot.audio')
-        },
-        {
-          id: 'video',
-          name: this.$i18n.t('hotspot.video')
-        }
-      ],
-*/
+]