艺术戏剧（8.8）

zhongshujie

2024-08-08 3c3336804abaee7ce364cfb7be10d3849f6dd9cc

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

@@ -79,7 +79,7 @@
            <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>
@@ -202,11 +202,15 @@
          </p>
          <p class="text t-l">正义队长：
            <textarea v-model="questionData.reading.one" placeholder="请输入内容" rows="6"
              style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"></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="fz-16 fm-son" @change="setBookQuestion"></textarea>
              style="margin-left: 40px; width: 92%" class="" @change="setBookQuestion"
              :class="{ 'textarea-focused': isFocused === 'two' }" @focus="handleFocus('two')"
              @blur="handleBlur('two')"></textarea>
          </p>
        </div>
        <!-- 此次为页脚部分（需要设置页码） -->
@@ -372,7 +376,7 @@
            <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>
@@ -391,6 +395,7 @@
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: {
@@ -403,12 +408,18 @@
    },
  },
  //在这里对调用的方法进行挂载
  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 {
@@ -426,6 +437,8 @@
      auidoPathNine: "",
      accentColor: "",
      color: "#fff",
      isFocused: null, // 用于跟踪textarea的聚焦状态  
      collectResourceList:[],
      chapterData: {
        isCollectImg: false,
        isCollectVideo: false,
@@ -733,8 +746,13 @@
        "3729175530def1b0baca68e0bd344862"
      );
    },
    handleFocus(id) {
      this.isFocused = id; // 当textarea聚焦时，设置为true  
    },
    handleBlur(id) {
      this.isFocused = null; // 当textarea失去焦点时，设置为false  
    },
    setBookQuestion() {
      console.log("保存");
      localStorage.setItem(
        "artAndDrama-book-question-one",
        JSON.stringify(this.questionData)
@@ -742,18 +760,34 @@
    },
    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>