beiliyou_user_app/pages/doctor/doctorDetail.vue

<template>
	<view>
		<view class="top-cont">
			<!-- 背景图片 -->
			<image class="bg" src="/static/images/doctordetail_top_bg.png" mode=""></image>
			<view class="top-inner">			
				<!-- 这里是状态栏 -->
				<view class="status_bar" :style="{height: statusBarHeight}"></view>
				<view class="back-box" @click="back">
					<image src="../../static/images/back.png" mode=""></image>
				</view>
				<!-- 医生信息 -->
				<view class="doctor-info">
					<view class="inner">
						<!-- 头像 -->
						<view class="head-img">
							<image :src="doctor.headImg" mode="aspectFill"></image>
						</view>
						<!-- 姓名 -->
						<view class="name-box">
							<text class="name">{{doctor.doctorName}}</text>
							<view class="line"></view>
							<text class="other">
								{{utils.getDictLabelName("doctorPosition",doctor.position)}}
							</text>
							<view class="line"></view>
							<text class="other">{{doctor.departmentName}}</text>
							<view class="line"></view>
							<view class="years">从业1年</view>
						</view>
						<!-- 单位 -->
						<view class="unit-box">
							<!-- <view class="level">三甲</view> -->
							<view class="name">{{doctor.hospitalName}}</view>
						</view>
						<!-- 评分等 -->
						<!-- <view class="param-box">
							<view class="item">
								<view class="top">
									<text class="num">{{doctor.pings}}</text>
									<text class="unit">分</text>
								</view>
								<view class="label">评分</view>
							</view>
							<view class="item">
								<view class="top">
									<text class="num">{{doctor.orders}}</text>
									<text class="unit">人</text>
								</view>
								<view class="label">接诊数</view>
							</view>
							<view class="item">
								<view class="top">
									<text class="num">{{doctor.speed}}</text>
									<text class="unit">分钟</text>
								</view>
								<view class="label">响应速度</view>
							</view>
						</view> -->
					</view>
				</view>
				<view class="content">
					<!-- 擅长 -->
					<view class="expertise">
						<image class="label-img" src="../../static/images/sc_word.png" mode=""></image>
						<text :class="showExpert?'text':'text ellipsis3'" id="expert">{{doctor.doctorDesc}}</text>
						<!-- 查看更多按钮 -->
						<view v-if="!showExpert" class="show-more" @click="showMoreExpert">
							<image class="mask" src="../../static/images/mask.png" mode=""></image>
							<view class="inner">
								<text class="btn">查看全部</text>
								<image src="../../static/images/arrow3.png" mode=""></image>
							</view>
						</view>
					</view>
					<!-- 问诊方式 -->
					<view class="mode-box">
						<view v-for="(price,index) in prices" :class="price.priceId == priceId?'item active':'item'" @click="choseMode(price)">
							<image v-if="price.priceType==1" class="img" src="../../static/images/picture_ask.png" mode=""></image>
							<image v-if="price.priceType==2" class="img" src="../../static/images/phone_ask.png" mode=""></image>
							<view class="info">
								<text v-if="price.priceType==1" class="label">图文问诊</text>
								<text v-if="price.priceType==2" class="label">电话问诊</text>
								<view class="price" v-if="price.priceType==1">
									<text class="num">{{price.price}}</text>
									<text class="unit">元</text>
									<text class="gray">/次</text>
								</view>
								<view class="price" v-if="price.priceType==2">
									<text class="num">{{price.price}}</text>
									<text class="unit">元</text>
									<text class="gray">{{price.times}}分</text>
								</view>
							</view>
							<!-- 选中的角标 -->
							<image v-if="price.priceId == priceId" class="active-img" src="../../static/images/sel_right50.png" mode=""></image>
						</view>
						 
					</view>
					 
				</view>
			
			</view>
		</view>
		
		<!-- 底部去支付按钮 -->
		<view class="btn-foot">
			<view class="menu-box">
				<view class="item" @click="goHome">
					<image src="../../static/images/back_home.png" mode=""></image>
					<text>首页</text>
				</view>
				<view class="item" @click="changeFollow">
					<image v-if="!isFollow" src="../../static/images/focus.png" mode=""></image>
					<image v-show="isFollow" src="../../static/images/focus_sel.png" mode=""></image>
					<text>关注</text>
				</view>
			</view>
			<!-- <view class="btn" @click="submitOrder()">问诊</view> -->
		</view>
	</view>
