From 3c3336804abaee7ce364cfb7be10d3849f6dd9cc Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期四, 08 八月 2024 16:05:44 +0800
Subject: [PATCH] 艺术戏剧（8.8）
---
src/books/artAndDrama/view/components/chapter004.vue | 59 ++++++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 46 insertions(+), 13 deletions(-)
diff --git a/src/books/artAndDrama/view/components/chapter004.vue b/src/books/artAndDrama/view/components/chapter004.vue
index 1635a5e..f8ccd77 100644
--- a/src/books/artAndDrama/view/components/chapter004.vue
+++ b/src/books/artAndDrama/view/components/chapter004.vue
@@ -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; // 褰搕extarea鑱氱劍鏃讹紝璁剧疆涓簍rue
+ },
+ handleBlur(id) {
+ this.isFocused = null; // 褰搕extarea澶卞幓鐒︾偣鏃讹紝璁剧疆涓篺alse
+ },
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>
--
Gitblit v1.9.1