1

YM

2024-05-15 00c39bac238dcd23346f2f47462f3ac6e81f64a3

1

 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>

 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>

 src/assets/images/biji.png

 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：catalog, 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: {

 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
<style lang="less" scoped>

</style>

 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,