From a31c8c9d7df2883b38871819239ec914c6e5ae0c Mon Sep 17 00:00:00 2001 From: zhongshujie <2862698242@qq.com> Date: 星期一, 23 十二月 2024 11:55:58 +0800 Subject: [PATCH] 民航服务基本技能视频资源插入 --- src/books/aviationBasicSkills/view/components/chapter006.vue | 196 ++++++++++++++++++++++++++++++++++++++++++++++--- 1 files changed, 184 insertions(+), 12 deletions(-) diff --git a/src/books/aviationBasicSkills/view/components/chapter006.vue b/src/books/aviationBasicSkills/view/components/chapter006.vue index 4b451fb..82b71d7 100644 --- a/src/books/aviationBasicSkills/view/components/chapter006.vue +++ b/src/books/aviationBasicSkills/view/components/chapter006.vue @@ -22,6 +22,22 @@ <p class="bj-1-zt">3.鍏峰鍗辨満鎰忚瘑鍜屸�滃畨鍏ㄨ矗浠婚噸浜庢嘲灞扁�濈殑璐d换鎰忚瘑銆�</p> <p class="bj-1-zt">4.鍏峰浼樿川鐨勬枃鏄庢湇鍔℃剰璇嗭紝鏂囨槑鎵у嫟銆佺儹鎯呮湇鍔°��</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 == 'a83b9d9ab22d0fd1d84990df6f1b127e') > -1 ? collectCheck : collectImg" + alt="" class="collect-btn" @click="handleCollect('video-01')" /> + </el-tooltip> + </p> + </div> <p><br></p> </div> </div> @@ -78,6 +94,22 @@ <p class="p-odd">鈶℃梾瀹㈠埌杈惧畨妫�閫氶亾鍓嶄紶浣嶇疆锛屽皢鎵嬫彁琛屾潕涓庤韩涓婄殑灏忎欢閲戝睘鐗╁搧鏀剧疆鍦╔灏勭嚎鏈轰紶閫佸甫涓婂苟杩囨満妫�鏌ャ��</p> <p class="p-odd">鈶㈡寜鐓у墠浼犳鏌ュ憳鐨勬寚寮曪紝鏃呭閫氳繃閲戝睘鎺㈡祴闂ㄥ苟鎺ュ彈浜鸿韩妫�鏌ャ��</p> <p class="p-odd">鈶e鎵嬫彁琛屾潕闇�瑕佸紑绠�/鍖呮鏌ワ紝鏃呭搴旈厤鍚堝畨妫�浜哄憳妫�鏌ャ��</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>瑙嗛锛氶」鐩叚 椤圭洰涓� </span> + <el-tooltip class="item" effect="dark" + :content="chapterData.isCollectVideo01 ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌'" placement="top-start"> + <img :src="collectResourceList.findIndex(item => item.id == 'f82bcad075774964b82ae8aa43d9a7f0') > -1 ? collectCheck : collectImg" + alt="" class="collect-btn" @click="handleCollect('video-02')" /> + </el-tooltip> + </p> + </div> <h3 id="c054" class="p-odd"><span class="zt-h4 unit2-c">鍥涖��</span><span class="qyls-h4 unit2-c">瀹夋鐨勫噯澶囧強瀹炴柦</span></h3> <p class="p-odd"> @@ -362,6 +394,22 @@ <p class="p-even">鈶ゅ綍鍏ヤ俊鎭苟鐩栫珷銆傚皢鐧绘満鐗屼俊鎭拰鏃呭淇℃伅褰曞叆瀹夋淇℃伅绠$悊绯荤粺锛屼互澶囨煡鐢ㄣ�傛煡楠屾棤璇悗锛屾寜瑙勫畾鍦ㄧ櫥鏈虹墝涓婂姞鐩栭獙璁珷銆�</p> </span> <p class="p-even">鈶ョエ璇佹暣鐞嗐�傚皢鏃呭鐨勭エ璇佹暣鐞嗘暣榻愶紝鍙屾墜灏嗚瘉浠躲�佺櫥鏈虹墝銆佸绁ㄩ�掕繕缁欐梾瀹紝骞剁洰瑙嗘梾瀹㈤亾璋€��</p> + <div class="video-box"> + <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>瑙嗛锛氶」鐩叚 椤圭洰浜� </span> + <el-tooltip class="item" effect="dark" + :content="chapterData.isCollectVideo02 ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌'" placement="top-start"> + <img :src="collectResourceList.findIndex(item => item.id == 'f9b156c70fc8d593f0095ef535360551') > -1 ? collectCheck : collectImg" + alt="" class="collect-btn" @click="handleCollect('video-03')" /> + </el-tooltip> + </p> + </div> <h3 id="c057" class="p-even"><span class="zt-h4 unit2-c">涓夈��</span><span class="qyls-h4 unit2-c">璇佷欢妫�鏌ョ殑鏂规硶</span></h3> <p class="p-even">妫�鏌ヨ瘉浠舵椂搴旈噰鍙栨鏌ャ�佽瀵熷拰璇㈤棶鐩哥粨鍚堢殑鏂规硶锛屽叿浣撲负涓�鐪嬨�佷簩瀵广�佷笁闂��</p> @@ -607,16 +655,19 @@ </tr> </table> <p class="left p-even"><span class="bj2">鎷撳睍璁粌鈻�</span></p> - <p class=" p-even">1.妫�鏌ヨ瘉浠舵椂搴旈噰鍙�<input v-model="questionData.teskTwo.three" class="input-bottom-border fz-14" - @change="setBookQuestion" />銆�<input v-model="questionData.teskTwo.four" class="input-bottom-border fz-14" - @change="setBookQuestion" />鍜�<input v-model="questionData.teskTwo.five" class="input-bottom-border fz-14" - @change="setBookQuestion" />鐩哥粨鍚堢殑鏂规硶锛屽叿浣撲负<input v-model="questionData.teskTwo.six" class="input-bottom-border fz-14" - @change="setBookQuestion" />銆�<input v-model="questionData.teskTwo.seven" class="input-bottom-border fz-14" - @change="setBookQuestion" />銆�<input v-model="questionData.teskTwo.eight" class="input-bottom-border fz-14" - @change="setBookQuestion" />銆�</p> + <p class=" p-even">1.妫�鏌ヨ瘉浠舵椂搴旈噰鍙�<input v-model="questionData.teskTwo.three" + class="input-bottom-border fz-14" @change="setBookQuestion" />銆�<input + v-model="questionData.teskTwo.four" class="input-bottom-border fz-14" + @change="setBookQuestion" />鍜�<input v-model="questionData.teskTwo.five" + class="input-bottom-border fz-14" @change="setBookQuestion" />鐩哥粨鍚堢殑鏂规硶锛屽叿浣撲负<input + v-model="questionData.teskTwo.six" class="input-bottom-border fz-14" + @change="setBookQuestion" />銆�<input v-model="questionData.teskTwo.seven" + class="input-bottom-border fz-14" @change="setBookQuestion" />銆�<input + v-model="questionData.teskTwo.eight" class="input-bottom-border fz-14" + @change="setBookQuestion" />銆�</p> <p class=" p-even">2.绠�杩伴獙璇佸矖浣嶄汉鍛樻墽鍕ゆ椂鐨勬敞鎰忎簨椤广��</p> <textarea v-model="questionData.teskTwo.nine" placeholder="璇疯緭鍏ュ唴瀹�" rows="6" - class="fz-16 textarea-box-left" @change="setBookQuestion"></textarea> + class="fz-16 textarea-box-left" @change="setBookQuestion"></textarea> <p class="left p-even"><span class="bj2">鑷垜璇勪环鈻�</span></p> <textarea v-model="questionData.teskTwo.ten" placeholder="璇疯緭鍏ュ唴瀹�" rows="6" class="fz-16 textarea-box-left" @change="setBookQuestion"></textarea> @@ -681,6 +732,22 @@ </p> <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>瑙嗛锛氶」鐩叚 椤圭洰涓� </span> + <el-tooltip class="item" effect="dark" + :content="chapterData.isCollectVideo03 ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌'" placement="top-start"> + <img :src="collectResourceList.findIndex(item => item.id == '9e3e5573e2af66a565039ee9f4c9bb0e') > -1 ? collectCheck : collectImg" + alt="" class="collect-btn" @click="handleCollect('video-04')" /> + </el-tooltip> + </p> + </div> <h3 id="c061" class="p-even"><span class="zt-h4 unit2-c">涓夈��</span><span class="qyls-h4 unit2-c">浜鸿韩妫�鏌ョ殑閲嶇偣瀵硅薄</span></h3> <p class="p-even">瀵规梾瀹㈣繘琛屼汉韬鏌ユ椂锛屾湁涓嬪垪鎯呭喌涔嬩竴鑰咃紝搴斿垪涓洪噸鐐规鏌ュ璞★紝瑕佺壒鍒敞鎰忎粠涓ヤ粩缁嗘鏌ャ��</p> @@ -1003,6 +1070,22 @@ <p class="p-odd">鈶﹀崗鍔╃墿涓诲鍘熺/鍖咃紝骞跺皢绠�/鍖呯Щ閫乆灏勭嚎鏈哄鏌ャ��</p> <p class="p-odd">鈶ф鏌ュ畬姣曞悗鎻愰啋鐗╀富鎼哄甫濂介殢韬墿鍝侊紙濡傜櫥鏈虹墝銆佽韩浠借瘉銆佹墜鏈恒�佺溂闀滅瓑锛夛紝闃叉鍏剁寮�鏃堕仐鐣欑墿鍝併��</p> <p class="p-odd">鈶ㄩ亣鏈夎繃妫�浜哄憳鎼哄甫涓嶆効鎰忔帴鍙梄灏勭嚎鏈烘鏌ョ殑鐗╁搧锛屽簲杩涜鎵嬪伐妫�鏌ャ��</p> + <div class="video-box-left"> + <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>瑙嗛锛氶」鐩叚 椤圭洰鍥� </span> + <el-tooltip class="item" effect="dark" + :content="chapterData.isCollectVideo04 ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌'" placement="top-start"> + <img :src="collectResourceList.findIndex(item => item.id == '68ae02257e5c82558a4b224770bd1ab6') > -1 ? collectCheck : collectImg" + alt="" class="collect-btn" @click="handleCollect('video-05')" /> + </el-tooltip> + </p> + </div> <h3 id="c065" class="p-odd"><span class="zt-h4 unit2-c">浜屻��</span><span class="qyls-h4 unit2-c">寮�绠�/鍖呮鏌ョ殑鏂规硶</span></h3> <p class="p-odd">妫�鏌ヨ繃绋嬩腑锛屼竴鑸�氳繃浜虹殑鐪笺�佽�炽�侀蓟銆佹墜绛夎繘琛屾鏌ワ紝寮�绠�/鍖呮鏌ュ憳搴旀牴鎹墿鍝佺绫婚噰鍙栫浉搴旂殑鏂规硶锛堢湅銆佸惉銆佸梾銆佹懜銆佹媶銆佹巶銆佹崗銆佹帰銆佹憞锛夎繘琛屾鏌ャ��</p> @@ -1256,13 +1339,13 @@ <p class="left p-odd"><span class="bj2">鎷撳睍璁粌鈻�</span></p> <p class=" p-odd">1.琛屾潕寮�绠�/鍖呮鏌ュ憳鍦ㄥ矖浣嶄笂鍙戠幇涓�鍚嶈�佷汉灏嗘按鏋滃垁钘忓湪闆ㄤ紴閲岋紝璇ュ浣曟搷浣滐紵</p> <textarea v-model="questionData.teskFour.three" placeholder="璇疯緭鍏ュ唴瀹�" rows="6" - class="fz-16 textarea-box-right" @change="setBookQuestion"></textarea> + class="fz-16 textarea-box-right" @change="setBookQuestion"></textarea> <p class=" p-odd">2.濡備綍鏈夋晥閬垮厤寮�绠�/鍖呰繃绋嬩腑杩濈鍝佽杞Щ锛�</p> <textarea v-model="questionData.teskFour.four" placeholder="璇疯緭鍏ュ唴瀹�" rows="6" - class="fz-16 textarea-box-right" @change="setBookQuestion"></textarea> + class="fz-16 textarea-box-right" @change="setBookQuestion"></textarea> <p class="left p-odd"><span class="bj2">鑷垜璇勪环鈻�</span></p> <textarea v-model="questionData.teskFour.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> @@ -1274,6 +1357,8 @@ </template> <script> +import { getResourcePath } from "@/assets/methods/resources"; +import { getCollectResource, setCollectResource } from "@/assets/methods/resources"; export default { name: "chapterSix", props: { @@ -1283,6 +1368,21 @@ }, data() { return { + collectImg: require("../../assets/images/icon/heart.png"), + collectCheck: require("../../assets/images/icon/heart-check.png"), + videoPathOne: "", + videoPathTwo: "", + videoPathThree: "", + videoPathFour: "", + videoPathFive: "", + collectResourceList: [], + chapterData: { + isCollectVideo: false, + isCollectVideo01: false, + isCollectVideo02: false, + isCollectVideo03: false, + isCollectVideo04: false, + }, questionData: { teskOne: { one: "", @@ -1385,7 +1485,7 @@ }, }; }, - mounted() { + async mounted() { const bookQuestion = localStorage.getItem("aviation-book-chapter06"); if (bookQuestion) { this.questionData = JSON.parse(bookQuestion); @@ -1395,8 +1495,80 @@ this.tableData = JSON.parse(bookTableData); } + const choiceQuestion = localStorage.getItem("aviation-book-chapter06-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( + "a83b9d9ab22d0fd1d84990df6f1b127e" + ); + this.videoPathTwo = await getResourcePath( + "f82bcad075774964b82ae8aa43d9a7f0" + ); + this.videoPathThree = await getResourcePath( + "f9b156c70fc8d593f0095ef535360551" + ); + this.videoPathFour = await getResourcePath( + "9e3e5573e2af66a565039ee9f4c9bb0e" + ); + this.videoPathFive = await getResourcePath( + "68ae02257e5c82558a4b224770bd1ab6" + ); + }, + handleCollect(e) { + if (e == 'video-01') { + this.handleCollectResource("a83b9d9ab22d0fd1d84990df6f1b127e", "a83b9d9ab22d0fd1d84990df6f1b127e", '', "瑙嗛", "bits", '瑙嗛锛氶」鐩叚 瀵煎叆') + this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo + } else if (e == 'video-02') { + this.handleCollectResource("f82bcad075774964b82ae8aa43d9a7f0", "f82bcad075774964b82ae8aa43d9a7f0", '', "瑙嗛", "bits", '瑙嗛锛氶」鐩叚 浠诲姟涓�') + this.chapterData.isCollectVideo01 = !this.chapterData.isCollectVideo01 + } else if (e == 'video-03') { + this.handleCollectResource("f9b156c70fc8d593f0095ef535360551", "f9b156c70fc8d593f0095ef535360551", '', "瑙嗛", "bits", '瑙嗛锛氶」鐩叚 浠诲姟浜�') + this.chapterData.isCollectVideo02 = !this.chapterData.isCollectVideo02 + } else if (e == 'video-04') { + this.handleCollectResource("9e3e5573e2af66a565039ee9f4c9bb0e", "9e3e5573e2af66a565039ee9f4c9bb0e", '', "瑙嗛", "bits", '瑙嗛锛氶」鐩叚 浠诲姟涓�') + this.chapterData.isCollectVideo03 = !this.chapterData.isCollectVideo03 + } else if (e == 'video-05') { + this.handleCollectResource("68ae02257e5c82558a4b224770bd1ab6", "68ae02257e5c82558a4b224770bd1ab6", '', "瑙嗛", "bits", '瑙嗛锛氶」鐩叚 浠诲姟鍥�') + this.chapterData.isCollectVideo04 = !this.chapterData.isCollectVideo04 + } + 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-chapter06-Data", + JSON.stringify(this.chapterData) + ); + }, + setBookQuestion() { localStorage.setItem( "aviation-book-chapter06", -- Gitblit v1.9.1