his_user_miniapp/pages/doctor/index.vue

<template>
	<view class="content">
		<view class="search">
			<view class="search-box">
				<image class="img" src="/static/images/icon_search.png" mode=""></image>
				<input disabled type="text" placeholder="搜索医院/医生/疾病/知识" placeholder-class="input-place">
			</view>
		</view>
		<view class="depts">
			<view class="title-box">
				<view class="line"></view>
				<view class="title">全部科室</view>
			</view>
			<view class="dept-box">
				<view class="dept" @click="navTo('./doctorList?deptId='+item.deptId)" v-for="(item,index) in depts">
					<image   :src="item.iconUrl"></image>
					<view class="dept-name">{{item.deptName}}</view>
				</view>
			</view>
		</view>
		<view class="doctors">
			<view class="title-box">
				<view class="line"></view>
				<view class="title">专家推荐</view>
			</view>
			<view class="doctor-box">
				<view class="doctor" @click="navTo('./doctorDetails?doctorId='+item.doctorId)" v-for="(item,index) in doctors">
					<view class="item">
						<image mode="aspectFill" class="doc-img" :src="item.avatar"></image>
						<view class="right"> 
							<view class="doc-box">
								<view class="doc-name">
									{{item.doctorName}}
								</view>
								<view class="doc-position">{{item.position}}</view>
							</view>
							<view class="hospital">
								{{item.hospitalName}} {{item.deptName}}
							</view>
							<view class="doc-spec">
								<view class="title">擅长:</view>
								<view class="spec ellipsis">{{item.speciality}}</view>
							</view>
							<view class="doc-ping">
								<view class="ping">好评:{{item.pingStar}}分</view>
								<view class="count">咨询量:{{item.orderNumber}}</view>
							</view>
							<view class="doc-price">
								<view class="left">￥
									<text v-for="(price,index) in item.prices">
										{{price.price.toFixed(2)}} <text v-if="index==0">/</text>
									</text>
								</view>
								<view class="btns">
									<view class="btn">
										咨询医生
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	
	import {getDoctorList} from '@/api/doctor.js'
	import {getDepartmentList} from '@/api/department.js'
	export default {
		data() {
			return {
				depts:[],
				doctors:[],
			}
		},
		onShow() {
			
			
			this.getDepartmentList()
			this.getDoctorList()
		},
		methods: {
			
			getDoctorList() {
				//联网加载数据
				var that = this;
				var data = {
					isTui:1,
					pageNum:1,
					pageSize:10,
				};
				getDoctorList(data).then(res => {
					if(res.code==200){
						res.data.list.forEach(function(value,index,array){
							value.prices=JSON.parse(value.priceJson)
						});
						this.doctors=res.data.list;
						console.log(this.doctors)
					}else{
						uni.showToast({
							icon:'none',
							title: "请求失败",
						});
					}
				});
			},
			getDepartmentList(page) {   
				//联网加载数据
				var that = this;
				var data = {
				};
				getDepartmentList(data).then(res => {
					if(res.code==200){
						this.depts=res.data;
					}else{
						uni.showToast({
							icon:'none',
							title: "请求失败",
						});
					}
				});
			},
			navTo(url){
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		
		height: 100%;
		background: #f6f6f6;
	}
</style>
<style scoped lang="scss">
	.content{
		height: 100%;
		padding: 0rpx 20rpx;
		.search{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 15rpx 0rpx;
			.search-box{
				width: 100%;
				height: 60upx;
				line-height: 60upx;
				border-radius: 30upx;
				background-color: #fff;
				padding: 0 30upx;
				display: flex;
				align-items: center;
				transition: all .5s;
				.img{
					width: 30upx;
					height: 30upx;
					margin-right: 10upx;
				}
				input{
					flex: 1;
					font-size: 24upx;
					color: #000;
				}
				.input-place{
					font-size: 24upx;
					color: #878787;
				}
			}
		}
		.depts{
			margin-bottom: 15rpx;
			padding: 15rpx;
			box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);
			background-color: #fff;
			border-radius: 15rpx;
			.title-box{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				.title{
					font-size: 32upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #111111;
				}
				.line{
					margin-right: 15rpx;
					height: 30rpx;
					width: 6rpx;
					background-color: #C39A58;
					
				}
				 
			}
			.dept-box{
				width: 100%;
				padding: 20rpx 0rpx;
				box-sizing: border-box;
				display: flex;
				flex-wrap: wrap;
				align-items: flex-start;
				justify-content: flex-start;
				.dept{
					margin: 15rpx 0rpx;
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					image{
						width:100rpx;
						height:100rpx;
					}
					.dept-name{
						margin-top: 20rpx;
						font-size: 28upx;
						font-family: PingFang SC;
						color: #111111;
						font-weight: bold;
					}
				}
			}
		}
		.doctors{
			padding: 15rpx;
			box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);
			background-color: #fff;
			border-radius: 15rpx;
			.title-box{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				.title{
					font-size: 32upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #111111;
				}
				.line{
					margin-right: 15rpx;
					height: 30rpx;
					width: 6rpx;
					background-color: #C39A58;
					
				}
				 
			}
			.doctor-box{
				width: 100%;
				padding: 20rpx 0rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: flex-start;
				.doctor{
					width: 100%;
					margin-bottom: 15rpx;
					background: #f9f8fe;
					padding: 15rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: flex-start;
					&:last-child{
						margin-bottom: 0rpx;
					}
					.item{
						width: 100%;
						display: flex;
						align-items: flex-start;
						justify-content: flex-start;
						.doc-img{
							width:80rpx;
							height:80rpx;
							border-radius: 50%;
						}
						.right{
							width: calc(100% - 100rpx); 
							margin-left: 20rpx;
							display: flex;
							flex-direction: column;
							align-items: flex-start;
							justify-content: flex-start;
							.doc-box{
								display: flex;
								align-items: center;
								justify-content: space-between;
								.doc-name{
									font-size: 28upx;
									font-family: PingFang SC;
									font-weight: bold;
									color: #111111;
									
								}
								.doc-position{
									margin-left: 50rpx;
									font-size: 26upx;
									font-family: PingFang SC;
									color: #2d2b36;
								}
							}
							.hospital{
								margin-top: 10rpx;
								font-size: 24upx;
								font-family: PingFang SC;
								color: #9a9a9c;
							}
							.doc-spec{
								width: 100%;
								display: flex;
								align-items: center;
								justify-content: flex-start;
								margin-top: 15rpx;
								.title{
									min-width: 55rpx;
									font-size: 24upx;
									font-family: PingFang SC;
									color: #2d2b36;
								}
								.spec{
									margin-left: 10rpx;
									font-size: 24upx;
									font-family: PingFang SC;
									color: #9a9a9c;
								}
							}
							.doc-ping{
								margin-top: 15rpx;
								display: flex;
								align-items: center;
								justify-content: flex-start;
								.ping{
									font-size: 24upx;
									font-family: PingFang SC;
									color: #2d2b36;
								}
								.count{
									margin-left: 10rpx;
									font-size: 24upx;
									font-family: PingFang SC;
									color: #9a9a9c;
								}
							}
							.doc-price{
								width: 100%;
								margin-top: 15rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;
								.left{
									flex: 1;
									font-size: 32upx;
									font-family: PingFang SC;
									color: #C39A58;
								}
								.btns{
									margin-right: 10rpx;
									.btn{
										display: flex;
										align-items: center;
										justify-content: center;
										border: 2rpx solid #C39A58;
										padding: 15rpx 30rpx;
										border-radius: 30rpx;
										font-size: 24upx;
										font-family: PingFang SC;
										color: #C39A58;
									}
									
								
								}
							}
							
						}
					}
					
				}
				
			}
		}
	}
	 
</style>