beiliyou_user_app/pages/doctor/index.vue

<template>
	<view>
		<view class="top-fixed">
			<!-- 这里是状态栏 -->
			<view class="status_bar" :style="{height: statusBarHeight}"></view>
			<view class="top-title">在线问诊</view>
			<!-- 搜索框 -->
			<view class="search-cont">
				<view class="inner">
					<image class="icon-search" src="../../static/images/search.png" mode=""></image>
					<input type="text" :value="searchValue" placeholder="输入关键字" placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" />
				</view>
			</view>
		</view>
		<!-- 快速问诊、找医生 -->
		<view class="online-inquiry" :style="{marginTop:top}">
			<view class="item" @click="navTo('./postConsult')">
				<image class="bg-img" src="../../static/images/online_treat.png" mode=""></image>
				<view class="inner">
					<text class="title">快速问诊</text>
					<text class="sub-title">智能科室 快速匹配</text>
					<image src="../../static/images/fast_ask.png" mode=""></image>
				</view>
			</view>
			<view class="item" @click="navTo('./doctorList')">
				<image class="bg-img" src="../../static/images/chu_query.png" mode=""></image>
				<view class="inner">
					<text class="title">找医生</text>
					<text class="sub-title">全国60万医生任你选</text>
					<image src="../../static/images/doctor_blue.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 专家问诊 -->
		<view class="index-cont" >
			<view class="pub-item">
				<view class="pub-title-box">
					<text class="left">专家问诊</text>
				</view>
				<view class="inner">
					<!-- tab切换 -->
					<view class="pub-tab-box">
						<view class="tab-inner">
							<view 
								v-for="(item,index) in orderTypes" 
								:key="index"
								:class="item.id == param.orderType?'item cases active':'item cases'"
								@click="orderTypeChange(item)"
							>
								<view class="text">
									{{ item.name }}
									<image v-show="item.id ==  param.orderType" class="tab-bg" src="../../static/images/tab_bg.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
					<!-- 案例列表 -->
					<view class="cases-list">
						<view class="item" v-for="(item,index) in list" :key="index">
							<!-- 文字 -->
							<view class="dec-text ellipsis2">{{item.title}}</view>
							<!-- 有图 -->
							<view class="images-box"  v-if="item.imgs!=null"  >
								<view class="img-item" v-for="(subitem,j) in utils.photosToArr(item.imgs)" @click="showImg(item.imgs)" :key="j">
									<image :src="subitem" mode="aspectFill" ></image>
								</view>
							</view>
							<!-- 医生信息 -->
							<view class="doc-info">
								<view class="head">
									<image :src="item.doctorHeadImg" mode="aspectFill"></image>
								</view>
								<view class="name">{{item.doctorName}}</view>
								<view class="line"></view>
								<view class="posit">
									{{utils.getDictLabelName("doctorPosition",item.doctorPosition)}}
								</view>
								<view class="line"></view>
								<view class="address">{{item.hospitalName}}</view>
							</view>
							<view class="answer-box">
								<!-- 文字回答 -->
								<text class="text-inner" v-if="item.orderType == '1' ">{{item.replyContent}}</text>
								<!-- 语音回答 -->
								<view class="voice-inner" v-if="item.orderType == '2'">
									<free-audio 
										startPic='/static/images/play.png' 
										endPic='/static/images/pause.png'
										activeColor="#018C39"
										:audioId="'audio'+index"
										:url='item.replyAudioUrl'
									></free-audio>
								</view>
							</view>
							<view class="read-box">
								<image src="../../static/images/eye.png" mode=""></image>
								<text class="text">{{item.views}}人看过</text>
							</view>
						</view>
						
					</view>
					<Loading :loaded="loaded" :loading="loading"></Loading>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getDepartmentList,getDoctorCase} from '@/api/doctorOrder.js'
	import Loading from "@/components/Loading";
	import tabBg from "@/static/images/tab_bg.png"
	import freeAudio from '@/components/chengpeng-audio/free-audio.vue'
	export default {
		components: {freeAudio,Loading},
		data() {
			return {
				doctorOrderList:[],
				orderTypes: [{name:'全部',id:0,},{name:'图文',id:1,},{name:'语音',id:2,}],
				top:'0px',
				// 状态栏的高度
				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
				searchValue: '',
				tabBg: tabBg, // tab切换背景
				current: 0,
				param: {
				  orderType:0,
				  page: 1,
				  pageSize: 10
				},
				list: [],
				loaded: false,
				loading: false
			};
		},
		onShow() {
			var that=this;
			let info = uni.createSelectorQuery().select(".top-fixed");
	　　　  	info.boundingClientRect(function(data) { //data - 各种参数
				console.log(data.height) 
				that.top=data.height+"px";
	　　    }).exec()
			this.getDoctorCase()
		},
		methods:{
			showImg(urls) {
				 var imgArr =urls.split(',');
				 //预览图片
				 uni.previewImage({
				 	urls: imgArr,
				 	current: imgArr[0]
				 });
			},
			getDoctorCase(){
				let that = this;
				if (that.loaded == true || that.loading == true) return;
				that.loading = true;
				uni.showLoading({
					title:"加载中..."
				})
				getDoctorCase(this.param).then(
					res => {
						that.loading = false;
						that.loaded = res.data.list.length < that.param.pageSize;
						that.param.page = that.param.page + 1;
						that.list.push.apply(that.list, res.data.list);
						uni.hideLoading()
					},
					err => {
						uni.hideLoading()
						uni.showToast({
							title: err.msg ,
							icon: 'none',
							duration: 2000
						});
					}
				);
			},
			orderTypeChange(item) {
				this.param.orderType = item.id;
				this.param.page=1;
				this.list=[];
				this.loaded=false;
				this.loading=false;
				this.getDoctorCase();
			},
			// 访问新页面
			navTo(url){
				uni.navigateTo({
					url: url
				})
			}, 
		}
	}
