艺术戏剧（8.8）

zhongshujie

2024-08-08 3c3336804abaee7ce364cfb7be10d3849f6dd9cc

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

@@ -5,7 +5,7 @@
                <h1 id="a004">
                    <!-- 这里的动图有问题，没有背景图片 -->
                    <img class="img-0" alt="" src="../../assets/images/dy4.jpg" />
                    <audio :src="auidoPathOne" controls class="audio"></audio>
                    <audio :src="audioPathOne" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
                </h1>
                <div class="bodystyle">
                    <div class="bk">
@@ -34,9 +34,13 @@
                    <h2 id="b016" class="problem">第一课　一模一样</h2>
                    <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"><span class="hs1">◇</span>说一说：快速站起来的秘诀是什么？</p>
                    <p><input v-model="questionData.warnUp.one" class="input-bottom-border fz-18"
                            @change="setBookQuestion" style="width: 90%" /></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"
                            :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>
                    <p class="text"><span class="hs1">◇</span>以小组为单位，表演以下场景，注意保持动作一致哦。</p>
                    <p class="text">蚂蚁队长吹响集合号，蚂蚁们迅速跑上场站好队形。</p>
@@ -66,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="800" />
                    <graffiti :page="32" :bcImg="this.config.activeBook.resourceUrl + '/image/0033-1.jpg'"
                        :imgWidth="596" :imgHeight="500" />
                </div>
                <!-- 此次为页脚部分（需要设置页码） -->
                <div class="page-footer">
@@ -128,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">
@@ -146,16 +151,28 @@
                    <h2 id="b020" class="problem">单元活动任务</h2>
                    <h3 class="lefth3" id="c039"><img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" /></h3>
                    <p class="center text1"><span class="hs">形体操练习</span></p>
                    <p class="text"><span class="hs1">◇</span>头部运动</p>
                    <p class="text ends">
                        <span><span class="hs1">◇</span>头部运动</span>
                        <span> <audio :src="audioPathTwo" controls controlslist="noplaybackrate nodownload"
                                class="audio"></audio> </span>
                    </p>
                    <p class="text">第1个八拍：右手越过头顶摸左耳，向右轻轻压头部。</p>
                    <p class="text">第2个八拍：左手越过头顶摸右耳，向左轻轻压头部。</p>
                    <p class="text">第3个八拍：头部顺时针转一圈。</p>
                    <p class="text">第4个八拍：头部逆时针转一圈。</p>
                    <p class="text"><span class="hs1">◇</span>开肩练习</p>
                    <p class="text ends">
                        <span><span class="hs1">◇</span>开肩练习</span>
                        <span> <audio :src="audioPathThree" controls controlslist="noplaybackrate nodownload"
                                class="audio"></audio> </span>
                    </p>
                    <p class="text">平视前方，肩膀放松，双手自然下垂，双脚打开，与肩同宽。</p>
                    <p class="text">第1个八拍：第1-4拍手肘内侧向外转动，带动 双肩打开；第5-8拍手肘内侧向内收回，后背拱起，带动双肩内扣。</p>
                    <p class="text">第2至第4个八拍：重复第1个八拍的动作。</p>
                    <p class="text"><span class="hs1">◇</span>提沉肩运动</p>
                    <p class="text ends">
                        <span><span class="hs1">◇</span>提沉肩运动</span>
                        <span> <audio :src="audioPathFour" controls controlslist="noplaybackrate nodownload"
                                class="audio"></audio> </span>
                    </p>
                    <p class="text">平视前方，肩膀放松，双手自然下垂，双脚打开，与肩同宽。</p>
                </div>
                <!-- 此次为页脚部分（需要设置页码） -->
@@ -164,7 +181,6 @@
                    <div class="page-footer-number-right">33</div>
                </div>
            </div>

        </div>
        <div class="page-box" page="37">
            <div v-if="showPageList.indexOf(37) > -1">
@@ -175,7 +191,11 @@
                <div class="bodystyle" style="margin-top: 3%;">
                    <p class="text">第1至第2个八拍：双手下垂，手心向下，双肩上提再沉下，两拍一动。</p>
                    <p class="text">第3至第4个八拍：双手下垂，手心向下，左右肩膀依次上提再沉下，一拍一动。</p>
                    <p class="text"><span class="hs1">◇</span>伸展运动</p>
                    <p class="text ends">
                        <span><span class="hs1">◇</span>伸展运动</span>
                        <span> <audio :src="audioPathFive" controls controlslist="noplaybackrate nodownload"
                                class="audio"></audio> </span>
                    </p>
                    <p class="text">身体放松，膝盖微屈，上身自然弯曲下沉，手臂自然下垂。</p>
                    <p class="text">第1个八拍：第1-7拍身体直起，双臂举起，踮起脚尖；第8拍还原初始状态。</p>
                    <p class="text">第2至第4个八拍：重复第1个八拍的动作。</p>
@@ -185,15 +205,15 @@
                    <p class="center text">
                        <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
                            x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
                            controlslist="nodownload" class="w100 video" 
                            controlslist="nodownload" class="w100 video"
                            style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
                    </p>
                    <p class="center videoname">
                        <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>
@@ -209,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: {
@@ -216,21 +237,33 @@
            type: Array,
        },
    },
    components:{graffiti},
    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 {
            collectImg: require("../../assets/images/icon/heart.png"),
            collectCheck: require("../../assets/images/icon/heart-check.png"),
            videoPathOne: "",
            auidoPathOne: "",
            audioPathOne: "",
            audioPathTwo: "",
            audioPathThree: "",
            audioPathFour: "",
            audioPathFive: "",
            isFocused: null, // 用于跟踪textarea的聚焦状态
            collectResourceList: [],
            chapterData: {
                isCollectImg: false,
                isCollectVideo: false,
@@ -240,11 +273,9 @@
            questionData: {
                warnUp: {
                    one: "",

                },
                reading: {
                    one: "",
                    two: "",
                },
                table: {
                    one: "",
@@ -273,12 +304,29 @@
            this.videoPathOne = await getResourcePath(
                "09de7704eeaaf3a210b8c6af0a94d545"
            );
            // this.auidoPathOne = await getResourcePath(
            //   "2c5f6c69b0f9f7a3c03e473cb8c977f5"
            // );
            this.audioPathOne = await getResourcePath(
                "7c74b4da6fe6981d5c2148e48a0d66ed"
            );
            this.audioPathTwo = await getResourcePath(
                "b9ce656b414814b49213a2d5838844fe"
            );
            this.audioPathThree = await getResourcePath(
                "87f0de453538e671a27b9e8ffc8f34b9"
            );
            this.audioPathFour = await getResourcePath(
                "e5b62ed418572b13405115020682e1cd"
            );
            this.audioPathFive = await getResourcePath(
                "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)
@@ -286,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>