民航服务基本技能视频资源插入

zhongshujie

2024-12-23 a31c8c9d7df2883b38871819239ec914c6e5ae0c

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

@@ -20,7 +20,22 @@
                        <p class="bj-1-zt">1.提升感知美、理解美、创造美的个人美商素养。</p>
                        <p class="bj-1-zt">2.提升民航对客服务过程中的个人修养和职业情操。</p>
                        <p><br></p>
                        <p><br></p>
                        <div class="video-box-cover">
                            <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"
                                    style=" border-radius: 10px; "></video>
                            </p>
                            <p class="center videoname">
                                <span>视频：项目四 导入 </span>
                                <el-tooltip class="item" effect="dark"
                                    :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'" placement="top-start">
                                    <img :src="collectResourceList.findIndex(item => item.id == '7e45c5e6cf440f0529af765b0acc29c3') > -1 ? collectCheck : collectImg"
                                        alt="" class="collect-btn" @click="handleCollect('video-01')" />
                                </el-tooltip>
                            </p>
                        </div>
                        <p><br></p>
                    </div>
                </div>
@@ -41,7 +56,7 @@
                        作为一名民航从业人员，在工作岗位上，你可以通过哪些行为展示个人良好的工作状态呢？在任务一中，你将学会如何通过运用表情、仪态、手势，展现自己对客服务过程中的良好状态，提升民航服务品质。</p>
                    <p class="p-even block2">学完任务一后，你应当掌握如何通过阳光的微笑、良好的仪态、规范的手势来向旅客展示积极的服务形象。</p>
                    <textarea v-model="questionData.teskOne.one" placeholder="请输入内容" rows="6"
                    class="fz-16 block2 ml-9 textarea-box" @change="setBookQuestion"></textarea>
                        class="fz-16 block2 ml-9 textarea-box" @change="setBookQuestion"></textarea>
                    <p class="left p-even"><span class="bj2">知识准备▼</span></p>
                    <h3 id="c031" class="p-even"><span class="zt-h4 unit4-c">一、</span><span
                            class="qyls-h4 unit4-c">表情礼仪</span></h3>
@@ -347,6 +362,39 @@
                    <p class="p-odd">④男士不可将双腿叉得过开，或将双腿过分伸张，或一腿弯曲、一腿伸直呈现“4”字形，或将小腿搁在大腿上，用脚打拍子，甚至不停地抖腿。</p>
                    <p class="p-odd">⑤跷腿时，切忌将悬空的脚尖朝上或指向他人。</p>
                    <p class="p-odd">⑥与邻座交谈时，可以侧坐，并将上身和腿同时转向交谈对象。</p>
                    <div class="video-box-left">
                        <p class="center text">
                            <video :src="videoPathTwo" 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"
                                style=" border-radius: 10px; "></video>
                        </p>
                        <p class="center videoname">
                            <span>视频：项目四1 女士行为礼仪 </span>
                            <el-tooltip class="item" effect="dark"
                                :content="chapterData.isCollectVideo01 ? '点击取消' : '点击收藏'" placement="top-start">
                                <img :src="collectResourceList.findIndex(item => item.id == '4f89a0d37249e0773fddc0b3c587a4a6') > -1 ? collectCheck : collectImg"
                                    alt="" class="collect-btn" @click="handleCollect('video-02')" />
                            </el-tooltip>
                        </p>
                    </div>
                    <div class="video-box-left">
                        <p class="center text">
                            <video :src="videoPathThree" 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"
                                style=" border-radius: 10px; "></video>
                        </p>
                        <p class="center videoname">
                            <span>视频：项目四1 男士行为礼仪 </span>
                            <el-tooltip class="item" effect="dark"
                                :content="chapterData.isCollectVideo02 ? '点击取消' : '点击收藏'" placement="top-start">
                                <img :src="collectResourceList.findIndex(item => item.id == '1570fec423a81f76007b8ea5b433e72a') > -1 ? collectCheck : collectImg"
                                    alt="" class="collect-btn" @click="handleCollect('video-03')" />
                            </el-tooltip>
                        </p>
                    </div>

                    <h4 id="d097" class="p-odd">（三）走姿</h4>
                    <p class="p-odd">走姿是人体所呈现出的一种动态，是站姿的延续。规范的走姿，是展示自己气质与修养的重要形式。注意走姿可以防止身体变形，甚至可以预防颈椎病。</p>
                    <h5 id="e051" class="p-odd">1.走姿的基本要领</h5>
