mabao/pages/doctor_related/doctor_info.vue

<template>
	<view class="main">
		<view>
			<view class="pr det-body">
				<image class="det-bg-img" mode="scaleToFill" src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/img/doctorbanner.png"></image>
				<view class="det-head pr plr15 bdr8 m-bg-white mlr15 pt25">
					<view class="m-xstart pr m-bottom-line pb25 margin-bottom-sm">
						<view class="m-flex overflow mr10">
							<view class="flex align-center">
								<text class="dpb fb f16">{{doctor.name}}</text>
								<text class="dpb f14 m-gray-small ml5" v-for="(itm,index) in doctor.label" :key="index">{{itm}}</text>
							</view>
							<view class="dpb m-flex margin-top-sm">科室：{{doctor.office.name}} {{doctor.qualification.name}}</view>
							<view class="m-xend mt12">
								<view class="f14 m-gray-big">评分：<text class="m-theme">{{doctor.score}}</text>
									<text class="f11 margin-left-xs">分</text>
								</view>
								<view class="f14 ml15 m-gray-big">服务：<text class="m-theme">{{doctor.service_persons}}</text>
									<text class="f11">人</text>
								</view>
								<view class="m-flex ml15">距离：{{parseInt(doctor.distance/1000)}}km</view>
							</view>
						</view>
						<view class="pr pt5">
							<view class="follow_style" @click="submitCollect" :data-index="index" :data-id="doctor.id" v-if="doctor.is_collect==0">
								关注
							</view>
							<view class="follow_style" @click="submitCollect" :data-index="index" :data-id="doctor.id" style="background-color: #fff;color: rgb(208, 105, 150);border:2rpx solid rgb(208, 105, 150);"
							 v-else>
								已关注
							</view>
							<u-image shape="circle" width="120rpx" height="120rpx" :src="doctor.avatar"></u-image>
						</view>
					</view>
					<u-read-more :toggle="true" show-height="0" :shadow-style="shadowStyle" close-text=" " open-text=" ">
						<rich-text :nodes="doctor.intro"></rich-text>
					</u-read-more>
				</view>
			</view>
			<view class="gridstyle padding-sm margin-lr-sm">
				<u-grid :col="3" :border="false">
					<view @click="gotoxuanze" data-index="1">
						<u-grid-item>
							<u-image width="120rpx" height="120rpx" src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/toolimg/indexphone.png"
							 shape="circle"></u-image>
							<view class="grid-text margin-top-sm">电话咨询</view>
						</u-grid-item>
					</view>
					<view class="" @click="gotoxuanze" data-index="2">
						<u-grid-item>
							<u-image width="120rpx" height="120rpx" src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/toolimg/indextu.png"
							 shape="circle"></u-image>
							<view class="grid-text margin-top-sm">图文咨询</view>
						</u-grid-item>
					</view>
					<view class="" @click="gotoxuanze" data-index="3">
						<u-grid-item>
							<u-image width="120rpx" height="120rpx" src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/toolimg/indexmen.png"
							 shape="circle"></u-image>
							<view class="grid-text margin-top-sm">门诊预约</view>
						</u-grid-item>
					</view>
				</u-grid>
				<u-line color="#efefef" :hair-line="true" />
				<view v-if="!isjigou" class="text-lg text-center margin-top-sm" style="color: rgb(238, 170, 63);">
					平均回复低至1分钟
				</view>
				<view v-else class="text-lg margin-top-sm" style="color: rgb(238, 170, 63);border-bottom: 3rpx solid rgb(238, 170, 63); width: 410rpx;"
				 @click="xuantime">
					已选时间：{{daytime}}
					<u-picker mode="multiSelector" @confirm="callbacktime" v-model="show" :default-selector='[0, 1]' range-key="start_time_period"
					 :range="multiSelector"></u-picker>
				</view>
			</view>
			<view v-if="isjigou" bindtap="goAdrPostion" class="pr pt10 pb10 margin-lr-sm margin-top-sm m-bg-white" style="border-radius: 16rpx;box-shadow: 0 0 50rpx 0 rgba(0, 0, 0, 0.1);">
				<view class="pr pt15 pb15">
					<view class="f18 fb plr15">机构地址</view>
					<view class="pr m-xcenter plr15 mt15">
						<image class="dpb" mode="scaleToFill" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANCAYAAAB/9ZQ7AAABx0lEQVQoU2WSP2gTcRTHv+/dH4IdmkVcFAvSgihNLi1SRKE4uNhek4I6iNLY5AQnB93dpHNBMEltIbgUc5pUF0F0cDBIk2twKiJBBAWHVgOl5u5+TxrINeCbvnz5Pnh8vo8wMBPOE8NXx6YIcpKJfu74Ox/aa9n9foT6IrFYtVjjMkHOHO7TV6Ww6JVm3x94vXBy4fkombGPUMEwEW+oMPRY44QAs0TcDfzwUms1Xe+FrXztJURsIdz0inPPkgsv4t5aZjd5u3qDGGUiqjeK9nmauLo+rOLmDyJuNQr2VMrZWBJR90DacrMwc9/K1+qAmvQDjNB4rnJcg/aN2Kg2ClcyqTuvP0nYnWQ2vM3CjGU5tQpE5gPfP03T0+/036OdLwBinT19bCjmn2JCPoBa6SreHtJpWwTdzvf2WO/mRM7NaqQ/BeFN92949/Oe3z57xBgxTe0xgMuhCm9trWTKfXSUcmquKJUGUQBgF0AcIroQvfKKtg2QRJyt7PpRMmKbosITEWfW2vD3zzVXr/2KOEfFOO4FFu0tRJnE+h8odbFRmmv912DfSObcB8zGI5HgerOYqQy+Q3TGofmQE7nx9FZp3h0MHuh/o0mz0Kcr4U0AAAAASUVORK5CYII="
						 style="width: 10px; height: 12px;"></image>
						<view class="m-flex tl ml5">xxxxxxxxxxxxxxxxxxxxxx</view>
					</view>
					<view class="pr m-xcenter plr15 mt10">
						<view class="m-flex tl m-gray-small f12 pl15 mr5">地址：xxxxxxxxxxxxxxxxxx</view>
						<view class="pt2 pb2 plr10 f12 m-gray-small br-gray-letter bdr30" v-if="true">
							{{0}}km
						</view>
						<view class="pt2 pb2 plr10 f12 m-gray-small br-gray-letter bdr30" wx:else>暂无距离</view>
						<text class="dpb iconfont icon-arrow-right m-gray-letter f20"></text>
					</view>
				</view>
			</view>
			<view class="margin-lr-sm mt15 bg-white" style="border-radius: 16rpx; box-shadow: 0 0 50rpx 0 rgba(0, 0, 0, 0.1);"
			 v-if="doctor.evaluate.length!=0">
				<view class="f18 fb flex align-center plr15 pt15">患者评价 <text class="f12 m-gray-letter margin-left-xs">({{doctor.evaluate.length}})</text>
				</view>
				<view class="cu-list menu-avatar card-menu">
					<view class="cu-item" v-for="(item,index) in doctor.evaluate" :key="index">
						<view class="cu-avatar round lg" :style="'background-image:url('+item.user.avatar+');'"></view>
						<view class="content">
							<view class="text-grey margin-right-sm">
								{{item.user.nickname}}
								<u-rate :count="5" v-model="item.score" :disabled="true"></u-rate>
							</view>
							<view class="text-gray text-sm flex">
								<text class="text-cut">
									{{item.content}}
								</text>
							</view>
						</view>
						<view class="action" style="width: 124rpx;">
							<view class="text-grey text-xs">{{item.created_at}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-tabbar-height"></view>
			<view class="cu-tabbar-height"></view>
		</view>
		<view class="cu-bar bg-white tabbar border shop" style="position: fixed; bottom: 0; z-index: 99;width: 100%;">
			<button class="action text-orange" open-type="share" style="width: 200rpx;">
				<view class="cuIcon-share text-orange">
				</view>
				分享
			</button>
			<view v-if="barindex==1" class="submit text-white" @click="phonezixun" style="background-color: rgb(11,115,186);">电话咨询</view>
			<view v-else-if="barindex==2" class="submit text-white" @click="phonezixun" style="background-color: rgb(11,115,186)">图文咨询</view>
			<view v-else class="submit text-white" @click="phonezixun" style="background-color: rgb(11,115,186)">门诊预约</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			this.doctorid = options.id
			this.daytime = options.time
			console.log(options)
		},
		mounted() {
			this.getdoctorInfo()
			this.gettime()
		},
		data() {
			return {
				doctorid: "",
				doctor: {},
				shadowStyle: {
					backgroundImage: "none"
				},
				isjigou: false,
				barindex: 1, //显示按钮
				daytime: "",
				multiSelector: [],
				params: {
					year: false,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				show: false,
				istime: false,
			}
		},
		methods: {
			getdoctorInfo: async function() {
				let res = await this.$request.post("/api/v1/docter/docterDetail", {
					docter_id: this.doctorid,
					latitude: uni.getStorageSync("latitude"),
					longitude: uni.getStorageSync("longitude")
				})
				this.doctor = res
				console.log(res)
			},
			submitCollect: async function(e) {
				let res = await this.$request.post("/api/v1/collection/submitCollect", {
					type: 1,
					relation_id: e.currentTarget.dataset.id
				})
				if (res.status == 0) {
					if (res.data.is_collect == 0) {
						uni.showToast({
							title: "取消成功",
							icon: "none"
						})
						this.doctor.is_collect = res.data.is_collect
					} else {
						uni.showToast({
							title: "关注成功",
							icon: "none"
						})
						this.doctor.is_collect = res.data.is_collect
					}
				}
			},
			gettime: async function() {
				let res = await this.$request.post("/api/v1/docter/schedulePeriodList", {
					docter_id: this.doctorid
				})
				console.log(res)
				if (res.status == 0) {
					// res.data.list.forEach(item => {
					// 	item.start_time_period = item.start_time_period + '-' + item.end_time_period
					// })
					// this.multiSelector.push(res.data.dates)
					// this.multiSelector.push(res.data.list)
					// this.showtime = res.data.dates[0] + ' ' + res.data.list[0].start_time_period
				}
			},
			gotoxuanze(e) {
				this.barindex = e.currentTarget.dataset.index
				if (e.currentTarget.dataset.index == 3) {
					this.isjigou = true
				} else {
					this.isjigou = false
				}
			},
			phonezixun() {
				uni.navigateTo({
					url: "info_write?doctor=" + JSON.stringify(this.doctor) + "&type=" + this.barindex + "&time=" + this.daytime
				})
			},
			xuantime() {
				this.show = !this.show
			},
		}
	};
