zhongshujie
2025-07-24 c1ab140c6a5ae4da17b61a080c0facd0f83815e2
src/books/aurturingAndEducationAged0to3/view/components/chapter001.vue
@@ -70,7 +70,7 @@
        <div class="bodystyle">
          <p class="img">表1-1 胎儿身长体重增长一览<sup>①</sup></p>
          <p class="center openImgBox">
            <img class="img-0" alt="" src="../../assets/images/0017-1.jpg" />
            <img class="img-0" alt="表1-1 胎儿身长体重增长一览" src="../../assets/images/0017-1.jpg" />
          </p>
          <div class="bk-1">
            <div class="bk-2">
@@ -120,52 +120,52 @@
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img src="../../assets/images/0015-01.jpg" />
                    <img src="../../assets/images/0015-01.jpg" alt="图1-1 胎儿发育的过程" />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img src="../../assets/images/0015-02.jpg" />
                    <img src="../../assets/images/0015-02.jpg" alt="图1-1 胎儿发育的过程" />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img src="../../assets/images/0015-03.jpg" />
                    <img src="../../assets/images/0015-03.jpg" alt="图1-1 胎儿发育的过程" />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img src="../../assets/images/0015-04.jpg" />
                    <img src="../../assets/images/0015-04.jpg" alt="图1-1 胎儿发育的过程" />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img src="../../assets/images/0015-05.jpg" />
                    <img src="../../assets/images/0015-05.jpg" alt="图1-1 胎儿发育的过程" />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img src="../../assets/images/0015-06.jpg" />
                    <img src="../../assets/images/0015-06.jpg" alt="图1-1 胎儿发育的过程" />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img src="../../assets/images/0015-07.jpg" />
                    <img src="../../assets/images/0015-07.jpg" alt="图1-1 胎儿发育的过程" />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img src="../../assets/images/0015-08.jpg" />
                    <img src="../../assets/images/0015-08.jpg" alt="图1-1 胎儿发育的过程" />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img src="../../assets/images/0015-09.jpg" />
                    <img src="../../assets/images/0015-09.jpg" alt="图1-1 胎儿发育的过程" />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img src="../../assets/images/0015-10.jpg" />
                    <img src="../../assets/images/0015-10.jpg" alt="图1-1 胎儿发育的过程" />
                  </div>
                </div>
              </div>
@@ -222,7 +222,7 @@
            <img class="rwmb-1" alt="" src="../../assets/images/tb-10.png" /><span class="zt-ht">本课内容回顾</span>
          </p>
          <p class="center openImgBox">
            <img class="img-0" alt="" src="../../assets/images/0019-1.jpg" />
            <img class="img-0" alt="本课内容回顾" src="../../assets/images/0019-1.jpg" />
          </p>
          <h2 id="b002">
            <span class="h2-zt">第二课</span><span class="h2-zt1">影响胎儿发育的因素</span>
@@ -252,20 +252,20 @@
          <div class="img-rights-video w395">
            <div class="video-box">
              <p class="center text td-0">
                <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
                  x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
                  controlslist="nodownload" class="w100 video"></video>
                <video :src="chapter001.videoMd5[0].handleMd5" webkit-playsinline="true" x-webkit-airplay="true"
                  playsinline="true" x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline=""
                  controls controlslist="nodownload" class="w100 video"></video>
              </p>
              <p class="center videoname">
                <span>视频:孕期唐氏筛查</span>
                <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'
                  " placement="top-start">
                <span>视频:{{ chapter001.videoMd5[0].name }}</span>
                <el-tooltip class="item" effect="dark"
                  :content="chapter001.videoMd5[0].isCollectVideo ? '点击取消' : '点击收藏'" placement="top-start">
                  <img :src="collectResourceList.findIndex(
                    (item) => item.id == 'd056878ebe8cb0dbf323afa4f50ce59e'
                    (item) => item.id == chapter001.videoMd5[0].md5
                  ) > -1
                    ? collectCheck
                    : collectImg
                    " alt="" class="collect-btn" @click="handleCollect('video-01')" />
                    " alt="" class="collect-btn" @click="handleCollect(chapter001.videoMd5[0])" />
                </el-tooltip>
              </p>
            </div>
@@ -380,20 +380,20 @@
          <div class="img-rights-video w395">
            <div class="video-box">
              <p class="center text td-0">
                <video :src="videoPathTwo" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
                  x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
                  controlslist="nodownload" class="w100 video"></video>
                <video :src="chapter001.videoMd5[1].handleMd5" webkit-playsinline="true" x-webkit-airplay="true"
                  playsinline="true" x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline=""
                  controls controlslist="nodownload" class="w100 video"></video>
              </p>
              <p class="center videoname">
                <span>视频:孕期唐氏筛查</span>
                <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo01 ? '点击取消' : '点击收藏'
                  " placement="top-start">
                <span>视频:{{ chapter001.videoMd5[1].name }}</span>
                <el-tooltip class="item" effect="dark"
                  :content="chapter001.videoMd5[1].isCollectVideo ? '点击取消' : '点击收藏'" placement="top-start">
                  <img :src="collectResourceList.findIndex(
                    (item) => item.id == 'be2714f3c8679bbe0ff150b5443321a9'
                    (item) => item.id == chapter001.videoMd5[1].md5
                  ) > -1
                    ? collectCheck
                    : collectImg
                    " alt="" class="collect-btn" @click="handleCollect('video-02')" />
                    " alt="" class="collect-btn" @click="handleCollect(chapter001.videoMd5[1])" />
                </el-tooltip>
              </p>
            </div>
