pdf

packages/qjkankan-editor/src/api/index.js

@@ -265,7 +265,7 @@ export function get3DSceneList(data, ok) {
 
 /**
  * 上传封面
- * @param {*} data 
+ * @param {*} data: {file sceneCode} 
  * @param {*} ok 
  * @param {*} no 
  */
@@ -275,6 +275,7 @@ export function get3DSceneList(data, ok) {
 
 
 
+
 /**
  * 保存全景图初始视角
  * @param {*} data 
@@ -616,6 +617,8 @@ export function uploadMaterial(data, ok, no, onProgress) {
   return http.uploadFile(`${URL_FILL}/manage/fodder/uploadDir`, data, ok, no, onProgress)
 }
 
+
+
 /**
  * 删除素材或文件夹
  * @param {*} data 
@@ -761,5 +764,13 @@ export function delFolder(id) {
  export function checkUserSize(data, ok, no) {
     return http.get(`${URL_FILL}/manage/fodder/checkUserSize`, data, ok, no)
 }
+/**
+ * 上传附件
+ * @param {*} data 
+ * @param {*} ok 
+ * @param {*} no 
+ */
 
-
+export function uploadAttachment(data, ok, no) {
+  return http.uploadFile(`${URL_FILL}/manage/work/uploadHot`, data, ok, no)
+}

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

@@ -2,16 +2,18 @@
   <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')}}
+      {{ $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>
+        <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')}}
+        {{ $i18n.t("hotspot.change_pdf") }}
       </button>
     </template>
 
@@ -27,41 +29,56 @@
 
 <script>
 import { mapGetters } from "vuex";
-
+import { uploadAttachment } from "@/api";
 export default {
   data() {
-    return {
-    }
+    return {};
   },
   computed: {
     ...mapGetters({
-      hotspot: 'hotspot',
+      hotspot: "hotspot",
+      currentScene: "scene/currentScene",
     }),
   },
-  methods:{
-    del(){
-      this.hotspot.pdfInfo = {}
+  methods: {
+    del() {
+      this.hotspot.pdfInfo = {};
     },
-    onClickSelect(){
-      this.$refs['file-input'].click()
+    onClickSelect() {
+      this.$refs["file-input"].click();
     },
-    onFileInputChange(e) {
-      console.log(e);
-
+    async onFileInputChange(e) {
+      console.log("onFileInputChange", e);
+      console.log("currentScene", this.currentScene.sceneCode);
       // 检查格式和大小
-      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: '',
+      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;
       }
-    }
+      uploadAttachment(
+        { file: e.target.files[0], sceneCode: this.currentScene.sceneCode },
+        (res) => {
+          console.log(res);
+          if (res.code == 0) {
+            this.hotspot.pdfInfo = {
+              name: e.target.files[0].name,
+              url: res.data,
+            };
+          }
+        }
+      );
+
+      // // 上传pdf，拿到上传结果后给this.pdfInfo赋值
+      // this.hotspot.pdfInfo = {
+      //   name: e.target.files[0].name,
+      //   url: "",
+      // };
+    },
   },
-}
+};
 </script>
 
 <style lang="less" scoped>
@@ -70,11 +87,11 @@ export default {
     margin-top: 16px;
     width: 100%;
     height: 40px;
-    background: #1A1B1D;
+    background: #1a1b1d;
     border-radius: 2px;
     border: 1px solid #404040;
     display: block;
-    color: #0076F6;
+    color: #0076f6;
     font-size: 14px;
     cursor: pointer;
     &:hover {
@@ -88,7 +105,7 @@ export default {
     margin-top: 16px;
     width: 100%;
     height: 40px;
-    background: #1A1B1D;
+    background: #1a1b1d;
     border-radius: 2px;
     border: 1px solid #404040;
     color: #fff;
@@ -114,7 +131,7 @@ export default {
       right: 18px;
       cursor: pointer;
       &:hover {
-        color: #FA5555;
+        color: #fa5555;
       }
     }
     &:hover {
@@ -127,11 +144,11 @@ export default {
     margin-top: 16px;
     width: 100%;
     height: 40px;
-    background: #1A1B1D;
+    background: #1a1b1d;
     border-radius: 2px;
     border: 1px solid #404040;
     display: block;
-    color: #0076F6;
+    color: #0076f6;
     font-size: 14px;
     cursor: pointer;
     &:hover {

packages/qjkankan-view/src/components/assembly/Tags/index.vue

@@ -9,6 +9,7 @@
       <metasText v-if="currentTag.hotspotType == 'textarea'" />
       <metasArticle v-if="currentTag.hotspotType == 'article'" />
       <metasImageText v-if="currentTag.hotspotType == 'imageText'" />
+      <metasPdf v-if="currentTag.hotspotType == 'pdf'" />
     </div>
   </teleport>
 </template>
@@ -21,6 +22,7 @@ import metasVideo from './metas/metas-video'
 import metasText from './metas/metas-text'
 import metasArticle from './metas/metas-article.vue'
 import metasImageText from './metas/metas-imagetext.vue'
+import metasPdf from './metas/metas-pdf.vue'
 
 import { reactive, defineEmits, onBeforeMount, onMounted, ref, watchEffect, computed, watch, nextTick } from "vue";
 import { useStore } from "vuex";

packages/qjkankan-view/src/components/assembly/Tags/metas/metas-pdf.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="videocon">
+    <iframe :src="currentTag.pdfInfo.url" frameborder="0" allowfullscreen></iframe>
+  </div>
+</template>
+
+<script setup>
+import { reactive, defineEmits, onBeforeMount, onMounted, ref, watchEffect, computed, watch, nextTick } from "vue";
+import { useStore } from "vuex";
+const store = useStore();
+
+const currentTag = computed(() => store.getters['tags/currentTag'])
+  
+</script>
+
+<style lang="scss" scoped>
+.videocon{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  >iframe{
+    width: 90%;
+    height: 86%;
+  }
+  .title{
+    position: absolute;
+    left: 20px;
+    top: 20px;
+    height: 36px;
+    line-height: 36px;
+    padding: 0 30px;
+    background: rgba(0,0,0,0.6);
+    border-radius: 20px;
+    color: #fff;
+    font-size: 14px;
+    z-index: 999;
+    >i{
+      margin-right: 4px;
+    }
+  }
+}
+</style>