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" :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-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" :style="doctor.is_phone==1?'filter:contrast(100%);':'filter:contrast(30%);'" 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" :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" :style="doctor.is_chat==1?'filter:contrast(100%);':'filter:contrast(30%);'" 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" :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" :style="doctor.is_appoint==1?'filter:contrast(100%);':'filter:contrast(30%);'" 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" :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" :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">{{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" :style="!ismenzhen?'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>
	</view>
</template>

<script>
	var user = require('../../common/user.js');
	export default {
		onLoad(options) {
			this.doctorid = options.id
			if (options.time != undefined) {
				this.daytime = options.time
			} else {
				let date = new Date();
				let nian = date.getFullYear()
				let yue = date.getMonth() + 1
				let ri = date.getDate() >= 10 ? date.getDate() : '0' + date.getDate()
				let hour = date.getHours();
				let minute = date.getMinutes() >= 10 ? date.getMinutes() : '0' + date.getMinutes();
				this.daytime = nian + "-" + yue + "-" + ri + " " + hour + ':' + minute;
			}

			this.barindex = options.index
			if (this.barindex == 3) {
				this.isjigou = true
			} else {
				this.isjigou = false
			}
			console.log(options)
		},
		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,
			}
		},
		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")
				})
				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

			},
			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
				})
				if (res.status == 0) {
					console.log(res)
					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 => {
								return { ...itm.time_period,
									...itm.organization
								}
							})
						})
						time[0].forEach(item => {
							item.start_time_period = item.start_time_period + '-' + item.end_time_period
						})
						this.multiSelector.push(nian)
						this.multiSelector.push(time[0])
					}
				}
			},
			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() {

				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.show = !this.show
				} else {
					uni.showToast({
						title: "该医生暂未排班",
						icon: "none"
					})
				}
			},
			callbacktime(arr) {
				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]].id
				this.year = this.multiSelector[0][arr[0]]
				this.yearid = this.multiSelector[1][arr[1]].id
				this.distance = parseInt(this.multiSelector[1][arr[1]].distance) / 1000
			}
		}
	};
</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>