| | |
| | | <span>视频:我们是一家人 </span> |
| | | <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'" |
| | | placement="top-start"> |
| | | <img :src="chapterData.isCollectVideo ? collectCheck : collectImg" alt="" class="collect-btn" |
| | | <img :src="collectResourceList.findIndex(item => item.id == '691cbd2c13198d04afc7800d0f2cafb0') > -1 ? collectCheck : collectImg" alt="" class="collect-btn" |
| | | @click="handleCollect('video')" /> |
| | | </el-tooltip> |
| | | </p> |
| | |
| | | </p> |
| | | <p class="text t-l">正义队长: |
| | | <textarea v-model="questionData.reading.one" placeholder="请输入内容" rows="6" |
| | | style="margin-left: 40px; width: 92%" class="" @change="setBookQuestion" :class="{ 'textarea-focused': isFocused === 'one' }" @focus="handleFocus('one')" @blur="handleBlur('one')" ></textarea> |
| | | style="margin-left: 40px; width: 92%" class="" @change="setBookQuestion" |
| | | :class="{ 'textarea-focused': isFocused === 'one' }" @focus="handleFocus('one')" |
| | | @blur="handleBlur('one')"></textarea> |
| | | </p> |
| | | <p class="text t-l">黑暗队长: |
| | | <textarea v-model="questionData.reading.two" placeholder="请输入内容" rows="6" |
| | | style="margin-left: 40px; width: 92%" class="" @change="setBookQuestion" :class="{ 'textarea-focused': isFocused === 'two' }" @focus="handleFocus('two')" @blur="handleBlur('two')"></textarea> |
| | | style="margin-left: 40px; width: 92%" class="" @change="setBookQuestion" |
| | | :class="{ 'textarea-focused': isFocused === 'two' }" @focus="handleFocus('two')" |
| | | @blur="handleBlur('two')"></textarea> |
| | | </p> |
| | | </div> |
| | | <!-- 此次为页脚部分(需要设置页码) --> |
| | |
| | | <span>视频:我们是一家人 </span> |
| | | <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'" |
| | | placement="top-start"> |
| | | <img :src="chapterData.isCollectVideo ? collectCheck : collectImg" alt="" class="collect-btn" |
| | | <img :src="collectResourceList.findIndex(item => item.id == '691cbd2c13198d04afc7800d0f2cafb0') > -1 ? collectCheck : collectImg" alt="" class="collect-btn" |
| | | @click="handleCollect('video')" /> |
| | | </el-tooltip> |
| | | </p> |
| | |
| | | import matching from "@/components/matching/matching.vue"; |
| | | import choice from "@/components/choice/choice.vue" |
| | | import { getResourcePath } from "@/assets/methods/resources"; |
| | | import { getCollectResource, setCollectResource } from "@/assets/methods/resources"; |
| | | export default { |
| | | name: "chapterOne", |
| | | components: { |
| | |
| | | }, |
| | | }, |
| | | //在这里对调用的方法进行挂载 |
| | | mounted() { |
| | | this.getVidoePath(); |
| | | async mounted() { |
| | | const bookQuestion = localStorage.getItem("artAndDrama-book-question-one"); |
| | | if (bookQuestion) { |
| | | this.questionData = JSON.parse(bookQuestion); |
| | | } |
| | | this.getVidoePath(); |
| | | const data = localStorage.getItem("artAndDrama-chapter01-Data"); |
| | | if (data) { |
| | | this.chapterData = JSON.parse(data); |
| | | } |
| | | this.collectResourceList = await getCollectResource(this.config.activeBook.bookId) |
| | | |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | accentColor: "", |
| | | color: "#fff", |
| | | isFocused: null, // 用于跟踪textarea的聚焦状态 |
| | | collectResourceList:[], |
| | | chapterData: { |
| | | isCollectImg: false, |
| | | isCollectVideo: false, |
| | |
| | | "3729175530def1b0baca68e0bd344862" |
| | | ); |
| | | }, |
| | | handleFocus(id) { |
| | | handleFocus(id) { |
| | | this.isFocused = id; // 当textarea聚焦时,设置为true |
| | | }, |
| | | handleBlur(id) { |
| | | }, |
| | | handleBlur(id) { |
| | | this.isFocused = null; // 当textarea失去焦点时,设置为false |
| | | }, |
| | | }, |
| | | setBookQuestion() { |
| | | console.log("保存"); |
| | | localStorage.setItem( |
| | | "artAndDrama-book-question-one", |
| | | JSON.stringify(this.questionData) |
| | |
| | | }, |
| | | handleChapterData() { |
| | | localStorage.setItem( |
| | | "math-chapterData", |
| | | "artAndDrama-chapter01-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("691cbd2c13198d04afc7800d0f2cafb0","691cbd2c13198d04afc7800d0f2cafb0",'',"视频","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> |