zm/medicine_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

太湖公益

Browse Source
This commit is contained in:
@fawn-nine
2024-06-07 15:04:50 +08:00
parent 62282727ff
commit 9befb5c111
22 changed files with 620 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
pages/course/illustrate.vue
View File

@@ -2,24 +2,24 @@
<view>
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<z-nav-bar :title="courseInfo.id ? courseTitle : '课程说明'">
<uni-icons type="bars" class="topRight" slot="right" @click="showDrawer('showRight')" size="22"></uni-icons>
<z-nav-bar :title="courseInfo.id ? courseTitle : '课程说明'">
<uni-icons type="bars" class="topRight" slot="right" @click="showDrawer('showRight')" size="22"></uni-icons>
</z-nav-bar>
<view class="containerBg">
<view class="example-body">
<!-- <button type="primary" @click="showDrawer('showRight')"><text class="word-btn-white">全部课程</text>
</button> -->
<uni-drawer ref="showRight" mode="right" :width="320" @change="changeD($event,'showRight')">
<!-- <view class="close">
<button @click="closeDrawer('showRight')"><text
class="word-btn-white">关闭Drawer</text></button>
</view> -->
<view class="close">
<view class="zhan" style="width: 100%;"></view>
<u-icon name="close" @click="closeDrawer('showRight')" color="#2979ff" size="28"></u-icon>
</view>
<view class="proTitle">
<text>点击课程名称即可查看对应的课程说明</text>
</view>
<uni-collapse accordion v-model="accordionVal" v-if="treeList.length > 0" @change="collapseChange">
<uni-collapse accordion v-model="accordionVal" v-if="treeList.length > 0" @change="collapseChange">
<uni-collapse-item v-for="(item, index) in treeList" :key="index" :title="item.title"
:show-animation="true" >
:show-animation="true">
<view class="content">
<!-- <text class="text">{{item.title}}</text> -->
<view class="sub1List">
@@ -59,8 +59,9 @@
</view>
<view>
<view v-if="courseInfo.mediaType ==1 && courseInfo.media != ''" style="width: 100%;height: 100%;text-align: center;" v-html="videoHTML">
</view>
<view v-if="courseInfo.mediaType ==1 && courseInfo.media != ''"
style="width: 100%;height: 100%;text-align: center;" v-html="videoHTML">
</view>
<!-- 视频播放器样式 -->
<!-- <view class="videoTemp" v-show="showTemp">
<u-icon name="play-circle" color="#fff" size="40" @click="clickToPlay"></u-icon>
@@ -101,7 +102,7 @@
pid: null,
courseInfo: {},
poster:'../../static/videoF.jpg', //封面图
poster: '../../static/videoF.jpg', //封面图
current: {
poster: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png',
name: '致爱丽丝',
@@ -113,9 +114,9 @@
},
curId: null,
courseTitle: '',
showTemp:true,
videoContext:null,
videoUrl:'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4'
showTemp: true,
videoContext: null,
videoUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4'
};
},
//第一次加载
@@ -130,9 +131,9 @@
computed: {
...mapState(['userInfo']),
videoHTML() {
return `<video class="video-box" poster="http://ehh-public-01.oss-cn-beijing.aliyuncs.com/wumenyishu-image/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240606110049.jpg" src="${this.videoUrl}" enable-danmu danmu-btn controls style="width:100%;height:320rpx"></video>`
}
},
return `<video class="video-box" poster="http://ehh-public-01.oss-cn-beijing.aliyuncs.com/wumenyishu-image/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240606110049.jpg" src="${this.videoUrl}" enable-danmu danmu-btn controls style="width:100%;height:320rpx"></video>`
}
},
//页面显示
onShow() {
// 隐藏原生的tabbar
@@ -147,7 +148,7 @@
this.showTemp = true
this.videoContext = null
},
onPullDownRefresh(){
onPullDownRefresh() {
uni.stopPullDownRefresh()
},
components: {
@@ -163,42 +164,42 @@
},
// 关闭窗口
closeDrawer(e) {
this.$refs[e].close()
this.$refs[e].close()
},
changeD(e, type) {
// console.log((type === 'showRight' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
this[type] = e
if(!e){
if (!e) {
this.showTemp = false
console.log('关闭弹窗')
this.videoContext.play()
}
},
formatRichText(html) { //控制图片大小
let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
return match;
});
newContent = newContent.replace(/style="[^"]+"/gi, function (match, capture) {
newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
'max-width:100%;');
return match;
});
});
newContent = newContent.replace(/<br[^>]*\/>/gi, '');
newContent = newContent.replace(/\<img/gi,
'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
return newContent;
},
collapseChange(e){
console.log(e,'折叠面板点击');
if(e){
collapseChange(e) {
console.log(e, '折叠面板点击');
if (e) {
this.tagId = this.treeList[e].id
this.getCourseInfo(this.tagId)
this.closeDrawer('showRight')
// this.closeDrawer('showRight')
}
},
getData() {
@@ -231,15 +232,15 @@
this.courseInfo = res.course
this.courseTitle = this.courseInfo.title + '课程说明'
this.curId = id
if(this.courseInfo.mediaType == 1 && this.courseInfo.media != ''){
if (this.courseInfo.mediaType == 1 && this.courseInfo.media != '') {
// this.videoUrl = this.courseInfo.media
// this.poster = this.videoUrl +
// "?x-oss-process=video/snapshot,t_0,f_jpg"
}else{
} else {
// this.videoUrl = ''
this.poster = ''
}
}
// console.log(id, 'id')
} else {
this.courseInfo = {}
@@ -256,14 +257,14 @@
});
},
clickCourseInfo(item) {
this.getCourseInfo(item.id)
this.closeDrawer('showRight')
},
playEnd(){
playEnd() {
this.showTemp = true
},
clickToPlay(){
clickToPlay() {
this.showTemp = false
this.videoContext.play()
}
@@ -288,9 +289,20 @@
// }
// }
#myVideo {
width: 100% !important;
width: 100% !important;
}
video{width: 100% !important; }
video {
width: 100% !important;
}
}
.close {
display: flex;
justify-content: right;
padding-top: 60rpx;
padding-right: 20px;
}
.infoBox {
@@ -338,7 +350,7 @@
background-color: rgba(0, 0, 0, .5);
z-index: 1;
}
.proTitle {
text-align: center;
@@ -365,7 +377,8 @@
text {
padding-left: 20rpx;
}
.item:last-child{
.item:last-child {
border-bottom: 0;
}
}
@@ -375,25 +388,47 @@
color: #fff;
background-image: linear-gradient(90deg, #258feb 0%, #00e1ec 100%) !important;
}
.textss{display: inline-block; width: 100%; border-bottom: 1px solid #ebeef5;}
.leve2{
.textss{padding-left: 20rpx;}
.textss {
display: inline-block;
width: 100%;
border-bottom: 1px solid #ebeef5;
}
.leve2{
.textss{padding-left: 40rpx;}
.leve2 {
.textss {
padding-left: 20rpx;
}
}
.leve3{
.textss{padding-left: 60rpx;}
.leve2 {
.textss {
padding-left: 40rpx;
}
}
.leve4{
.textss{padding-left: 80rpx;}
.leve3 {
.textss {
padding-left: 60rpx;
}
}
}
.leve4 {
.textss {
padding-left: 80rpx;
}
}
}
// .textss:last-child{
// border-bottom: 0;
// }
.topRight{margin-right: 20rpx; font-size: 28rpx; display: flex;}
.topRight {
margin-right: 20rpx;
font-size: 28rpx;
display: flex;
}
audio {
width: 100% !important;