@@ -614,16 +662,32 @@
                    <p class="p-even">
                        打响指就是用手的拇指与中指弹出声响。它所表示的意义比较复杂：有时表示高兴；有时表示对所说的话或所做的举动感兴趣或完全赞同；有时则视为某种轻浮的动作，比如对某人或异性打响指。</p>
                    <p class="p-even">在陌生的场合或不熟悉的人面前，轻易地打响指，会使人觉得没有教养。即便是碰到熟人打招呼时打响指，也会使人觉得不舒服。总之，这是一种很随便的举止，慎用为好。</p>
                    <div class="video-box">
                        <p class="center text">
                            <video :src="videoPathFour" 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"
                                style=" border-radius: 10px; "></video>
                        </p>
                        <p class="center videoname">
                            <span>视频：项目四1 鞠躬技能要点讲解 </span>
                            <el-tooltip class="item" effect="dark"
                                :content="chapterData.isCollectVideo03 ? '点击取消' : '点击收藏'" placement="top-start">
                                <img :src="collectResourceList.findIndex(item => item.id == '717ab2e44c2a8ede7ccaf8d69d8ea76d') > -1 ? collectCheck : collectImg"
                                    alt="" class="collect-btn" @click="handleCollect('video-04')" />
                            </el-tooltip>
                        </p>
                    </div>
                    <div class="bj5 ml-9">
                        <div class="bj5-xyx">
                            <p class="td-0"><span class="bj5-xyx">课堂研讨</span></p>
                        </div>
                        <p>1.行为礼仪有哪些基本要素？</p>
                        <textarea v-model="questionData.teskOne.two" placeholder="请输入内容" rows="6"
                        class="fz-16  ml-2e textarea-box" @change="setBookQuestion"></textarea>
                            class="fz-16  ml-2e textarea-box" @change="setBookQuestion"></textarea>
                        <p>2.行为礼仪在民航对客服务中的作用是什么？</p>
                        <textarea v-model="questionData.teskOne.three" placeholder="请输入内容" rows="6"
                        class="fz-16  ml-2e textarea-box" @change="setBookQuestion"></textarea>
                            class="fz-16  ml-2e textarea-box" @change="setBookQuestion"></textarea>
                    </div>
                    <p class="left p-even"><span class="bj2">任务工单▼</span></p>
                    <table border="1" cellpadding="4" cellspacing="0"
@@ -833,7 +897,7 @@
                    <p class="p-odd">分组进行站姿、坐姿、蹲姿、走姿训练。</p>
                    <p class="left p-odd"><span class="bj2">自我评价▼</span></p>
                    <textarea v-model="questionData.teskOne.four" placeholder="请输入内容" rows="6"
                    class="fz-16 textarea-box-right" @change="setBookQuestion"></textarea>
                        class="fz-16 textarea-box-right" @change="setBookQuestion"></textarea>
                </div>
            </div>
        </div>
@@ -852,7 +916,7 @@
                        民航从业人员的个人形象代表着公司的企业形象和民航的整体形象。通过本任务的学习，你将学会如何通过提升面部修饰能力、服饰着装规范来提升个人整体形象，展现民航服务品质。</p>
                    <p class="block2 p-even">本任务包含面部修饰、服饰修饰两个小任务。在结束整个任务学习后，你应当能够进行正确的面部修饰，以及规范的服饰着装，并且向旅客展示良好的个人形象。</p>
                    <textarea v-model="questionData.teskTwo.one" placeholder="请输入内容" rows="6"
                    class="fz-16 ml-9 textarea-box" @change="setBookQuestion"></textarea>
                        class="fz-16 ml-9 textarea-box" @change="setBookQuestion"></textarea>
                    <p class="left p-even"><span class="bj2">知识准备▼</span></p>
                    <h3 id="c034" class="p-even"><span class="zt-h4 unit4-c">一、</span><span
                            class="qyls-h4 unit4-c">面部修饰</span></h3>
