From aea98d166ba5f5f2bc15ce99035b331302f42831 Mon Sep 17 00:00:00 2001 From: unknown <qq1940665526@163.com> Date: 星期三, 29 五月 2024 14:30:09 +0800 Subject: [PATCH] 优化 --- src/books/childHealth/view/content/index.vue | 166 ++++++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 122 insertions(+), 44 deletions(-) diff --git a/src/books/childHealth/view/content/index.vue b/src/books/childHealth/view/content/index.vue index 3d41ce9..788ebc1 100644 --- a/src/books/childHealth/view/content/index.vue +++ b/src/books/childHealth/view/content/index.vue @@ -1,60 +1,79 @@ <template> <div class="page-main" @scroll="throttledScrollHandler"> - <div class="page-content"> + <div + class="page-content" + :style="{ + fontSize: fontSize ? fontSize + 'px' : '16px', + transform: `scale(${pageZoom ? pageZoom : 1})`, + transformOrigin: 'center top', + }" + > <pageHeader - v-if="showCatalogList.indexOf(0) > -1" + v-if="showCatalogList.indexOf(1) > -1" :showPageList="loadPageList" ></pageHeader> <chapterOne - v-if="showCatalogList.indexOf(1) > -1" - :showPageList="loadPageList" - ></chapterOne> - <chapterTwo v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList" - ></chapterTwo> - <chapterThree + :questionData="questionData" + ></chapterOne> + <chapterTwo v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList" - ></chapterThree> - <chapterFour + :questionData="questionData" + ></chapterTwo> + <chapterThree v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList" - ></chapterFour> - <chapterFive + :questionData="questionData" + ></chapterThree> + <chapterFour v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList" - ></chapterFive> - <chapterSix + :questionData="questionData" + ></chapterFour> + <chapterFive v-if="showCatalogList.indexOf(6) > -1" :showPageList="loadPageList" - ></chapterSix> - <chapterSeven + :questionData="questionData" + ></chapterFive> + <chapterSix v-if="showCatalogList.indexOf(7) > -1" :showPageList="loadPageList" - ></chapterSeven> - <chapterEight + :questionData="questionData" + ></chapterSix> + <chapterSeven v-if="showCatalogList.indexOf(8) > -1" :showPageList="loadPageList" - ></chapterEight> - <chapterNine + :questionData="questionData" + ></chapterSeven> + <chapterEight v-if="showCatalogList.indexOf(9) > -1" :showPageList="loadPageList" - ></chapterNine> - <chapterTen + :questionData="questionData" + ></chapterEight> + <chapterNine v-if="showCatalogList.indexOf(10) > -1" :showPageList="loadPageList" - ></chapterTen> - <chapterEleven + :questionData="questionData" + ></chapterNine> + <chapterTen v-if="showCatalogList.indexOf(11) > -1" :showPageList="loadPageList" + :questionData="questionData" + ></chapterTen> + <chapterEleven + v-if="showCatalogList.indexOf(12) > -1" + :showPageList="loadPageList" + :questionData="questionData" ></chapterEleven> <chapterTwelve - v-if="showCatalogList.indexOf(12) > -1" + v-if="showCatalogList.indexOf(13) > -1" :showPageList="loadPageList" ></chapterTwelve> <chapterThirteen - v-if="showCatalogList.indexOf(13) > -1" + v-if="showCatalogList.indexOf(14) > -1" + :showPageList="loadPageList" ></chapterThirteen> </div> </div> @@ -77,6 +96,8 @@ import chapterThirteen from "./components/chapter013.vue"; import NoteIcon from "@/assets/images/biji.png"; import _ from "lodash"; +import getQuestionList from "@/assets/methods/examination"; +import testData from "../../assets/examinationList"; export default { data() { return { @@ -88,8 +109,17 @@ throttledScrollHandler: null, observer: null, loadPageObserver: null, - loadPageList: [] + loadPageList: [], + questionData: {}, }; + }, + computed: { + fontSize() { + return this.$store.state.qiankun.fontSize; + }, + pageZoom() { + return this.$store.state.qiankun.scale / 100; + }, }, watch: { showCatalogList: { @@ -100,7 +130,7 @@ ) { // 璋冪敤鐖跺眰鏂规硶 this.$store.state.qiankun.catalogChange({ - showCatalogList: newVal + showCatalogList: newVal, }); } // 鍚姩椤电爜瑙傚療 @@ -108,12 +138,12 @@ this.initObservation(); this.initThemeColor(); }, 500); - } - } + }, + }, }, mounted() { // 榛樿鍔犺浇绔犺妭 - this.showCatalogList = [0]; + this.showCatalogList = [1]; // 婊氬姩鐩戝惉鑺傛祦 this.throttledScrollHandler = _.throttle( this.scrollFun, @@ -134,7 +164,7 @@ // 鍒犻櫎绗旇銆侀珮浜�佸垝绾� delSign: (data) => { this.delSign(data); - } + }, }); } @@ -143,13 +173,13 @@ this.observer = new IntersectionObserver(this.pageChangeCallback, { root: null, // 鎸囧畾鏍瑰厓绱狅紝杩欓噷璁句负 null锛岃〃绀洪�夊彇鏁翠釜瑙嗙獥浣滀负鏍瑰厓绱犮�� rootMargin: "0px", // 鎸囧畾鏍瑰厓绱犵殑杈圭晫锛岃繖閲岃涓� "0px"锛岃〃绀烘牴鍏冪礌鐨勮竟鐣屽拰瑙嗙獥鐨勮竟鐣岄噸鍚� - threshold: 0.5 // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般�� + threshold: 0.5, // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般�� }); this.loadPageObserver = new IntersectionObserver(this.loadPageCallback, { root: null, // 鎸囧畾鏍瑰厓绱狅紝杩欓噷璁句负 null锛岃〃绀洪�夊彇鏁翠釜瑙嗙獥浣滀负鏍瑰厓绱犮�� rootMargin: "0px", // 鎸囧畾鏍瑰厓绱犵殑杈圭晫锛岃繖閲岃涓� "0px"锛岃〃绀烘牴鍏冪礌鐨勮竟鐣屽拰瑙嗙獥鐨勮竟鐣岄噸鍚� - threshold: 0 // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般�� + threshold: 0, // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般�� }); // 鍚姩椤电爜瑙傚療 @@ -233,7 +263,7 @@ this.showCatalogList = [ this.catalogLength - 2, this.catalogLength - 1, - this.catalogLength + this.catalogLength, ]; } else { this.showCatalogList = [catalog - 1, catalog, catalog + 1]; @@ -284,7 +314,7 @@ // 绗旇 pageDom.innerHTML = pageDom.innerHTML.replace( reg, - `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')" onmouseover="noteHover('Note','${data.id}','${data.chapterNum}')">${data.txt}<img src="${NoteIcon}"/></span>` + `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')" onmouseover="noteHover('Note','${data.id}','${data.chapterNum}')" onmouseout="noteOut('Note')">${data.txt}<img src="${NoteIcon}"/></span>` ); break; } @@ -322,6 +352,16 @@ this.container ? this.container : document ).querySelectorAll(".page-box"); sections.forEach((section) => { + if (this.config.activeBook && this.config.activeBook.tryPageCount) { + const page = section.getAttribute("page"); + if (Number(page) > this.config.activeBook.tryPageCount) { + let chapterDom = this.getParentWithClass(section, "chapter"); + const chapterNum = chapterDom.getAttribute("num"); + this.catalogLength = Number(chapterNum) - 1; + section.remove(); + return false; + } + } //observer 瑙傚療姣忎釜鍏冪礌锛屼互渚垮湪瀹冧滑杩涘叆鎴栫寮�瑙嗙獥鏃惰Е鍙戝洖璋冨嚱鏁般�� const isObserver = section.getAttribute("observer"); const isLoadObserver = section.getAttribute("loadObserver"); @@ -435,12 +475,18 @@ "chapter" ); const catalog = catalogDom.getAttribute("num"); - console.log("page", page, catalog); + console.log(page, "page", catalog, "catalog",); + let text = null + if(target.querySelector('p')) { + console.log(target.querySelector('p').textContent.substring(0, 20)); + text = target.querySelector('p').textContent.substring(0, 20) + } // 杩斿洖椤电爜鍜岀珷鑺備俊鎭� if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange) this.$store.state.qiankun.pageChange({ page: page, - catalog: catalog + catalog: catalog, + text, }); // const sections = Array.from(document.querySelectorAll(".section")); //sections锛氳幏鍙栨墍鏈夊叿鏈� .section 绫诲悕鐨勫厓绱狅紝骞惰浆鎹负鏁扮粍銆� @@ -450,17 +496,49 @@ }); }, loadPageCallback(entries, observer) { - entries.forEach((entry) => { + entries.forEach(async (entry) => { if (entry.isIntersecting) { const target = entry.target; const page = target.getAttribute("page"); if (this.loadPageList.indexOf(page) == -1) { - this.loadPageList.push(page); - console.log(this.loadPageList,"this.loadPageList"); + // + const catalogDom = this.tool.getParentNodeByClassName( + target, + "chapter" + ); + const catalog = catalogDom.getAttribute("num"); + if (!this.questionData[page]) { + if (testData && testData[catalog]) { + if (testData[catalog][page]) { + if (Array.isArray(testData[catalog][page])) { + this.questionData[page] = await getQuestionList( + page, + testData[catalog][page], + this.config.activeBook + ); + } else { + const obj = {}; + for (let key in testData[catalog][page]) { + obj[key] = await getQuestionList( + [], + testData[catalog][page][key], + this.config.activeBook + ); + } + this.questionData[page] = obj; + } + } + } + } + this.loadPageList.push(Number(page)); + if (this.loadPageList.length > 5) { + // 瓒呰繃5椤� + this.loadPageList.shift(); + } } } }); - } + }, }, components: { pageHeader, @@ -476,8 +554,8 @@ chapterTen, chapterEleven, chapterTwelve, - chapterThirteen - } + chapterThirteen, + }, }; </script> -- Gitblit v1.9.1