hengmei-two/pagesB/doctorDetail/doctorDetail.vue

<template>
	<view>
		<!-- 状态栏 -->
		<status-nav :titleVal="'医生'" :statusTitle="true"></status-nav>
		<!-- 自定义二级分类 -->
		<!-- 列表 -->
		<view :style="{paddingTop: statusHeight+'px'}" class=" pad-x180">
			<!-- 新闻视频 -->
			<view class="news-video-img" v-if="video!=''">
				<image :src="videoImg==''?doctorObj.doctor_extra.headImg:videoImg" mode="widthFix"></image>
				<view class="news-video-btn" @tap.stop="playEv(video)">
					<image src="/static/public/video.png" mode="widthFix"></image>
				</view>
			</view>
			<view v-if="isLoading" class="bacf mar-s20 pad-s20 pad-x40" :style="{'margin-top':video==''?'20rpx':0}">
				<view class=""></view>
				<view class="pad-zy20">
					<rich-text class="fon26 col3" :nodes="detailInfo"></rich-text>
				</view>
			</view>
			<view id="daoh" :class="isTop?'isTop':''" class="isTops" :style="{top:(statusHeight-10)+'px'}">
				<view class="bacf pad-zy32 mar-s20 pad-sx20">
					<cate-pu :isaaaa="1" :newCurrent="newCurrent*1" :activeb="publicColor" @choosecateEv="chooseTwo"  :newbmo="'#F2F2F2'" :isCenter="false" :newcateList="cateList"></cate-pu>
				</view>
			</view>
			<view class="mar-zy32 mar-s20" v-if="dataList.length!=0"><list-pu @chooseLike="chooseLike" @praise="praiseEv" @comfirmev="comfirmev" :list="dataList"></list-pu></view>
			<view style="margin-top: 8%;" v-if="dataList.length==0"><list-pu :list="dataList" @praise="praiseEv"></list-pu></view>
		</view>
		<!-- 分享 -->
		<view @tap="shareImgEv" class="detail-cart-box" style="display: flex;justify-content: center;align-items: center;width: 112rpx;height: 112rpx;border-radius: 100%;background-color: #0fac29;bottom: 160rpx;color: #FFFFFF;">
			<image class="zanw-img" src="/static/public/share-pyq.png" mode="aspectFill" style="width: 64rpx;height: 81rpx;"></image>
		</view>
		<!-- 底部客服 -->
		<!-- <public-customer :nbottom="100"></public-customer> -->
		<!-- 用户信息授权，手机号授权 -->
		<auth-userInfo-mobileInfo></auth-userInfo-mobileInfo>
		<!-- 底部导航 -->
		<view class="posixzy">
			<bottom-tab></bottom-tab>
		</view>
	</view>
</template>

