rtliveDoctor/pages_live/lessonDetail.vue

<template>
	<view class="content">
		<view class="detail-cont">
			<view class="title">{{item.title||'-'}}</view>
			<view class="info">
				<view class="time">
					<u-icon name="clock" color="#fff" size="14"></u-icon>{{item.createTime}}</view>
				<view class="reads ">
					<u-icon name="eye" color="#fff" size="14"></u-icon>{{item.viewCount ||0}}</view>
			</view>
			<view class="video">
				<video class="myVideo" id="myVideo" :src="item.videoUrl"
				@error="videoErrorCallback"   controls ></video>
			</view>
			<!-- 正文 -->
			<!-- <view class="full-text"  >
				<view v-html="item.content"></view>
			</view> -->
	        <view class="tips">
				<image class="w48 h48" src="@/static/image/icon_warning.png" mode=""></image>
				<view class="text-box">本内容仅代表嘉宾观点，不代表本站立场。仅供医学药学专业人士查看，不构成实际治疗建议。</view>
			</view>
			<view class="actor x-f">
				<image class="w88 h88" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/images/my_heads_icon64.png" mode=""></image>
				<view class="infor y-start">
					<view class="name">{{item.doctorName+'-'+item.jobTitle}}</view>
					<view class="position">{{item.institution||'-'}}·{{item.department||'-'}}</view>
				</view>
			</view>
			<view class="full-text">
				<view>
					{{item.summary||'-'}}
				</view>
			</view>
			<!-- <view class="tag">#转载#肾病</view> -->
		</view>
	</view> 
</template>

<script>
	import {getClassroomDetail} from '@/api/index.js'
	export default {
		data() {
			return {
				advs:[],
				advImgs:[],
				src: '',
				groupId:null,
				item:{},
				type:''
			};
		},
		onLoad(option) {
			this.groupId=option.groupId;
		},
		onShow() {
			this.getClassroomDetail()
			//this.getDoctorArticleById();
		},
		//发送给朋友
		onShareAppMessage(res) {
			return {
				title: this.item.title,
				path: '/pages_live/lessonDetail?groupId='+this.groupId,
			}
		},
		methods:{
			handleAdvClick(index){
				var ad=this.advs[index];
				console.log(ad.advUrl);
				if(ad.showType==1){
					uni.setStorageSync('url',ad.advUrl);
					uni.navigateTo({
						url:"h5"
					})
				}
				else if(ad.showType==2){
					uni.navigateTo({
						url:ad.advUrl
					})
				}
				else if(ad.showType==3){
					 uni.setStorageSync('content',ad.content);
					 uni.navigateTo({
					 	url:"content"
					 })
				}
				
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			navTo(url){
				uni.navigateTo({
					url: url
				})
			},
			getClassroomDetail(){
				getClassroomDetail(this.groupId).then(
					res => {
						if(res.code==200){
							this.item=res.data;
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.content{
		height: 100%;
		display: flex;
		flex-direction: column;
		background: #000;
	}
	.detail-cont{
		width:100%;
		flex: 1;
		overflow-y: auto;
		// background: #fff;
		.title{
			padding:0 30upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 40rpx;
			color: #FFFFFF;
			line-height: 60rpx;
		}
		.info{
			padding:0 30upx;
			display: flex;
			align-items: center;
			margin-top: 16rpx;
			margin-bottom: 32rpx;
			.time{
					
				display: flex;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 44rpx;
				.u-icon{
					margin-right: 10rpx;
				}
			}
			.reads{
				margin-left: 32rpx;
				display: flex;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 44rpx;
				.u-icon{
					margin-right: 10rpx;
				}
			}
		
			}
		.full-text{
			padding:0 30upx;
			width: calc(100% - 60rpx);
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 44rpx;
		}
	.tips{
		// width: calc(100% - 60rpx);
		margin-bottom:184rpx;
		display: flex;
		align-items: center;
		padding: 16rpx 24rpx;
		margin-top: 40rpx;
		margin-left: 24rpx;
		margin-right: 24rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		.text-box{
			flex:1;
			margin-left: 16rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 40rpx;
			
		}
		
	}
	.actor{
		padding:0 30upx;
		margin-bottom: 32rpx;
		.infor{
			margin-left: 24rpx;
			height: 88rpx;
			justify-content: space-around;
			.name{
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 36rpx;
			}
			.position{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 32rpx;
			}
		}
	}
	.tag{
		padding:0 30upx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 44rpx;
	}
		.video{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			video{
				width: 100%;
			}
		}
	}
	.ad{
		margin-bottom: 50rpx;
		width: 100%;
		 padding: 15rpx;
		 background: #FFFFFF;
		 border-radius: 18rpx 18rpx 18rpx 18rpx;
	}
	.inquiry{
		position: fixed;
		right: 22upx;
		bottom: 193upx;
		z-index: 99;
		.content{
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			image{
				box-sizing: border-box;
				width: 100upx;
				height: 100upx;
				border-radius: 50%;
				z-index: 9;
				border: 2rpx solid #0bb3f2;
			}
			.text{
				margin-top: 15upx;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #0bb3f2;
			}
			 
		}
		
	}
	 
</style>