编辑器-热点-文章热点：除了富文本编辑器以外的功能

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

@@ -908,7 +908,9 @@
     "phone_placeholder": "请输入电话号码",
     "select_pdf": "添加PDF",
     "change_pdf": "更换PDF",
-    "pdf_invalid_tip": "请选择50MB以内、PDF格式的文件"
+    "pdf_invalid_tip": "请选择50MB以内、PDF格式的文件",
+    "add_article": "添加文章内容",
+    "edit_article": "编辑文章内容"
   },
   "explanation": {
     "explanation_settings": "Voice Guide",

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

@@ -912,7 +912,9 @@
     "phone_placeholder": "请输入电话号码",
     "select_pdf": "添加PDF",
     "change_pdf": "更换PDF",
-    "pdf_invalid_tip": "请选择50MB以内、PDF格式的文件"
+    "pdf_invalid_tip": "请选择50MB以内、PDF格式的文件",
+    "add_article": "添加文章内容",
+    "edit_article": "编辑文章内容"
   },
   "explanation": {
     "explanation_settings": "语音讲解",

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

@@ -307,6 +307,9 @@ export default {
             name: '',
             url: '',
           },
+          articleInfo: {
+            name: '',
+          }
         }
       } else {
         hotspotData = browser.CloneObject(data)
@@ -366,6 +369,11 @@ export default {
             url: '',
           }
         }
+        if (!hotspotData.articleInfo) {
+          hotspotData.articleInfo = {
+            selected: false,
+          }
+        }
         /**
          * end of v1.3新增
          */

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

@@ -0,0 +1,124 @@
+<template>
+  <div class="article-hotspot-setting">
+    <button class="add-btn" v-if="!hotspot.articleInfo.name" @click="onClickAdd">
+      <i class="iconfont icon-editor_add"></i>
+      {{$i18n.t('hotspot.add_article')}}
+    </button>
+    <template v-else>
+      <div class="article-display">
+        <div class="name" v-title="hotspot.articleInfo.name">{{hotspot.articleInfo.name}}</div>
+        <i class="iconfont icon-editor_list_delete" @click.stop="del"></i>
+      </div>
+      <button class="change-btn" @click="onClickEdit">
+        <!-- <i class="iconfont icon-editor_update"></i> -->
+        <img class="icon-editor_update" src="@/assets/images/icons/edit.png" alt="" draggable="false">
+        {{$i18n.t('hotspot.edit_article')}}
+      </button>
+    </template>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+  computed: {
+    ...mapGetters({
+      hotspot: 'hotspot',
+    }),
+  },
+  methods: {
+    onClickAdd() {
+      this.hotspot.articleInfo.name = 'afdsdf'
+    },
+    onClickEdit() {
+    },
+    del() {
+      this.hotspot.articleInfo = {
+        name: '',
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.article-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;
+    }
+  }
+  > .article-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;
+    }
+    img {
+      width: 14px;
+      height: 14px;
+    }
+  }
+}
+</style>