From 21dae909b36aab7d9fe48ea904eb1b7d9f44a292 Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期四, 27 六月 2024 15:06:43 +0800
Subject: [PATCH] 优化关闭其他视频方法（学前儿童书）
---
src/books/childHealth/view/content/index.vue | 143 ++++++++++++++++++++++++++++-------------------
1 files changed, 86 insertions(+), 57 deletions(-)
diff --git a/src/books/childHealth/view/content/index.vue b/src/books/childHealth/view/content/index.vue
index 8d4ef10..6b0600d 100644
--- a/src/books/childHealth/view/content/index.vue
+++ b/src/books/childHealth/view/content/index.vue
@@ -8,7 +8,7 @@
:style="{
fontSize: fontSize ? fontSize + 'px' : '16px',
transform: `scale(${pageZoom ? pageZoom : 1})`,
- transformOrigin: 'center top',
+ transformOrigin: 'center top'
}"
>
<pageHeader
@@ -21,61 +21,51 @@
v-if="showCatalogList.indexOf(2) > -1"
:showPageList="loadPageList"
:questionData="questionDataMap"
- :isSearch="isSearch"
></chapterOne>
<chapterTwo
v-if="showCatalogList.indexOf(3) > -1"
:showPageList="loadPageList"
:questionData="questionDataMap"
- :isSearch="isSearch"
></chapterTwo>
<chapterThree
v-if="showCatalogList.indexOf(4) > -1"
:showPageList="loadPageList"
:questionData="questionDataMap"
- :isSearch="isSearch"
></chapterThree>
<chapterFour
v-if="showCatalogList.indexOf(5) > -1"
:showPageList="loadPageList"
:questionData="questionDataMap"
- :isSearch="isSearch"
></chapterFour>
<chapterFive
v-if="showCatalogList.indexOf(6) > -1"
:showPageList="loadPageList"
:questionData="questionDataMap"
- :isSearch="isSearch"
></chapterFive>
<chapterSix
v-if="showCatalogList.indexOf(7) > -1"
:showPageList="loadPageList"
:questionData="questionDataMap"
- :isSearch="isSearch"
></chapterSix>
<chapterSeven
v-if="showCatalogList.indexOf(8) > -1"
:showPageList="loadPageList"
:questionData="questionDataMap"
- :isSearch="isSearch"
></chapterSeven>
<chapterEight
v-if="showCatalogList.indexOf(9) > -1"
:showPageList="loadPageList"
:questionData="questionDataMap"
- :isSearch="isSearch"
></chapterEight>
<chapterNine
v-if="showCatalogList.indexOf(10) > -1"
:showPageList="loadPageList"
:questionData="questionDataMap"
- :isSearch="isSearch"
></chapterNine>
<chapterTen
v-if="showCatalogList.indexOf(11) > -1"
:showPageList="loadPageList"
:questionData="questionDataMap"
- :isSearch="isSearch"
></chapterTen>
<chapterEleven
v-if="showCatalogList.indexOf(12) > -1"
@@ -132,8 +122,7 @@
loadPageList: [],
questionDataMap: {},
renderSignMap: {},
- highlightData: null,
- isSearch:false
+ highlightData: null
};
},
computed: {
@@ -142,7 +131,7 @@
},
pageZoom() {
return this.$store.state.qiankun.scale / 100;
- },
+ }
},
watch: {
showCatalogList: {
@@ -153,7 +142,7 @@
) {
// 璋冪敤鐖跺眰鏂规硶
this.$store.state.qiankun.catalogChange({
- showCatalogList: newVal,
+ showCatalogList: newVal
});
}
// 鍚姩椤电爜瑙傚療
@@ -161,15 +150,16 @@
this.initObservation();
this.initThemeColor();
}, 500);
- },
+ }
},
loadPageList: {
handler(newVal, oldVal) {
setTimeout(() => {
this.initSwiper();
this.initViewer();
+ this.closeVideo()
}, 200);
- },
+ }
},
pageZoom: {
handler(newVal, oldVal) {
@@ -177,8 +167,8 @@
this.container ? this.container : document
).querySelector(".page-main");
scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal;
- },
- },
+ }
+ }
},
mounted() {
// 榛樿鍔犺浇绔犺妭
@@ -213,7 +203,7 @@
// 璺宠浆妫�绱㈢粨鏋滀綅缃�
jumpSearchItem: (data) => {
this.searchItemLocation(data);
- },
+ }
});
}
@@ -222,13 +212,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锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般��
});
// 鍚姩椤电爜瑙傚療
@@ -239,7 +229,7 @@
// 娴嬭瘯椤甸潰璺宠浆
// setTimeout(() => {
- // this.gotoPage(1, 10);
+ // this.gotoPage(8,175);
// setTimeout(() => {
// this.renderSign("Highlight", {
// id: "2ACA9359",
@@ -253,7 +243,7 @@
// ids: ["2ACA9359"]
// });
// }, 2000);
- // }, 5000);
+ // }, 500);
// const pageDom = (this.container ? this.container : document)
// .querySelector("#app")
@@ -267,7 +257,7 @@
// txt: " 杩愬姩绯荤粺鏄敱楠ㄣ�侀杩炵粨鍜岄楠艰倢涓夐儴鍒嗙粍鎴愮殑銆傚叏韬殑楠ㄩ�氳繃楠ㄨ繛缁撶粍鎴愪汉浣撻楠硷紙瑙佸浘1-1锛夈�傞楠兼槸浜轰綋鐨勬敮鏋讹紝鍏锋湁淇濇姢鍐呰剰鍣ㄥ畼銆佷緵鑲岃倝闄勭潃鍜屼綔涓鸿倢鑲夎繍鍔ㄧ殑鏉犳潌绛変綔鐢ㄣ�傚湪绁炵粡绯荤粺鐨勬敮閰嶄笅锛岃倢鑲夋敹缂╃壍鍔ㄦ墍闄勭潃鐨勯缁曠潃鍏宠妭杞姩锛屼娇韬綋浜х敓鍚勭鍔ㄤ綔銆傛墍浠ワ紝杩愬姩绯荤粺鍏锋湁杩愬姩銆佹敮鎸佸拰淇濇姢绛夊姛鑳斤紝骞煎勾鏃舵湡鐨勯楠艰繕鍏锋湁閫犺鍔熻兘銆� ",
// txtIndex: 57
// });
- // }, 5000);
+ // }, 500);
},
methods: {
// setZoom1() {
@@ -339,7 +329,7 @@
this.showCatalogList = [
this.catalogLength - 2,
this.catalogLength - 1,
- this.catalogLength,
+ this.catalogLength
];
} else {
this.showCatalogList = [catalog - 1, catalog, catalog + 1];
@@ -389,7 +379,10 @@
this.container ? this.container : document
).querySelector(`[page="${data.page}"]`);
// 鍒涘缓 createTreeWalker 杩唬鍣紝鐢ㄤ簬閬嶅巻鏂囨湰鑺傜偣锛屼繚瀛樺埌涓�涓暟缁�
- const treeWalker = document.createTreeWalker(pageDom, NodeFilter.SHOW_TEXT);
+ const treeWalker = document.createTreeWalker(
+ pageDom,
+ NodeFilter.SHOW_TEXT
+ );
const allTextNodes = [];
let currentNode = treeWalker.nextNode();
while (currentNode) {
@@ -595,7 +588,7 @@
this.$store.state.qiankun.pageChange({
page: page,
catalog: catalog,
- text,
+ text
});
// const sections = Array.from(document.querySelectorAll(".section"));
//sections锛氳幏鍙栨墍鏈夊叿鏈� .section 绫诲悕鐨勫厓绱狅紝骞惰浆鎹负鏁扮粍銆�
@@ -621,19 +614,19 @@
if (testData && testData[catalog]) {
if (testData[catalog][page]) {
if (Array.isArray(testData[catalog][page])) {
- this.questionDataMap[page] = await getQuestionList(
- page,
- testData[catalog][page],
- this.config.activeBook
- );
+ this.questionDataMap[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
- );
+ obj[key] = await getQuestionList(
+ [],
+ testData[catalog][page][key],
+ this.config.activeBook
+ );
}
this.questionDataMap[page] = obj;
}
@@ -653,7 +646,10 @@
// 楂樹寒琛�
setTimeout(() => {
// 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣
- const pageTextList = document.createTreeWalker(target, NodeFilter.SHOW_TEXT);
+ const pageTextList = document.createTreeWalker(
+ target,
+ NodeFilter.SHOW_TEXT
+ );
// 鍖归厤鍏抽敭瀛�
const allPageTextNodes = [];
let currentNode = pageTextList.nextNode();
@@ -697,23 +693,23 @@
autoplay: {
//鑷姩寮�濮�
delay: 3000, //鏃堕棿闂撮殧
- disableOnInteraction: false, //*鎵嬪姩鎿嶄綔杞挱鍥惧悗涓嶄細鏆傚仠*
+ disableOnInteraction: false //*鎵嬪姩鎿嶄綔杞挱鍥惧悗涓嶄細鏆傚仠*
},
paginationClickable: true,
slidesPerView: 1, // 涓�缁勪笁涓�
spaceBetween: 30, // 闂撮殧
// 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳
navigation: {
- nextEl: (this.container ? this.container : document).querySelector(
+ nextEl: dom.querySelector(
".swiper-button-next"
),
- prevEl: (this.container ? this.container : document).querySelector(
+ prevEl: dom.querySelector(
".swiper-button-prev"
- ),
+ )
},
// 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔�
observer: true,
- observeParents: true,
+ observeParents: true
// // 濡傛灉闇�瑕佸垎椤靛櫒
// pagination: {
// el: (this.container ? this.container : document).querySelector(
@@ -736,12 +732,12 @@
spaceBetween: 30, // 闂撮殧
// 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳
navigation: {
- nextEl: (this.container ? this.container : document).querySelector(
+ nextEl: dom.querySelector(
".swiper-button-next"
),
- prevEl: (this.container ? this.container : document).querySelector(
+ prevEl: dom.querySelector(
".swiper-button-prev"
- ),
+ )
},
// 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔�
observer: true,
@@ -760,8 +756,8 @@
var paginationInfoEl = dom.querySelector(".pageBox");
if (paginationInfoEl)
paginationInfoEl.textContent = currentPage + "/" + totalPages;
- },
- },
+ }
+ }
});
}
},
@@ -777,7 +773,7 @@
: "body",
navbar: true, // 鏄剧ず瀵艰埅鏍�
toolbar: true, // 鏄剧ず宸ュ叿鏍�
- title: true, // 鏄剧ず鏍囬
+ title: true // 鏄剧ず鏍囬
});
}
},
@@ -800,7 +796,7 @@
chapterTen,
chapterEleven,
chapterTwelve,
- chapterThirteen,
+ chapterThirteen
};
// 閬嶅巻鎵�鏈夌珷鑺傛枃浠�
for (const key in pageData) {
@@ -812,7 +808,8 @@
propsData: {
showPageList: [],
questionData: {},
- },
+ isSearch: true
+ }
});
pageExample.$mount(
(this.container ? this.container : document).querySelector(
@@ -843,7 +840,8 @@
propsData: {
showPageList: [pageNum],
questionData: {},
- },
+ isSearch: true
+ }
});
pageExample.$mount(
(this.container ? this.container : document).querySelector(
@@ -856,7 +854,10 @@
.querySelector(`[page="${pageNum}"]`);
if (thisPageDom) {
// 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣
- const pageTextList = document.createTreeWalker(thisPageDom, NodeFilter.SHOW_TEXT);
+ const pageTextList = document.createTreeWalker(
+ thisPageDom,
+ NodeFilter.SHOW_TEXT
+ );
// 鍖归厤鍏抽敭瀛�
const allPageTextNodes = [];
let currentNode = pageTextList.nextNode();
@@ -873,7 +874,7 @@
page: pageNum,
catalog: catalogIndex,
txt: textDom.textContent,
- txtIndex: txtIndex,
+ txtIndex: txtIndex
});
}
}
@@ -897,6 +898,34 @@
// 璺宠浆
this.gotoPage(data.catalog, data.page, () => {});
},
+ closeVideo() {
+ let allVideo = (
+ this.container ? this.container : document
+ ).querySelectorAll(".video");
+ for (let index = 0; index < allVideo.length; index++) {
+ const item = allVideo[index];
+ item.addEventListener('playing',(item) => {
+ const path = item.srcElement.src
+ const videoList = Array.from(allVideo);
+ console.log('鎾斁',item);
+ for (let cindex = 0; cindex < videoList.length; cindex++) {
+ const citem = videoList[cindex];
+ if(citem.currentSrc != path && path) {
+ citem.pause()
+ }
+ }
+ })
+ }
+ }
+ // allVideo = Array.from(allVideo);
+ // if(allVideo.length) {
+ // for (let index = 0; index < allVideo.length; index++) {
+ // const item = allVideo[index];
+ // if(item.currentSrc != path) {
+ // item.pause()
+ // }
+ // }
+ // }
},
components: {
pageHeader,
@@ -912,8 +941,8 @@
chapterTen,
chapterEleven,
chapterTwelve,
- chapterThirteen,
- },
+ chapterThirteen
+ }
};
</script>
--
Gitblit v1.9.1