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/chapter008.vue | 193 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 192 insertions(+), 1 deletions(-) diff --git a/src/books/aviationBasicSkills/view/components/chapter008.vue b/src/books/aviationBasicSkills/view/components/chapter008.vue index 74377b7..8bfb26d 100644 --- a/src/books/aviationBasicSkills/view/components/chapter008.vue +++ b/src/books/aviationBasicSkills/view/components/chapter008.vue @@ -358,6 +358,22 @@ <p class="p-odd">鈶㈡墍鎵ц鑸彮鐨勯鏈烘満鍨嬨�侀鏈哄彿銆佸簲鎬ヨ澶囧垎甯冦��</p> <p class="p-odd">鈶f墍鎵ц鑸彮鏌ヨ鏃堕棿褰撳墠鐨勬梾瀹汉鏁帮紝閲嶈鍙婄壒娈婃梾瀹俊鎭��</p> <p class="p-odd">鈶ゆ墍鎵ц鑸彮褰撶彮閰嶉鎯呭喌绛夈��</p> + <div class="video-box-left"> + <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>瑙嗛锛氶」鐩叓 浠诲姟4</span> + <el-tooltip class="item" effect="dark" + :content="chapterData.isCollectVideo ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌'" placement="top-start"> + <img :src="collectResourceList.findIndex(item => item.id == '9ff093ee1af1f2b46e50766576b15efe') > -1 ? collectCheck : collectImg" + alt="" class="collect-btn" @click="handleCollect('video-01')" /> + </el-tooltip> + </p> + </div> <h4 id="d151" class="p-odd">锛堜簩锛夊鑸变箻鍔″憳鍦ㄦ墽琛岃埅鐝换鍔″墠搴斿涔犵殑鍐呭</h4> <p class="p-odd">鈶犳墍鎵ц鑸彮鐨勮埅绾垮湴鐞嗘儏鍐碉紝椋炶秺鐨勭渷甯傘�佹渤娴併�佸北鑴夊強椋炶鏃堕棿銆佽窛绂汇�佹満鍦哄悕绉般�佺鍩庤窛绂荤瓑銆�</p> <p class="p-odd">鈶″悇鍖哄煙鍙蜂綅鐨勫伐浣滆亴璐e強璇ラ鏈哄簲鎬ヨ澶囧垎甯冦�佸簲鎬ュ缃殑绋嬪簭銆�</p> @@ -367,6 +383,22 @@ <p class="p-odd">鈶′釜浜鸿瘉浠讹紙瀹㈣埍涔樺姟鍛樿缁冨悎鏍艰瘉銆佺┖鍕ょ櫥鏈鸿瘉銆佷綋妫�鍚堟牸璇侊級锛屽苟纭繚鍦ㄦ湁鏁堟湡鍐呫��</p> <p class="p-odd">鈶釜浜烘惡甯﹁祫鏂欙紙瀹㈣埍涔樺姟鍛樻墜鍐屻�佸鑸卞箍鎾瘝銆佽埍闂ㄦ搷浣滃崟绛夛級銆�</p> <p class="p-odd">鈶d釜浜烘惡甯︾墿鍝侊紙绗斻�佷究绛俱�佸洿瑁欍�佸寲濡嗗搧銆佸鐢ㄤ笣琚溿�佽蛋鏃跺噯纭殑鎵嬭〃绛夛級銆�</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>瑙嗛锛氶」鐩叓 浠诲姟5</span> + <el-tooltip class="item" effect="dark" + :content="chapterData.isCollectVideo01 ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌'" placement="top-start"> + <img :src="collectResourceList.findIndex(item => item.id == '7303452278e8ff8c86f9320d9dfdb06c') > -1 ? collectCheck : collectImg" + alt="" class="collect-btn" @click="handleCollect('video-02')" /> + </el-tooltip> + </p> + </div> <h3 id="c080" class="p-odd"><span class="zt-h4 unit4-c">浜屻��</span><span class="qyls-h4 unit4-c">鍙傚姞鑸墠鍑嗗浼�</span></h3> <h4 id="d153" class="p-odd">锛堜竴锛夎埅鍓嶅噯澶囦細绛惧埌</h4> @@ -391,6 +423,22 @@ <p class="p-even">鈶よ鏄庡伐浣滅▼搴忋�侀椋熷強渚涘簲鍝侀厤澶囨儏鍐点��</p> <p class="p-even">鈶ュ仛濂介鏈哄簲鎬ユ挙绂绘按/闄嗛妗堛��</p> <p class="p-even">鈶︽彁鍑哄閲嶈鏃呭銆乂IP鏃呭鍙婄壒娈婃梾瀹㈢殑鏈嶅姟瑕佹眰銆�</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>瑙嗛锛氶」鐩叓 浠诲姟3</span> + <el-tooltip class="item" effect="dark" + :content="chapterData.isCollectVideo02 ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌'" placement="top-start"> + <img :src="collectResourceList.findIndex(item => item.id == '52e064fe476177beb5a3a3a7cdf3adb9') > -1 ? collectCheck : collectImg" + alt="" class="collect-btn" @click="handleCollect('video-03')" /> + </el-tooltip> + </p> + </div> <h3 id="c081" class="p-even"><span class="zt-h4 unit4-c">涓夈��</span><span class="qyls-h4 unit4-c">鎺ュ彈瀹夊叏妫�鏌ヨ繘鍏ユ満鍦洪殧绂诲尯骞朵笂鏈�</span></h3> <p class="p-even"> @@ -1150,6 +1198,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="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 == '8feffd5d540faf91ed00b075591ae87c') > -1 ? collectCheck : collectImg" + alt="" class="collect-btn" @click="handleCollect('video-04')" /> + </el-tooltip> + </p> + </div> <h3 id="c087" class="p-even"><span class="zt-h4 unit4-c">涓夈��</span><span class="qyls-h4 unit4-c">椋炴満涓嬮檷杩囩▼涓殑宸ヤ綔</span></h3> <p class="p-even">椋炴満鐫�闄嗗墠30鍒嗛挓寮�濮嬩笅闄嶏紝姝ゆ椂杩涜涓嬮檷骞挎挱銆備箻鍔″憳鏍规嵁鍚勮嚜鍙蜂綅鑱岃矗瀹屾垚椋炴満涓嬮檷鏃剁殑宸ヤ綔銆�</p> @@ -1402,6 +1466,38 @@ <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>瑙嗛锛氶」鐩叓 浠诲姟2</span> + <el-tooltip class="item" effect="dark" + :content="chapterData.isCollectVideo04 ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌'" placement="top-start"> + <img :src="collectResourceList.findIndex(item => item.id == 'bc733c64bf978a4adf4c9a35c4c44e3f') > -1 ? collectCheck : collectImg" + alt="" class="collect-btn" @click="handleCollect('video-05')" /> + </el-tooltip> + </p> + </div> + <div class="video-box-left"> + <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 == '079d20d6f10b212a2756ab6d2721cf71') > -1 ? collectCheck : collectImg" + alt="" class="collect-btn" @click="handleCollect('video-06')" /> + </el-tooltip> + </p> + </div> <p class="left p-odd"><span class="bj2">浠诲姟宸ュ崟鈻�</span></p> <table border="1" cellpadding="4" cellspacing="0" style="border-color: #5192c6; border-collapse: collapse" class="fz-15 mr-9"> @@ -1585,6 +1681,8 @@ </template> <script> +import { getResourcePath } from "@/assets/methods/resources"; +import { getCollectResource, setCollectResource } from "@/assets/methods/resources"; export default { name: "chapterEight", props: { @@ -1594,6 +1692,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: "", @@ -1713,7 +1826,7 @@ }, }; }, - mounted() { + async mounted() { const bookQuestion = localStorage.getItem("aviation-book-chapter08"); if (bookQuestion) { this.questionData = JSON.parse(bookQuestion); @@ -1722,9 +1835,87 @@ if (bookTableData) { this.tableData = JSON.parse(bookTableData); } + const choiceQuestion = localStorage.getItem("aviation-book-chapter08-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( + "9ff093ee1af1f2b46e50766576b15efe" + ); + this.videoPathTwo = await getResourcePath( + "7303452278e8ff8c86f9320d9dfdb06c" + ); + this.videoPathThree = await getResourcePath( + "52e064fe476177beb5a3a3a7cdf3adb9" + ); + this.videoPathFour = await getResourcePath( + "8feffd5d540faf91ed00b075591ae87c" + ); + this.videoPathFive = await getResourcePath( + "bc733c64bf978a4adf4c9a35c4c44e3f" + ); + this.videoPathSix = await getResourcePath( + "079d20d6f10b212a2756ab6d2721cf71" + ); + }, + handleCollect(e) { + if (e == 'video-01') { + this.handleCollectResource("9ff093ee1af1f2b46e50766576b15efe", "9ff093ee1af1f2b46e50766576b15efe", '', "瑙嗛", "bits", '瑙嗛锛氶」鐩叓 浠诲姟4') + this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo + } else if (e == 'video-02') { + this.handleCollectResource("7303452278e8ff8c86f9320d9dfdb06c", "7303452278e8ff8c86f9320d9dfdb06c", '', "瑙嗛", "bits", '瑙嗛锛氶」鐩叓 浠诲姟5') + this.chapterData.isCollectVideo01 = !this.chapterData.isCollectVideo01 + } else if (e == 'video-03') { + this.handleCollectResource("52e064fe476177beb5a3a3a7cdf3adb9", "52e064fe476177beb5a3a3a7cdf3adb9", '', "瑙嗛", "bits", '瑙嗛锛氶」鐩叓 浠诲姟3') + this.chapterData.isCollectVideo02 = !this.chapterData.isCollectVideo02 + } else if (e == 'video-04') { + this.handleCollectResource("8feffd5d540faf91ed00b075591ae87c", "8feffd5d540faf91ed00b075591ae87c", '', "瑙嗛", "bits", '瑙嗛锛氶」鐩叓 浠诲姟1') + this.chapterData.isCollectVideo03 = !this.chapterData.isCollectVideo03 + } else if (e == 'video-05') { + this.handleCollectResource("bc733c64bf978a4adf4c9a35c4c44e3f", "bc733c64bf978a4adf4c9a35c4c44e3f", '', "瑙嗛", "bits", '瑙嗛锛氶」鐩叓 浠诲姟2') + this.chapterData.isCollectVideo04 = !this.chapterData.isCollectVideo04 + } else if (e == 'video-06') { + this.handleCollectResource("079d20d6f10b212a2756ab6d2721cf71", "079d20d6f10b212a2756ab6d2721cf71", '', "瑙嗛", "bits", '瑙嗛锛氫换鍔′簲2') + this.chapterData.isCollectVideo05 = !this.chapterData.isCollectVideo05 + } + 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-chapter08-Data", + JSON.stringify(this.chapterData) + ); + }, + setBookQuestion() { localStorage.setItem( "aviation-book-chapter08", -- Gitblit v1.9.1