编辑器-热点-pdf（还不能上传）

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

@@ -902,10 +902,13 @@
     "add_video": "Add a video",
     "select_video": "Add a video",
     "change_video": "Change a video",
-    "10MB_limit": "不超过10MB",
+    "MB_limit": "不超过{value}MB",
     "text_content": "文字内容",
     "apply_to_all": "应用到所有",
-    "phone_placeholder": "请输入电话号码"
+    "phone_placeholder": "请输入电话号码",
+    "select_pdf": "添加PDF",
+    "change_pdf": "更换PDF",
+    "pdf_invalid_tip": "请选择50MB以内、PDF格式的文件"
   },
   "explanation": {
     "explanation_settings": "Voice Guide",

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

@@ -906,10 +906,13 @@
     "add_video": "添加视频",
     "select_video": "添加视频",
     "change_video": "更换视频",
-    "10MB_limit": "不超过10MB",
+    "MB_limit": "不超过{value}MB",
     "text_content": "文字内容",
     "apply_to_all": "应用到所有",
-    "phone_placeholder": "请输入电话号码"
+    "phone_placeholder": "请输入电话号码",
+    "select_pdf": "添加PDF",
+    "change_pdf": "更换PDF",
+    "pdf_invalid_tip": "请选择50MB以内、PDF格式的文件"
   },
   "explanation": {
     "explanation_settings": "语音讲解",

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

@@ -105,11 +105,16 @@
         </div>
         
         <div class="effect-setting">
-          <div
-            class="remark-highlight"
-            v-if="$i18n.t(`hotspot.hotspot_type_specific_settings_title.${hotspot.hotspotType}`)"
-          >
-            {{ $i18n.t(`hotspot.hotspot_type_specific_settings_title.${hotspot.hotspotType}`) }}
+          <div class="title-line">
+            <div
+              class="remark-highlight"
+              v-if="$i18n.t(`hotspot.hotspot_type_specific_settings_title.${hotspot.hotspotType}`)"
+            >
+              {{ $i18n.t(`hotspot.hotspot_type_specific_settings_title.${hotspot.hotspotType}`) }}
+            </div>
+            <div class="tip" v-if="currentHotspotTypeConfigData.tip">
+              {{currentHotspotTypeConfigData.tip}}
+            </div>
           </div>
           <component
             class="effect-setting-component"
@@ -296,6 +301,11 @@ export default {
       }
 
       return true
+    },
+    currentHotspotTypeConfigData() {
+      return hotspotTypeList.find((item) => {
+        return item.id === this.hotspot.hotspotType
+      })
     }
   },
   mounted() {
@@ -522,10 +532,20 @@ export default {
     }
     .effect-setting {
       margin-top: 16px;
-      .remark-highlight {
+      > .title-line {
         margin-top: 16px;
-        font-size: 18px;
-        color: #FFFFFF;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        > .remark-highlight {
+          font-size: 18px;
+          color: #FFFFFF;
+        }
+        > .tip {
+          font-size: 14px;
+          color: #FFFFFF;
+          opacity: 0.6;
+        }
       }
       .combox {
         margin-top: 16px;

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

@@ -302,21 +302,25 @@ export default {
           },
           phoneInfo: { // 热点类型为电话时，对应数据
             phone: '',
-          }
+          },
+          pdfInfo: { // 热点类型为pdf时，对应数据
+            name: '',
+            url: '',
+          },
         }
       } else {
         hotspotData = browser.CloneObject(data)
-        // v1.3新增了“热点图标类型”
+        /**
+         * v1.3新增
+         */
         if (!hotspotData.hotspotIconType) {
           hotspotData.hotspotIconType = 'system_icon'
         }
-        // v1.3针对类型为自定义图标的热点图标，新增的数据
         if (!hotspotData.customIconInfo) {
           hotspotData.customIconInfo = { 
             img: '',
           }
         }
-        // v1.3针对序列帧类型的热点图标，新增的数据
         if (!hotspotData.serialFrameInfo) {
           hotspotData.serialFrameInfo = {
             url: '',
@@ -324,7 +328,6 @@ export default {
             duration: 0,
           }
         }
-        // v1.3针对个性标签类型的热点图标，新增的数据
         hotspotData.personalizedTagInfo = {
           isShowLine: true,
           lineDirection: 'left-top',
@@ -341,11 +344,9 @@ export default {
         } else if (hotspotData.visible === false) {
           hotspotData.titleDisplayMode = 'never'
         }
-        // v1.3新增
         if (!hotspotData.titlePosition) {
           hotspotData.titlePosition = 'top'
         }
-        // v1.3新增
         if (!hotspotData.imageTextInfo) {
           hotspotData.imageTextInfo = {
             imageList: [],
@@ -354,12 +355,20 @@ export default {
             audio: {}
           }
         }
-        // v1.3新增
         if (!hotspotData.phoneInfo) {
           hotspotData.phoneInfo = {
             phone: '',
           }
         }
+        if (!hotspotData.pdfInfo) {
+          hotspotData.pdfInfo = {
+            name: '',
+            url: '',
+          }
+        }
+        /**
+         * end of v1.3新增
+         */
       }
 
       this.$store.commit("SetHotspot", hotspotData)

packages/qjkankan-editor/src/views/hotspot/hotspotType/imageText.vue

@@ -9,7 +9,7 @@
       >
         <img src="@/assets/images/default/hotspot_scene_add.png" alt="">
         <div class="name">{{$i18n.t('hotspot.add_image')}}</div>
-        <div class="tip">{{$i18n.t('hotspot.10MB_limit')}}</div>
+        <div class="tip">{{$i18n.t('hotspot.MB_limit', {value: '10'})}}</div>
       </button>
       <ul class="image-list" v-else>
         <button class="add-btn" @click="isShowImageSelect = true">

packages/qjkankan-editor/src/views/hotspot/hotspotType/pdf.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="pdf-hotspot-setting">
+    <button class="add-btn" v-if="!hotspot.pdfInfo.name" @click="onClickSelect">
+      <i class="iconfont icon-editor_add"></i>
+      {{$i18n.t('hotspot.select_pdf')}}
+    </button>
+    <template v-else>
+      <div class="pdf-display">
+        <div class="name" v-title="hotspot.pdfInfo.name">{{hotspot.pdfInfo.name}}</div>
+        <i class="iconfont icon-editor_list_delete" @click.stop="del"></i>
+      </div>
+      <button class="change-btn" @click="onClickSelect">
+        <i class="iconfont icon-editor_update"></i>
+        {{$i18n.t('hotspot.change_pdf')}}
+      </button>
+    </template>
+
+    <input
+      ref="file-input"
+      type="file"
+      style="display: none"
+      accept=".pdf"
+      @change="onFileInputChange"
+    />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+  data() {
+    return {
+    }
+  },
+  computed: {
+    ...mapGetters({
+      hotspot: 'hotspot',
+    }),
+  },
+  methods:{
+    del(){
+      this.hotspot.pdfInfo = {}
+    },
+    onClickSelect(){
+      this.$refs['file-input'].click()
+    },
+    onFileInputChange(e) {
+      console.log(e);
+
+      // 检查格式和大小
+      if (e.target.files[0].type !== 'application/pdf' || e.target.files[0].size / 1024 / 1024 > 50) {
+        this.$msg.warning(this.$i18n.t('hotspot.pdf_invalid_tip'))
+        return
+      }
+      
+      // 上传pdf，拿到上传结果后给this.pdfInfo赋值
+      this.hotspot.pdfInfo = {
+        name: e.target.files[0].name,
+        url: '',
+      }
+    }
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.pdf-hotspot-setting {
+  > .add-btn {
+    margin-top: 16px;
+    width: 100%;
+    height: 40px;
+    background: #1A1B1D;
+    border-radius: 2px;
+    border: 1px solid #404040;
+    display: block;
+    color: #0076F6;
+    font-size: 14px;
+    cursor: pointer;
+    &:hover {
+      border-color: @color;
+    }
+    i {
+      font-size: 14px;
+    }
+  }
+  > .pdf-display {
+    margin-top: 16px;
+    width: 100%;
+    height: 40px;
+    background: #1A1B1D;
+    border-radius: 2px;
+    border: 1px solid #404040;
+    color: #fff;
+    text-align: center;
+    font-size: 14px;
+    position: relative;
+    > .name {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 65%;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      display: inline-block;
+    }
+    > i {
+      display: none;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 18px;
+      cursor: pointer;
+      &:hover {
+        color: #FA5555;
+      }
+    }
+    &:hover {
+      > i {
+        display: initial;
+      }
+    }
+  }
+  > .change-btn {
+    margin-top: 16px;
+    width: 100%;
+    height: 40px;
+    background: #1A1B1D;
+    border-radius: 2px;
+    border: 1px solid #404040;
+    display: block;
+    color: #0076F6;
+    font-size: 14px;
+    cursor: pointer;
+    &:hover {
+      border-color: @color;
+    }
+    i {
+      font-size: 14px;
+    }
+  }
+}
+</style>

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

@@ -60,6 +60,7 @@ export default [
     name: i18n.t('hotspot.pdf'),
     id: 'pdf',
     isExperience: true,
+    tip: i18n.t('hotspot.MB_limit', {value: '50'})
   },
   {
     icon: require('@/assets/images/icons/hotspot-type/phone.png'),