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="http://file.supermm.me/miniProgram/images/det/det_bg_01.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="m-xend">
								<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>
								<text class="dpb m-flex"></text>
							</view>
							<view class="m-xend mt25">
								<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="content"></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://cdn.uviewui.com/uview/example/fade.jpg" 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://cdn.uviewui.com/uview/example/fade.jpg" 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://cdn.uviewui.com/uview/example/fade.jpg" 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 mt30 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: 104rpx;">
							<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" style="background-color: rgb(11,115,186)">图文咨询</view>
			<view v-else class="submit text-white" 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()
		},
		data() {
			return {
				content: `浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。
				忽闻水上琵琶声，主人忘归客不发。寻声暗问弹者谁，琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。千呼万唤始出来，犹抱琵琶半遮面。转轴拨弦三两声，未成曲调先有情。弦弦掩抑声声思，似诉平生不得志。低眉信手续续弹，说尽心中无限事。轻拢慢捻抹复挑，初为《霓裳》后《六幺》。大弦嘈嘈如急雨，小弦切切如私语。嘈嘈切切错杂弹，大珠小珠落玉盘。间关莺语花底滑，幽咽泉流冰下难。冰泉冷涩弦凝绝，凝绝不通声暂歇。别有幽愁暗恨生，此时无声胜有声。银瓶乍破水浆迸，铁骑突出刀枪鸣。曲终收拨当心画，四弦一声如裂帛。东船西舫悄无言，唯见江心秋月白。
				沉吟放拨插弦中，整顿衣裳起敛容。自言本是京城女，家在虾蟆陵下住。十三学得琵琶成，名属教坊第一部。曲罢曾教善才服，妆成每被秋娘妒。五陵年少争缠头，一曲红绡不知数。钿头银篦击节碎，血色罗裙翻酒污。今年欢笑复明年，秋月春风等闲度。弟走从军阿姨死，暮去朝来颜色故。门前冷落鞍马稀，老大嫁作商人妇。商人重利轻别离，前月浮梁买茶去。去来江口守空船，绕船月明江水寒。夜深忽梦少年事，梦啼妆泪红阑干。
				我闻琵琶已叹息，又闻此语重唧唧。同是天涯沦落人，相逢何必曾相识！我从去年辞帝京，谪居卧病浔阳城。浔阳地僻无音乐，终岁不闻丝竹声。住近湓江地低湿，黄芦苦竹绕宅生。其间旦暮闻何物？杜鹃啼血猿哀鸣。春江花朝秋月夜，往往取酒还独倾。岂无山歌与村笛？呕哑嘲哳难为听。今夜闻君琵琶语，如听仙乐耳暂明。莫辞更坐弹一曲，为君翻作《琵琶行》。感我此言良久立，却坐促弦弦转急。凄凄不似向前声，满座重闻皆掩泣。座中泣下谁最多？江州司马青衫湿。`,
				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/timePeriodList")
				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"
				})
			},
			xuantime() {
				this.show = !this.show
			},
		}
	};
</script>

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

	.gridstyle {
		height: 340rpx;
		background-color: #fff;
		border-radius: 16rpx;
		margin-top: 60rpx;
		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: 400rpx;
	}

	.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>