From 6997ee42e0fd3519f8ae418ee02749a85255707b Mon Sep 17 00:00:00 2001 From: 闫增涛 <1829501689@qq.com> Date: 星期一, 23 十二月 2024 14:35:21 +0800 Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout --- src/books/aviationBasicSkills/view/components/chapter007.vue | 251 +++++++++++++++++++++++++++++++++++++++++++++++++- 1 files changed, 245 insertions(+), 6 deletions(-) diff --git a/src/books/aviationBasicSkills/view/components/chapter007.vue b/src/books/aviationBasicSkills/view/components/chapter007.vue index 8aaf23e..cb05398 100644 --- a/src/books/aviationBasicSkills/view/components/chapter007.vue +++ b/src/books/aviationBasicSkills/view/components/chapter007.vue @@ -19,9 +19,22 @@ <p class="bj-1-zt">2.鍏峰楂樼灮杩滅灘鐨勯暱杩滃彂灞曠溂鍏夊拰澶у眬鎰忚瘑銆�</p> <p class="bj-1-zt">3.鍩瑰吇姹傜湡鍔″疄銆佸紑鎷撳垱鏂扮殑鑱屼笟绮剧銆�</p> <p><br></p> - <p><br></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 == 'c0403607aa0c9a35d065bcc476b48644') > -1 ? collectCheck : collectImg" + alt="" class="collect-btn" @click="handleCollect('video-01')" /> + </el-tooltip> + </p> + </div> <p><br></p> </div> </div> @@ -82,6 +95,22 @@ <p class="p-odd">鈶㈡帴寰呫�傛帴寰呭ソ璐靛涔嬪悗杩涜绠�鍗曠殑浜烘枃鍏虫��锛岃闂叾鏄惁闇�瑕佸叾浠栨湇鍔°��</p> <p class="p-odd">鈶e府鍔╁叾鍔炵悊鐩稿叧鎵嬬画銆傚鏋滆吹瀹鹃渶瑕佽浆鏈猴紝甯姪鍏舵洿鎹㈣浆鏈虹櫥鏈虹墝锛涘鏋滆吹瀹惧凡鍒拌揪鐩殑鍦帮紝甯姪鍏舵彁鍙栨墭杩愮殑琛屾潕銆�</p> <p class="p-odd">鈶ら�佸埆銆傚皢璐靛閫佽嚦涓嬩竴绋嬮鏈虹殑鐧绘満鍙o紝鎴栨槸鎺ュ緟杞﹁締涓婏紝鐒跺悗绀艰矊閫佸埆锛岀洰閫佸叾绂诲幓鍚庢柟鍙浆韬寮�銆�</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 == '96619d3fc49979dd1373ec1a944f45c4') > -1 ? collectCheck : collectImg" + alt="" class="collect-btn" @click="handleCollect('video-02')" /> + </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"> @@ -357,6 +386,22 @@ 鎵樼洏琛岃蛋杩囩▼涓紝濡傛灉闇�瑕佸彇鐢ㄧ洏鍐呯墿鍝侊紝绉颁负鍗哥洏銆傚嵏鐩樻椂锛岀敤鍙虫墜鍙栬蛋鐩樺唴鎵�闇�鐗╁搧锛屽悓鏃跺簲娉ㄦ剰鐩樺唴鐗╁搧鐨勫彉鍖栵紝鐢ㄥ乏鎵嬫墜鎸囩殑鍔涢噺鏉ヨ皟鏁存墭鐩橀噸蹇冦�傚簲浠庡墠鍚庡乏鍙充氦鏇夸娇鐢ㄧ洏鍐呯墿鍝併��</p> <p class="p-odd">鎵樼洏琛岃蛋杩囩▼涓紝濡傛灉闇�瑕佸皢鎵�鎵樼墿鍝佹暣涓斁鍒板伐浣滃彴闈笂锛岀О涓鸿惤鎵樸�傝惤鎵樻椂锛屽簲宸﹁剼鍚戝墠锛岀敤鍙虫墜鍗忓姪宸︽墜鎶婃墭鐩樺皬蹇冨湴鎺ㄨ嚦宸ヤ綔鍙伴潰涓婏紝鏀剧ǔ鍚庢寜鐓т粠鍐呭埌澶栫殑椤哄簭鍙栫敤鐩樺唴鐗╁搧銆� </p> + <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>瑙嗛锛氶」鐩竷 浠诲姟浜� 鎵樼洏鏈嶅姟</span> + <el-tooltip class="item" effect="dark" + :content="chapterData.isCollectVideo02 ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌'" placement="top-start"> + <img :src="collectResourceList.findIndex(item => item.id == '086dffc37acf667071bcf9d3090e2f96') > -1 ? collectCheck : collectImg" + alt="" class="collect-btn" @click="handleCollect('video-03')" /> + </el-tooltip> + </p> + </div> </div> </div> </div> @@ -375,6 +420,38 @@ <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 == '9341abb61ad16f2c04e11011f207b88c') > -1 ? collectCheck : collectImg" + alt="" class="collect-btn" @click="handleCollect('video-04')" /> + </el-tooltip> + </p> + </div> + <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 == '224496c95a0c6db70932e95712503023') > -1 ? collectCheck : collectImg" + alt="" class="collect-btn" @click="handleCollect('video-05')" /> + </el-tooltip> + </p> + </div> <div class="bj5 ml-9"> <div class="bj5-xyx"> <p class="td-0"><span class="bj5-xyx">璇惧爞鐮旇</span></p> @@ -626,6 +703,22 @@ 鑺辫尪锛屽ぇ澶氭槸閫夌敤鑺抽娴撻儊鍜岀粡杩囩簿宸ョ粏鍒剁殑缁胯尪绐ㄥ埗鑰屾垚锛岃尪寮曡姳棣欍�傝姳鑼朵腑浠ヨ寜鑾夎姳鑼跺眳澶氾紝涔熸渶鍙椾汉浠殑鍠滅埍銆傛场楗姳鑼跺鐢ㄧ摲鏉紝鍙栦竴鎾姳鑼剁疆浜庢澂鍐咃紝鐢ㄦ哺姘村啿娉★紝鍔犵洊鍥涗簲鍒嗛挓鍚庡嵆鍙搧楗�傚楗尪浜烘暟杈冨锛屽線寰�閲囩敤澹堕ギ娉曪紝鍗冲皢閫傞噺鐨勮姳鑼剁疆浜庡6鍐咃紝鍐叉场鍥涗簲鍒嗛挓鍚庯紝鍊掑叆鑼舵澂鎴栬尪纰椾腑楗敤銆� </p> <p class="p-odd">鑺辫尪鐨勯ギ娉曪紝涓庢櫘閫氱豢鑼剁浉浠匡紝浣嗛渶鐗瑰埆娉ㄦ剰闃叉棣欐皵鐨勬暎澶便�備娇鐢ㄧ殑鑼跺叿鏈�濂介�夌敤鐧界摲鏈夌洊鑼舵澂锛屼互琛墭鑺辫尪鍥烘湁鐨勬堡鑹诧紝淇濇寔鑺辫尪鐨勮姵棣欍��</p> + <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>瑙嗛锛氶」鐩竷 浠诲姟涓� 鑼舵按鏈嶅姟</span> + <el-tooltip class="item" effect="dark" + :content="chapterData.isCollectVideo05 ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌'" placement="top-start"> + <img :src="collectResourceList.findIndex(item => item.id == 'b9e445e4e0148ac62c747ac30f517409') > -1 ? collectCheck : collectImg" + alt="" class="collect-btn" @click="handleCollect('video-06')" /> + </el-tooltip> + </p> + </div> <h3 id="c076" class="p-odd"><span class="zt-h4 unit3-c">浜屻��</span><span class="qyls-h4 unit3-c">鑼舵按鏈嶅姟娴佺▼</span></h3> <h4 id="d145" class="p-odd">锛堜竴锛夊噯澶囦簨椤�</h4> @@ -666,6 +759,38 @@ <p class="p-even"> 娣绘按鏃讹紝濡傛灉鏄湁鐩栫殑鏉瓙锛屽垯鐢ㄥ彸鎵嬩腑鎸囧拰鏃犲悕鎸囧皢鏉洊澶逛綇锛岃交杞绘姮璧枫�傚ぇ鎷囨寚銆侀鎸囧拰灏忔媷鎸囧皢鏉瓙鎷胯捣锛屼晶瀵规梾瀹紝鐢ㄥ乏鎵嬫嬁瀹瑰櫒娣绘按銆傚悓鏍烽�掕嚦鏃呭鍙虫墜涓婃柟5锝�10鍘樼背澶勶紝鏈夋焺鐨勬澂瀛愬垯灏嗘焺杞嚦鍙充晶銆� </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 == 'dc3712c490fc4180adcb7b7cb3662196') > -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>瑙嗛锛氶」鐩竷 浠诲姟涓� 鑼舵按婕旂ず2</span> + <el-tooltip class="item" effect="dark" + :content="chapterData.isCollectVideo07 ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌'" placement="top-start"> + <img :src="collectResourceList.findIndex(item => item.id == '27c019708f12bd652ffb9dc9d300467e') > -1 ? collectCheck : collectImg" + alt="" class="collect-btn" @click="handleCollect('video-08')" /> + </el-tooltip> + </p> + </div> <p class="left p-even"><span class="bj2">浠诲姟宸ュ崟鈻�</span></p> <table border="1" cellpadding="4" cellspacing="0" style="border-color: #5192c6; border-collapse: collapse; width: 91%;" class="fz-15 ml-9"> @@ -854,10 +979,10 @@ </p> <p>鎬濊�冿細灏忔潕鍦ㄦ湇鍔′腑瀛樺湪浠�涔堥棶棰橈紵</p> <textarea v-model="questionData.teskThree.two" placeholder="璇疯緭鍏ュ唴瀹�" rows="6" - class="fz-16 textarea-box-right" @change="setBookQuestion"></textarea> + class="fz-16 textarea-box-right" @change="setBookQuestion"></textarea> <p class="left"><span class="bj2">鑷垜璇勪环鈻�</span></p> <textarea v-model="questionData.teskThree.three" placeholder="璇疯緭鍏ュ唴瀹�" rows="6" - class="fz-16 textarea-box-right" @change="setBookQuestion"></textarea> + class="fz-16 textarea-box-right" @change="setBookQuestion"></textarea> </div> </div> </div> @@ -868,6 +993,8 @@ </template> <script> +import { getResourcePath } from "@/assets/methods/resources"; +import { getCollectResource, setCollectResource } from "@/assets/methods/resources"; export default { name: "chapterSeven", props: { @@ -877,6 +1004,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: "", @@ -940,7 +1088,7 @@ }, }; }, - mounted() { + async mounted() { const bookQuestion = localStorage.getItem("aviation-book-chapter07"); if (bookQuestion) { this.questionData = JSON.parse(bookQuestion); @@ -950,8 +1098,99 @@ this.tableData = JSON.parse(bookTableData); } + const choiceQuestion = localStorage.getItem("aviation-book-chapter07-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( + "c0403607aa0c9a35d065bcc476b48644" + ); + this.videoPathTwo = await getResourcePath( + "96619d3fc49979dd1373ec1a944f45c4" + ); + this.videoPathThree = await getResourcePath( + "086dffc37acf667071bcf9d3090e2f96" + ); + this.videoPathFour = await getResourcePath( + "9341abb61ad16f2c04e11011f207b88c" + ); + this.videoPathFive = await getResourcePath( + "224496c95a0c6db70932e95712503023" + ); + this.videoPathSix = await getResourcePath( + "b9e445e4e0148ac62c747ac30f517409" + ); + this.videoPathSeven = await getResourcePath( + "dc3712c490fc4180adcb7b7cb3662196" + ); + this.videoPathEight = await getResourcePath( + "27c019708f12bd652ffb9dc9d300467e" + ); + }, + handleCollect(e) { + if (e == 'video-01') { + this.handleCollectResource("c0403607aa0c9a35d065bcc476b48644", "c0403607aa0c9a35d065bcc476b48644", '', "瑙嗛", "bits", '瑙嗛锛氶」鐩竷 瀵煎叆') + this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo + } else if (e == 'video-02') { + this.handleCollectResource("96619d3fc49979dd1373ec1a944f45c4", "96619d3fc49979dd1373ec1a944f45c4", '', "瑙嗛", "bits", '瑙嗛锛氶」鐩竷 浠诲姟1') + this.chapterData.isCollectVideo01 = !this.chapterData.isCollectVideo01 + } else if (e == 'video-03') { + this.handleCollectResource("086dffc37acf667071bcf9d3090e2f96", "086dffc37acf667071bcf9d3090e2f96", '', "瑙嗛", "bits", '瑙嗛锛氶」鐩竷 浠诲姟2 鎵樼洏鏈嶅姟') + this.chapterData.isCollectVideo02 = !this.chapterData.isCollectVideo02 + } else if (e == 'video-04') { + this.handleCollectResource("9341abb61ad16f2c04e11011f207b88c", "9341abb61ad16f2c04e11011f207b88c", '', "瑙嗛", "bits", '瑙嗛锛氶」鐩竷 浠诲姟2 鎵樼洏婕旂ず1') + this.chapterData.isCollectVideo03 = !this.chapterData.isCollectVideo03 + } else if (e == 'video-05') { + this.handleCollectResource("224496c95a0c6db70932e95712503023", "224496c95a0c6db70932e95712503023", '', "瑙嗛", "bits", '瑙嗛锛氶」鐩竷 浠诲姟2 鎵樼洏婕旂ず2') + this.chapterData.isCollectVideo04 = !this.chapterData.isCollectVideo04 + } else if (e == 'video-06') { + this.handleCollectResource("b9e445e4e0148ac62c747ac30f517409", "b9e445e4e0148ac62c747ac30f517409", '', "瑙嗛", "bits", '瑙嗛锛氶」鐩竷 浠诲姟3 鑼舵按鏈嶅姟') + this.chapterData.isCollectVideo05 = !this.chapterData.isCollectVideo05 + } else if (e == 'video-07') { + this.handleCollectResource("dc3712c490fc4180adcb7b7cb3662196", "dc3712c490fc4180adcb7b7cb3662196", '', "瑙嗛", "bits", '瑙嗛锛氶」鐩竷 浠诲姟涓� 鑼舵按婕旂ず1') + this.chapterData.isCollectVideo06 = !this.chapterData.isCollectVideo06 + } else if (e == 'video-08') { + this.handleCollectResource("27c019708f12bd652ffb9dc9d300467e", "27c019708f12bd652ffb9dc9d300467e", '', "瑙嗛", "bits", '瑙嗛锛氶」鐩竷 浠诲姟涓� 鑼舵按婕旂ず2') + 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-chapter07-Data", + JSON.stringify(this.chapterData) + ); + }, + setBookQuestion() { localStorage.setItem( "aviation-book-chapter07", -- Gitblit v1.9.1