From bd3a3057169eb727728f8a322f51fd4fb4b6cf30 Mon Sep 17 00:00:00 2001 From: 闫增涛 <1829501689@qq.com> Date: 星期四, 11 四月 2024 22:08:32 +0800 Subject: [PATCH] 答题器听力题播放功能优化 --- packageBookService/pages/bookServices/examination/questionList/index.js | 20 +++ packageBookService/pages/bookServices/examination/questionList/index.wxss | 16 ++ packageBookService/pages/bookServices/detail/components/tree/index.wxss | 12 - packageBookService/pages/bookServices/examination/questionList/index.wxml | 22 +++ packageBookService/pages/bookServices/detail/components/tree/index.wxml | 165 +++++++++++++++++++++++---- packageBookService/pages/bookServices/examination/examination.js | 42 +++++- packageBookService/pages/bookServices/detail/index.wxml | 2 packageBookService/pages/bookServices/list/index.js | 50 ++++---- packageBookService/pages/bookServices/detail/index.wxss | 9 + 9 files changed, 266 insertions(+), 72 deletions(-) diff --git a/packageBookService/pages/bookServices/detail/components/tree/index.wxml b/packageBookService/pages/bookServices/detail/components/tree/index.wxml index b33b9da..9096028 100644 --- a/packageBookService/pages/bookServices/detail/components/tree/index.wxml +++ b/packageBookService/pages/bookServices/detail/components/tree/index.wxml @@ -1,52 +1,140 @@ <view class="tree"> <t-collapse default-value="{{openIds}}" catchchange="handleChange"> - <t-collapse-panel wx:for="{{treeList}}" wx:for-item="item" wx:for-index="index" wx:key="id" value="{{item.id}}"> + <t-collapse-panel + wx:for="{{treeList}}" + wx:for-item="item" + wx:for-index="index" + wx:key="id" + value="{{item.id}}" + > <view slot="header" class="header-title"> <view class="title-checkBox" catchtap="catchTap"> - <t-checkbox icon="rectangle" checked="{{item.checked}}" data-item="{{item}}" catchchange="checkResourceTitle" wx:if="{{isShowCheck}}" /> + <t-checkbox + style="align-items: center" + icon="rectangle" + checked="{{item.checked}}" + data-item="{{item}}" + catchchange="checkResourceTitle" + wx:if="{{isShowCheck}}" + /> <!-- 绔犺妭鍚� --> <view class="title-box"> - <text class="title-name">{{item.name}} </text> + <view class="title-name">{{item.name}} </view> <view wx:if="{{item.sysType =='CmsFolder'}}" class="title-num"> 锛坽{item.children ? item.children.length : 0}}锛� </view> </view> </view> </view> - <view class="list" wx:for="{{item.children}}" wx:for-item="citem" wx:for-index="cindex" wx:key="cindex"> + <view + class="list" + wx:for="{{item.children}}" + wx:for-item="citem" + wx:for-index="cindex" + wx:key="cindex" + > <!-- // 鍒ゆ柇 鏃犲瓙椤� 涓斾负鍟嗗搧item 鐩存帴鏄剧ず --> - <view class="listItems" wx:if="{{citem.childrenFolderCount <= 0 && citem.sysType == 'CmsItem'}}"> + <view + class="listItems" + wx:if="{{citem.childrenFolderCount <= 0 && citem.sysType == 'CmsItem'}}" + > <view class="itemsInfo" data-item="{{citem}}" data-index="{{cindex}}"> - <view class="contentBox" bind:tap="goPlayer" data-item="{{citem}}" data-parent="{{item}}"> + <view + class="contentBox" + bind:tap="goPlayer" + data-item="{{citem}}" + data-parent="{{item}}" + > <!-- 鏁欏璧勬簮 浜戝涔� 鍥炬爣 --> - <view class="box-image" style="{{ tab == 'jsek_teachingResources' ? 'width: 350rpx;' : 'width: 450rpx;'}}"> - <view class="checkBox" wx:if="{{isShowCheck}}" catchtap="catchTap"> + <view + class="box-image" + style="{{ tab == 'jsek_teachingResources' ? 'width: 350rpx;' : 'width: 450rpx;'}}" + > + <view + class="checkBox" + wx:if="{{isShowCheck}}" + catchtap="catchTap" + > <!-- checked="{{citem.checked}}" --> <!-- <t-checkbox icon="rectangle" checked="{{citem.checked}}" disabled="{{citem.selectType=='webpage' || citem.isDownload != 1 || citem.fileMap[citem.file].protectType == 'Private'}}" catch:change="checkResource" data-item="{{citem}}" /> --> - <t-checkbox disabled="{{!citem.saleMethod[0].Id}}" icon="rectangle" checked="{{citem.checked}}" data-item="{{citem}}" data-parent="{{item}}" catch:change="checkResource" /> + <t-checkbox + disabled="{{!citem.saleMethod[0].Id}}" + icon="rectangle" + checked="{{citem.checked}}" + data-item="{{citem}}" + data-parent="{{item}}" + catch:change="checkResource" + /> </view> <!-- 鏁欏璧勬簮鍥炬爣 --> <view class="teach-icon"> - <image wx:if="{{citem.selectType == 'audio' || citem.learnSelectType == 'audio'}}" src="/static/images/bookService/detail/audioIcon.png" mode="aspectFill" /> - <image wx:elif="{{citem.selectType == 'video' || citem.learnSelectType == 'video'}}" src="/static/images/bookService/detail/video.png" mode="aspectFill" /> - <image wx:elif="{{citem.selectType == 'pdf'}}" src="/static/images/bookService/detail/pdf.png" mode="aspectFill" /> - <image wx:elif="{{citem.selectType == 'webpage'}}" src="/static/images/bookService/detail/net.png" mode="aspectFill" /> - <image wx:elif="{{citem.selectType == 'picture'}}" src="/static/images/bookService/detail/picture.png" mode="aspectFill" /> - <image wx:elif="{{citem.selectType == 'zip'}}" src="/static/images/bookService/detail/zip.png" mode="aspectFill" /> - <image wx:elif="{{ citem.fileMap[citem.file].extension == 'doc' || citem.fileMap[citem.file].extension == 'docx'}}" src="/static/images/bookService/detail/word.png" mode="aspectFill" /> - <image wx:elif="{{ citem.fileMap[citem.file].extension == 'xlsx' || citem.fileMap[citem.file].extension == 'xlsx'}}" src="/static/images/bookService/detail/excel.png" mode="aspectFill" /> - <image wx:elif="{{ citem.fileMap[citem.file].extension == 'ppt' || citem.fileMap[citem.file].extension == 'pptx'}}" src="/static/images/bookService/detail/PPT.png" mode="aspectFill" /> + <image + wx:if="{{citem.selectType == 'audio' || citem.learnSelectType == 'audio'}}" + src="/static/images/bookService/detail/audioIcon.png" + mode="aspectFill" + /> + <image + wx:elif="{{citem.selectType == 'video' || citem.learnSelectType == 'video'}}" + src="/static/images/bookService/detail/video.png" + mode="aspectFill" + /> + <image + wx:elif="{{citem.selectType == 'pdf'}}" + src="/static/images/bookService/detail/pdf.png" + mode="aspectFill" + /> + <image + wx:elif="{{citem.selectType == 'webpage'}}" + src="/static/images/bookService/detail/net.png" + mode="aspectFill" + /> + <image + wx:elif="{{citem.selectType == 'picture'}}" + src="/static/images/bookService/detail/picture.png" + mode="aspectFill" + /> + <image + wx:elif="{{citem.selectType == 'zip'}}" + src="/static/images/bookService/detail/zip.png" + mode="aspectFill" + /> + <image + wx:elif="{{ citem.fileMap[citem.file].extension == 'doc' || citem.fileMap[citem.file].extension == 'docx'}}" + src="/static/images/bookService/detail/word.png" + mode="aspectFill" + /> + <image + wx:elif="{{ citem.fileMap[citem.file].extension == 'xlsx' || citem.fileMap[citem.file].extension == 'xlsx'}}" + src="/static/images/bookService/detail/excel.png" + mode="aspectFill" + /> + <image + wx:elif="{{ citem.fileMap[citem.file].extension == 'ppt' || citem.fileMap[citem.file].extension == 'pptx'}}" + src="/static/images/bookService/detail/PPT.png" + mode="aspectFill" + /> <!-- 璧勬簮鏃犳枃浠跺唴瀹瑰浘鏍� --> - <image wx:else src="/static/images/bookService/detail/word.png" mode="" /> + <image + wx:else + src="/static/images/bookService/detail/word.png" + mode="" + /> </view> <!-- 浜戝涔犲浘鏍� --> <view> </view> <!-- 鍚嶇О --> - <text class="name" style="{{ tab == 'jsek_teachingResources' ? 'width: 300rpx;' : 'width: 400rpx;'}}">{{citem.name || '-'}}</text> + <text + class="name" + style="{{ tab == 'jsek_teachingResources' ? 'width: 300rpx;' : 'width: 400rpx;'}}" + >{{citem.name || '-'}}</text + > </view> <!-- 鏁欏璧勬簮绫诲瀷 --> <view class="teachClass"> {{citem.resourceClass}} </view> - <view class="teach-btn" wx:if="{{tab == 'jsek_teachingResources'}}"> + <view + class="teach-btn" + wx:if="{{tab == 'jsek_teachingResources'}}" + > <!-- 涓嬭浇鎸夐挳 --> <!-- <image src="/static/images/bookService/detail/download-icon.png" @@ -57,17 +145,42 @@ </view> <view wx:if="{{tab == 'jsek_cloudLearning'}}"> <!-- 浜戝涔犺瘯鐪嬪浘鏍� --> - <image src="/static/images/bookService/detail/shikan.png" class="testSee" wx:if="{{!citem.isbuy ? false : citem.freeFile ? true : false}}"></image> + <image + src="/static/images/bookService/detail/shikan.png" + class="testSee" + wx:if="{{!citem.isbuy ? false : citem.freeFile ? true : false}}" + ></image> <!-- 浜戝涔犲姞鍏ヨ喘鐗╄溅鍥炬爣 --> - <image src="/static/images/bookService/detail/cart@2x.png" wx:if="{{citem.isShopCar}}" class="shopCar" data-item="{{citem}}" catch:tap="onCloudShoppingCart"></image> + <image + src="/static/images/bookService/detail/cart@2x.png" + wx:if="{{citem.isShopCar}}" + class="shopCar" + data-item="{{citem}}" + catch:tap="onCloudShoppingCart" + ></image> <!-- 浜戝涔犺喘涔板浘鏍� --> - <image src="/static/images/bookService/detail/need-buy.png" class="need-buy" wx:if="{{citem.isbuy }}"></image> + <image + src="/static/images/bookService/detail/need-buy.png" + class="need-buy" + wx:if="{{citem.isbuy }}" + ></image> </view> </view> </view> </view> <!-- // 鍒ゆ柇 涓嶆槸鍟嗗搧 鏈夊瓙椤� 閫掑綊缁勪欢 --> - <tree wx:if="{{citem.childrenCount > 0 && citem.sysType == 'CmsFolder' }}" isShowCheck="{{isShowCheck}}" bookInfo="{{bookInfo}}" treeList="{{[citem]}}" learnList="{{learnList}}" itemId="{{itemId}}" tab="{{tab}}" buyIds="{{buyIds}}" openTeachids="{{openTeachids}}" openLearnids="{{openLearnids}}"></tree> + <tree + wx:if="{{ citem.sysType == 'CmsFolder' }}" + isShowCheck="{{isShowCheck}}" + bookInfo="{{bookInfo}}" + treeList="{{[citem]}}" + learnList="{{learnList}}" + itemId="{{itemId}}" + tab="{{tab}}" + buyIds="{{buyIds}}" + openTeachids="{{openTeachids}}" + openLearnids="{{openLearnids}}" + ></tree> </view> <!-- 鏆傛棤鏁版嵁 --> <view wx:if="{{!item.children || !item.children.length}}" class="noData"> @@ -84,4 +197,4 @@ </view> <web-view wx:if="{{webpageSrc}}" src="{{webpageSrc}}"></web-view> -<!-- <button bind:tap="sadd"> 65498</button> --> \ No newline at end of file +<!-- <button bind:tap="sadd"> 65498</button> --> diff --git a/packageBookService/pages/bookServices/detail/components/tree/index.wxss b/packageBookService/pages/bookServices/detail/components/tree/index.wxss index 1cad023..64c43c0 100644 --- a/packageBookService/pages/bookServices/detail/components/tree/index.wxss +++ b/packageBookService/pages/bookServices/detail/components/tree/index.wxss @@ -1,8 +1,10 @@ .tree { --td-collapse-content-padding: 0rpx 12rpx 32rpx 12rpx; --td-collapse-header-text-color: #ff6C00; - --td-collapse-icon-color: #ff6c00 + --td-collapse-icon-color: #ff6c00; + --td-collapse-header-height: min-content; } + .header-title { width: 100%; @@ -15,7 +17,7 @@ .title-box { width: 100%; display: flex; - align-items: flex-start; + align-items: center; } .title-checkBox { @@ -26,11 +28,7 @@ .title-name { - display: inline-block; - /* max-width: 60%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; */ + height: min-content; } .t-class { diff --git a/packageBookService/pages/bookServices/detail/index.wxml b/packageBookService/pages/bookServices/detail/index.wxml index 052cab9..237bf2e 100644 --- a/packageBookService/pages/bookServices/detail/index.wxml +++ b/packageBookService/pages/bookServices/detail/index.wxml @@ -30,7 +30,7 @@ <image loading="" src="{{bookDetail.icon ? bookDetail.icon : '/static/images/default-book-img.png'}}" - mode="aspectFill" + mode="aspectFit" aria-label="{{bookDetail.name}}" /> </view> diff --git a/packageBookService/pages/bookServices/detail/index.wxss b/packageBookService/pages/bookServices/detail/index.wxss index a5ee97e..81826ff 100644 --- a/packageBookService/pages/bookServices/detail/index.wxss +++ b/packageBookService/pages/bookServices/detail/index.wxss @@ -1,5 +1,6 @@ /* pages/bookServices/detail/index.wxss */ @import "./index.skeleton.wxss"; + .page-bookService { width: 100vw; height: 100%; @@ -27,12 +28,18 @@ background-color: #F2F3F8; } -.book-img image { +.book-img { width: 240rpx; height: 340rpx; + display: flex; + align-items: center; box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16); } +.book-img image { + height: 340rpx; +} + .book-detail { padding: 32rpx; display: flex; diff --git a/packageBookService/pages/bookServices/examination/examination.js b/packageBookService/pages/bookServices/examination/examination.js index 2c5d010..d5c4b7a 100644 --- a/packageBookService/pages/bookServices/examination/examination.js +++ b/packageBookService/pages/bookServices/examination/examination.js @@ -182,7 +182,6 @@ // 鐩戝惉watch watch(context, variableName, callback) { let value = context.data[variableName]; // 鑾峰彇琚洃鍚睘鎬х殑褰撳墠鍊� - // 浣跨敤 Object.defineProperty 鏂规硶鍦ㄦ暟鎹璞′笂瀹氫箟灞炴�х殑 getter 鍜� setter Object.defineProperty(context.data, variableName, { configurable: true, // 鍙厤缃� @@ -197,6 +196,34 @@ }, }); }, + + // 姝e垯鎵惧嚭鍚姏src + extractSourceSrc(htmlString) { + // 姝e垯琛ㄨ揪寮忓尮閰�<source>鏍囩涓殑src灞炴�у�� + var srcRegex = /<source\s+src="([^"]+)"/i; + var srcTwo = /<audio\s+src="([^"]+)"/i; + // 鎵ц姝e垯鍖归厤 + var match = srcRegex.exec(htmlString); + const local = srcTwo.exec(htmlString) + // 濡傛灉鍖归厤鎴愬姛锛岃繑鍥炵涓�涓崟鑾风粍鐨勫唴瀹癸紙src灞炴�х殑鍊硷級 + if (match && match[1]) { + return match[1]; + } else if (local && local[1]) { + return local[1] + } else { + // 濡傛灉娌℃湁鍖归厤鍒帮紝杩斿洖null + return null; + } + }, + + // 鎷垮埌鍚姏棰橀櫎audio鏍囩澶栧叾浠栧唴瀹� + removeVideoAndAudioTags(htmlString) { + // 浣跨敤姝e垯琛ㄨ揪寮忓尮閰嶅苟绉婚櫎鎵�鏈夌殑 <video> 鍜� <audio> 鏍囩 + var cleanedHtml = htmlString.replace(/<video[^>]*>[\s\S]*?<\/video>|<audio[^>]*>[\s\S]*?<\/audio>/gi, ''); + + return cleanedHtml; + }, + // 鏀瑰彉loading鐘舵�� changeLoadingState() { this.setData({ @@ -874,12 +901,13 @@ ); } // 鍚姏棰樹慨鏀� - if (questionObj.questionType == 'singleChoiceArr') { - questionObj.stem.stemTxt = questionObj.stem.stemTxt - .replace( - /\<audio/gi, - '<audio @play="play" ' - ) + if (questionObj.questionType == 'singleChoice') { + const src = this.extractSourceSrc(questionObj.stem.stemTxt) + if (src) { + questionObj.src = src + questionObj.stem.stemTxt = this.removeVideoAndAudioTags(questionObj.stem.stemTxt) + console.log('棰樺共', questionObj.stem.stemTxt); + } } // 鑾峰彇鍥剧墖 if ( diff --git a/packageBookService/pages/bookServices/examination/questionList/index.js b/packageBookService/pages/bookServices/examination/questionList/index.js index 487bdbf..0a00adc 100644 --- a/packageBookService/pages/bookServices/examination/questionList/index.js +++ b/packageBookService/pages/bookServices/examination/questionList/index.js @@ -1,4 +1,7 @@ // pages/bookServices/examination/questionList/index.js +const innerAudioContext = wx.createInnerAudioContext({ + useWebAudioImplement: false +}) Component({ /** * 缁勪欢鐨勫睘鎬у垪琛� @@ -39,6 +42,10 @@ created() { // console.log('缁勪欢浼犲弬', this.properties); }, + ready() { + innerAudioContext.stop(); + innerAudioContext.destroy(); + }, /** * 缁勪欢鐨勫垵濮嬫暟鎹� */ @@ -55,12 +62,25 @@ type: 'fraction' }, showIndex: 0, + isPlay: false }, /** * 缁勪欢鐨勬柟娉曞垪琛� */ methods: { + audioPlay(e) { + const src = e.currentTarget.dataset.src + innerAudioContext.src = src + if (!this.data.isPlay) { + innerAudioContext.play() + } else { + innerAudioContext.pause() + } + this.setData({ + isPlay: !this.data.isPlay + }) + }, // 鍒囨崲棰樼洰 changeSwiper(e) { this.setData({ diff --git a/packageBookService/pages/bookServices/examination/questionList/index.wxml b/packageBookService/pages/bookServices/examination/questionList/index.wxml index 6d37961..5212ab2 100644 --- a/packageBookService/pages/bookServices/examination/questionList/index.wxml +++ b/packageBookService/pages/bookServices/examination/questionList/index.wxml @@ -31,10 +31,26 @@ > <!-- 棰樺彿 --> <text>{{item.number}}.</text> + <!-- 鍚姏棰� --> + <view wx:if="{{item.questionType == 'singleChoice' && item.src}}"> + <rich-text nodes="{{item.stem.stemTxt }}" /> + <view + style="margin-top: {{item.stem.stemTxt ? '10rpx' : ''}};" + class="audio-play-box" + bind:tap="audioPlay" + data-src="{{item.src}}" + > + <image + src="{{isPlay ? '/static/images/resourceDetailsMyAudio/zanting@2x.png' : '/static/images/resourceDetailsMyAudio/play@2x.png'}}" + mode="aspectFit" + ></image> + </view> + </view> + <!-- 浠呮枃瀛� --> <view class="title-content" - wx:if="{{item.stemStyle == 'Txt' && item.questionType != 'completion'}}" + wx:elif="{{item.stemStyle == 'Txt' && item.questionType != 'completion'}}" >{{item.stem.stemTxt}}</view > <!-- 浠呭浘鐗� --> @@ -123,10 +139,10 @@ <view wx:if="{{item.optionStyle == 'TxtAndImage'}}" class="fl-center" - style="min-height: 144rpx" + class="TxtAndImage-box" > <text>{{contentItem.value}}銆�</text> - <text class="radio-textimg">{{contentItem.txt}}</text> + <view class="radio-textimg">{{contentItem.txt}}</view> <image src="{{contentItem.img}}" mode="aspectFit" /> </view> <!-- 瀵屾枃鏈� --> diff --git a/packageBookService/pages/bookServices/examination/questionList/index.wxss b/packageBookService/pages/bookServices/examination/questionList/index.wxss index 8956654..eaa29f0 100644 --- a/packageBookService/pages/bookServices/examination/questionList/index.wxss +++ b/packageBookService/pages/bookServices/examination/questionList/index.wxss @@ -248,8 +248,22 @@ height: min-content; } +.audio-play-box { + margin-left: 10rpx; + background-color: #e7e7e7; + display: flex; + align-items: center; + width: 70rpx; + height: 70rpx; +} + +.TxtAndImage-box { + display: flex; + align-items: center; + min-height: 144rpx; +} + .radio-textimg { - display: inline-block; height: min-content; width: calc(100% - 90rpx); } diff --git a/packageBookService/pages/bookServices/list/index.js b/packageBookService/pages/bookServices/list/index.js index f57e643..a8abbc8 100644 --- a/packageBookService/pages/bookServices/list/index.js +++ b/packageBookService/pages/bookServices/list/index.js @@ -245,7 +245,7 @@ }); }, // 鑾峰彇涓�绾у垎绫讳笅浜岀骇鍒嗙被 - getSecondList(path) { + async getSecondList(path) { const options = []; const query = { path, @@ -260,16 +260,7 @@ field: "LinkOrder", }, }; - app.MG.store.getStoreChannelList(query).then((res) => { - if (!res.datas.length) { - this.setData({ - disabledSecondList: true, - }); - } else { - this.setData({ - disabledSecondList: false, - }); - } + await app.MG.store.getStoreChannelList(query).then((res) => { for (let index = 0; index < res.datas.length; index++) { const item = res.datas[index]; options.push({ @@ -441,11 +432,6 @@ }, }; app.MG.store.getProductList(query).then((res) => { - if (!res.datas.length && !this.data.pathList.length) { - this.setData({ - disabledSecondList: true - }) - } this.setData({ bookList: res.datas, isMore: null, @@ -460,6 +446,18 @@ noData: true, }); } + // 浜岀骇绂佺敤閫昏緫 + // 1.涓�绾у垎绫绘湭閫変腑锛屼簩绾у垎绫荤鐢� + if (!this.data.stairList.value) { + this.setData({ + disabledSecondList: true + }) + } else if (this.data.stairList.value && !this.data.secondList.options.length) { + // 2. 涓�绾у垎绫婚�変腑锛屾棤浜岀骇鍒嗙被 + this.setData({ + disabledSecondList: true + }) + } if (this.data.triggered) { this.setData({ triggered: false, @@ -471,7 +469,7 @@ }); }, // 涓�绾у垎绫诲垏鎹� - onChangeStair(e) { + async onChangeStair(e) { const path = e.detail.value.length ? `${this.data.assortCheck.code}\\${e.detail.value}` : this.data.assortCheck.code; @@ -482,16 +480,16 @@ secondCode: "", path: path, "stairList.value": e.detail.value, - disabledSecondList: false + // disabledSecondList: false }); - if (e.detail.value == "") { - this.setData({ - disabledSecondList: true, - }); - } else { - this.getSecondList(path); - } - this.getBookList(path); + // if (e.detail.value == "") { + // this.setData({ + // disabledSecondList: true, + // }); + // } else { + await this.getSecondList(path); + // } + await this.getBookList(path); }, // 浜岀骇鍒嗙被鍒囨崲 onChangeSecond(e) { -- Gitblit v1.9.1