</script>

<style lang="scss">
	.top-fixed{
		background: #fff;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
	}
	.top-title{
		height: 88upx;
		line-height: 88upx;
		font-size: 42upx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #222222;
		padding-left: 41upx;
		background-color: #FFFFFF;
	}
	.search-cont{
		padding: 16upx 30upx;
		background-color: #FFFFFF;
		.inner{
			box-sizing: border-box;
			width: 100%;
			height: 72upx;
			background: #F7F7F7;
			border-radius: 36upx;
			display: flex;
			align-items: center;
			padding: 0 30upx;
			.icon-search{
				width: 28upx;
				height: 28upx;
				margin-right: 20upx;
			}
			input{
				height: 60upx;
				line-height: 60upx;
				flex: 1;
			}
		}
	}
	
	.online-inquiry{
		box-sizing: border-box;
		width: 100%;
		padding: 20upx;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 59%, rgba(255, 255, 255, 0) 100%);
		display: flex;
		justify-content: space-between;
		.item{
			width: 346upx;
			height: 150upx;
			position: relative;
			.bg-img,
			.inner{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
			}
			.inner{
				box-sizing: border-box;
				z-index: 2;
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding-left: 32upx;
				.title{
					font-size: 30upx;
					line-height: 1;
					font-family: PingFang SC;
					font-weight: bold;
					color: #111111;
					margin-bottom: 20upx;
				}
				.sub-title{
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
				}
				image{
					width: 80upx;
					height: 90upx;
					position: absolute;
					right: 7upx;
					bottom: 7upx;
				}
			}
		}
	}
	
	.index-cont{
		box-sizing: border-box;
		padding: 0 20upx;
		.pub-item{
			background: #FFFFFF;
			border-radius: 16upx;
			margin-bottom: 20upx;
			.pub-title-box{
				box-sizing: border-box;
				padding: 36upx 30upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					font-size: 36upx;
					line-height: 1;
					font-family: PingFang SC;
					font-weight: bold;
					color: #111111;
				}
				.right{
					display: flex;
					align-items: center;
					justify-content: center;
					.text{
						font-size: 26upx;
						line-height: 1;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						margin-right: 10upx;
					}
					image{
						width: 14upx;
						height: 24upx;
						margin-top: 5upx;
					}
				}
			}
			.inner{
				padding: 0 30upx;
			}
			// 健康知识
			.pub-tab-box{
				position: relative;
				.tab-inner{
					padding: 14upx 0 30upx;
					display: flex;
					overflow-x: auto;
				}
				.item{
					font-size: 28upx;
					white-space: nowrap;
					line-height: 1;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					margin-right: 40upx;
					position: relative;
					&:last-child{
						margin-right: 0;
					}
					&.active{
						font-weight: bold;
						color: #333333;
					}
					&.cases{
						margin-right: 60upx;
					}
					.text{
						position: relative;
						z-index: 1;
					}
					.tab-bg{
						width: 72upx;
						height: 28upx;
						position: absolute;
						top: 17upx;
						left: 50%;
						transform: translateX(-36upx);
						z-index: -1;
					}
				}
				
			}
			// 问诊案例
			.cases-list{
				padding-bottom: 10upx;
				.item{
					padding: 30upx 0;
					border-bottom: 1px solid #F0F0F0;
					&:last-child{
						border-bottom: none;
					}
					.dec-text{
						font-size: 32upx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #111111;
						line-height: 48upx;
					}
					.images-box{
						margin-top: 10upx;
						display: flex;
						flex-wrap: wrap;
						.img-item{
							width: 155upx;
							height: 155upx;
							background: #F5F5F5;
							border-radius: 8upx;
							margin: 0 10upx 10upx 0;
							overflow: hidden;
							image{
								width: 100%;
								height: 100%;
							}
							&:nth-child(4n){
								margin-right: 0;
							}
						}
					}
					.doc-info{
						display: flex;
						align-items: center;
						margin: 30upx 0 20upx;
						.head{
							width: 60upx;
							height: 60upx;
							background: #F2F5F9;
							border-radius: 50%;
							margin-right: 20upx;
							overflow: hidden;
							image{
								width: 100%;
								height: 100%;
							}
						}
						.name{
							font-size: 28upx;
							line-height: 1;
							font-family: PingFang SC;
							font-weight: 500;
							color: #111111;
						}
						.line{
							width: 1px;
							height: 22upx;
							background: #DDDDDD;
							margin: 0 16upx;
						}
						.posit,
						.address{
							font-size: 26upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
						}
					}
					.answer-box{
						width: 100%;
						// height: 117upx;
						background: #F5F7F7;
						border-radius: 10upx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						.text-inner{
							// height: 84upx;
							font-size: 28upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #666666;
							line-height: 42upx;
							padding: 15upx;
						}
					}
					.read-box{
						margin-top: 30upx;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						image{
							width: 24upx;
							height: 19upx;
							margin-right: 10upx;
						}
						.text{
							font-size: 24upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
						}
					}
				}
			}
		}
	}
</style>