<script>
	import {collectionEV,cancleCollectionEV} from '@/jsFile/publicAPI.js';
	import bottomTab from '@/components/bottom-tab.vue';
	import { base64ToPath } from '@/jsFile/base64-src.js';
	export default {
		components:{
			bottomTab
		},
		data() {
			return {
				cateList:[],
				dataList:[],
				newCurrent:0,
				category_id:0,//栏目ID
				moImg:'/static/public/logo.png',
				doctorObj:{},//医生详情
				page:1,
				size:10,
				total:'',//总数
				isZanw:true,
				chuTop:'',
				isTop:false,
				isLoading:false,
				detailInfo:'',
				peopleJian:'',
				doctorId:'',//医生id
				shareFlag:true, //分享
				videoImg:'', //视频封面图
				video:'', //视频链接
				shareImg:'', //分享图
			}
		},
		computed: {
			// 主题颜色
			publicColor() {
				return this.$store.state.publicColor
			},
			statusHeight() {
				return this.$store.state.statusHeight
			}
		},
		onShareAppMessage(e) {
			if(this.shareImg!==''){
				let shareObj = {
					title: this.doctorObj.doctor_extra.name,
					path: `/pagesB/doctorDetail/doctorDetail?invite_code=${uni.getStorageSync('invite_code')}&doctor_id=${this.doctorId}`, // 默认是当前页面，必须是以‘/’开头的完整路径
					imageUrl: this.$hostApi + this.shareImg,
				};
				return shareObj;
			}else{
				let shareObj = {
					title: this.doctorObj.doctor_extra.name,
					path: `/pagesB/doctorDetail/doctorDetail?invite_code=${uni.getStorageSync('invite_code')}&doctor_id=${this.doctorId}`, // 默认是当前页面，必须是以‘/’开头的完整路径
				};
				return shareObj;
			}
		},
		onPageScroll(e) {
			if((this.chuTop - this.statusHNH) - e.scrollTop*1 <= 0) this.isTop = true
			else this.isTop = false
		},
		onReachBottom() {//触底事件
			// console.log(this.total,this.dataList.length);
			if(this.total!=this.dataList.length){
				this.page++
				if(this.category_id==0) this.category_id = this.cateList[0].id
				this.checkConList(this.category_id)//调用自主预约列表事件
			} else {
				if(this.isZanw) this.$toolAll.tools.showToast('暂无更多列表','none',1000)
				this.isZanw = false
			}
		},
		onShow() {
			// if(uni.getStorageSync('phone_active')!=0 && uni.getStorageSync('is_active')!=0){
			// 	this.checkConList(this.category_id)
			// }
		},
		onLoad(options) {
			const query = wx.createSelectorQuery()
			query.select('#daoh').boundingClientRect((rect) => {
				this.chuTop = rect.top
			}).exec()
			this.doctorId = options.doctor_id;
			if(uni.getStorageSync('phone_active')!=0 && uni.getStorageSync('is_active')!=0){
				this.checkDoD(this.doctorId)
			}
		},
		methods: {
			// 全屏播放
			playEv(url){
				uni.navigateTo({
					url: '/pagesB/video/playVideo?src='+ this.$hostApi + url
				})
			},
			// 分享图分享
			shareImgEv(){
				this.$toolAll.tools.showToast('分享图生成中...','none',10000);
				if(this.shareFlag){
					this.shareFlag = false;
					this.$requst.post('staff/doctor-share',{id:this.doctorId}).then(res=>{
						base64ToPath(res.data.share_img).then(path=>{
							uni.hideToast();
							this.$toolAll.tools.showToast('正在调起分享...');
							wx.showShareImageMenu({
								path: path,
								success:(res=>{
									this.shareFlag = true;
									this.$requst.post('user/record', {
										type: 'doctor',
										action: 'share',
										id: this.doctorId
									}).then(res => {
										console.log('分享成功：', res);
									}, error => {})
									// 调用tools.js中的种植埋点事件
									this.$toolAll.tools.plantPoint(4);
								}),
								fail:(err=>{
									this.shareFlag = true;
								})
							})
						})
					})
				} else {this.$toolAll.tools.showToast('请勿重复点击');}
			},
			chooseLike(e){//收藏事件
				// console.log(this.dataList[e].is_collected);
				if(this.dataList[e].is_collected==0){
					this.dataList[e].is_collected = 1;
					this.dataList[e].collects++;
					// 调用收藏事件
					collectionEV({action:'collect',archive_id:this.dataList[e].id})
				}
			},
			praiseEv(e){ // 点赞事件
				// console.log(this.dataList[e].is_collected);
				// if(this.dataList[e].is_liked==0){
					this.dataList[e].is_liked = 1;
					this.dataList[e].likes++;
					// if(this.dataList[e].likes>1000) this.dataList[e].likes = '999+'
					// 调用收藏事件
					collectionEV({action:'like',archive_id:this.dataList[e].id})
				// }
			},
			comfirmev(e){//确认取消收藏事件
				this.dataList[e].is_collected = 0
				this.$toolAll.tools.showToast('正在取消...','loading');
				this.dataList[e].collects--;
				// 调用取消收藏事件
				cancleCollectionEV({action:'collect',archive_id:this.dataList[e].id})	
			},
			checkDoD(doctor_id){
				this.$requst.post('user/doctor-info',{doctor_id:doctor_id}).then(res=>{
					console.log('医生详情：',res);
					if(res.code==0){
						this.doctorObj = res.data;
						// 富文本
						this.peopleJian = this.$toolAll.tools.escape2Html(this.doctorObj.doctor_extra.summary);
						this.detailInfo = this.$toolAll.tools.escape2Html(this.doctorObj.doctor_extra.content);
						this.video = this.doctorObj.doctor_extra.video;
						if(this.doctorObj.doctor_extra.video_img){
							this.videoImg = this.$hostApi + this.doctorObj.doctor_extra.video_img;
						}
						this.shareImg = this.doctorObj.doctor_extra.share_img;
						// console.log('视频链接',this.video,this.videoImg)
						this.checkConList(this.category_id);
						this.isLoading = true;
					}
				},error=>{})
			},
			checkConList(category_id){//查询收藏列表
				let params = {
					doctor_id:this.doctorObj.id,
					category_id:category_id,
					page:this.page,
					size:this.size
				}
				this.$requst.post('archives/category',params).then(res=>{
					if(res.code==0){
						// 栏目类别
						this.cateList = [];
						if(res.data.category.length!=0){
							res.data.category.forEach((item,index)=>{
								let cateObj = {
									id:item.id,//栏目ID 
									title:item.title,//栏目名称
									active:item.active,//是否选中
									model_id:item.model_id,//模型ID
									model_name:item.model_name,//模型标识
									sort:item.sort,
									
								}
								if(item.title=='日记分享') {
									this.cateList.unshift(cateObj)
								} else {
									this.cateList.push(cateObj)
								}
							})
						}
						// 获取列表
						if(this.page==1) {
							this.dataList = [];
						} 
						this.total = res.data.list.total
						if(res.data.list.list.length!=0){
							res.data.list.list.forEach(item=>{
								let fabImg = '';
								if(item.published_headimgurl!='' && item.published_headimgurl!=null) fabImg = this.$http + item.published_headimgurl
								let tObj = {
									category_id:item.category_id,//栏目ID
									id:item.id,
									is_collected:item.is_collected,//是否已收藏
									collects:item.collects,//收藏量
									views:item.views,//查看量
									main_img:this.$http + item.cover,//封面图
									video:this.$http + item.video,//视频地址
									title:item.title,//标题
									content:item.subtitle,//副标题
									head_img:fabImg || '/static/public/logo.png',//发布者头像
									name:item.published_by || '恒美植发',//发布者昵称
									isVideo:item.video.includes(".mp4"),//是否是视频
									likes:item.likes,//点赞数量
									is_liked:item.is_liked,//是否已点赞
									tag_text:item.tag_text,
								}
								this.dataList.push(tObj);
							})
						}
					}
				},error=>{})
			},
			chooseTwo(index){
				this.newCurrent = index
				this.isZanw = true
				this.page = 1
				this.category_id = this.cateList[index].id
				this.checkConList(this.category_id)
 			},
		}
	}
</script>

<style scoped>
	.news-video-img{
	 height: 500rpx;
	 position: relative;
	 overflow: hidden;
	}
	.news-video-img>image{
	 width: 100%;
	 min-height: 500rpx;
	}
	.news-video-btn{
	 width: 118rpx;
	 height: 118rpx;
	 border-radius: 100%;
	 overflow: hidden;
	 position: absolute;
	 left: 50%;
	 top: 50%;
	 transform: translate(-50%,-50%);
	}
	.news-video-btn image{
	 width: 100%;
	 height: 100%;
	}
	.news-video-content{
		width: 100vw;
	 height: 100vh;
	 background-color: rgba(0,0,0,.5);
	 position: fixed;
	 left: 0;
	 top: 0;
	 z-index: 9;
	}
	video#my-video{
	width: 100vw;
	 min-height: 400rpx;
	 position: fixed;
	 left: 0;
	 top: 50%;
	 transform: translateY(-50%);
	 z-index: 999;
	}
</style>