From 07e802281480d7ee063eb7c742c8f6c0bde77f43 Mon Sep 17 00:00:00 2001
From: unknown <qq1940665526@163.com>
Date: 星期四, 06 六月 2024 14:35:19 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout
---
src/books/English/view/components/chapter001.vue | 8 +
src/components/miniAudio/index.vue | 34 ++++++
src/books/English/view/components/index.vue | 217 ++++++++++++++++++++++++++++++++++++++++---
3 files changed, 240 insertions(+), 19 deletions(-)
diff --git a/src/books/English/view/components/chapter001.vue b/src/books/English/view/components/chapter001.vue
index 8978021..979cc6b 100644
--- a/src/books/English/view/components/chapter001.vue
+++ b/src/books/English/view/components/chapter001.vue
@@ -505,7 +505,7 @@
<div class="bodystyle">
<h3 id="c002" class="fl al-cn">
<span class="bjh3">Listening</span>
- <audio :src="resource.listenOne" controls class="audio"></audio>
+ <audio :src="resource.listenOne" controls class="audio" @play="audioPlay"></audio>
</h3>
<p>
<b
@@ -526,7 +526,7 @@
</div>
<h3 id="c003" class="fl al-cn">
<span class="bjh3">Reading</span>
- <audio :src="resource.readingOne" controls class="audio"></audio>
+ <audio :src="resource.readingOne" controls class="audio" @play="audioPlay"></audio>
</h3>
<p>
1.How was Chinese culture introduced to the world in ancient
@@ -736,6 +736,7 @@
controls
style="margin-left: 10px"
class="audio"
+ @play="audioPlay"
></audio>
<p>wonderland /藞w蕦nd蓹l忙nd/ <i>n.</i> 鏈夎澶氬濡欎簨鐗╃殑鍦版柟</p>
<div class="bkbj">
@@ -2741,6 +2742,9 @@
saveData() {
console.log(this.testData);
},
+ audioPlay() {
+ this.$emit("closeMiniAudio")
+ }
},
};
</script>
diff --git a/src/books/English/view/components/index.vue b/src/books/English/view/components/index.vue
index 884face..a62ae6a 100644
--- a/src/books/English/view/components/index.vue
+++ b/src/books/English/view/components/index.vue
@@ -14,6 +14,7 @@
></pageHeader>
<chapterOne
@saveCharacters="saveCharacters"
+ @closeMiniAudio="closeMiniAudio"
v-if="showCatalogList.indexOf(2) > -1"
:showPageList="loadPageList"
></chapterOne>
@@ -21,6 +22,7 @@
<miniAudio
:path="audioPath"
:currentTime="currentTime"
+ @closeMiniAudio="closeMiniAudio"
ref="audioPlayer"
></miniAudio>
</div>
@@ -37,10 +39,9 @@
import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";
export default {
- name: "page-main",
data() {
return {
- catalogLength: 2, // 鎬荤珷鑺傛暟
+ catalogLength: 14, // 鎬荤珷鑺傛暟
showCatalogList: [], // 鏄剧ず鐨勭珷鑺�
loadThreshold: 300, // 瑙﹀彂鍔犺浇闃堝��
throttleThreshold: 100, // 鑺傛祦闃堝��
@@ -49,8 +50,9 @@
observer: null,
loadPageObserver: null,
loadPageList: [],
- questionData: {},
+ questionDataMap: {},
renderSignMap: {},
+ highlightData: null,
audioPath: "",
currentTime: null,
videoList: [],
@@ -91,6 +93,14 @@
}, 200);
},
},
+ pageZoom: {
+ handler(newVal, oldVal) {
+ const scrollBox = (
+ this.container ? this.container : document
+ ).querySelector(".page-main");
+ scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal;
+ },
+ },
},
mounted() {
// 榛樿鍔犺浇绔犺妭
@@ -117,6 +127,14 @@
// 鍒犻櫎绗旇銆侀珮浜�佸垝绾�
delSign: (data) => {
this.delSign(data);
+ },
+ // 鍏ㄦ枃妫�绱�
+ searchBookByKeyword: (keyword) => {
+ return this.searchTextByPage(keyword);
+ },
+ // 璺宠浆妫�绱㈢粨鏋滀綅缃�
+ jumpSearchItem: (data) => {
+ this.searchItemLocation(data);
},
});
}
@@ -158,14 +176,41 @@
// });
// }, 2000);
// }, 5000);
- // }, 1000);
+
+ // const pageDom = (this.container ? this.container : document)
+ // .querySelector("#app")
+ // .querySelectorAll(".page-box");
+ // 妫�绱�
+ // console.log(this.searchTextByPage("淇濇姢鍐呰剰鍣ㄥ畼"), "searchTextByPage");
+ // 妫�绱㈣烦杞�
+ // this.searchItemLocation({
+ // catalog: 2,
+ // page: 10,
+ // txt: " 杩愬姩绯荤粺鏄敱楠ㄣ�侀杩炵粨鍜岄楠艰倢涓夐儴鍒嗙粍鎴愮殑銆傚叏韬殑楠ㄩ�氳繃楠ㄨ繛缁撶粍鎴愪汉浣撻楠硷紙瑙佸浘1-1锛夈�傞楠兼槸浜轰綋鐨勬敮鏋讹紝鍏锋湁淇濇姢鍐呰剰鍣ㄥ畼銆佷緵鑲岃倝闄勭潃鍜屼綔涓鸿倢鑲夎繍鍔ㄧ殑鏉犳潌绛変綔鐢ㄣ�傚湪绁炵粡绯荤粺鐨勬敮閰嶄笅锛岃倢鑲夋敹缂╃壍鍔ㄦ墍闄勭潃鐨勯缁曠潃鍏宠妭杞姩锛屼娇韬綋浜х敓鍚勭鍔ㄤ綔銆傛墍浠ワ紝杩愬姩绯荤粺鍏锋湁杩愬姩銆佹敮鎸佸拰淇濇姢绛夊姛鑳斤紝骞煎勾鏃舵湡鐨勯楠艰繕鍏锋湁閫犺鍔熻兘銆� ",
+ // txtIndex: 57
+ // });
+ // }, 5000);
},
methods: {
+ // setZoom1() {
+ // let scale = this.$store.state.qiankun.scale + 10;
+ // const scrollBox = (
+ // this.container ? this.container : document
+ // ).querySelector(".page-main");
+ // this.$store.commit("setZoom", scale);
+ // },
+ // setZoom2() {
+ // let scale = this.$store.state.qiankun.scale - 10;
+ // const scrollBox = (
+ // this.container ? this.container : document
+ // ).querySelector(".page-main");
+ // this.$store.commit("setZoom", scale);
+ // },
// 婊氬姩鐩戝惉
scrollFun(event) {
// 鍒ゆ柇鍚戜笂婊氬姩杩樻槸鍚戜笅婊氬姩
if (event.target.scrollTop > this.previousScrollTop) {
- this.getAduio();
+ this.getAduio()
// 鍚戜笅
const currentScrollTop =
event.target.scrollTop + event.target.offsetHeight;
@@ -189,7 +234,7 @@
}
}
} else if (event.target.scrollTop < this.previousScrollTop) {
- this.handleAudio();
+ this.handleAudio()
// 鍚戜笂
const currentScrollTop = event.target.scrollTop;
if (currentScrollTop <= this.loadThreshold) {
@@ -255,6 +300,10 @@
// 娓叉煋鏍囪
renderSign(type, data) {
+ // 鐖跺眰璁剧疆绂佹娓叉煋鏍囪鏃朵笉鍐嶈繘琛屾覆鏌�
+ if (this.$store.state.qiankun.disableSign) {
+ return false;
+ }
const existence = (
this.container ? this.container : document
).querySelector(`[dataid="${data.id}"]`);
@@ -264,10 +313,7 @@
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) {
@@ -443,6 +489,7 @@
});
},
getParentWithClass(element, className) {
+ console.log(element, className, "element, className");
while (element.parentElement) {
element = element.parentElement;
if (element.classList.contains(className)) {
@@ -492,11 +539,11 @@
"chapter"
);
const catalog = catalogDom.getAttribute("num");
- // if (!this.questionData[page]) {
+ // if (!this.questionDataMap[page]) {
// if (testData && testData[catalog]) {
// if (testData[catalog][page]) {
// if (Array.isArray(testData[catalog][page])) {
- // this.questionData[page] = await getQuestionList(
+ // this.questionDataMap[page] = await getQuestionList(
// page,
// testData[catalog][page],
// this.config.activeBook
@@ -510,9 +557,9 @@
// this.config.activeBook
// );
// }
- // this.questionData[page] = obj;
+ // this.questionDataMap[page] = obj;
// }
- // console.log("棰樼洰", this.questionData);
+ // console.log("棰樼洰", this.questionDataMap);
// }
// }
// }
@@ -525,6 +572,36 @@
this.renderSign(key, item);
});
}
+ }
+ // 澶勭悊楂樹寒
+ if (this.highlightData) {
+ // 楂樹寒琛�
+ setTimeout(() => {
+ // 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣
+ const pageTextList = document.createTreeWalker(target, NodeFilter.SHOW_TEXT);
+ // 鍖归厤鍏抽敭瀛�
+ const allPageTextNodes = [];
+ let currentNode = pageTextList.nextNode();
+ while (currentNode) {
+ allPageTextNodes.push(currentNode);
+ currentNode = pageTextList.nextNode();
+ }
+ for (let i = 0; i < allPageTextNodes.length; i++) {
+ const textDom = allPageTextNodes[i];
+ let txtIndex = textDom.textContent.indexOf(
+ this.highlightData.txt
+ );
+ if (txtIndex > -1) {
+ textDom.parentNode.style.transition =
+ "background-color 0.8s";
+ textDom.parentNode.scrollIntoView();
+ textDom.parentNode.style.backgroundColor = "#79bbf0";
+ setTimeout(() => {
+ textDom.parentNode.style.backgroundColor = "";
+ }, 1000);
+ }
+ }
+ }, 100);
}
if (this.loadPageList.length > 5) {
// 瓒呰繃5椤�
@@ -629,7 +706,111 @@
});
}
},
- // 鐐瑰嚮浜嬩欢锛氬皢鐢熷兓鍗曡瘝浼犵粰 涓诲簲鐢� 浠庤�岃皟鐢ㄨ瘝鍏稿姛鑳�
+ // 鏍规嵁鍏抽敭瀛楀叏鏂囨绱�
+ searchTextByPage(keyword) {
+ const searchResult = [];
+ let catalogIndex = 0;
+ // 鎵�鏈夌珷鑺傜粍浠讹紙姣忔湰涔﹀埗浣滄椂鍗曠嫭閰嶇疆锛�
+ const pageData = {
+ pageHeader,
+ chapterOne,
+ };
+ // 閬嶅巻鎵�鏈夌珷鑺傛枃浠�
+ for (const key in pageData) {
+ catalogIndex++;
+ let pageComponent, pageExample;
+ // 鍏堟覆鏌撲竴娆″綋鍓嶇珷鑺傛枃浠讹紙杩欐椂椤甸潰鐨勫唴瀹逛负绌猴級锛岃幏鍙栭〉鐮佷俊鎭�
+ pageComponent = Vue.extend(pageData[key]);
+ pageExample = new pageComponent({
+ propsData: {
+ showPageList: [],
+ questionData: {},
+ },
+ });
+ pageExample.$mount(
+ (this.container ? this.container : document).querySelector(
+ "#searchContent"
+ )
+ );
+ // 鑾峰彇椤电爜
+ const pageDom = (this.container ? this.container : document)
+ .querySelector("#searchDomBox")
+ .querySelectorAll(".page-box");
+ const pages = [];
+ for (let i = 0; i < pageDom.length; i++) {
+ const pageDomItem = pageDom[i];
+ pages.push(Number(pageDomItem.getAttribute("page")));
+ }
+ // 鑾峰彇椤甸潰缁撴潫锛屽嵏杞介攢姣�
+ pageExample.$destroy();
+ (this.container ? this.container : document).querySelector(
+ "#searchDomBox"
+ ).innerHTML = '<div id="searchContent"></div>';
+ // 閬嶅巻椤电爜
+ if (pages.length) {
+ for (let i = 0; i < pages.length; i++) {
+ const pageNum = pages[i];
+ // 鍔ㄦ�佹覆鏌撳搴旂珷鑺傜殑椤电爜
+ pageComponent = Vue.extend(pageData[key]);
+ pageExample = new pageComponent({
+ propsData: {
+ showPageList: [pageNum],
+ questionData: {},
+ },
+ });
+ pageExample.$mount(
+ (this.container ? this.container : document).querySelector(
+ "#searchContent"
+ )
+ );
+ // 鑾峰彇瀵瑰簲椤甸潰dom
+ const thisPageDom = (this.container ? this.container : document)
+ .querySelector("#searchDomBox")
+ .querySelector(`[page="${pageNum}"]`);
+ if (thisPageDom) {
+ // 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣
+ const pageTextList = document.createTreeWalker(thisPageDom, NodeFilter.SHOW_TEXT);
+ // 鍖归厤鍏抽敭瀛�
+ const allPageTextNodes = [];
+ let currentNode = pageTextList.nextNode();
+ while (currentNode) {
+ allPageTextNodes.push(currentNode);
+ currentNode = pageTextList.nextNode();
+ }
+ for (let i = 0; i < allPageTextNodes.length; i++) {
+ const textDom = allPageTextNodes[i];
+ let txtIndex = textDom.textContent.indexOf(keyword);
+ if (txtIndex > -1) {
+ // 璁板綍鍏抽敭瀛楁墍鍦ㄩ〉鐮併�佺珷鑺備互鍙婂尮閰嶅埌鐨勬钀�
+ searchResult.push({
+ page: pageNum,
+ catalog: catalogIndex,
+ txt: textDom.textContent,
+ txtIndex: txtIndex,
+ });
+ }
+ }
+ // 缁撴潫锛屽嵏杞介攢姣�
+ pageExample.$destroy();
+ (this.container ? this.container : document).querySelector(
+ "#searchDomBox"
+ ).innerHTML = '<div id="searchContent"></div>';
+ }
+ }
+ }
+ }
+ // 杈撳嚭鎼滅储缁撴灉
+ console.log(searchResult);
+ return searchResult;
+ },
+ // 鏍规嵁妫�绱㈢粨鏋滆烦杞搴斾綅缃苟楂樹寒
+ searchItemLocation(data) {
+ // 璁板綍楂樹寒淇℃伅
+ this.highlightData = data;
+ // 璺宠浆
+ this.gotoPage(data.catalog, data.page, () => {});
+ },
+ // 鐐瑰嚮浜嬩欢锛氬皢鐢熷兓鍗曡瘝浼犵粰 涓诲簲鐢� 浠庤�岃皟鐢ㄨ瘝鍏稿姛鑳�
saveCharacters(event, word) {
console.log("鐢熷兓瀛�", event, word);
if (this.$store.state.qiankun && this.$store.state.qiankun.chooseWords) {
@@ -687,11 +868,15 @@
}
}
},
+ // 鍏抽棴mini video
+ closeMiniAudio() {
+ this.audioPath = ''
+ }
},
components: {
pageHeader,
chapterOne,
- miniAudio,
+ miniAudio
},
};
</script>
diff --git a/src/components/miniAudio/index.vue b/src/components/miniAudio/index.vue
index 6f9d294..7e83fff 100644
--- a/src/components/miniAudio/index.vue
+++ b/src/components/miniAudio/index.vue
@@ -1,5 +1,23 @@
<template>
<div class="mini-audio" v-if="path">
+ <svg
+ @click="closeMiniAudio"
+ t="1717642737563"
+ class="icon close-btn"
+ viewBox="0 0 1024 1024"
+ version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ p-id="2426"
+ width="24"
+ height="24"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ >
+ <path
+ d="M512 0C794.769794 0 1024 229.805588 1024 512 1024 794.769794 794.194408 1024 512 1024 229.230208 1024 0 794.194408 0 512 0 229.230208 229.805588 0 512 0ZM512 984.615385C772.648448 984.615385 984.615385 772.81286 984.615385 512 984.615385 251.351552 772.81286 39.384615 512 39.384615 251.351552 39.384615 39.384615 251.18714 39.384615 512 39.384615 772.648448 251.18714 984.615385 512 984.615385ZM512 539.849129 358.829792 693.019336C351.139468 700.70966 338.670988 700.70966 330.980664 693.019336 323.29034 685.329012 323.29034 672.860532 330.980664 665.170208L484.150871 512 330.980664 358.829792C323.29034 351.139468 323.29034 338.670988 330.980664 330.980664 338.670988 323.29034 351.139468 323.29034 358.829792 330.980664L512 484.150871 665.170208 330.980664C672.860532 323.29034 685.329012 323.29034 693.019336 330.980664 700.70966 338.670988 700.70966 351.139468 693.019336 358.829792L539.849129 512 693.019336 665.170208C700.70966 672.860532 700.70966 685.329012 693.019336 693.019336 685.329012 700.70966 672.860532 700.70966 665.170208 693.019336L512 539.849129Z"
+
+ p-id="2427"
+ ></path>
+ </svg>
<audio controls :src="path" class="aduioPlayer"></audio>
</div>
</template>
@@ -47,7 +65,10 @@
paused: player.paused,
};
}
- return obj
+ return obj;
+ },
+ closeMiniAudio() {
+ this.$emit("closeMiniAudio");
},
},
};
@@ -58,5 +79,16 @@
position: fixed;
right: 40px;
bottom: 100px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+}
+.close-btn {
+ cursor: pointer;
+ margin-bottom: 10px;
+ fill:#bfbfbf;
+ &:hover {
+ fill: #948a8a;
+ }
}
</style>
--
Gitblit v1.9.1