mabao/pages/doctor_related/doctor_info.vue

<template>
	<view class="main">
		<view class="u-skeleton">
			<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 u-skeleton-fillet">
					<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_texts" :key="index">{{itm.label_name||''}}</text>

							</view>
							<view class="dpb m-flex margin-top-sm">科室：{{doctor.office.name||'暂无'}} {{doctor.qualification.name||'暂无'}}</view>
							<view class="m-xend mt12">
								<view class="f12 m-gray-big">评分：<text class="m-theme">{{doctor.score}}</text>
									<text class="f11 margin-left-xs">分</text>
								</view>
								<view class="f12 ml15 m-gray-big">服务：<text class="m-theme">{{doctor.service_persons}}</text>
									<text class="f11">人</text>
								</view>
								<view class="m-flex ml15 text-sm">距离：<text class="text-sm">{{doctor.distance!='未知'?parseInt(doctor.distance/1000)+'km':'未知'}}</text></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-skeleton-fillet">
				<u-grid :col="3" :border="false">
					<view @click="gotoxuanze" data-index="1" data-name="电话咨询" :data-istrue="doctor.is_phone">
						<u-grid-item :bg-color="barindex==1&&doctor.is_phone==1?'#efefef':'#fff'">
							<u-image width="120rpx" height="120rpx" :src="doctor.is_phone==1?'https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/toolimg/indexphone.png':'/static/img/phone_gray.png'"
							 shape="circle"></u-image>
							<view class="grid-text margin-top-sm" :style="doctor.is_phone==1?'color:black;':'color:rgb(219,219,219)'">电话咨询</view>
						</u-grid-item>
					</view>
					<view class="" @click="gotoxuanze" data-index="2" data-name="图文咨询" :data-istrue="doctor.is_chat">
						<u-grid-item :bg-color="barindex==2&&doctor.is_chat==1?'#efefef':'#fff'">
							<u-image width="120rpx" height="120rpx" :src="doctor.is_chat==1?'https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/toolimg/indextu.png':'/static/img/chat_gray.png'"
							 shape="circle"></u-image>
							<view class="grid-text margin-top-sm" :style="doctor.is_chat==1?'color:black;':'color:rgb(219,219,219)'">图文咨询</view>
						</u-grid-item>
					</view>
					<view class="" @click="gotoxuanze" data-index="3" data-name="门诊预约" :data-istrue="doctor.is_appoint">
						<u-grid-item :bg-color="barindex==3&&doctor.is_appoint==1?'#efefef':'#fff'">
							<u-image width="120rpx" height="120rpx" :src="doctor.is_appoint==1?'https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/toolimg/indexmen.png':'/static/img/yuyue_gray.png'"
							 shape="circle"></u-image>
							<view class="grid-text margin-top-sm" :style="doctor.is_appoint==1?'color:black;':'color:rgb(219,219,219)'">门诊预约</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: 530rpx;"
				 @click="xuantime">
					已选时间：{{daytime||'该医生暂未排班'}}
					<!-- <u-picker mode="multiSelector" @confirm="callbacktime" v-model="show"  range-key="start_time_period"
					 :range="multiSelector"></u-picker> -->
				</view>
			</view>
			<view v-if="isjigou" @click="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">{{hospital||'无'}}</view>
					</view>
					<view class="pr m-xcenter plr15 mt10">
						<view class="m-flex tl m-gray-small f12 pl15 mr5">地址：{{address||'无'}}</view>
						<view class="pt2 pb2 plr10 f12 m-gray-small br-gray-letter bdr30" v-if="distance!='0'">
							{{distance||'暂无距离'}}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 u-skeleton-fillet" 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>
			<button v-if="barindex==1" class="submit text-white" :disabled="isphone" @click="phonezixun" :style="!isphone?'background-color: rgb(11,115,186);font-size: 26rpx;':'font-size: 26rpx;color:gray'">电话咨询</button>
			<button v-else-if="barindex==2" class="submit text-white" :disabled="istuwen" @click="phonezixun" :style="!istuwen?'background-color: rgb(11,115,186);font-size: 26rpx;':'font-size: 26rpx;color:gray'">图文咨询</button>
			<button v-else class="submit text-white" @click="phonezixun" :disabled="ismenzhen||daytime==''||is_can_appoint==0"
			 :style="!ismenzhen&&daytime!=''&&is_can_appoint!=0?'background-color: rgb(11,115,186);font-size: 26rpx;':'font-size: 26rpx;color:gray'">门诊预约</button>
		</view>
		<u-no-network></u-no-network>
		<u-skeleton :loading="loading" el-color="#ddd" :animation="true" bgColor="#FFF"></u-skeleton>
		<u-popup v-model="dateshow" :safe-area-inset-bottom="true" mode="bottom" border-radius="14" length="50%" height="700rpx">
			<datepicker :date="multiSelector" @callbacktime="callbacktime" ref="date"></datepicker>
		</u-popup>
	</view>