</script>

<style scoped>
	@import url("../index/mine.css");

	.gridstyle {
		height: 340rpx;
		background-color: #fff;
		border-radius: 16rpx;
		margin-top: 30rpx;
		box-shadow: 0 0 50rpx 0 rgba(0, 0, 0, 0.1);
	}

	.det-body {
		z-index: 1;
		padding-top: 80rpx;
	}

	.det-bg-img {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1;
		display: block;
		width: 100%;
		height: 267rpx;
	}

	.det-head {
		z-index: 2;
		box-shadow: 0 0 50rpx 0 rgba(248, 151, 164, 0.13);
	}

	.det-attention {
		position: absolute;
		display: block;
		bottom: -22rpx;
		right: 50%;
		z-index: 1;
		width: 128rpx;
		height: auto;
		margin-right: -64rpx;
		padding: 4rpx 0;
		background-color: #F897A1;
		box-sizing: border-box;
	}

	.det-attention.active {
		background-color: #E6E6E6;
	}

	.det-item {
		width: calc((100% - 120rpx) / 4);
	}

	.det-item.active {
		background-color: rgba(255, 123, 114, 0.24);
	}

	.det-item .text {
		color: rgba(0, 0, 0, 0.54);
	}

	.det-item .price {
		color: rgba(0, 0, 0, 0.40);
	}

	.det-item.active .text,
	.det-item.active .price {
		color: #FF979C;
	}

	.det-item.disabled .text,
	.det-item.disabled .price {
		color: rgba(0, 0, 0, 0.3);
	}

	.button-reset {
		height: 102rpx;
		background: none !important;
		color: rgba(0, 0, 0, 0.54) !important;
	}

	button::after {
		border: none;
	}

	.button-reset::after {
		border: none;
	}

	.package-list {
		width: 100%;
		height: 178rpx;
		overflow: hidden;
	}

	.package-list .warp {
		white-space: nowrap;
		overflow: scroll;
	}

	.package-list .warp .list {
		background: red;
		display: inline-block;
		font-size: 14px;
		width: 266rpx;
		height: 178rpx;
		background: linear-gradient(270deg, rgba(255, 100, 101, 1) 0%, rgba(255, 148, 133, 1) 100%);
		box-shadow: 0px 3px 5px 0px rgba(255, 110, 110, 0.5);
		border-radius: 8rpx;
		margin-right: 18rpx;
		padding: 30rpx 20rpx 24rpx 20rpx;
		overflow: hidden;
	}

	.package-list .warp .list:nth-child(3) {
		margin-right: 0;
	}

	.package-list .warp .list .name {
		font-size: 30rpx;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		line-height: 30rpx;
	}

	.package-list .warp .list .desc {
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(255, 255, 255, .87);
		margin-top: 16rpx;
		line-height: 24rpx;
	}

	.package-list .warp .list .price {
		font-size: 24rpx;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		margin-top: 30rpx;
		line-height: 24rpx;
	}

	.det-desc {
		height: 40px;
		overflow: hidden;
	}

	.det-desc.active {
		height: auto;
	}

	.follow_style {
		position: absolute;
		bottom: -12rpx;
		left: 8rpx;
		z-index: 1;
		width: 106rpx;
		height: 40rpx;
		padding: 4rpx 0;
		background-color: rgb(208, 105, 150);
		box-sizing: border-box;
		color: #fff;
		text-align: center;
		border-radius: 60rpx;
		font-size: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>