Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

litian

2 天以前 2ca7f1e9d3ff3c54ec5d10688a33c628ec296f8b

 src/books/toddlerSportsSafetyProtection/view/components/chapter001.vue

New file
@@ -0,0 +1,247 @@
<template>
  <div class="chapter" num="10">
    <!-- 1页 -->
    <div class="page-box" page="10">
      <div v-if="showPageList.indexOf(10) > -1">
        <div class="UnitCover">
          <h1 class="seriesTitle">第一章&nbsp;</h1>
          <h1 class="seriesTitle mb-20">婴幼儿运动安全与保护概述&nbsp;</h1>
          <p class="rotate-up">^</p>
          <p class="rotate-down">v</p>
          <p class="rotate-down">v</p>
          <p class="rotate-down">v</p>
          <p class="rotate-down">v</p>
          <p class="rotate-down">v</p>
          <p class="rotate-down">v</p>
          <p class="rotate-down mb-20">v</p>
          <p class="content">
            <img class="g-pic" src="../../assets/images/0013_01.jpg" alt="" />
          </p>
          <p class="quotation">1．理解婴幼儿运动安全与保护的意义。</p>
          <p class="quotation">2．掌握婴幼儿运动安全与保护的目标与内容。</p>
          <p class="quotation">3．理解婴幼儿运动风险的影响因素。</p>
          <p class="content">
            <img class="g-pic" src="../../assets/images/0013_02.jpg" alt="" />
          </p>
          <div class="bodyPic openImgBox">
            <img
              src="../../assets/images/0013-03.jpg"
              style="width: 100%"
              alt=""
              active="true"
            />
          </div>
          <p class="content">
            <img class="g-pic" src="../../assets/images/0013_04.jpg" alt="" />
          </p>
          <p class="quotation">
            每到户外活动时间，某幼儿园教师不愿意组织幼儿进行户外运动，认为幼儿在运动时，判断危险和自我保护能力都较弱，容易发生运动伤害。园长以及家长也非常关注幼儿的安全，担心幼儿在运动中如果出现意外伤害不能及时处理，会造成不必要的麻烦。因此能不出去就不出去，能少活动就少活动，抱着多动多危险、少动少危险、不动不危险的心态。
          </p>
          <p class="content">
            这种现象存在于不少幼教机构。教师不能正确理解婴幼儿运动与婴幼儿成长的关系，不能正确理解婴幼儿运动安全与保护的意义以及影响因素，本章将重点讨论这些内容。
          </p>
        </div>
      </div>
    </div>
    <!-- 2页 -->
    <div class="page-box" page="11">
      <div v-if="showPageList.indexOf(11) > -1">
        <div class="page-father">
          <ul class="header-left">
            <li class="headerText">
              婴<br />幼<br />儿<br />运<br />动<br />安<br />全<br />与<br />保<br />护
            </li>
            <li class="headerNumber">2</li>
            <img src="../../assets/images/a1.jpg" alt="" />
          </ul>
          <div class="bodystyle">
            
          </div>
        </div>
      </div>
    </div>
    <!-- 3页 -->
    <div class="page-box" page="12">
      <div v-if="showPageList.indexOf(12) > -1">
        <div class="page-father">
          <div class="bodystyle-left">

          </div>
          <ul class="header-right">
            <li class="header-right-img">
              <img src="../../assets/images/a2.jpg" alt="" />
            </li>
            <img class="header-right-imgTop" src="../../assets/images/a3.jpg" alt="" />
            <li class="header-right-Number">3</li>
            <li class="header-right-Text">
              第<br />一<br />章
            </li>
            <li class="header-right-Text-bottom">
              婴<br />幼<br />儿<br />运<br />动<br />安<br />全<br />与<br />保<br />护
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getResourcePath } from "@/assets/methods/resources";
import {
  getCollectResource,
  setCollectResource,
} from "@/assets/methods/resources";
import preView from "@/components/pdfview/index.vue";
export default {
  name: "chapterOne",
  props: {
    showPageList: {
      type: Array,
    },
  },
  components: {
    preView,
  },
  data() {
    return {
      dialogVisible: false,
      pdfDialogRef: "",
      somePdfTitleValue: "",
      p_md5: "",
      collectResourceList: [],
      chapter001: {
        pdfMd5: {
          1: {
            md5: "6a7118abdc38a24995f26c164d63648c",
            name: "拓展学习：从罗恩菲尔德的艺术教育思想",
          },
          2: {
            md5: "cfac1cfc4b845032d35937a0f6f201e1",
            name: "拓展学习：快乐童谣，帮助宝宝轻松学说话",
          },
        },
      },
      collectImg: require("../../assets/images/icon/heart.png"),
      collectCheck: require("../../assets/images/icon/heart-check.png"),
      videoPathOne: "",
      audioPathOne: "",
      chapterData: {
        isCollectVideoOne: false,
      },
      videoQuestionData: {
        one: "",
      },
    };
  },
  async mounted() {
    const videoData = localStorage.getItem(
      "artInitiationForAges0to3-book-chapter001-video"
    );
    if (videoData) {
      this.chapterData = JSON.parse(videoData);
    }

    const videoQuestionData = localStorage.getItem(
      "artInitiationForAges0to3-book-chapter001-videoQuestionData"
    );
    if (videoQuestionData) {
      this.videoQuestionData = JSON.parse(videoQuestionData);
    }

    this.getVidoePath();
    this.collectResourceList = await getCollectResource(
      this.config.activeBook.bookId
    );
  },

  methods: {
    async getVidoePath() {
      this.audioPathOne = await getResourcePath(
        "c19b26c585aecc086a286aa0829c9e3b"
      );
      this.videoPathOne = await getResourcePath(
        "afebf048dd2bf2cb09004976ea818dc4"
      );
    },
    toUrl(val) {
      if (val) {
        this.p_md5 = this.chapter001.pdfMd5[val].md5;
        this.somePdfTitleValue = this.chapter001.pdfMd5[val].name;
        this.$refs.pdfDialogRef.openDialog();
      }
    },

    handleCollect(e) {
      if (e == "video-01") {
        this.handleCollectResource(
          "afebf048dd2bf2cb09004976ea818dc4",
          "afebf048dd2bf2cb09004976ea818dc4",
          "",
          "视频",
          "bits",
          "活动视频：宝宝发现美"
        );
        this.chapterData.isCollectVideoOne =
          !this.chapterData.isCollectVideoOne;
      }
      this.saveVideoStatus();
    },

    saveVideoStatus() {
      localStorage.setItem(
        "artInitiationForAges0to3-book-chapter001-video",
        JSON.stringify(this.chapterData)
      );
    },

    saveVideoQuestionData() {
      localStorage.setItem(
        "artInitiationForAges0to3-book-chapter001-videoQuestionData",
        JSON.stringify(this.videoQuestionData)
      );
    },
    //资源收藏事件
    // resourcePath  文件路径，
    // resourceType  文件类型
    // source        文件来源
    handleCollectResource(
      id,
      md5,
      resourcePath,
      resourceType,
      source,
      resourceName
    ) {
      let list = this.collectResourceList;
      if (list.findIndex((item) => item.id == id) > -1) {
        list = list.filter((item) => item.id != id);
      } else {
        list.push({
          id,
          md5,
          resourcePath,
          resourceType,
          source,
          resourceName,
        });
      }
      this.collectResourceList = list;
      setCollectResource(
        this.config.activeBook.bookId,
        this.collectResourceList
      );
    },
  },
};
</script>
<style lang="less" scoped>
hr {
  margin-left: 0;
  margin-bottom: 25px;
  width: 25%;
  border: none;
  height: 1px;
  background-color: #000;
}
</style>