@@ -921,6 +985,22 @@
                    <p class="p-even">③眉毛的修饰：一般从眉头开始，按照眉毛的自然生长方向描画。</p>
                    <p class="p-even">④上腮红：上腮红的目的，一是表现皮肤的健康红润，二是利用腮红的位置和方向来矫正脸形。</p>
                    <p class="p-even">⑤涂口红：涂口红时，注意不能超出唇线。口红颜色的选择应和年龄、服装、场合、职业和季节等协调。</p>
                    <div class="video-box">
                        <p class="center text">
                            <video :src="videoPathFive" 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"
                                style=" border-radius: 10px; "></video>
                        </p>
                        <p class="center videoname">
                            <span>视频：项目四2 职业彩妆技能讲解 </span>
                            <el-tooltip class="item" effect="dark"
                                :content="chapterData.isCollectVideo04 ? '点击取消' : '点击收藏'" placement="top-start">
                                <img :src="collectResourceList.findIndex(item => item.id == '9d42449fd876884fe3426db499c81913') > -1 ? collectCheck : collectImg"
                                    alt="" class="collect-btn" @click="handleCollect('video-05')" />
                            </el-tooltip>
                        </p>
                    </div>
                    <h4 id="d104" class="p-even">（二）发型修饰</h4>
                    <p class="p-even">
                        人们在互相打量时，通常是从头到脚，发型适当与否，直接影响到对方对你印象的好坏。因此，美发就成为人们塑造仪容美的重头戏。民航服务人员发型修饰的基调是：活泼开朗、朝气蓬勃、干净利落、端庄持重。
@@ -930,6 +1010,22 @@
                    <p class="p-even">民航服务人员在选择发型时，应考虑自己的脸形、年龄等相关因素。</p>
                    <p class="p-even">（1）要与脸形结合起来。比如，长脸者在选择发型时，轮廓应平伏些，尤其是前额的刘海应留得长而多一些。</p>
                    <p class="p-even">（2）要与年龄相称。比如，年轻的民航服务人员可选择新颖、别致而又健康、大方的发型。</p>
                    <div class="video-box">
                        <p class="center text">
                            <video :src="videoPathSix" 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"
                                style=" border-radius: 10px; "></video>
                        </p>
                        <p class="center videoname">
                            <span>视频：项目四2 职业盘发技能讲解 </span>
                            <el-tooltip class="item" effect="dark"
                                :content="chapterData.isCollectVideo05 ? '点击取消' : '点击收藏'" placement="top-start">
                                <img :src="collectResourceList.findIndex(item => item.id == 'c44d8965f8f6d2f7b20132b66dd400e7') > -1 ? collectCheck : collectImg"
                                    alt="" class="collect-btn" @click="handleCollect('video-06')" />
                            </el-tooltip>
                        </p>
                    </div>
                </div>
            </div>
        </div>
@@ -969,13 +1065,13 @@
                        </div>
                        <p>1.面部修饰的基本方法有哪些？</p>
                        <textarea v-model="questionData.teskTwo.two" placeholder="请输入内容" rows="6"
                        class="fz-16 ml-9 textarea-box" @change="setBookQuestion"></textarea>
                            class="fz-16 ml-9 textarea-box" @change="setBookQuestion"></textarea>
                        <p>2.女性化妆的禁忌有哪些？</p>
                        <textarea v-model="questionData.teskTwo.three" placeholder="请输入内容" rows="6"
                        class="fz-16 ml-9 textarea-box" @change="setBookQuestion"></textarea>
                            class="fz-16 ml-9 textarea-box" @change="setBookQuestion"></textarea>
                        <p>3.民航工作对发型的基本要求是什么？</p>
                        <textarea v-model="questionData.teskTwo.four" placeholder="请输入内容" rows="6"
                        class="fz-16 ml-9 textarea-box" @change="setBookQuestion"></textarea>
                            class="fz-16 ml-9 textarea-box" @change="setBookQuestion"></textarea>
                    </div>
                    <h3 id="c035"><span class="zt-h4 unit4-c">二、</span><span class="qyls-h4 unit4-c">服饰修饰</span></h3>
                    <p class="p-odd">穿着得体、容貌端庄、举止文雅是民航服务人员审美情趣和文化修养的</p>
