rtliveDoctor/pages_live/lessonDetail.vue

<template>
	<view class="content">
		<view class="detail-cont">
			<view class="title">全球肾脏新药研究生态驱动创新突破降蛋白瓶颈</view>
			<view class="info">
				<view class="time">
					<u-icon name="clock" color="#fff" size="14"></u-icon>2025-12-30</view>
				<view class="reads ">
					<u-icon name="eye" color="#fff" size="14"></u-icon>10</view>
			</view>
			<view class="video">
				<video class="myVideo" id="myVideo" src="http://bjzmkytcpv.ylrzcloud.com/course/20251117/1763364883777.m3u8"
				@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="@/static/image/my_heads_icon64.png" mode=""></image>
				<view class="infor y-start">
					<view class="name">王小明 主任医师</view>
					<view class="position">江南大学附属医院·肾内科</view>
				</view>
			</view>
			<view class="full-text">
				<view>
					全球肾脏新药研究生态驱动创新突破降蛋白瓶颈，这里展示摘要。
				</view>
			</view>
			<view class="tag">#转载#肾病</view>
		</view>
	</view> 
</template>

<script>
	// import {getAdvList} from '@/api/adv.js'
	import {getDoctorArticleById} from '@/api/doctorArticle.js'
	export default {
		data() {
			return {
				advs:[],
				advImgs:[],
				src: '',
				articleId:null,
				item:{},
			};
		},
		onLoad(option) {
			this.articleId=option.articleId;
			 
		},
		onShow() {
			//this.getAdvList()
			//this.getDoctorArticleById();
		},
		//发送给朋友
		onShareAppMessage(res) {
			return {
				title: this.item.title,
				path: '/pages_index/index/doctorArticleDetails?articleId='+this.articleId,
			}
			
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: this.item.title,
				query:'articleId='+this.articleId,//页面参数
			}
			
		},
		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"
					 })
				}
				
			},
			getAdvList() {
				//联网加载数据
				var that = this;
				var data = {
					advType:10
				};
				getAdvList(data).then(res => {
					if(res.code==200){
						that.advImgs=[];
						that.advs=[];
						res.data.forEach(function(element) {
							if(element.imageUrl!=null&&element.imageUrl!=""){
								that.advs.push(element);
								that.advImgs.push(element.imageUrl);
							}
						});
						
					}else{
						uni.showToast({
							icon:'none',
							title: "请求失败",
						});
					}
				});
			},
			 
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			navTo(url){
				uni.navigateTo({
					url: url
				})
			},
			getDoctorArticleById(){
				let data = {articleId:this.articleId};
				getDoctorArticleById(data).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;
		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>