testbookLayout.git

			@@ -35,8 +35,10 @@
			<h3 class="lefth3" id="c031"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
			<p class="text"><span class="hs1">◇</span>以小组为单位围成一圈，面朝圈外蹲下，相邻两人互挎手臂，组员同时站起来，看看哪个组最快！</p>
			<p class="text t-l"><span class="hs1">◇</span>说一说：快速站起来的秘诀是什么？
			<textarea v-model="questionData.reading.one" placeholder="请输入内容" rows="6"
			style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion">
			<textarea v-model="questionData.reading.one" placeholder="请输入内容" rows="6"
			style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"
			:class="{ 'textarea-focused': isFocused === 'one' }" @focus="handleFocus('one')"
			@blur="handleBlur('one')">
			</textarea>
			</p>
			<h3 class="lefth3" id="c032"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
			@@ -68,7 +70,8 @@
			class="hs1">◇</span>春天来了，春风吹过，柳树发芽了，迎春花开了，小燕子在天空自由地飞翔。一切都是那么生机勃勃。请为“春天”涂上你喜欢的颜色。</p>
			<!-- 图片缺失 -->
			<!-- <p class="center"><img class="img-e" alt="" src="./../assets/images/0033-1.jpg" /></p> -->
			<graffiti :page="32" :bcImg="this.config.activeBook.resourceUrl + '/image/0033-1.jpg'" :imgWidth="596" :imgHeight="500" />
			<graffiti :page="32" :bcImg="this.config.activeBook.resourceUrl + '/image/0033-1.jpg'"
			:imgWidth="596" :imgHeight="500" />
			</div>
			<!-- 此次为页脚部分（需要设置页码） -->
			<div class="page-footer">
			@@ -130,7 +133,7 @@
			<h3 class="lefth3" id="c038" style="margin-top: 7%;"><img class="img-gn1" alt=""
			src="../../assets/images/czysj.jpg" /></h3>
			<p class="text"><span class="hs1">◇</span>邀请同伴共同完成《一块奶酪》的展演吧！</p>
			<p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/4-2.gif" /></p>
			<p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/0036-2.jpg" /></p>
			</div>
			<!-- 此次为页脚部分（需要设置页码） -->
			<div class="page-footer">
			@@ -209,8 +212,8 @@
			<span>视频：团结就是力量 </span>
			<el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'"
			placement="top-start">
			<img :src="chapterData.isCollectVideo ? collectCheck : collectImg" alt=""
			class="collect-btn" @click="handleCollect('video')" />
			<img :src="collectResourceList.findIndex(item => item.id == '691cbd2c13198d04afc7800d0f2cafb0') > -1 ? collectCheck : collectImg"
			alt="" class="collect-btn" @click="handleCollect('video')" />
			</el-tooltip>
			</p>
			</div>
			@@ -226,6 +229,7 @@
			<script>
			import { getResourcePath } from "@/assets/methods/resources";
			import graffiti from '@/components/graffiti/index.vue'
			import { getCollectResource, setCollectResource } from "@/assets/methods/resources";
			export default {
			name: "chapterFour",
			props: {
			@@ -235,12 +239,18 @@
			},
			components: { graffiti },
			//在这里对调用的方法进行挂载
			mounted() {
			async mounted() {
			this.getVidoePath();
			const bookQuestion = localStorage.getItem("artAndDrama-book-question-four");
			if (bookQuestion) {
			this.questionData = JSON.parse(bookQuestion);
			}

			const data = localStorage.getItem("artAndDrama-chapter04-Data");
			if (data) {
			this.chapterData = JSON.parse(data);
			}
			this.collectResourceList = await getCollectResource(this.config.activeBook.bookId)
			},
			data() {
			return {
			@@ -252,6 +262,8 @@
			audioPathThree: "",
			audioPathFour: "",
			audioPathFive: "",
			isFocused: null, // 用于跟踪textarea的聚焦状态
			collectResourceList: [],
			chapterData: {
			isCollectImg: false,
			isCollectVideo: false,
			@@ -308,8 +320,13 @@
			"7abb747bd16745afb83715fcbb3579ab"
			);
			},
			handleFocus(id) {
			this.isFocused = id; // 当textarea聚焦时，设置为true
			},
			handleBlur(id) {
			this.isFocused = null; // 当textarea失去焦点时，设置为false
			},
			setBookQuestion() {
			console.log("保存");
			localStorage.setItem(
			"artAndDrama-book-question-four",
			JSON.stringify(this.questionData)
			@@ -317,18 +334,34 @@
			},
			handleChapterData() {
			localStorage.setItem(
			"math-chapterData",
			"artAndDrama-chapter04-Data",
			JSON.stringify(this.chapterData)
			);
			},
			handleCollect(type) {
			if (type == "img") {
			this.chapterData.isCollectImg = !this.chapterData.isCollectImg;
			} else if (type == "video") {
			this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo;
			if (type == "video") {
			this.handleCollectResource("09de7704eeaaf3a210b8c6af0a94d545", "09de7704eeaaf3a210b8c6af0a94d545", '', "视频", "bits", '视频：团结就是力量')
			}
			this.handleChapterData();
			},
			//资源收藏事件
			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>