| | |
| | | :showPageList="loadPageList" |
| | | ></chapterOne> |
| | | </div> |
| | | <miniAudio :path="audioPath"></miniAudio> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import pageHeader from "./header.vue"; |
| | | import chapterOne from "./chapter001.vue"; |
| | | import miniAudio from "@/components/miniAudio/index.vue"; |
| | | import NoteIcon from "@/assets/images/biji.png"; |
| | | import _ from "lodash"; |
| | | import Swiper from "swiper/bundle"; |
| | |
| | | import Viewer from "viewerjs"; |
| | | import "viewerjs/dist/viewer.css"; |
| | | export default { |
| | | name: "page-main", |
| | | data() { |
| | | return { |
| | | catalogLength: 2, // 总章节数 |
| | |
| | | loadPageList: [], |
| | | questionData: {}, |
| | | renderSignMap: {}, |
| | | audioPath:'' |
| | | }; |
| | | }, |
| | | computed: { |
| | |
| | | }, |
| | | loadPageList: { |
| | | handler(newVal, oldVal) { |
| | | console.log(newVal, "this.loadPageList"); |
| | | setTimeout(() => { |
| | | this.initSwiper(); |
| | | this.initViewer(); |
| | | this.getAduio(); |
| | | }, 200); |
| | | }, |
| | | }, |
| | |
| | | // 立即渲染 |
| | | this.renderSign(type, data); |
| | | } |
| | | |
| | | // 储存数据 |
| | | if (!this.renderSignMap[type]) this.renderSignMap[type] = {}; |
| | | if (!this.renderSignMap[type][data.page]) |
| | |
| | | // testData[catalog][page], |
| | | // this.config.activeBook |
| | | // ); |
| | | |
| | | // } else { |
| | | // const obj = {}; |
| | | // for (let key in testData[catalog][page]) { |
| | |
| | | // } |
| | | // this.questionData[page] = obj; |
| | | // } |
| | | // console.log('题目',this.questionData); |
| | | // console.log("题目", this.questionData); |
| | | // } |
| | | // } |
| | | // } |
| | |
| | | initSwiper() { |
| | | const doms = ( |
| | | this.container ? this.container : document |
| | | ).querySelectorAll(".swiper-container"); |
| | | ).querySelectorAll(".swiper-img"); |
| | | for (let i = 0; i < doms.length; i++) { |
| | | const dom = doms[i]; |
| | | new Swiper(dom, { |
| | |
| | | // } |
| | | }); |
| | | } |
| | | const pptDoms = ( |
| | | this.container ? this.container : document |
| | | ).querySelectorAll(".swiper_ppt"); |
| | | for (let i = 0; i < pptDoms.length; i++) { |
| | | const dom = pptDoms[i]; |
| | | new Swiper(dom, { |
| | | loop: false, // 无缝 |
| | | autoplay: false, |
| | | paginationClickable: true, |
| | | slidesPerView: 1, // 一组三个 |
| | | spaceBetween: 30, // 间隔 |
| | | // 如果需要前进后退按钮 |
| | | navigation: { |
| | | nextEl: (this.container ? this.container : document).querySelector( |
| | | ".swiper-button-next" |
| | | ), |
| | | prevEl: (this.container ? this.container : document).querySelector( |
| | | ".swiper-button-prev" |
| | | ), |
| | | }, |
| | | // 窗口变化,重新init,针对F11全屏和放大缩小,必须加 |
| | | observer: true, |
| | | observeParents: true, |
| | | on: { |
| | | init: (value) => { |
| | | let currentPage = value.activeIndex + 1; // 获取当前页(从1开始计数) |
| | | let totalPages = value.slides.length; // 获取总页数 |
| | | var paginationInfoEl = dom.querySelector(".pageBox"); |
| | | if (paginationInfoEl) |
| | | paginationInfoEl.textContent = currentPage + "/" + totalPages; |
| | | }, |
| | | slideChange: (value) => { |
| | | let currentPage = value.activeIndex + 1; // 获取当前页(从1开始计数) |
| | | let totalPages = value.slides.length; // 获取总页数 |
| | | var paginationInfoEl = dom.querySelector(".pageBox"); |
| | | if (paginationInfoEl) |
| | | paginationInfoEl.textContent = currentPage + "/" + totalPages; |
| | | }, |
| | | }, |
| | | }); |
| | | } |
| | | }, |
| | | initViewer() { |
| | | const doms = ( |
| | |
| | | } |
| | | }, |
| | | // 点击事件:将生僻单词传给 主应用 从而调用词典功能 |
| | | saveCharacters(event,word) { |
| | | console.log('生僻字',event,word); |
| | | saveCharacters(event, word) { |
| | | console.log("生僻字", event, word); |
| | | if (this.$store.state.qiankun && this.$store.state.qiankun.chooseWords) { |
| | | this.$store.state.qiankun.chooseWords({ |
| | | word, |
| | | x: event.pageX, |
| | | y: event.pageY |
| | | }); |
| | | } |
| | | this.$store.state.qiankun.chooseWords({ |
| | | type: "word", |
| | | word, |
| | | x: event.pageX, |
| | | y: event.pageY, |
| | | }); |
| | | } |
| | | // chooseWords |
| | | } |
| | | |
| | | }, |
| | | // 获取auido实例 |
| | | getAduio() { |
| | | let allVideo = ( |
| | | this.container ? this.container : document |
| | | ).querySelectorAll(".audio"); |
| | | allVideo = Array.from(allVideo) |
| | | if (allVideo.length) { |
| | | const playAudio = allVideo.reverse().find((item) => item.paused == false); |
| | | if (playAudio) { |
| | | console.log("第个音频在播放", playAudio.src); |
| | | this.audioPath = playAudio.src |
| | | } |
| | | } |
| | | }, |
| | | }, |
| | | components: { |
| | | pageHeader, |
| | | chapterOne, |
| | | miniAudio, |
| | | }, |
| | | }; |
| | | </script> |