</template>

<script>
	import {uploadOSS} from '@/api/common.js'
	import {getDoctorDetail,create} from '@/api/doctorOrder.js'
	export default {
		data() {
			return {
				doctorId:null,
				doctor:{},
				prices:[],
				priceId:null,
				
				// 状态栏的高度
				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
				// 是否显示全擅长文字
				showExpert: true,
				
				// 是否关注
				isFollow: false
			};
		},
		onLoad(option) {
			this.doctorId=option.doctorId;
			
		},
		onShow() {
			this.getDoctorDetail()
		},
		methods: {
			getDoctorDetail(){
				let data = {doctorId:this.doctorId};
				var that=this;
				getDoctorDetail(data).then(
					res => {
						if(res.code==200){
							 this.doctor=res.doctor;
							 this.prices=res.prices;
							 setTimeout(function(){
								  that.getExpertHeight()
							 },200)
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			back() {
				uni.navigateBack()
			},
			// 获取擅长文字是否超过三行，超过三行显示“查看全部”
			getExpertHeight() {
				const query = uni.createSelectorQuery().in(this);
				query.select('#expert').boundingClientRect(data => {
					let containerLength = data.height // 文本内容高度
					console.log(containerLength)
					let lineHeight = 24 // 行高
					if(containerLength / lineHeight > 3){
					  	// 执行代码
						this.showExpert = false
					} else {
						this.showExpert = true
					}
				}).exec();
			},
			// 查看更多擅长文字
			showMoreExpert() {
				this.showExpert = true
			},
			// 选择问诊方式
			choseMode(item) {
				this.priceId = item.priceId
			},
			
			// 回到首页
			goHome() {
				uni.switchTab({
					url: '/pages/home/index'
				})
			},
			// 关注，取消关注
			changeFollow() {
				let that = this
				if(that.isFollow) {
					uni.showModal({
						title: '提示',
						content: '确定要取消关注吗？',
						cancelText: '取消',
						confirmText: '确定',
						success: res => {
							if (res.confirm) {
								that.isFollow = false
							}
						},
					})
				} else {
					that.isFollow = true
				}
			},
			submitOrder() {
				
				if(this.priceId==null){
					uni.showToast({
						icon:'none',
						title: '请选择问诊类型',
					});
					return;
				}
				 uni.navigateTo({
				 	url:"submitOrder?doctorId="+this.doctorId+"&priceId="+this.priceId
				 }) 
				 return;
				 
				
			},
		}
	}
</script>

<style lang="scss">
	.top-cont{
		
		width: 100%;
		height: 400upx;
		position: relative;
		.bg{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}
		.top-inner{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
			.back-box{
				height: 88upx;
				padding-left: 22upx;
				display: flex;
				align-items: center;
				image{
					width: 40upx;
					height: 40upx;
				}
			}
			.doctor-info{
				box-sizing: border-box;
				padding: 0 20upx;
				margin-top: 70upx;
				.inner{
					box-sizing: border-box;
					// height: 347upx;
					background: #FFFFFF;
					border-radius: 16upx;
					position: relative;
					padding: 90upx 30upx 0;
					.head-img{
						width: 128upx;
						height: 128upx;
						background: #EDF1F4;
						border: 4upx solid #FFFFFF;
						border-radius: 50%;
						overflow: hidden;
						position: absolute;
						left: 26upx;
						top: -63upx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.name-box{
						display: flex;
						align-items: center;
						line-height: 1;
						font-family: PingFang SC;
						.name{
							font-size: 36upx;
							font-weight: bold;
							color: #111111;
						}
						.line{
							width: 1px;
							height: 26upx;
							background: #DDDDDD;
							margin: 0 20upx;
						}
						.other{
							font-size: 30upx;
							font-weight: 500;
							color: #333333;
						}
						.years{
							padding: 0 10upx;
							height: 36upx;
							line-height: 36upx;
							font-size: 24upx;
							font-weight: 500;
							color: #CEA764;
							background: #FFF1DD;
							border-radius: 6upx;
						}
					}
					.unit-box{
						display: flex;
						margin-top: 30upx;
						.level{
							padding: 0 10upx;
							height: 30upx;
							line-height: 30upx;
							font-size: 22upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #FFFFFF;
							background: #018C39;
							border-radius: 10upx 4upx 10upx 4upx;
							margin-right: 12upx;
						}
						.name{
							font-size: 30upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
							line-height: 30upx;
						}
					}
					.param-box{
						padding: 0 50upx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 50upx;
						.item{
							display: flex;
							flex-direction: column;
							line-height: 1;
							font-family: PingFang SC;
							.top{
								display: flex;
								align-items: flex-end;
								color: #CEA764;
								margin-bottom: 18upx;
								.num{
									font-size: 36upx;
									font-weight: bold;
								}
								.unit{
									font-size: 24upx;
								}
							}
							.label{
								font-size: 24upx;
								font-weight: 500;
								color: #666666;
								text-align: center;
							}
						}
					}
				}
			}
		}
	}
	.content{
		padding: 0 20upx;
		margin-bottom: 141rpx;
	}
	.expertise{
		box-sizing: border-box;
		min-height: 207upx;
		background: #FFFFFF;
		border: 4upx solid #FFFFFF;
		border-radius: 16upx;
		padding: 30upx 30upx;
		display: flex;
		position: relative;
		.label-img{
			width: 56upx;
			height: 26upx;
			flex-shrink: 0;
			position: absolute;
			top: 42upx;
			left: 30upx;
		}
		.text{
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			line-height: 48upx;
			text-indent: 70upx;
			&.ellipsis3{
				overflow:hidden;
				text-overflow:ellipsis;
				display:-webkit-box; 
				-webkit-box-orient:vertical;
				-webkit-line-clamp: 3;
			}
		}
		.show-more{
			display: flex;
			align-items: center;
			position: absolute;
			right: 25upx;
			bottom: 35upx;
			.mask{
				width: 56upx;
				height: 34upx;
			}
			.inner{
				background-color: #FFFFFF;
				display: flex;
				align-items: center;
				.btn{
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #018C39;
				}
				image{
					width: 14upx;
					height: 25upx;
					margin-left: 10upx;
				}
			}
		}
	}
	.mode-box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20upx;
		.item{
			box-sizing: border-box;
			width: 345upx;
			height: 150upx;
			background: #FFFFFF;
			border: 2upx solid #FFFFFF;
			border-radius: 16upx;
			padding: 33upx 40upx;
			display: flex;
			align-items: center;
			.img{
				width: 84upx;
				height: 84upx;
				margin-right: 26upx;
			}
			.active-img{
				width: 51upx;
				height: 51upx;
				position: absolute;
				right: 0;
				bottom: 0;
				z-index: 1;
				display: none;
			}
			&.active{
				position: relative;
				border: 2upx solid #018C39;
				.active-img{
					display: block;
				}
			}
			.info{
				box-sizing: border-box;
				height: 84upx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 5upx 0 4upx;
				font-family: PingFang SC;
				.label{
					font-size: 32upx;
					line-height: 1;
					font-weight: bold;
					color: #333333;
				}
				.price{
					display: flex;
					align-items: flex-end;
					color: #018C39;
					.num{
						font-size: 30upx;
						font-weight: bold;
						line-height: 1;
					}
					.unit{
						font-size: 24upx;
						line-height: 26upx;
					}
					.gray{
						font-size: 24upx;
						color: #999999;
						line-height: 26upx;
					}
				}
			}
		}
	}
	 
		
	.btn-foot{
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		height: 121upx;
		background: #FFFFFF;
		
		display: flex;
		align-items: center;
		justify-content: space-between;
		.menu-box{
			margin-left: 32rpx;
			display: flex;
			align-items: center;
			.item{
				display: flex;
				align-items: center;
				flex-direction: column;
				margin-right: 50upx;
				&:last-child{
					margin-right: 0;
				}
				image{
					width: 36upx;
					height: 36upx;
					margin-bottom: 10upx;
				}
				text{
					font-size: 20upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					text-align: center;
				}
			}
		}
		.btn{
			margin-right: 32rpx;
			width: 527upx;
			height: 88upx;
			line-height: 88upx;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			background: #018C39;
			border-radius: 44upx;
			text-align: center;
		}
	}
</style>