</template>

<script>
	import datepicker from '../../components/datepicker/datepicker'
	var user = require('../../common/user.js');
	export default {
		components: {
			datepicker
		},
		onLoad(options) {
			this.doctorid = options.id
			if (options.time != undefined) {
				this.daytime = options.time
			}

			this.barindex = options.index
			if (this.barindex == 3) {
				this.isjigou = true
			} else {
				this.isjigou = false
			}
			console.log(this.daytime)
		},
		onShow() {
			this.gettime()
			this.getdoctorInfo()
		},
		mounted() {

		},
		data() {
			return {
				doctorid: "",
				doctor: {},
				shadowStyle: {
					backgroundImage: "none"
				},
				isjigou: false,
				barindex: 1, //显示按钮
				daytime: "",
				multiSelector: [],
				show: false,
				istime: false,
				hospital: "",
				address: "",
				distance: "",
				jigouid: "",
				year: "",
				yearid: "",
				isphone: false,
				istuwen: false,
				ismenzhen: false,
				loading: true,
				is_can_appoint: "",
				dateshow: false,
				is_date_obsolete: "",
				location: {}

			}
		},
		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")
				})
				console.log(res)
				if (res) {
					this.loading = false;
				}
				this.doctor = res
				this.doctor.is_chat != 0 ? this.istuwen = false : this.istuwen = true
				this.doctor.is_phone != 0 ? this.isphone = false : this.isphone = true
				this.doctor.is_appoint != 0 || this.multiSelector.length != 0 ? this.ismenzhen = false : this.ismenzhen = true
				console.log(this.ismenzhen)

			},
			submitCollect: async function(e) {
				let res = await this.$request.post("/api/v1/collection/submitCollect", {
					type: 1,
					relation_id: e.currentTarget.dataset.id
				})
				let status = user.islogin(res)
				if (status) {
					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() {
				this.multiSelector = []
				let res = await this.$request.post("/api/v1/docter/schedulePeriodList", {
					docter_id: this.doctorid,
					latitude: uni.getStorageSync('latitude'),
					longitude: uni.getStorageSync('longitude')
				})
				if (res.status == 0) {
					if (res.data.data.length != 0) {
						// let nian = res.data.data.map(item => {
						// 	return item.schedule_date
						// })
						// let time = res.data.data.map(item => {
						// 	return item.schedule_period.map(itm => {
						// 		itm.organization.org_id = itm.organization['id']
						// 		return {
						// 			can_appoint_num: itm.can_appoint_num,
						// 			...itm.organization,
						// 			...itm.time_period
						// 		}
						// 	})
						// })
						// time[0].forEach(item => {
						// 	item.start_time_period = item.start_time_period + '-' + item.end_time_period
						// })
						// this.multiSelector.push(nian)
						// time[0].sort((a,b)=> {return a.end_time_period>b.end_time_period?1:-1})
						// this.multiSelector.push(time[0])
						// console.log(this.multiSelector)
						// this.daytime = this.multiSelector[0][0] + " " + this.multiSelector[1][0].start_time_period
						// this.hospital = this.multiSelector[1][0].name
						// this.address = this.multiSelector[1][0].address
						// this.jigouid = this.multiSelector[1][0].org_id
						// this.is_can_appoint = this.multiSelector[1][0].can_appoint_num
						// this.year = this.multiSelector[0][0]
						// console.log(this.jigouid)
						// this.yearid = this.multiSelector[1][0].id
						// console.log(this.yearid)
						// this.distance = parseInt(this.multiSelector[1][0].distance) / 1000

						let times = []
						let nian = res.data.data.map(item => {
							return {
								date: item.schedule_date,
								id: item.id
							}
						})
						res.data.data.forEach(item => {
							let time = item.schedule_period.map(itm => {
								if (item.id == itm.schedule_id) {
									itm.organization.org_id = itm.organization['id']
									return {
										yeardate: itm.schedule_date,
										schedule_id: itm.schedule_id,
										can_appoint_num: itm.can_appoint_num,
										...itm.organization,
										...itm.time_period
									}
								}
							})
							times.push(time)
						})
						this.multiSelector.push(nian)
						times.forEach((item, index) => {
							item.sort((a, b) => {
								return a.end_time_period > b.end_time_period ? 1 : -1
							})
							// for (let i = item.length - 1; i >= 0; i--) {
							// 	let arr = item[i].yeardate + " " + item[i].end_time_period;
							// 	arr = arr.split(/[- :]/)
							// 	let nndate = Date.parse(new Date(arr[0], arr[1] - 1, arr[2], arr[3], arr[4]));
							// 	let currentTime = Date.parse(new Date())
							// 	// console.log(nndate<currentTime,index)
							// 	if (nndate < currentTime) {
							// 		item.splice(i, 1)
							// 	}
							// }
						})
						console.log(times)
						this.multiSelector.push(times)
						this.daytime = this.multiSelector[0][0].date + " " + this.multiSelector[1][0][0].start_time_period + "-" + this.multiSelector[
							1][0][0].end_time_period
						this.is_date_obsolete = this.multiSelector[0][0].date + " " + this.multiSelector[
							1][0][0].end_time_period
						this.hospital = this.multiSelector[1][0][0].name
						this.address = this.multiSelector[1][0][0].address
						this.jigouid = this.multiSelector[1][0][0].org_id
						this.is_can_appoint = this.multiSelector[1][0][0].can_appoint_num
						this.year = this.multiSelector[0][0].date
						this.yearid = this.multiSelector[1][0][0].id
						this.distance = parseInt(this.multiSelector[1][0][0].distance) / 1000
						this.location = {
							latitude: this.multiSelector[1][0][0].latitude - 0,
							longitude: this.multiSelector[1][0][0].longitude - 0,
							name: this.multiSelector[1][0][0].name,
							address: this.multiSelector[1][0][0].address,
						}
						let arr = this.multiSelector[1][0]
						arr.forEach(item => {
							item.year = nian[0].date
						})
						this.$refs.date.rightday = arr
						console.log(this.multiSelector)
					}
				}
			},
			goAdrPostion() {
				uni.openLocation({
					latitude: Number(this.location.latitude),
					longitude: Number(this.location.longitude),
					name: this.location.name,
					address: this.location.address,
					success: (res) => {
						console.log(res)
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			gotoxuanze(e) {
				if (e.currentTarget.dataset.istrue == 0) {
					uni.showToast({
						title: "该医生暂未开通服务",
						icon: "none",
						duration: 1500
					})
					return false
				}
				this.barindex = e.currentTarget.dataset.index
				if (this.barindex == 3) {
					this.isjigou = true
				} else {
					this.isjigou = false
				}
			},
			phonezixun() {
				let arr = this.is_date_obsolete.split(/[- :]/)
				let nndate = new Date(arr[0], arr[1] - 1, arr[2], arr[3], arr[4]);
				nndate = Date.parse(nndate)
				let currentTime = Date.parse(new Date())
				if (this.barindex == 3) {
					if (nndate < currentTime) {
						uni.showToast({
							title: "不可预约已过时间",
							icon: "none"
						})
						return false
					}
				}
				uni.navigateTo({
					url: "info_write?doctor=" + JSON.stringify(this.doctor) + "&type=" + this.barindex + "&time=" + this.daytime +
						"&hospital=" + this.hospital + "&jigou=" + this.jigouid + "&year=" + this.year + "&yearid=" + this.yearid
				})
			},
			xuantime() {
				if (this.multiSelector.length != 0) {
					this.dateshow = !this.dateshow
				} else {
					uni.showToast({
						title: "该医生暂未排班",
						icon: "none"
					})
				}
			},
			callbacktime(item) {
				console.log(item)
				// this.daytime = this.multiSelector[0][arr[0]] + " " + this.multiSelector[1][arr[1]].start_time_period
				// this.hospital = this.multiSelector[1][arr[1]].name
				// this.address = this.multiSelector[1][arr[1]].address
				// this.jigouid = this.multiSelector[1][arr[1]].org_id
				// this.is_can_appoint = this.multiSelector[1][arr[1]].can_appoint_num
				// this.year = this.multiSelector[0][arr[0]]
				// console.log(this.multiSelector[1][arr[1]])
				// this.yearid = this.multiSelector[1][arr[1]].id
				// console.log(this.yearid)
				// this.distance = parseInt(this.multiSelector[1][arr[1]].distance) / 1000
				this.is_date_obsolete = item.year + " " + item.end_time_period
				this.daytime = item.year + " " + item.start_time_period + "-" + item.end_time_period
				this.hospital = item.name
				this.address = item.address
				this.jigouid = item.org_id
				this.is_can_appoint = item.can_appoint_num
				this.year = item.year
				this.yearid = item.id
				this.distance = parseInt(item.distance) / 1000
				this.dateshow = false
				this.location = item
			}
		}
	};
</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>