From 67d22fb0aeb9fe90b766abae0e41cb04aebc1296 Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期五, 17 五月 2024 15:45:09 +0800
Subject: [PATCH] 页码监听
---
src/assets/js/toolClass.js | 218 +++++++++++++++++++-----------------
vue.config.js | 4
src/books/childHealth/view/index.vue | 10 -
src/assets/methods/examination.js | 1
src/books/childHealth/view/content/index.vue | 71 ++++++++++-
5 files changed, 179 insertions(+), 125 deletions(-)
diff --git a/src/assets/js/toolClass.js b/src/assets/js/toolClass.js
index 3c8bc0d..61db6fb 100644
--- a/src/assets/js/toolClass.js
+++ b/src/assets/js/toolClass.js
@@ -1,75 +1,76 @@
-import SparkMD5 from 'spark-md5'
-import { getPublicImage } from '@/assets/js/middleGround/tool.js'
+import SparkMD5 from "spark-md5";
+import { getPublicImage } from "@/assets/js/middleGround/tool.js";
// import moment from "moment";
var tool = {
secondToTime(second) {
- var minute = Math.floor(second / 60)
- var sec = second % 60
- var time
+ var minute = Math.floor(second / 60);
+ var sec = second % 60;
+ var time;
if (second < 60) {
- time = second + '"'
+ time = second + '"';
} else {
- time = sec === 0 ? minute + "'" : minute + "'" + sec + '"'
+ time = sec === 0 ? minute + "'" : minute + "'" + sec + '"';
}
- return time
+ return time;
},
setCookie: function (c_name, value, expiredays, path) {
- var exdate = new Date()
- exdate.setDate(exdate.getDate() + expiredays)
+ var exdate = new Date();
+ exdate.setDate(exdate.getDate() + expiredays);
document.cookie =
c_name +
- '=' +
+ "=" +
escape(value) +
- (expiredays == null ? '' : ';expires=' + exdate.toGMTString()) +
- (path ? ';path=' + path : '')
+ (expiredays == null ? "" : ";expires=" + exdate.toGMTString()) +
+ (path ? ";path=" + path : "");
},
getCookie: function (c_name) {
if (document.cookie.length > 0) {
- var c_start = document.cookie.indexOf(c_name + '=')
+ var c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1) {
- c_start = c_start + c_name.length + 1
- var c_end = document.cookie.indexOf(';', c_start)
- if (c_end == -1) c_end = document.cookie.length
- return unescape(document.cookie.substring(c_start, c_end))
+ c_start = c_start + c_name.length + 1;
+ var c_end = document.cookie.indexOf(";", c_start);
+ if (c_end == -1) c_end = document.cookie.length;
+ return unescape(document.cookie.substring(c_start, c_end));
}
}
- return ''
+ return "";
},
delCookie: function (name) {
- var exp = new Date()
- exp.setTime(exp.getTime() - 1)
- var cval = tool.getCookie(name)
- if (cval != null) document.cookie = name + '=' + cval + ';expires=' + exp.toGMTString()
+ var exp = new Date();
+ exp.setTime(exp.getTime() - 1);
+ var cval = tool.getCookie(name);
+ if (cval != null)
+ document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
},
// 寮哄埗淇濈暀2浣嶅皬鏁帮紝濡傦細2锛屼細鍦�2鍚庨潰琛ヤ笂00.鍗�2.00
toDecimal2(x) {
- var f
- f = parseFloat(x)
+ var f;
+ f = parseFloat(x);
if (isNaN(f)) {
- return false
+ return false;
}
- f = Math.round(x * 100) / 100
- var s = f.toString()
- var rs = s.indexOf('.')
+ f = Math.round(x * 100) / 100;
+ var s = f.toString();
+ var rs = s.indexOf(".");
if (rs < 0) {
- rs = s.length
- s += '.'
+ rs = s.length;
+ s += ".";
}
while (s.length <= rs + 2) {
- s += '0'
+ s += "0";
}
- return s
+ return s;
},
formateTime(date) {
var newDate = new Date(+new Date(date) + 8 * 3600 * 1000)
.toISOString()
- .replace(/T/g, ' ')
- .replace(/\.[\d]{3}Z/, '')
- var time = new Date(newDate)
- return time.getTime()
+ .replace(/T/g, " ")
+ .replace(/\.[\d]{3}Z/, "");
+ var time = new Date(newDate);
+ return time.getTime();
}
-}
+};
// 澶勭悊璁㈠崟璁板綍
// export function setOrderList(res) {
@@ -138,22 +139,22 @@
//澶勭悊琛ㄥ崟鎻愪氦鏁版嵁
export function worksData(res) {
- let arr = []
+ let arr = [];
for (let i = 0; i < res.length; i++) {
- const item = res[i]
+ const item = res[i];
if (item.typeField) {
if (item.typeField.config) {
- item.typeField.options = JSON.parse(item.typeField.config).option
+ item.typeField.options = JSON.parse(item.typeField.config).option;
}
- arr.push(item.typeField)
+ arr.push(item.typeField);
}
}
- return arr
+ return arr;
}
export function worksDataBytool(res, value, linkList) {
- let arr = []
- let nrr = []
+ let arr = [];
+ let nrr = [];
if (linkList && linkList.length > 0) {
linkList.forEach((e) =>
nrr.push({
@@ -161,45 +162,45 @@
linkType: e.linkType,
md5: e.md5
})
- )
+ );
}
res.forEach((item) => {
const obj = {
baseType: item.typeField.baseType,
order: 0,
typeFieldId: item.typeField.id,
- sequenceNum: item.config ? JSON.parse(item.config).uuid : '',
+ sequenceNum: item.config ? JSON.parse(item.config).uuid : "",
newDataAndFileLinkListRequest: []
- }
+ };
for (let k in value) {
if (item.typeField.refCode === k) {
- if (item.typeField.type == 'File') {
+ if (item.typeField.type == "File") {
try {
- obj.strValue = JSON.stringify(value[k].map((citem) => citem.md5))
+ obj.strValue = JSON.stringify(value[k].map((citem) => citem.md5));
} catch (error) {
- obj.strValue = ''
+ obj.strValue = "";
}
- obj.newDataAndFileLinkListRequest = nrr
+ obj.newDataAndFileLinkListRequest = nrr;
} else {
- if (typeof value[k] == 'object') {
- obj.strValue = JSON.stringify(value[k])
+ if (typeof value[k] == "object") {
+ obj.strValue = JSON.stringify(value[k]);
} else {
- if (obj.baseType === 'String') {
- obj.strValue = value[k] + ''
- } else if (obj.baseType === 'Text') {
- obj.textValue = value[k] + ''
+ if (obj.baseType === "String") {
+ obj.strValue = value[k] + "";
+ } else if (obj.baseType === "Text") {
+ obj.textValue = value[k] + "";
} else {
- obj.strValue = value[k] + ''
+ obj.strValue = value[k] + "";
}
}
}
}
}
// if (obj.strValue || obj.textValue) {
- arr.push(obj)
+ arr.push(obj);
// }
- })
- return arr
+ });
+ return arr;
}
export function UpdateworksDataBytool(initData, res, value, linkList) {
@@ -223,7 +224,7 @@
id: updateOldData.id,
typeFieldId: citem.typeField.id,
sequenceNum: citem.sequenceNum,
- setDataAndFileLinkListRequest: [],
+ setDataAndFileLinkListRequest: []
};
for (let k in value) {
if (citem.typeField.refCode === k) {
@@ -247,7 +248,7 @@
order: 0,
typeFieldId: citem.typeField.id,
sequenceNum: citem.sequenceNum,
- setDataAndFileLinkListRequest: [],
+ setDataAndFileLinkListRequest: []
};
for (let k in value) {
if (citem.typeField.refCode === k) {
@@ -266,21 +267,21 @@
});
return {
updateData: arr,
- newData: newArr,
+ newData: newArr
};
}
export function download(url) {
- const iframe = document.createElement('iframe')
- iframe.setAttribute('hidden', 'hidden')
- document.body.appendChild(iframe)
+ const iframe = document.createElement("iframe");
+ iframe.setAttribute("hidden", "hidden");
+ document.body.appendChild(iframe);
iframe.onload = () => {
if (iframe) {
- iframe.setAttribute('src', 'about:blank')
+ iframe.setAttribute("src", "about:blank");
}
- }
+ };
- iframe.setAttribute('src', url)
+ iframe.setAttribute("src", url);
}
/**
@@ -290,66 +291,78 @@
* @returns {string}
*/
export function uuid(len = 32, radix = 16) {
- const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('')
+ const chars =
+ "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split("");
let uuid = [],
- i
- radix = radix || chars.length
+ i;
+ radix = radix || chars.length;
if (len) {
// Compact form
- for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)]
+ for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
} else {
// rfc4122, version 4 form
- let r
+ let r;
// rfc4122 requires these characters
- uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'
- uuid[14] = '4'
+ uuid[8] = uuid[13] = uuid[18] = uuid[23] = "-";
+ uuid[14] = "4";
// Fill in random data. At i==19 set the high bits of clock sequence as
// per rfc4122, sec. 4.1.5
for (i = 0; i < 36; i++) {
if (!uuid[i]) {
- r = 0 | (Math.random() * 16)
- uuid[i] = chars[i === 19 ? (r & 0x3) | 0x8 : r]
+ r = 0 | (Math.random() * 16);
+ uuid[i] = chars[i === 19 ? (r & 0x3) | 0x8 : r];
}
}
}
- return uuid.join('')
+ return uuid.join("");
}
export function getFileMd5(file, chunkSize) {
return new Promise((resolve, reject) => {
- let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice
- let chunks = Math.ceil(file.size / chunkSize)
- let currentChunk = 0
- let spark = new SparkMD5.ArrayBuffer()
- let fileReader = new FileReader()
+ let blobSlice =
+ File.prototype.slice ||
+ File.prototype.mozSlice ||
+ File.prototype.webkitSlice;
+ let chunks = Math.ceil(file.size / chunkSize);
+ let currentChunk = 0;
+ let spark = new SparkMD5.ArrayBuffer();
+ let fileReader = new FileReader();
fileReader.onload = function (e) {
- spark.append(e.target.result)
- currentChunk++
+ spark.append(e.target.result);
+ currentChunk++;
if (currentChunk < chunks) {
- loadNext()
+ loadNext();
} else {
- const md5 = spark.end()
- resolve(md5)
+ const md5 = spark.end();
+ resolve(md5);
}
- }
+ };
fileReader.onerror = function (e) {
- reject(e)
- }
+ reject(e);
+ };
function loadNext() {
- let start = currentChunk * chunkSize
- let end = start + chunkSize
+ let start = currentChunk * chunkSize;
+ let end = start + chunkSize;
if (end > file.size) {
- end = file.size
+ end = file.size;
}
- fileReader.readAsArrayBuffer(blobSlice.call(file, start, end))
+ fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
}
- loadNext()
- })
+ loadNext();
+ });
+}
+
+export function getParentNodeByClassName(element, className) {
+ if (element && element.classList.contains(className)) {
+ return element;
+ } else {
+ return getParentNodeByClassName(element.parentNode, className);
+ }
}
// 澶勭悊鏃堕棿锛岀敤浜庢樉绀洪煶瑙嗛褰撳墠鏃堕棿
@@ -460,6 +473,7 @@
worksDataBytool,
UpdateworksDataBytool,
getPublicImage,
- worksData
+ worksData,
+ getParentNodeByClassName
// parseHtml,
-}
+};
diff --git a/src/assets/methods/examination.js b/src/assets/methods/examination.js
index c993fab..bb9fde7 100644
--- a/src/assets/methods/examination.js
+++ b/src/assets/methods/examination.js
@@ -204,7 +204,6 @@
citem.number = cindex + 1;
}
}
- console.log(cardList.filter(item=>item.infoList.length > 0),"cardList.filter(item=>item.infoList.length > 0)");
return cardList.filter(item=>item.infoList.length > 0);
};
diff --git a/src/books/childHealth/view/content/index.vue b/src/books/childHealth/view/content/index.vue
index 6e37da0..920b6dc 100644
--- a/src/books/childHealth/view/content/index.vue
+++ b/src/books/childHealth/view/content/index.vue
@@ -46,7 +46,8 @@
loadThreshold: 300, // 瑙﹀彂鍔犺浇闃堝��
throttleThreshold: 100, // 鑺傛祦闃堝��
previousScrollTop: 0,
- throttledScrollHandler: null
+ throttledScrollHandler: null,
+ observer: null
};
},
watch: {
@@ -61,6 +62,10 @@
showCatalogList: newVal
});
}
+ // 鍚姩椤电爜瑙傚療
+ setTimeout(() => {
+ this.initObservation();
+ }, 500);
}
}
},
@@ -91,6 +96,19 @@
});
}
+ // 鍒涘缓涓�涓柊鐨� Intersection Observer 瀹炰緥锛岀敤浜庤瀵熺洰鏍囧厓绱犲拰鎵ц鐩稿簲鐨勫洖璋冨嚱鏁般��
+ // new IntersectionObserver(callback, options)锛氫娇鐢ㄤ箣鍓嶅畾涔夌殑 callback 鍥炶皟鍑芥暟鍜� options 閰嶇疆閫夐」鏉ュ垵濮嬪寲 Intersection Observer 瀹炰緥銆�
+ this.observer = new IntersectionObserver(this.pageChangeCallback, {
+ root: null, // 鎸囧畾鏍瑰厓绱狅紝杩欓噷璁句负 null锛岃〃绀洪�夊彇鏁翠釜瑙嗙獥浣滀负鏍瑰厓绱犮��
+ rootMargin: "0px", // 鎸囧畾鏍瑰厓绱犵殑杈圭晫锛岃繖閲岃涓� "0px"锛岃〃绀烘牴鍏冪礌鐨勮竟鐣屽拰瑙嗙獥鐨勮竟鐣岄噸鍚�
+ threshold: 0.5 // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般��
+ });
+
+ // 鍚姩椤电爜瑙傚療
+ setTimeout(() => {
+ this.initObservation();
+ }, 500);
+
// 娴嬭瘯椤甸潰璺宠浆
// setTimeout(() => {
// this.gotoPage(5, 100);
@@ -111,6 +129,7 @@
// }, 3000);
},
methods: {
+ // 婊氬姩鐩戝惉
scrollFun(event) {
// 鍒ゆ柇鍚戜笂婊氬姩杩樻槸鍚戜笅婊氬姩
if (event.target.scrollTop > this.previousScrollTop) {
@@ -154,16 +173,8 @@
// showCatalogList 褰撳墠鏄剧ず鐨勪笁涓珷鑺傦紝watch鐩戝惉浼犻�掔粰涓诲簲鐢�
// 鏇存柊涓婁竴娆℃粴鍔ㄧ殑浣嶇疆
this.previousScrollTop = event.target.scrollTop;
-
- // 杩斿洖椤电爜鍜岀珷鑺備俊鎭�
- // if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange)
- // this.$store.state.qiankun.pageChange({
- // page: 100,
- // catalog: 5,
- // catalogId: "",
- // catalogName: ""
- // });
},
+ // 绔犺妭銆侀〉闈㈣烦杞�
gotoPage(catalog, page) {
if (catalog >= 0 && catalog <= this.catalogLength) {
// 澶勭悊娓叉煋绔犺妭
@@ -193,6 +204,7 @@
console.log("绔犺妭閿欒锛�");
}
},
+ // 娓叉煋鏍囪
renderSign(type, data) {
const existence = (
this.container ? this.container : document
@@ -228,6 +240,7 @@
}
}
},
+ // 鍒犻櫎鏍囪娓叉煋
delSign({ ids, type }) {
if (ids && ids.length) {
for (let i = 0; i < ids.length; i++) {
@@ -253,6 +266,44 @@
);
}
}
+ },
+ initObservation() {
+ const sections = document.querySelectorAll(".page-box");
+ //observer 瑙傚療姣忎釜鍏冪礌锛屼互渚垮湪瀹冧滑杩涘叆鎴栫寮�瑙嗙獥鏃惰Е鍙戝洖璋冨嚱鏁般��
+ sections.forEach((section) => {
+ const isObserver = section.getAttribute("observer");
+ if (!isObserver) {
+ this.observer.observe(section);
+ section.setAttribute("observer", "1");
+ }
+ });
+ },
+ pageChangeCallback(entries, observer) {
+ //entries锛氫唬琛ㄨ瀵熷埌鐨勭洰鏍囧厓绱犵殑闆嗗悎銆� observer锛氫唬琛ㄨ瀵熻�呭璞°��
+ entries.forEach((entry) => {
+ //entry.isIntersecting锛氭鏌ュ綋鍓嶇洰鏍囧厓绱犳槸鍚︿笌鏍瑰厓绱犵浉浜ゃ��
+ if (entry.isIntersecting) {
+ const target = entry.target;
+ //entry.target锛氳幏鍙栧綋鍓嶇洰鏍囧厓绱�
+ const page = target.getAttribute("page");
+ const catalogDom = this.tool.getParentNodeByClassName(
+ target,
+ "chapter"
+ );
+ const catalog = catalogDom.getAttribute("num");
+ console.log("page", page, catalog);
+ // 杩斿洖椤电爜鍜岀珷鑺備俊鎭�
+ if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange)
+ this.$store.state.qiankun.pageChange({
+ page: page,
+ catalog: catalog
+ });
+ // const sections = Array.from(document.querySelectorAll(".section"));
+ //sections锛氳幏鍙栨墍鏈夊叿鏈� .section 绫诲悕鐨勫厓绱狅紝骞惰浆鎹负鏁扮粍銆�
+ // let index = sections.findIndex((section) => section === target) + 1;
+ //index锛氭煡鎵惧綋鍓嶇洰鏍囧厓绱犲湪 sections 鏁扮粍涓殑绱㈠紩锛屽苟鍔� 1锛岀敤浜庣‘瀹氬綋鍓嶉〉鐮併��
+ }
+ });
}
},
components: {
diff --git a/src/books/childHealth/view/index.vue b/src/books/childHealth/view/index.vue
index 0187f04..9a515d1 100644
--- a/src/books/childHealth/view/index.vue
+++ b/src/books/childHealth/view/index.vue
@@ -60,7 +60,6 @@
}
};
this.MG.store.getProductDetail(query).then((res) => {
- console.log("鍥句功淇℃伅", res.datas);
this.$data.bookData = res.datas;
this.$store.commit("setRootCmsItemId", res.datas.rootCmsItemId);
});
@@ -102,15 +101,6 @@
y: e.y
});
}
- console.log("閫変腑鐨勬枃瀛�", {
- chapterNum,
- txt,
- selection,
- node,
- page,
- x: e.x,
- y: e.y
- });
}
} else {
if (this.$store.state.qiankun.windowSelection) {
diff --git a/vue.config.js b/vue.config.js
index 32812c0..e848709 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -2,8 +2,8 @@
// import {publicCtx} from '@/assets/js/config'
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
- publicPath: 'http://182.92.203.7:3007/books/book/1',
- // publicPath:'/books/book/1',
+ // publicPath: 'http://182.92.203.7:3007/books/book/1',
+ publicPath:'/books/book/1',
transpileDependencies: true,
lintOnSave: false,
// devServer: {
--
Gitblit v1.9.1