@@ -429,13 +429,13 @@
        <div class="bodystyle">
          <p class="img">表1-2 常见孕期营养素缺乏导致的胎儿发育不良情况</p>
          <p class="center openImgBox">
            <img class="img-0" alt="" src="../../assets/images/0023-1.jpg" />
            <img class="img-0" alt="表1-2 常见孕期营养素缺乏导致的胎儿发育不良情况" src="../../assets/images/0023-1.jpg" />
          </p>
          <p class="fl al-c mt-20 mb-20">
            <img class="rwmb-1" alt="" src="../../assets/images/tb-10.png" /><span class="zt-ht">本课内容回顾</span>
          </p>
          <p class="center openImgBox">
            <img class="img-0" alt="" src="../../assets/images/0023-2.jpg" />
            <img class="img-0" alt="本课内容回顾" src="../../assets/images/0023-2.jpg" />
          </p>
        </div>
        <ul class="fl al-fe jc-fe footer-right">
@@ -570,7 +570,7 @@
            <img class="rwmb-1" alt="" src="../../assets/images/tb-10.png" /><span class="zt-ht">本课内容回顾</span>
          </p>
          <p class="center openImgBox">
            <img class="img-0" alt="" src="../../assets/images/0027-1.jpg" />
            <img class="img-0" alt="本课内容回顾" src="../../assets/images/0027-1.jpg" />
          </p>
          <h2 id="b004">
            <span class="h2-zt">第四课</span><span class="h2-zt1">胎儿教育</span>
@@ -699,7 +699,7 @@
            <img class="rwmb-1" alt="" src="../../assets/images/tb-10.png" /><span class="zt-ht">本课内容回顾</span>
          </p>
          <p class="center openImgBox">
            <img class="img-0" alt="" src="../../assets/images/0030-1.jpg" />
            <img class="img-0" alt="本课内容回顾" src="../../assets/images/0030-1.jpg" />
          </p>
          <p id="first-answer">
            <img class="rwmb-1" alt="" src="../../assets/images/tb-5.png" /><span class="zt-ht">思考与练习</span>
@@ -827,7 +827,7 @@
          <p>
            <img class="rwmb-1" alt="" src="../../assets/images/tb-8.png" /><span class="zt-ht">学习反思</span>
          </p>
          <textarea v-model="bookData.eight" placeholder="请输入内容" rows="9" class="table-textarea"
          <textarea v-model="bookData.one" placeholder="请输入内容" rows="9" class="table-textarea"
            @change="setBookData"></textarea>
        </div>
        <ul class="fl al-fe jc-fe footer-right">
@@ -851,20 +851,33 @@
    showPageList: {
      type: Array,
    },
    resourceList: {
      type: Object,
    },
  },
  data() {
    return {
      collectImg: require("../../assets/images/icon/heart.png"),
      collectCheck: require("../../assets/images/icon/heart-check.png"),
      videoPathOne: "",
      videoPathTwo: "",
      collectResourceList: [],
      chapterData: {
        isCollectVideo: false,
        isCollectVideo01: false,
      },
      unitQuestion: {
        isShowAnswer: false,
      },
      chapter001: {
        videoMd5: [
          {
            isCollectVideo: false,
            md5: this.resourceList[13],
            handleMd5: "",
            name: "孕期唐氏筛查",
          },
          {
            isCollectVideo: false,
            md5: this.resourceList[14],
            handleMd5: "",
            name: "孕期保健",
          },
        ],
      },
      questionData: {
        one: "",
@@ -909,13 +922,14 @@
  },
  methods: {
    async getVidoePath() {
      this.videoPathOne = await getResourcePath(
        "d056878ebe8cb0dbf323afa4f50ce59e"
      );
      this.videoPathTwo = await getResourcePath(
        "be2714f3c8679bbe0ff150b5443321a9"
      );
      for (let index = 0; index < this.chapter001.videoMd5.length; index++) {
        const item = this.chapter001.videoMd5[index];
        if (item.md5 && !item.md5.includes("https:")) {
          item.handleMd5 = await getResourcePath(item.md5);
        }
      }
    },
    setBookQuestion() {
      localStorage.setItem(
        "aurturingAndEducation-book-chapter01-questionData",
@@ -942,29 +956,20 @@
      this.unitQuestion.isShowAnswer = false;
    },
    handleCollect(e) {
      if (e == "video-01") {
      if (e) {
        this.handleCollectResource(
          "d056878ebe8cb0dbf323afa4f50ce59e",
          "d056878ebe8cb0dbf323afa4f50ce59e",
          e.md5,
          e.md5,
          "",
          "视频",
          "bits",
          "视频:孕期唐氏筛查"
          "视频:" + e.md5,
        );
        this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo;
      } else if (e == "video-02") {
        this.handleCollectResource(
          "be2714f3c8679bbe0ff150b5443321a9",
          "be2714f3c8679bbe0ff150b5443321a9",
          "",
          "视频",
          "bits",
          "视频:孕期保健"
        );
        this.chapterData.isCollectVideo01 = !this.chapterData.isCollectVideo01;
        e.isCollectVideo = !e.isCollectVideo;
      }
      this.handleChapterData();
    },
    handleChapterData() {
      localStorage.setItem(
        "aurturingAndEducation-book-chapter01-Data",