siyu_app/pages/doctor/doctorArticleDetails.vue

<template>
	<view class="content">
		<view class="detail-cont">
			<view class="title">{{item.title}}</view>
			<view class="info">
				<view class="reads">阅读数：{{item.views}}</view>
				<view class="time">{{item.createTime}}</view>
			</view>
			<view class="video"  v-if="item.videoUrl!=null">
				<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>
		<!-- 咨询按钮 -->
		<view class="inquiry"  >
			<view class="content"  @click="navTo('/pages/doctor/doctorDetails?doctorId='+item.doctorId)">
				<image  mode="aspectFill"  :src="item.avatar" ></image>
				<text class="text">{{item.doctorName}}</text>
			</view>
			
		</view>
		<view class="ad">
			<u-swiper
					:list="advImgs"
					indicator
					indicatorMode="line"
					circular
					@click="handleAdvClick"
			></u-swiper>
		</view>
		
		<!-- 分享弹窗 -->
		<u-popup :show="showShare" @close="showShare = false" >
			<share-box :shareItem="shareItem"  @closeShare='showShare = false' ></share-box>
		</u-popup>
	</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:{},
				showShare:false,
				shareItem:{ imageUrl:"",title:"",path:"",isMini:true },
			};
		},
		onLoad(option) {
			this.articleId=option.articleId;
		},
		onShow() {
			if(!this.$isLogin()) {
				uni.navigateTo({
					url: '/pages/auth/loginIndex'
				})
				return
			}
			this.getAdvList()
			this.getDoctorArticleById();
		},
		//发送给朋友
		onShareAppMessage(res) {
			return {
				title: this.item.title,
				path: '/pages_doctor/doctorArticleDetails?articleId='+this.articleId,
			}
			
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: this.item.title,
				path: '/pages_doctor/doctorArticleDetails?articleId='+this.articleId,
			}
		},
		onNavigationBarButtonTap(e) {
			//#ifdef APP-PLUS
			this.shareItem.healthId= this.articleId;
			this.shareItem.title= this.item.title;
			this.shareItem.imageUrl="../../static/logo.png";
			this.shareItem.isMini=true;
			this.shareItem.path='/pages_doctor/doctorArticleDetails?articleId='+this.articleId;
			let cdn=uni.getStorageSync('h5Path');
			this.shareItem.url=cdn+'/pages/doctor/doctorArticleDetails?articleId='+this.articleId;
			this.showShare=true;
			//#endif 
			
		},
		methods:{
			handleAdvClick(index){
				var ad=this.advs[index];
				if(ad.showType==1){
					uni.setStorageSync('url',ad.appAdvUrl);
					uni.navigateTo({
						url:"h5"
					})
				}
				else if(ad.showType==2){
					uni.navigateTo({
						url:ad.appAdvUrl
					})
				}
				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" scoped>
	page{
		height: 100%;
	}
	.content{
		height: 100%;
	}
	.detail-cont{
		width: 100%;
		flex: 1;
		padding: 40upx;
		overflow-y: auto;
		.title{
			font-size: 40upx;
			font-family: PingFang SC;
			// font-weight: bold;
			color: #222222;
			line-height: 70upx;
		}
		.info{
			display: flex;
			align-items: center;
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 48upx;
			margin: 23upx 0;
			.reads{
				margin-right: 30upx;
			}
		}
		.full-text{
			width: 100%;
			font-size: 36upx;
			font-family: PingFang SC;
			// font-weight: 500;
			color: #222222;
			line-height: 60upx;
		}
		.video{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			video{
				width: 100%;
			}
		}
	}
	.ad{
		// margin-bottom: 50rpx;
		width: 100%;
		padding: 15rpx;
		 
	}
	.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 #C39A58;
			}
			.text{
				margin-top: 15upx;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #C39A58;
			}
			 
		}
		
	}
	 
</style>