@@ -1062,6 +1158,39 @@
                        ⑤鞋袜须合适。鞋是制服的一部分。每天应当把皮鞋擦得干净、光亮，破损的鞋子应及时修补或更换。通常男士的袜子应与鞋子的颜色和谐，以白色黑色最为普遍。女士应穿与肤色相近的丝袜，袜口不要露在裤子或裙子外边。
                    </p>
                    <p class="p-even">⑥体现文明。根据接待礼仪的基本规定，身着制服上岗时要显示文明、高雅的气质。</p>

                    <div class="video-box">
                        <p class="center text">
                            <video :src="videoPathSeven" 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"
                                style=" border-radius: 10px; "></video>
                        </p>
                        <p class="center videoname">
                            <span>视频：项目四1 系丝巾技能要点讲解</span>
                            <el-tooltip class="item" effect="dark"
                                :content="chapterData.isCollectVideo06 ? '点击取消' : '点击收藏'" placement="top-start">
                                <img :src="collectResourceList.findIndex(item => item.id == '4edc5de0179514d5869973cb93c1eeb2') > -1 ? collectCheck : collectImg"
                                    alt="" class="collect-btn" @click="handleCollect('video-07')" />
                            </el-tooltip>
                        </p>
                    </div>
                    <div class="video-box">
                        <p class="center text">
                            <video :src="videoPathEight" 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"
                                style=" border-radius: 10px; "></video>
                        </p>
                        <p class="center videoname">
                            <span>视频：项目四1 系领带技能要点讲解</span>
                            <el-tooltip class="item" effect="dark"
                                :content="chapterData.isCollectVideo07 ? '点击取消' : '点击收藏'" placement="top-start">
                                <img :src="collectResourceList.findIndex(item => item.id == '1eaf0f7ac922aaf33d00c5a4b06c7ac6') > -1 ? collectCheck : collectImg"
                                    alt="" class="collect-btn" @click="handleCollect('video-08')" />
                            </el-tooltip>
                        </p>
                    </div>
                    <p class="left p-even mt-20"><span class="bj2">任务工单▼</span></p>
                    <table border="1" cellpadding="4" cellspacing="0"
                        style="border-color: #5192c6; border-collapse: collapse" class="fz-15 ml-9">
@@ -1285,7 +1414,7 @@
                    <p class="p-odd">（4）整体视角：发型挺阔、干净清爽。</p>
                    <p class="left p-odd"><span class="bj2">自我评价▼</span></p>
                    <textarea v-model="questionData.teskTwo.five" placeholder="请输入内容" rows="6"
                    class="fz-16 textarea-box-right" @change="setBookQuestion"></textarea>
                        class="fz-16 textarea-box-right" @change="setBookQuestion"></textarea>
                </div>
            </div>
        </div>
@@ -1295,6 +1424,8 @@
    </div>
