From 00c39bac238dcd23346f2f47462f3ac6e81f64a3 Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期三, 15 五月 2024 16:51:00 +0800
Subject: [PATCH] 1
---
public/index.html | 4
src/main.js | 1
src/assets/images/biji.png | 0
src/books/childHealth/view/index.vue | 151 +++++++++++------------------
src/App.vue | 54 ++++++++--
src/books/childHealth/view/content/index.vue | 64 +++++++++++-
6 files changed, 159 insertions(+), 115 deletions(-)
diff --git a/public/index.html b/public/index.html
index 69bc1e5..1de149b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,7 +4,9 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
- <meta http-equiv="Cache-Control" content="no-cache">
+ <meta http-equiv="pragma" content="no-cache">
+ <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
+ <meta http-equiv="expires" content="0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>鏁板瓧鏁欐潗</title>
</head>
diff --git a/src/App.vue b/src/App.vue
index 5f1ce5a..031b363 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,26 +6,54 @@
</template>
<script>
-import childHealth from './books/childHealth/view/index.vue'
+import childHealth from "./books/childHealth/view/index.vue";
// import English from './books/English/view/index.vue'
export default {
- name: 'App',
+ name: "App",
components: {
- childHealth,
+ childHealth
// English
}
-}
+};
</script>
<style lang="less">
- html,body{
- width: 100%;
- height: 100%;
- margin: 0;
- }
- #app {
- width: 100%;
- height: 100%;
- }
+html,
+body {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+}
+#app {
+ width: 100%;
+ height: 100%;
+}
+.highLight {
+ border: 1px dashed rgba(255, 255, 255, 0);
+ border-radius: 5px;
+ padding: 3px;
+ cursor: pointer;
+}
+.highLight:hover {
+ border: 1px dashed #949494 !important;
+}
+
+.underline {
+ border: 1px dashed rgba(255, 255, 255, 0);
+ padding: 5px;
+ border-radius: 5px;
+ text-decoration: underline;
+ text-decoration-style: wavy;
+ text-underline-thickness: 2px;
+ cursor: pointer;
+}
+.underline:hover {
+ border: 1px dashed #949494 !important;
+}
+
+.notesline {
+ padding-bottom: 2px;
+ border-bottom: 2px solid;
+}
</style>
diff --git a/src/assets/images/biji.png b/src/assets/images/biji.png
new file mode 100644
index 0000000..1a87b5e
--- /dev/null
+++ b/src/assets/images/biji.png
Binary files differ
diff --git a/src/books/childHealth/view/content/index.vue b/src/books/childHealth/view/content/index.vue
index 2cd253b..729678f 100644
--- a/src/books/childHealth/view/content/index.vue
+++ b/src/books/childHealth/view/content/index.vue
@@ -36,6 +36,7 @@
import chapterEleven from "./components/chapter011.vue";
import chapterTwelve from "./components/chapter012.vue";
import chapterThirteen from "./components/chapter013.vue";
+import NoteIcon from "@/assets/images/biji.png";
import _ from "lodash";
export default {
data() {
@@ -51,7 +52,10 @@
watch: {
showCatalogList: {
handler(newVal) {
- if (this.$store.state.qiankun && this.$store.state.qiankun.catalogChange) {
+ if (
+ this.$store.state.qiankun &&
+ this.$store.state.qiankun.catalogChange
+ ) {
// 璋冪敤鐖跺眰鏂规硶
this.$store.state.qiankun.catalogChange({
showCatalogList: newVal
@@ -69,13 +73,16 @@
this.throttleThreshold,
{ leading: true, trailing: false }
);
- // 鎻愪緵椤甸潰璺宠浆鍔熻兘
+ // 瀹氫箟瀛愬眰鏂规硶
if (this.setGlobalState) {
- // 瀹氫箟瀛愬眰鏂规硶
+ // 鎻愪緵椤甸潰璺宠浆鍔熻兘
this.setGlobalState({
gotoPage: (catalog, page) => {
- console.log(catalog, page, "gotoPage锛歝atalog, page");
this.gotoPage(catalog, page);
+ },
+ // 娓叉煋绗旇銆侀珮浜�
+ renderSign: (type, data) => {
+ this.renderSign(type, data);
}
});
}
@@ -83,12 +90,20 @@
// 娴嬭瘯椤甸潰璺宠浆
// setTimeout(() => {
// this.gotoPage(5, 100);
+ // setTimeout(() => {
+ // this.renderSign("Note", {
+ // page: 100,
+ // txt: "鍓嶅効绔ョ敓闀垮彂鑲茬殑褰卞搷鏄竴涓笎",
+ // color: "#F5E12A"
+ // });
+ // }, 1000);
// }, 3000);
},
methods: {
- scrollFun(e) {
+ scrollFun(event) {
// 鍒ゆ柇鍚戜笂婊氬姩杩樻槸鍚戜笅婊氬姩
if (event.target.scrollTop > this.previousScrollTop) {
+ // 鍚戜笅
const currentScrollTop =
event.target.scrollTop + event.target.offsetHeight;
if (
@@ -111,6 +126,7 @@
}
}
} else if (event.target.scrollTop < this.previousScrollTop) {
+ // 鍚戜笂
const currentScrollTop = event.target.scrollTop;
if (currentScrollTop <= this.loadThreshold) {
// 鍒拌揪闃堝��
@@ -125,6 +141,7 @@
}
}
// showCatalogList 褰撳墠鏄剧ず鐨勪笁涓珷鑺傦紝watch鐩戝惉浼犻�掔粰涓诲簲鐢�
+ console.log(this.showCatalogList);
// 鏇存柊涓婁竴娆℃粴鍔ㄧ殑浣嶇疆
this.previousScrollTop = event.target.scrollTop;
@@ -152,19 +169,48 @@
this.showCatalogList = [catalog - 1, catalog, catalog + 1];
}
setTimeout(() => {
- console.log(document);
- console.log(document.querySelector(`[page="${page}"]`));
// 璺宠浆椤电爜
- const pageDom = document.querySelector(`[page="${page}"]`);
+ const pageDom = (
+ this.container ? this.container : document
+ ).querySelector(`[page="${page}"]`);
if (pageDom) {
pageDom.scrollIntoView();
} else {
console.log("椤电爜閿欒锛�");
}
- }, 100);
+ }, 500);
} else {
console.log("绔犺妭閿欒锛�");
}
+ },
+ renderSign(type, data) {
+ const pageDom = (
+ this.container ? this.container : document
+ ).querySelector(`[page="${data.page}"]`);
+ let reg = new RegExp(`${data.txt}`, "ig");
+ switch (type) {
+ case "Highlight":
+ // 楂樹寒
+ pageDom.innerHTML = pageDom.innerHTML.replace(
+ reg,
+ `<span style="background: ${data.color};" class="highLight">${data.txt}</span>`
+ );
+ break;
+ case "Dashing":
+ // 鍒掔嚎
+ pageDom.innerHTML = pageDom.innerHTML.replace(
+ reg,
+ `<span style="text-decoration-color:${data.color};" class="underline">${data.txt}</span>`
+ );
+ break;
+ case "Note":
+ // 绗旇
+ pageDom.innerHTML = pageDom.innerHTML.replace(
+ reg,
+ `<span style="border-bottom-color:${data.color}" class="notesline">${data.txt}</span><img src="${NoteIcon}" style="cursor: pointer" />`
+ );
+ break;
+ }
}
},
components: {
diff --git a/src/books/childHealth/view/index.vue b/src/books/childHealth/view/index.vue
index 10af5bd..97b8f87 100644
--- a/src/books/childHealth/view/index.vue
+++ b/src/books/childHealth/view/index.vue
@@ -1,5 +1,5 @@
<template>
- <div class="temp-book" @mouseup="handleMouseUp" @mousedown="handleMouseDown" @mousemove="handleMousemove">
+ <div class="temp-book" @mouseup="handleMouseUp">
<pageContent></pageContent>
</div>
</template>
@@ -7,27 +7,25 @@
<script>
import examinations from "./components/examinations/index.vue";
import pageContent from "./content/index.vue";
-import testData from '../assets/examinationList'
-import getQuestionData from '@/assets/methods/examination'
+import testData from "../assets/examinationList";
+import getQuestionData from "@/assets/methods/examination";
export default {
name: "child-health",
components: {
pageContent,
- examinations,
+ examinations
},
data() {
return {
- bookData:{},
+ bookData: {},
type: "option",
idPathList: [],
cardList: [],
- isMouseDown: false,
- move: false,
+ isMouseDown: false
};
},
mounted() {
this.getBookInfo();
- console.log(this.$store.state.qiankun, "this.$store.state.qiankun");
},
methods: {
getBookInfo() {
@@ -37,10 +35,10 @@
productId: this.config.bookId,
favoriteTypes: "FavoriteBookCity",
itemFields: {
- "SysType=": "CmsFolder",
+ "SysType=": "CmsFolder"
},
coverSize: {
- height: 300,
+ height: 300
},
fields: {
seriesName: [],
@@ -62,20 +60,23 @@
pdf: [],
protectedEpub: [],
probationPage: [], //pdf璇曡椤垫暟
- freeEpubPage: [], //epub璇曡鐧惧垎姣�
- },
+ freeEpubPage: [] //epub璇曡鐧惧垎姣�
+ }
};
this.MG.store.getProductDetail(query).then((res) => {
- console.log("鍥句功淇℃伅",res.datas,testData);
- this.$data.bookData = res.datas.cmsDatas[0].datas
- const questiondata = testData
- for(let key in testData) {
- for(let tkey in testData[key]) {
+ console.log("鍥句功淇℃伅", res.datas, testData);
+ this.$data.bookData = res.datas.cmsDatas[0].datas;
+ const questiondata = testData;
+ for (let key in testData) {
+ for (let tkey in testData[key]) {
console.log(testData[key][tkey]);
- questiondata[key][tkey] = getQuestionData(res.datas.rootCmsItemId,testData[key][tkey])
+ questiondata[key][tkey] = getQuestionData(
+ res.datas.rootCmsItemId,
+ testData[key][tkey]
+ );
}
}
- this.$store.commit('setQuestionData',questiondata)
+ this.$store.commit("setQuestionData", questiondata);
console.log(this.$store);
// console.log(questiondata);
});
@@ -89,82 +90,48 @@
}
},
handleMouseUp(e) {
- if (this.$data.move) {
- const txt = window.getSelection()?.toString();
- const selection = window.getSelection();
- if (selection.type != "none") {
- let node = selection.anchorNode.parentNode;
- let pageHtml = this.getParentWithClass(
- selection.anchorNode,
- "page-box"
- );
- let chapterDom = this.getParentWithClass(
- selection.anchorNode,
- "chapter"
- );
- let chapterNum;
- if (chapterDom) chapterNum = chapterDom.getAttribute("num");
- if (txt && pageHtml) {
- const page = pageHtml.getAttribute("page");
- console.log(
- {
- chapterNum,
- txt,
- selection,
- node,
- page,
- x: e.x,
- y: e.y,
- },
- "sendData"
- );
- // 鐩戝惉閫変腑鏂囨湰浜嬩欢锛屽苟瑙﹀彂鐖跺眰鏂规硶
- console.log("绗簩澶勫垽鏂�", this.$store.state.qiankun);
- if (this.$store.state.qiankun.windowSelection) {
- this.$store.state.qiankun.windowSelection({
- txt,
- selection,
- node,
- page,
- x: e.x,
- y: e.y,
- });
- }
+ const selection = (this.container ? this.container : window).getSelection();
+ const txt = selection.toString();
+ if (selection.type != "none" && txt) {
+ let node = selection.anchorNode.parentNode;
+ let pageHtml = this.getParentWithClass(
+ selection.anchorNode,
+ "page-box"
+ );
+ let chapterDom = this.getParentWithClass(
+ selection.anchorNode,
+ "chapter"
+ );
+ let chapterNum;
+ if (chapterDom) chapterNum = chapterDom.getAttribute("num");
+ if (pageHtml) {
+ const page = pageHtml.getAttribute("page");
+ // 鐩戝惉閫変腑鏂囨湰浜嬩欢锛屽苟瑙﹀彂鐖跺眰鏂规硶
+ if (this.$store.state.qiankun.windowSelection) {
+ this.$store.state.qiankun.windowSelection({
+ chapterNum,
+ txt,
+ page,
+ x: e.x,
+ y: e.y
+ });
}
- this.$data.isMouseDown = false;
+ console.log("閫変腑鐨勬枃瀛�", {
+ chapterNum,
+ txt,
+ selection,
+ node,
+ page,
+ x: e.x,
+ y: e.y
+ });
}
}
- this.$data.move = false
- },
-
- handleMouseDown() {
- this.$data.isMouseDown = true;
- },
- handleMousemove() {
- if (this.$data.isMouseDown) {
- this.$data.move = true;
- }
- },
-
- // handleMouseUp(e) {
- // if (move.value) {
- // const txt = window.getSelection()?.toString();
- // selectText.value = txt;
- // const node = window.getSelection();
- // let html = node.anchorNode.parentNode.parentNode;
- // dialogToolData.chapter = html.firstChild.innerHTML;
- // if (txt) {
- // showToolBox.value = true;
- // dialogToolData.top = e.y;
- // dialogToolData.left = e.x;
- // }
- // isMouseDown.value = false;
- // }
- // move.value = false;
- // },
- },
+ }
+ }
};
</script>
-<style lang="less" scoped></style>
-../assets/examinationList.js../assets/examinationList.js
\ No newline at end of file
+<style lang="less" scoped>
+
+</style>
diff --git a/src/main.js b/src/main.js
index 0079324..bcd861c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -33,6 +33,7 @@
const { container, onGlobalStateChange, setGlobalState } = props;
Vue.prototype.onGlobalStateChange = onGlobalStateChange;
Vue.prototype.setGlobalState = setGlobalState;
+ Vue.prototype.container = container;
instance = new Vue({
// router,
store,
--
Gitblit v1.9.1