From db8134538a7721edade94e07c03ef59c063126ba Mon Sep 17 00:00:00 2001
From: unknown <qq1940665526@163.com>
Date: 星期三, 29 五月 2024 18:29:43 +0800
Subject: [PATCH] 优化
---
src/books/embedded/view/components/chapter001.vue | 31 +
src/books/embedded/view/components/index.vue | 282 +++++++++++++++++++++--
package-lock.json | 11
public/index.html | 4
src/assets/methods/examination.js | 48 ++-
src/books/childHealth/view/content/index.vue | 105 ++++++--
src/books/embedded/view/components/header.vue | 5
yarn.lock | 5
package.json | 1
src/books/English/view/components/header.vue | 4
src/App.vue | 25 ++
src/books/English/view/components/index.vue | 2
src/books/childHealth/view/content/components/chapter001.vue | 171 ++++++-------
13 files changed, 515 insertions(+), 179 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 11db500..51df0e7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
"qiankun": "^2.10.16",
"spark-md5": "^3.0.2",
"swiper": "^6.8.1",
+ "viewerjs": "^1.11.6",
"vue": "^2.6.14",
"vuex": "^3.6.2"
},
@@ -12103,6 +12104,11 @@
"node": ">= 0.8"
}
},
+ "node_modules/viewerjs": {
+ "version": "1.11.6",
+ "resolved": "https://registry.npmjs.org/viewerjs/-/viewerjs-1.11.6.tgz",
+ "integrity": "sha512-TlhdSp2oEOLFXvEp4psKaeTjR5zBjTRcM/sHUN8PkV1UWuY8HKC8n7GaVdW5Xqnwdr/F1OmzLik1QwDjI4w/nw=="
+ },
"node_modules/vue": {
"version": "2.7.16",
"resolved": "https://registry.npmmirror.com/vue/-/vue-2.7.16.tgz",
@@ -21424,6 +21430,11 @@
"integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
"dev": true
},
+ "viewerjs": {
+ "version": "1.11.6",
+ "resolved": "https://registry.npmjs.org/viewerjs/-/viewerjs-1.11.6.tgz",
+ "integrity": "sha512-TlhdSp2oEOLFXvEp4psKaeTjR5zBjTRcM/sHUN8PkV1UWuY8HKC8n7GaVdW5Xqnwdr/F1OmzLik1QwDjI4w/nw=="
+ },
"vue": {
"version": "2.7.16",
"resolved": "https://registry.npmmirror.com/vue/-/vue-2.7.16.tgz",
diff --git a/package.json b/package.json
index 40beb57..cbcfd0e 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
"qiankun": "^2.10.16",
"spark-md5": "^3.0.2",
"swiper": "^6.8.1",
+ "viewerjs": "^1.11.6",
"vue": "^2.6.14",
"vuex": "^3.6.2"
},
diff --git a/public/index.html b/public/index.html
index 4c17b82..1de149b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,10 +8,6 @@
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<meta http-equiv="expires" content="0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.10.0/viewer.min.css">
- <script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.10.0/viewer.min.js"></script>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.8.1/css/swiper.css">
- <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.8.1/js/swiper.js"></script>
<title>鏁板瓧鏁欐潗</title>
</head>
<body>
diff --git a/src/App.vue b/src/App.vue
index 219326f..97f0197 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -63,7 +63,7 @@
} else {
this.activeBook = await this.config.getBookConfig(
// childHealth
- this.config.resourceCtx + "sportsAndHealth"
+ this.config.resourceCtx + "childHealth"
);
// 娴嬭瘯璇曡30椤�
// this.activeBook.tryPageCount = 10;
@@ -114,4 +114,27 @@
border-bottom: 2px solid;
cursor: pointer;
}
+
+/* swiper */
+.swiper-container{
+ width: 100%;
+ height: 100%;
+}
+
+.imgBox{
+ position: relative;
+}
+
+.imgBox img{
+ max-width: 100%;
+ max-height: 100%;
+ width: auto;
+ height: auto;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ margin: auto;
+}
</style>
diff --git a/src/assets/methods/examination.js b/src/assets/methods/examination.js
index ad8ef1b..0da5175 100644
--- a/src/assets/methods/examination.js
+++ b/src/assets/methods/examination.js
@@ -1,43 +1,44 @@
import MG from "@/assets/js/middleGround/WebMiddleGroundApi";
import getPublicImage from "@/assets/js/middleGround/tool";
-const getQuestionList = async (page, questionList,activeBook) => {
- console.log('page',page);
- const oldAnswerData = localStorage.getItem(activeBook.name + 'oldAnswerData')
- let oldData = null
- let oldList = []
- if(oldAnswerData) {
- oldData = JSON.parse(oldAnswerData)
+const getQuestionList = async (page, questionList, activeBook) => {
+ console.log("page", page);
+ const oldAnswerData = localStorage.getItem(activeBook.name + "oldAnswerData");
+ let oldData = null;
+ let oldList = [];
+ if (oldAnswerData) {
+ oldData = JSON.parse(oldAnswerData);
}
- if(oldData && oldData[page]) {
- oldList = oldData[page]
- }
+ if (oldData && oldData[page]) {
+ oldList = oldData[page];
+ }
let cardList = [
{
catalogName: "鍗曢�夐",
- infoList: []
+ infoList: [],
},
{
catalogName: "鍒ゆ柇棰�",
- infoList: []
+ infoList: [],
},
{
catalogName: "澶氶�夐",
- infoList: []
+ infoList: [],
},
{
catalogName: "濉┖棰�",
- infoList: []
+ infoList: [],
},
{
catalogName: "绠�绛旈",
- infoList: []
- }
+ infoList: [],
+ },
];
let singleChoiceArr = []; // 鍗曢��
let judgeArr = []; // 鍒ゆ柇
let shortArr = []; // 绠�绛�
let multipleChoiceArr = []; // 澶氶��
let completionArr = []; // 濉┖
+ // 11
for (let qindex = 0; qindex < questionList.length; qindex++) {
const qitem = questionList[qindex];
let query = {
@@ -57,11 +58,11 @@
Embedded_QuestionBank_StemStyle: [],
Embedded_QuestionBank_OptionStyle: [],
Embedded_QuestionBank_KnowledgePoint: [],
- Embedded_QuestionBank_Difficulty: []
- }
+ Embedded_QuestionBank_Difficulty: [],
+ },
};
const res = await MG.store.getProductDetail(query);
- if(!res.datas) return false
+ if (!res.datas) return false;
res.datas.cmsDatas[0].datas.forEach((item, index) => {
let oldObj = {};
if (oldList) {
@@ -97,7 +98,7 @@
isRight: null, // 鏄惁姝ｇ‘
isComplete: false,
isCollect: true,
- isUnfold: ""
+ isUnfold: "",
};
// 澶氶�夊拰濉┖绛旀鑲负鏁扮粍锛岃杞崲JSON鏍煎紡
if (
@@ -118,7 +119,7 @@
if (item == "input") {
questionObj.stem[i] = {
num: index,
- data: "input"
+ data: "input",
};
questionObj.userAnswer[index] = "";
index++;
@@ -206,6 +207,7 @@
}
});
}
+ // 22
cardList[0].infoList = singleChoiceArr;
cardList[1].infoList = judgeArr;
cardList[2].infoList = multipleChoiceArr;
@@ -221,7 +223,7 @@
return cardList.filter((item) => item.infoList.length > 0);
};
-const getQuestionData = async (chapter, chapterData,activeBook) => {
+const getQuestionData = async (chapter, chapterData, activeBook) => {
const data = { ...chapterData };
const oldAnswerData = localStorage.getItem("oldAnswerData");
const oldData = oldAnswerData ? JSON.parse(oldAnswerData) : {};
@@ -234,7 +236,7 @@
if (oldChapterData) {
oldList = oldChapterData[key];
}
- data[key] = await getQuestionList(oldList, chapterData[key],activeBook);
+ data[key] = await getQuestionList(oldList, chapterData[key], activeBook);
}
return data;
};
diff --git a/src/books/English/view/components/header.vue b/src/books/English/view/components/header.vue
index b532902..815e40e 100644
--- a/src/books/English/view/components/header.vue
+++ b/src/books/English/view/components/header.vue
@@ -93,7 +93,7 @@
</div>
</div>
<!-- 4 -->
- <div class="page-box">
+ <div class="page-box" page="4">
<div class="mb-20" style="padding-right: 20px;">
<div class="primary-bc fl al-end" style="height: 100px;padding-left: 40px;">
<div class="preface-header-box y-bc">
@@ -137,7 +137,7 @@
</div>
</div>
<!-- 5 -->
- <div class="page-box">
+ <div class="page-box" page="5">
<ul class="preface-odd-header w100 fl ju-bt">
<li class="left primary-bc "></li>
<li>
diff --git a/src/books/English/view/components/index.vue b/src/books/English/view/components/index.vue
index b2a4952..c495807 100644
--- a/src/books/English/view/components/index.vue
+++ b/src/books/English/view/components/index.vue
@@ -1,7 +1,7 @@
<template>
<div class="page-main" @scroll="throttledScrollHandler">
<div class="page-content">
- <pageHeader></pageHeader>
+ <pageHeader ></pageHeader>
<chapterOne @saveCharacters="saveCharacters"></chapterOne>
</div>
</div>
diff --git a/src/books/childHealth/view/content/components/chapter001.vue b/src/books/childHealth/view/content/components/chapter001.vue
index 8c1493d..50c2df8 100644
--- a/src/books/childHealth/view/content/components/chapter001.vue
+++ b/src/books/childHealth/view/content/components/chapter001.vue
@@ -40,7 +40,7 @@
</p>
<h6 class="Conclusion-title2">
- <img
+ <img
data-imgurl="../../../assets/images/icon/gjc.png"
class="img-gn"
alt=""
@@ -56,13 +56,17 @@
class="mb-20 open-image"
/> -->
<span id="open-image" @click="openImage">
- <img src="../../../assets/images/chapterOne/0014-1.jpg" data-imgurl="/books/book/img/0014-1.56a5dd0f.jpg" class="w100 mt-20">
+ <img
+ src="../../../assets/images/chapterOne/0014-1.jpg"
+ data-imgurl="/books/book/img/0014-1.56a5dd0f.jpg"
+ class="w100 mt-20"
+ />
</span>
</p>
</div>
</div>
<!-- 2 -->
- <div class="page-box" page="10">
+ <div class="page-box" page="10" :show="showPageList.indexOf(10) > -1">
<div v-if="showPageList.indexOf(10) > -1">
<div class="header-box">
<div class="header-border-box"></div>
@@ -429,7 +433,7 @@
</div>
</div>
<!-- 3 -->
- <div class="page-box" page="11">
+ <div class="page-box" page="11" :show="showPageList.indexOf(11) > -1">
<div v-if="showPageList.indexOf(11) > -1">
<div class="page-header-box">
<span class="page-header-text"
@@ -468,15 +472,39 @@
</div>
<div class="bottom-right" style="width: 35%">
<div class="mt-40">
- <div class="banshi">
+ <div class="banshi openImgBox">
<div class="swiper-container">
<div class="swiper-wrapper">
- <div
- v-for="(item, index) in bonesList"
- :key="index"
- class="swiper-slide"
- :style="`background-image:url(${item})`"
- ></div>
+ <div class="swiper-slide">
+ <div
+ class="imgBox"
+ style="width: 100%; height: 100%"
+ >
+ <img
+ src="../../../assets/images/chapterOne/bones1.png"
+ />
+ </div>
+ </div>
+ <div class="swiper-slide">
+ <div
+ class="imgBox"
+ style="width: 100%; height: 100%"
+ >
+ <img
+ src="../../../assets/images/chapterOne/bones2.png"
+ />
+ </div>
+ </div>
+ <div class="swiper-slide">
+ <div
+ class="imgBox"
+ style="width: 100%; height: 100%"
+ >
+ <img
+ src="../../../assets/images/chapterOne/bones3.png"
+ />
+ </div>
+ </div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
@@ -1001,7 +1029,7 @@
</div>
<div class="right" style="width: 60%">
<video
- :src="pathFive"
+ :src="getResourcePath('163c06871b763954952d1cd74373c618')"
poster="../../../assets/images/chapterOne/people-video-img.jpg"
webkit-playsinline="true"
x-webkit-airplay="true"
@@ -4597,19 +4625,18 @@
<script>
import examinations from "@/components/examinations/index.vue";
import getResourcePath from "@/assets/methods/resources";
-import Swiper from "swiper/bundle";
-import "swiper/swiper-bundle.css";
+
export default {
name: "chapter-one",
components: { examinations },
props: {
showPageList: {
type: Array,
- default: [],
+ default: []
},
questionData: {
- type: Object,
- },
+ type: Object
+ }
},
data() {
return {
@@ -4621,19 +4648,15 @@
jointImg: require("../../../assets/images/chapterOne/0017-1.jpg"),
footImg: require("../../../assets/images/chapterOne/0017-2.jpg"),
sitImg: require("../../../assets/images/chapterOne/0018-1.jpg"),
- bonesList: [
- require("../../../assets/images/chapterOne/bones1.png"),
- require("../../../assets/images/chapterOne/bones2.png"),
- require("../../../assets/images/chapterOne/bones3.png"),
- ],
+ bonesList: [],
footList: [
require("../../../assets/images/chapterOne/foot-01.png"),
- require("../../../assets/images/chapterOne/foot-02.png"),
+ require("../../../assets/images/chapterOne/foot-02.png")
],
posureList: [
require("../../../assets/images/chapterOne/posture-01.png"),
require("../../../assets/images/chapterOne/posture-02.png"),
- require("../../../assets/images/chapterOne/posture-03.png"),
+ require("../../../assets/images/chapterOne/posture-03.png")
],
resourceState: "",
type: "option",
@@ -4660,7 +4683,7 @@
eyesImg: require("../../../assets/images/chapterOne/0046-2.jpg"),
ersImg: require("../../../assets/images/chapterOne/0048-1.jpg"),
erImg: require("../../../assets/images/chapterOne/0048-2.jpg"),
- img:require("@/books/childHealth/assets/images/chapterOne/0014-1.jpg"),
+ img: require("@/books/childHealth/assets/images/chapterOne/0014-1.jpg"),
productLinkPath: "",
learnTbaleOne: true,
videoOne: true,
@@ -4704,7 +4727,7 @@
qSix: "",
qSeven: "",
qEight: "",
- qNine: "",
+ qNine: ""
},
learnTableTwo: {
qOne: "",
@@ -4715,7 +4738,7 @@
qSix: "",
qSeven: "",
qEight: "",
- qNine: "",
+ qNine: ""
},
learnTableThree: {
qOne: "",
@@ -4726,7 +4749,7 @@
qSix: "",
qSeven: "",
qEight: "",
- qNine: "",
+ qNine: ""
},
learnTableFour: {
qOne: "",
@@ -4737,7 +4760,7 @@
qSix: "",
qSeven: "",
qEight: "",
- qNine: "",
+ qNine: ""
},
learnTableFive: {
qOne: "",
@@ -4748,14 +4771,14 @@
qSix: "",
qSeven: "",
qEight: "",
- qNine: "",
+ qNine: ""
},
learnTableSix: {
qOne: "",
qTwo: "",
qThree: "",
qFour: "",
- qFive: "",
+ qFive: ""
},
learnTableSeven: {
qOne: "",
@@ -4764,7 +4787,7 @@
qFour: "",
qFive: "",
qSix: "",
- qSeven: "",
+ qSeven: ""
},
learnTableEnight: {
qOne: "",
@@ -4775,7 +4798,7 @@
qSix: "",
qSeven: "",
qEight: "",
- qNine: "",
+ qNine: ""
},
learnTableNine: {
qOne: "",
@@ -4785,36 +4808,36 @@
qFive: "",
qSix: "",
qSeven: "",
- qEight: "",
+ qEight: ""
},
question: {
judge: {
qOne: "",
qTwo: "",
qThree: "",
- qFour: "",
+ qFour: ""
},
fill: {
qOne: {
one: "",
- two: "",
+ two: ""
},
qTwo: {
oen: "",
- two: "",
+ two: ""
},
qThree: {
one: "",
- two: "",
+ two: ""
},
qFour: {
one: "",
- two: "",
+ two: ""
},
qFive: {
one: "",
- two: "",
- },
+ two: ""
+ }
},
short: {
qOne: "",
@@ -4823,15 +4846,15 @@
qFour: "",
qFive: "",
qSix: "",
- qSeven: "",
- },
- },
+ qSeven: ""
+ }
+ }
},
- swiper: null,
+ swiper: null
};
},
async mounted() {
- this.getSwiper();
+ this.getResourcePath = getResourcePath;
this.getVideoPath();
const localData = localStorage.getItem("chapterOneData");
if (localData) {
@@ -4854,6 +4877,13 @@
clearInterval(window.timerOne);
}
localStorage.setItem("chapterOneData", JSON.stringify(this.chapterOneData));
+ },
+ watch: {
+ showPageList: {
+ handler(newVal, oldVal) {
+ console.log(newVal, "绔犺妭鎺ユ敹鍐呭");
+ }
+ }
},
methods: {
changeResources(type) {
@@ -4902,45 +4932,18 @@
},
saveChapterOneData() {
// 璁板綍绗竴寮犺緭鍏ユ暟鎹�
- console.log("20miao");
this.saveTime = 20;
- console.log(this.chapterOneData);
localStorage.setItem(
"chapterOneData",
JSON.stringify(this.chapterOneData)
);
},
- getSwiper() {
- this.swiper = new Swiper(".swiper-container", {
- loop: true, // 鏃犵紳
- autoplay: {
- //鑷姩寮�濮�
- delay: 3000, //鏃堕棿闂撮殧
- disableOnInteraction: false, //*鎵嬪姩鎿嶄綔杞挱鍥惧悗涓嶄細鏆傚仠*
- },
- paginationClickable: true,
- slidesPerView: 1, // 涓�缁勪笁涓�
- spaceBetween: 30, // 闂撮殧
- // 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳
- navigation: {
- nextEl: ".swiper-button-next",
- prevEl: ".swiper-button-prev",
- },
- // 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔�
- observer: true,
- observeParents: true,
- // 濡傛灉闇�瑕佸垎椤靛櫒
- pagination: {
- el: ".swiper-pagination",
- clickable: true, // 鍒嗛〉鍣ㄥ彲浠ョ偣鍑�
- },
- });
- },
+
openImage() {
let container = document.getElementById("open-image");
let viewr = new Viewer(container, {
inline: false, // 鏄惁浠ュ唴鑱旀柟寮忔樉绀洪瑙�
- url:'data-imgurl',
+ url: "data-imgurl",
toolbar: {
zoomIn: 1, // 鏄惁鏄剧ず鏀惧ぇ鎸夐挳
zoomOut: 1, // 鏄惁鏄剧ず缂╁皬鎸夐挳
@@ -4952,11 +4955,11 @@
rotateLeft: 0, // 鏄惁鏄剧ず鍚戝乏鏃嬭浆鎸夐挳
rotateRight: 0, // 鏄惁鏄剧ず鍚戝彸鏃嬭浆鎸夐挳
flipHorizontal: 0, // 鏄惁鏄剧ず姘村钩缈昏浆鎸夐挳
- flipVertical: 0, // 鏄惁鏄剧ず鍨傜洿缈昏浆鎸夐挳
- },
+ flipVertical: 0 // 鏄惁鏄剧ず鍨傜洿缈昏浆鎸夐挳
+ }
});
- },
- },
+ }
+ }
};
</script>
@@ -5041,18 +5044,10 @@
justify-content: space-evenly;
}
-//
.banshi {
margin-top: 40px;
width: 100%;
+ height: 250px;
margin: 0 auto;
- .swiper-slide {
- position: relative;
- width: 100%;
- height: 250px;
- background-repeat: no-repeat;
- background-size: contain;
- background-position-x: center;
- }
}
</style>
diff --git a/src/books/childHealth/view/content/index.vue b/src/books/childHealth/view/content/index.vue
index 788ebc1..3c07077 100644
--- a/src/books/childHealth/view/content/index.vue
+++ b/src/books/childHealth/view/content/index.vue
@@ -98,6 +98,10 @@
import _ from "lodash";
import getQuestionList from "@/assets/methods/examination";
import testData from "../../assets/examinationList";
+import Swiper from "swiper/bundle";
+import "swiper/swiper-bundle.css";
+import Viewer from "viewerjs";
+import "viewerjs/dist/viewer.css";
export default {
data() {
return {
@@ -138,8 +142,17 @@
this.initObservation();
this.initThemeColor();
}, 500);
- },
+ }
},
+ loadPageList: {
+ handler(newVal, oldVal) {
+ console.log(newVal, "this.loadPageList");
+ setTimeout(() => {
+ this.initSwiper();
+ this.initViewer();
+ }, 200);
+ }
+ }
},
mounted() {
// 榛樿鍔犺浇绔犺妭
@@ -190,22 +203,22 @@
// 娴嬭瘯椤甸潰璺宠浆
// setTimeout(() => {
- // this.gotoPage(5, 100);
- // setTimeout(() => {
- // this.renderSign("Note", {
- // id: "2ACA9359",
- // txt: "钀ュ吇绱犲拰鐑噺锛屾墠鑳�",
- // page: "100",
- // type: "Highlight",
- // color: "#F5E12A"
- // });
- // setTimeout(() => {
- // this.delSign({
- // ids: ["2ACA9359"]
- // });
- // }, 2000);
- // }, 1000);
- // }, 3000);
+ // this.gotoPage(1, 15);
+ // setTimeout(() => {
+ // this.renderSign("Note", {
+ // id: "2ACA9359",
+ // txt: "钀ュ吇绱犲拰鐑噺锛屾墠鑳�",
+ // page: "100",
+ // type: "Highlight",
+ // color: "#F5E12A"
+ // });
+ // setTimeout(() => {
+ // this.delSign({
+ // ids: ["2ACA9359"]
+ // });
+ // }, 2000);
+ // }, 1000);
+ // }, 1000);
},
methods: {
// 婊氬姩鐩戝惉
@@ -362,7 +375,7 @@
return false;
}
}
- //observer 瑙傚療姣忎釜鍏冪礌锛屼互渚垮湪瀹冧滑杩涘叆鎴栫寮�瑙嗙獥鏃惰Е鍙戝洖璋冨嚱鏁般��
+ // observer 瑙傚療姣忎釜鍏冪礌锛屼互渚垮湪瀹冧滑杩涘叆鎴栫寮�瑙嗙獥鏃惰Е鍙戝洖璋冨嚱鏁般��
const isObserver = section.getAttribute("observer");
const isLoadObserver = section.getAttribute("loadObserver");
if (!isObserver) {
@@ -475,18 +488,16 @@
"chapter"
);
const catalog = catalogDom.getAttribute("num");
- 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)
+ let text = null;
+ if (target.querySelector("p")) {
+ 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,
- text,
+ text
});
// const sections = Array.from(document.querySelectorAll(".section"));
//sections锛氳幏鍙栨墍鏈夊叿鏈� .section 绫诲悕鐨勫厓绱狅紝骞惰浆鎹负鏁扮粍銆�
@@ -501,7 +512,6 @@
const target = entry.target;
const page = target.getAttribute("page");
if (this.loadPageList.indexOf(page) == -1) {
- //
const catalogDom = this.tool.getParentNodeByClassName(
target,
"chapter"
@@ -539,6 +549,51 @@
}
});
},
+ initSwiper() {
+ const doms = (
+ this.container ? this.container : document
+ ).querySelectorAll(".swiper-container");
+ for (let i = 0; i < doms.length; i++) {
+ const dom = doms[i];
+ new Swiper(dom, {
+ loop: false, // 鏃犵紳
+ autoplay: {
+ //鑷姩寮�濮�
+ delay: 3000, //鏃堕棿闂撮殧
+ disableOnInteraction: false //*鎵嬪姩鎿嶄綔杞挱鍥惧悗涓嶄細鏆傚仠*
+ },
+ paginationClickable: true,
+ slidesPerView: 1, // 涓�缁勪笁涓�
+ spaceBetween: 30, // 闂撮殧
+ // 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳
+ navigation: {
+ nextEl: ".swiper-button-next",
+ prevEl: ".swiper-button-prev"
+ },
+ // 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔�
+ observer: true,
+ observeParents: true,
+ // 濡傛灉闇�瑕佸垎椤靛櫒
+ pagination: {
+ el: ".swiper-pagination",
+ clickable: true // 鍒嗛〉鍣ㄥ彲浠ョ偣鍑�
+ }
+ });
+ }
+ },
+ initViewer() {
+ const doms = (
+ this.container ? this.container : document
+ ).querySelectorAll(".openImgBox");
+ for (let i = 0; i < doms.length; i++) {
+ const dom = doms[i];
+ new Viewer(dom, {
+ navbar: true, // 鏄剧ず瀵艰埅鏍�
+ toolbar: true, // 鏄剧ず宸ュ叿鏍�
+ title: true // 鏄剧ず鏍囬
+ });
+ }
+ }
},
components: {
pageHeader,
diff --git a/src/books/embedded/view/components/chapter001.vue b/src/books/embedded/view/components/chapter001.vue
index c9a9e38..b415e24 100644
--- a/src/books/embedded/view/components/chapter001.vue
+++ b/src/books/embedded/view/components/chapter001.vue
@@ -175,23 +175,27 @@
鑳斤紝鏈夋晥甯姪鐢ㄦ埛寤洪�犱粠宓屽叆寮忚澶囥�佺幇鍦虹洃鎺у伐浣滅珯鍒颁紒涓氱敓浜х洃鎺т俊鎭綉鍦ㄥ唴鐨勫畬鏁寸殑鑷姩鍖栬В鍐虫柟妗堛�傚浘1-1锝炲浘1-4鎵�绀轰负宓屽叆寮忕粍鎬佽蒋浠剁郴缁熷簲鐢ㄤ簬鍚勪釜琛屼笟鐨勬儏鍐点��
</p>
<div class="qrbodyPic">
- <el-image
- :src="imgOne"
- :preview-src-list="[imgOne]"
- class="w100"
- />
+ <div class="openImgBox">
+ <img src="../../assets/images/img00014001.jpg" alt="" class="w100">
+ </div>
<p class="imgdescript">鍥�1-1銆�宓屽叆寮忕粍鎬佽蒋浠剁郴缁熷簲鐢ㄤ簬鐢靛姏琛屼笟</p>
</div>
<div class="qrbodyPic">
- <el-image :src="imgTwo" :preview-src-list="[imgTwo]" />
+ <div class="openImgBox">
+ <img src="../../assets/images/img00014002.jpg" alt="" class="w100">
+ </div>
<p class="imgdescript">鍥�1-2銆�宓屽叆寮忕粍鎬佽蒋浠剁郴缁熷簲鐢ㄤ簬閾佽矾琛屼笟</p>
</div>
<div class="qrbodyPic">
- <el-image :src="imgThree" :preview-src-list="[imgThree]" />
+ <div class="openImgBox">
+ <img src="../../assets/images/img00014003.jpg" alt="" class="w100">
+ </div>
<p class="imgdescript">鍥�1-3銆�宓屽叆寮忕粍鎬佽蒋浠剁郴缁熷簲鐢ㄤ簬姗¤兌琛屼笟</p>
</div>
<div class="qrbodyPic">
- <el-image :src="imgFour" :preview-src-list="[imgFour]" />
+ <div class="openImgBox">
+ <img src="../../assets/images/img00014004.jpg" alt="" class="w100">
+ </div>
<p class="imgdescript">鍥�1-4銆�宓屽叆寮忕粍鎬佽蒋浠剁郴缁熷簲鐢ㄤ簬绾虹粐琛屼笟</p>
</div>
</div>
@@ -254,7 +258,9 @@
MCGS宓屽叆鐗堢粍鎬佽蒋浠剁敓鎴愮殑鐢ㄦ埛搴旂敤绯荤粺锛岀敱涓绘帶绐楀彛銆佽澶囩獥鍙ｃ�佺敤鎴风獥鍙ｃ�佸疄鏃舵暟鎹簱鍜岃繍琛岀瓥鐣ヤ簲閮ㄥ垎鏋勬垚锛屽鍥�1-5鎵�绀恒��
</p>
<div class="qrbodyPic">
- <el-image :src="imgFive" :preview-src-list="[imgFive]" />
+ <div class="openImgBox">
+ <img src="../../assets/images/img00015001.jpg" alt="" class="w100">
+ </div>
<p class="imgdescript">鍥�1-5銆�鐢ㄦ埛搴旂敤绯荤粺缁勬垚</p>
</div>
<p class="content">
@@ -354,11 +360,14 @@
</div>
<div class="fl">
<div class="">
- <el-image
+ <!-- <el-image
:src="imgSix"
active="true"
:preview-src-list="[imgSix]"
- />
+ /> -->
+ <div class="openImgBox">
+ <img src="../../assets/images/img00017001.jpg" alt="" class="w100">
+ </div>
<p class="imgdescript">鍥�1-6銆�姝ｈ鍥�</p>
</div>
<div class="">
diff --git a/src/books/embedded/view/components/header.vue b/src/books/embedded/view/components/header.vue
index b9a9189..4aab062 100644
--- a/src/books/embedded/view/components/header.vue
+++ b/src/books/embedded/view/components/header.vue
@@ -355,6 +355,11 @@
<script>
export default {
name: "headerPage",
+ props:{
+ showPageList:{
+ type:Array
+ }
+ }
};
</script>
<style scoped lang="less">
diff --git a/src/books/embedded/view/components/index.vue b/src/books/embedded/view/components/index.vue
index ab93830..e6d8657 100644
--- a/src/books/embedded/view/components/index.vue
+++ b/src/books/embedded/view/components/index.vue
@@ -1,8 +1,12 @@
<template>
<div class="page-main" @scroll="throttledScrollHandler">
- <div class="page-content">
- <pageHeader v-if="showCatalogList.indexOf(0) > -1"></pageHeader>
- <chapterOne v-if="showCatalogList.indexOf(1) > -1" />
+ <div class="page-content" :style="{
+ fontSize: fontSize ? fontSize + 'px' : '16px',
+ transform: `scale(${pageZoom ? pageZoom : 1})`,
+ transformOrigin: 'center top',
+ }">
+ <pageHeader v-if="showCatalogList.indexOf(1) > -1" :showPageList="loadPageList"></pageHeader>
+ <chapterOne v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList" />
</div>
</div>
</template>
@@ -11,9 +15,21 @@
import chapterOne from "./chapter001.vue";
import NoteIcon from "@/assets/images/biji.png";
import _ from "lodash";
+import Swiper from "swiper/bundle";
+import "swiper/swiper-bundle.css";
+import Viewer from "viewerjs";
+import "viewerjs/dist/viewer.css";
export default {
name: "pageContent",
components: { pageHeader, chapterOne },
+ computed: {
+ fontSize() {
+ return this.$store.state.qiankun.fontSize;
+ },
+ pageZoom() {
+ return this.$store.state.qiankun.scale / 100;
+ },
+ },
data() {
return {
catalogLength: 2, // 鎬荤珷鑺傛暟
@@ -23,6 +39,10 @@
previousScrollTop: 0,
throttledScrollHandler: null,
observer: null,
+ loadPageObserver: null,
+ loadPageList: [],
+ questionData: {},
+ testData:{}
};
},
watch: {
@@ -40,13 +60,22 @@
// 鍚姩椤电爜瑙傚療
setTimeout(() => {
this.initObservation();
+ this.initThemeColor();
}, 500);
- },
+ }
},
+ loadPageList: {
+ handler(newVal, oldVal) {
+ setTimeout(() => {
+ this.initSwiper();
+ this.initViewer();
+ }, 200);
+ }
+ }
},
mounted() {
// 榛樿鍔犺浇绔犺妭
- this.showCatalogList = [0,1];
+ this.showCatalogList = [1];
// 婊氬姩鐩戝惉鑺傛祦
this.throttledScrollHandler = _.throttle(
this.scrollFun,
@@ -79,29 +108,36 @@
threshold: 0.5, // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般��
});
+ this.loadPageObserver = new IntersectionObserver(this.loadPageCallback, {
+ root: null, // 鎸囧畾鏍瑰厓绱狅紝杩欓噷璁句负 null锛岃〃绀洪�夊彇鏁翠釜瑙嗙獥浣滀负鏍瑰厓绱犮��
+ rootMargin: "0px", // 鎸囧畾鏍瑰厓绱犵殑杈圭晫锛岃繖閲岃涓� "0px"锛岃〃绀烘牴鍏冪礌鐨勮竟鐣屽拰瑙嗙獥鐨勮竟鐣岄噸鍚�
+ threshold: 0, // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般��
+ });
+
// 鍚姩椤电爜瑙傚療
setTimeout(() => {
this.initObservation();
+ this.initThemeColor();
}, 500);
// 娴嬭瘯椤甸潰璺宠浆
// setTimeout(() => {
- // this.gotoPage(5, 100);
- // setTimeout(() => {
- // this.renderSign("Note", {
- // id: "2ACA9359",
- // txt: "钀ュ吇绱犲拰鐑噺锛屾墠鑳�",
- // page: "100",
- // type: "Highlight",
- // color: "#F5E12A"
- // });
- // setTimeout(() => {
- // this.delSign({
- // ids: ["2ACA9359"]
- // });
- // }, 2000);
- // }, 1000);
- // }, 3000);
+ // this.gotoPage(1, 11);
+ // // setTimeout(() => {
+ // // this.renderSign("Note", {
+ // // id: "2ACA9359",
+ // // txt: "钀ュ吇绱犲拰鐑噺锛屾墠鑳�",
+ // // page: "100",
+ // // type: "Highlight",
+ // // color: "#F5E12A"
+ // // });
+ // // setTimeout(() => {
+ // // this.delSign({
+ // // ids: ["2ACA9359"]
+ // // });
+ // // }, 2000);
+ // // }, 1000);
+ // }, 1000);
},
methods: {
// 婊氬姩鐩戝惉
@@ -179,6 +215,7 @@
console.log("绔犺妭閿欒锛�");
}
},
+
// 娓叉煋鏍囪
renderSign(type, data) {
const existence = (
@@ -209,7 +246,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}" style="cursor: pointer" /></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;
}
@@ -246,14 +283,116 @@
const sections = (
this.container ? this.container : document
).querySelectorAll(".page-box");
- //observer 瑙傚療姣忎釜鍏冪礌锛屼互渚垮湪瀹冧滑杩涘叆鎴栫寮�瑙嗙獥鏃惰Е鍙戝洖璋冨嚱鏁般��
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");
if (!isObserver) {
this.observer.observe(section);
section.setAttribute("observer", "1");
}
+ if (!isLoadObserver) {
+ this.loadPageObserver.observe(section);
+ section.setAttribute("loadObserver", "1");
+ }
});
+ },
+ initThemeColor() {
+ // 鑾峰彇鍚勭闇�瑕佷富棰樿壊鐨勮妭鐐�
+ const colorDom = (
+ this.container ? this.container : document
+ ).querySelectorAll(".theme-color");
+ const backgroundColorDom = (
+ this.container ? this.container : document
+ ).querySelectorAll(".theme-back");
+ const borderColorDom = (
+ this.container ? this.container : document
+ ).querySelectorAll(".theme-border");
+ // 鑾峰彇閰嶇疆鐨勪富棰樿壊
+ const bookThemeColor =
+ this.config.activeBook && this.config.activeBook.bookThemeColor
+ ? this.config.activeBook.bookThemeColor
+ : null;
+ const chapterThemeColor =
+ this.config.activeBook && this.config.activeBook.chapterThemeColor
+ ? this.config.activeBook.chapterThemeColor
+ : null;
+ const pageThemeColor =
+ this.config.activeBook && this.config.activeBook.pageThemeColor
+ ? this.config.activeBook.pageThemeColor
+ : null;
+ colorDom.forEach((domItem) => {
+ // 鑾峰彇绔犺妭銆侀〉鐮�
+ let pageDom = this.getParentWithClass(domItem, "page-box");
+ let chapterDom = this.getParentWithClass(domItem, "chapter");
+ let page, chapterNum;
+ if (pageDom) page = pageDom.getAttribute("page");
+ if (chapterDom) chapterNum = chapterDom.getAttribute("num");
+ // 鍚戜笂鍖归厤涓婚鑹�
+ const themeColor =
+ page && pageThemeColor && pageThemeColor[page]
+ ? pageThemeColor[page]
+ : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
+ ? chapterThemeColor[chapterNum]
+ : bookThemeColor;
+ if (themeColor) {
+ domItem.style.color = themeColor;
+ }
+ });
+ backgroundColorDom.forEach((domItem) => {
+ // 鑾峰彇绔犺妭銆侀〉鐮�
+ let pageDom = this.getParentWithClass(domItem, "page-box");
+ let chapterDom = this.getParentWithClass(domItem, "chapter");
+ let page, chapterNum;
+ if (pageDom) page = pageDom.getAttribute("page");
+ if (chapterDom) chapterNum = chapterDom.getAttribute("num");
+ // 鍚戜笂鍖归厤涓婚鑹�
+ const themeColor =
+ page && pageThemeColor && pageThemeColor[page]
+ ? pageThemeColor[page]
+ : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
+ ? chapterThemeColor[chapterNum]
+ : bookThemeColor;
+ if (themeColor) {
+ domItem.style.backgroundColor = themeColor;
+ }
+ });
+ borderColorDom.forEach((domItem) => {
+ // 鑾峰彇绔犺妭銆侀〉鐮�
+ let pageDom = this.getParentWithClass(domItem, "page-box");
+ let chapterDom = this.getParentWithClass(domItem, "chapter");
+ let page, chapterNum;
+ if (pageDom) page = pageDom.getAttribute("page");
+ if (chapterDom) chapterNum = chapterDom.getAttribute("num");
+ // 鍚戜笂鍖归厤涓婚鑹�
+ const themeColor =
+ page && pageThemeColor && pageThemeColor[page]
+ ? pageThemeColor[page]
+ : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
+ ? chapterThemeColor[chapterNum]
+ : bookThemeColor;
+ if (themeColor) {
+ domItem.style.borderColor = themeColor;
+ }
+ });
+ },
+ getParentWithClass(element, className) {
+ while (element.parentElement) {
+ element = element.parentElement;
+ if (element.classList.contains(className)) {
+ return element;
+ }
+ }
},
pageChangeCallback(entries, observer) {
//entries锛氫唬琛ㄨ瀵熷埌鐨勭洰鏍囧厓绱犵殑闆嗗悎銆� observer锛氫唬琛ㄨ瀵熻�呭璞°��
@@ -268,12 +407,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,
+ text
});
// const sections = Array.from(document.querySelectorAll(".section"));
//sections锛氳幏鍙栨墍鏈夊叿鏈� .section 绫诲悕鐨勫厓绱狅紝骞惰浆鎹负鏁扮粍銆�
@@ -282,6 +427,95 @@
}
});
},
+ loadPageCallback(entries, observer) {
+ entries.forEach(async (entry) => {
+ if (entry.isIntersecting) {
+ const target = entry.target;
+ const page = target.getAttribute("page");
+ if (this.loadPageList.indexOf(page) == -1) {
+ //
+ 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();
+ }
+ }
+ }
+ });
+ },
+ initSwiper() {
+ const doms = (
+ this.container ? this.container : document
+ ).querySelectorAll(".swiper-container");
+ for (let i = 0; i < doms.length; i++) {
+ const dom = doms[i];
+ new Swiper(dom, {
+ loop: false, // 鏃犵紳
+ autoplay: {
+ //鑷姩寮�濮�
+ delay: 3000, //鏃堕棿闂撮殧
+ disableOnInteraction: false //*鎵嬪姩鎿嶄綔杞挱鍥惧悗涓嶄細鏆傚仠*
+ },
+ paginationClickable: true,
+ slidesPerView: 1, // 涓�缁勪笁涓�
+ spaceBetween: 30, // 闂撮殧
+ // 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳
+ navigation: {
+ nextEl: ".swiper-button-next",
+ prevEl: ".swiper-button-prev"
+ },
+ // 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔�
+ observer: true,
+ observeParents: true,
+ // 濡傛灉闇�瑕佸垎椤靛櫒
+ pagination: {
+ el: ".swiper-pagination",
+ clickable: true // 鍒嗛〉鍣ㄥ彲浠ョ偣鍑�
+ }
+ });
+ }
+ },
+ initViewer() {
+ const doms = (
+ this.container ? this.container : document
+ ).querySelectorAll(".openImgBox");
+ for (let i = 0; i < doms.length; i++) {
+ const dom = doms[i];
+ new Viewer(dom, {
+ navbar: true, // 鏄剧ず瀵艰埅鏍�
+ toolbar: true, // 鏄剧ず宸ュ叿鏍�
+ title: true // 鏄剧ず鏍囬
+ });
+ }
+ }
},
};
</script>
diff --git a/yarn.lock b/yarn.lock
index 324ea05..45742f9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6288,6 +6288,11 @@
"resolved" "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz"
"version" "1.1.2"
+"viewerjs@^1.11.6":
+ "integrity" "sha512-TlhdSp2oEOLFXvEp4psKaeTjR5zBjTRcM/sHUN8PkV1UWuY8HKC8n7GaVdW5Xqnwdr/F1OmzLik1QwDjI4w/nw=="
+ "resolved" "https://registry.npmjs.org/viewerjs/-/viewerjs-1.11.6.tgz"
+ "version" "1.11.6"
+
"vue-eslint-parser@^8.0.1":
"integrity" "sha512-dzHGG3+sYwSf6zFBa0Gi9ZDshD7+ad14DGOdTLjruRVgZXe2J+DcZ9iUhyR48z5g1PqRa20yt3Njna/veLJL/g=="
"resolved" "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz"
--
Gitblit v1.9.1