</template>
<script>
import { getResourcePath } from "@/assets/methods/resources";
import { getCollectResource, setCollectResource } from "@/assets/methods/resources";
export default {
    name: "chapterFour",
    props: {
@@ -1304,6 +1435,27 @@
    },
    data() {
        return {
            collectImg: require("../../assets/images/icon/heart.png"),
            collectCheck: require("../../assets/images/icon/heart-check.png"),
            videoPathOne: "",
            videoPathTwo: "",
            videoPathThree: "",
            videoPathFour: "",
            videoPathFive: "",
            videoPathSix: "",
            videoPathSeven: "",
            videoPathEight: "",
            collectResourceList: [],
            chapterData: {
                isCollectVideo: false,
                isCollectVideo01: false,
                isCollectVideo02: false,
                isCollectVideo03: false,
                isCollectVideo04: false,
                isCollectVideo05: false,
                isCollectVideo06: false,
                isCollectVideo07: false,
            },
            questionData: {
                teskOne: {
                    one: "",
@@ -1316,7 +1468,7 @@
                    two: "",
                    three: "",
                    four: "",
                    five:"",
                    five: "",
                },
            },
            tableData: {
@@ -1355,7 +1507,7 @@
            },
        };
    },
    mounted() {
    async mounted() {
        const bookQuestion = localStorage.getItem("aviation-book-chapter04");
        if (bookQuestion) {
            this.questionData = JSON.parse(bookQuestion);
@@ -1365,8 +1517,99 @@
            this.tableData = JSON.parse(bookTableData);
        }

        const choiceQuestion = localStorage.getItem("aviation-book-chapter04-Data");
        if (choiceQuestion) {
            this.chapterData = JSON.parse(choiceQuestion);
        }

        this.getVidoePath();
        this.collectResourceList = await getCollectResource(this.config.activeBook.bookId)
    },
    methods: {
        async getVidoePath() {
            this.videoPathOne = await getResourcePath(
                "7e45c5e6cf440f0529af765b0acc29c3"
            );
            this.videoPathTwo = await getResourcePath(
                "4f89a0d37249e0773fddc0b3c587a4a6"
            );
            this.videoPathThree = await getResourcePath(
                "1570fec423a81f76007b8ea5b433e72a"
            );
            this.videoPathFour = await getResourcePath(
                "717ab2e44c2a8ede7ccaf8d69d8ea76d"
            );
            this.videoPathFive = await getResourcePath(
                "9d42449fd876884fe3426db499c81913"
            );
            this.videoPathSix = await getResourcePath(
                "c44d8965f8f6d2f7b20132b66dd400e7"
            );
            this.videoPathSeven = await getResourcePath(
                "4edc5de0179514d5869973cb93c1eeb2"
            );
            this.videoPathEight = await getResourcePath(
                "1eaf0f7ac922aaf33d00c5a4b06c7ac6"
            );
        },
        handleCollect(e) {
            if (e == 'video-01') {
                this.handleCollectResource("7e45c5e6cf440f0529af765b0acc29c3", "7e45c5e6cf440f0529af765b0acc29c3", '', "视频", "bits", '视频：项目四 导入')
                this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo
            } else if (e == 'video-02') {
                this.handleCollectResource("4f89a0d37249e0773fddc0b3c587a4a6", "4f89a0d37249e0773fddc0b3c587a4a6", '', "视频", "bits", '视频：项目四1 女士行为礼仪')
                this.chapterData.isCollectVideo01 = !this.chapterData.isCollectVideo01
            } else if (e == 'video-03') {
                this.handleCollectResource("1570fec423a81f76007b8ea5b433e72a", "1570fec423a81f76007b8ea5b433e72a", '', "视频", "bits", '视频：项目四1 男士行为礼仪')
                this.chapterData.isCollectVideo02 = !this.chapterData.isCollectVideo02
            } else if (e == 'video-04') {
                this.handleCollectResource("717ab2e44c2a8ede7ccaf8d69d8ea76d", "717ab2e44c2a8ede7ccaf8d69d8ea76d", '', "视频", "bits", '视频：项目四1 鞠躬技能要点讲解')
                this.chapterData.isCollectVideo03 = !this.chapterData.isCollectVideo03
            } else if (e == 'video-05') {
                this.handleCollectResource("9d42449fd876884fe3426db499c81913", "9d42449fd876884fe3426db499c81913", '', "视频", "bits", '视频：项目四2 职业彩妆技能讲解')
                this.chapterData.isCollectVideo04 = !this.chapterData.isCollectVideo04
            } else if (e == 'video-06') {
                this.handleCollectResource("c44d8965f8f6d2f7b20132b66dd400e7", "c44d8965f8f6d2f7b20132b66dd400e7", '', "视频", "bits", '视频：项目四2 职业盘发技能讲解')
                this.chapterData.isCollectVideo05 = !this.chapterData.isCollectVideo05
            } else if (e == 'video-07') {
                this.handleCollectResource("4edc5de0179514d5869973cb93c1eeb2", "4edc5de0179514d5869973cb93c1eeb2", '', "视频", "bits", '视频：项目四1 系丝巾技能要点讲解')
                this.chapterData.isCollectVideo06 = !this.chapterData.isCollectVideo06
            } else if (e == 'video-08') {
                this.handleCollectResource("1eaf0f7ac922aaf33d00c5a4b06c7ac6", "1eaf0f7ac922aaf33d00c5a4b06c7ac6", '', "视频", "bits", '视频：项目四1 系领带技能要点讲解')
                this.chapterData.isCollectVideo07 = !this.chapterData.isCollectVideo07
            }
            this.handleChapterData();
        },

        //资源收藏事件
        // resourcePath  文件路径，
        // resourceType  文件类型
        // source        文件来源
        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)
        },
        handleChapterData() {
            localStorage.setItem(
                "aviation-book-chapter04-Data",
                JSON.stringify(this.chapterData)
            );
        },

        
        setBookQuestion() {
            localStorage.setItem(
                "aviation-book-chapter04",