heshanApp/pages/agent/doctorRegister.vue

<template>
	<view class="container">
		<view class="info">
			<view class="es-mt-34 u-f-ajc u-f-jsb" :style="{paddingTop: statusBarHeight+'px'}">
				<view class="u-f-ajc" @tap="toBack">
					<image class="es-icon-64" src="/static/image/black_back.png" mode=""></image>
				</view>
				<view class="u-f-ajc">
					<image @tap="doShare(doctor.doctorName || '')" class="es-icon-48"
						src="/static/image/agent/share_icom.png" mode=""></image>
				</view>
			</view>
			<view class="u-f-ajc u-f-jsb">
				<view class="es-mt-38">
					<view class="u-f-ajc" :style="{alignItems:'flex-end'}">
						<view class="es-c-22 es-fs-48 es-fw-600">{{doctor.doctorName || ''}}</view>
						<view class="line"></view>
						<view class="es-fs-24 es-c-22 es-mb-10"><text>{{department && department.deptName || ''}}</text>
							·
							<text>{{doctor.position || ''}}</text>
						</view>
					</view>
					<view class="u-f es-mt-26">
						<view class="es-fs-20 three es-mr-12 u-f-ajc" v-if="hospital.sealUrl">
							{{hospital?hospital.sealUrl : ''}}
						</view>
						<view class="es-fs-28 es-c-22 es-mr-10">
							{{hospital?hospital.hospitalName : ''}}
						</view>
						<view class="u-f-ajc" v-if="false">
							<u-icon name="arrow-right" size="22rpx" color="#222222"></u-icon>
						</view>
					</view>
				</view>
				<view class="u-f-ajc">
					<image class="es-br-ban es-icon-128" :src="doctor.avatar ||'/static/logo.png'" mode=""></image>
				</view>
			</view>
			<view class="u-f-ajc u-f-jsb es-mt-32">
				<view class="u-f-ajc">
					<view class="color9B es-fs-24 es-mr-8">好评率</view>
					<view class="es-fw-600 es-c-22 es-fs-32">{{doctor.pingStar || 0}}分</view>
				</view>
				<view class="u-f-ajc">
					<view class="color9B es-fs-24 es-mr-8">接诊量</view>
					<view class="es-fw-600 es-c-22 es-fs-32">{{doctor.orderNumber || 0}}</view>
				</view>
				<view class="u-f-ajc">
					<view class="color9B es-fs-24 es-mr-8">平均响应</view>
					<view class="es-fw-600 es-c-22 es-fs-32">{{doctor.speed || 0}}分钟</view>
				</view>
			</view>
			<view class="u-f es-mt-44">
				<view class="u-f es-mr-10 es-mt-6">
					<image class="image" src="/static/image/agent/be_good_at_font.png" mode=""></image>
				</view>
				<view class="es-c-22 es-fs-24 u-f-ajc" :class="[specialityShow?'':'speciality']">
					<view :class="[specialityShow?'':'speciality']">
						{{doctor.speciality || ''}}
					</view>
					<view v-if="doctor.speciality && doctor.speciality.length>28" class=""
						@tap="specialityShow=!specialityShow">
						<u-icon v-if="specialityShow" name="arrow-up" color="#222222" size="24rpx"></u-icon>
						<u-icon v-else name="arrow-right" color="#222222" size="24rpx"></u-icon>
					</view>
				</view>
			</view>
			<view class="u-f es-mt-14">
				<view class="u-f es-mr-10 es-mt-6">
					<image class="image" src="/static/image/agent/introduction_icon.png" mode=""></image>
				</view>
				<view class="es-c-22 es-fs-24 u-f-ajc" :class="[introductionShow?'':'speciality']">
					<view :class="[introductionShow?'':'speciality']">
						{{doctor.introduction || ''}}
					</view>
					<view v-if="doctor.introduction && doctor.introduction.length>28" class=""
						@tap="introductionShow=!introductionShow">
						<u-icon v-if="introductionShow" name="arrow-up" color="#222222" size="24rpx"></u-icon>
						<u-icon v-else name="arrow-right" color="#222222" size="24rpx"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="es-c-22 es-fs-32 es-fw es-ml-24 es-mt-40 title">
			预约挂号
		</view>
		<view class="listBox">
			<view class="es-bc-white es-mt-20 es-br-16" v-for="(item,index) in list" :key="index" @tap="detail(item)">
				<view class="listBox-list u-f-ajc u-f-jsb">
					<view class="">
						<view class="es=c-22 es-fs-28">
							<text class="es-mr-12">{{item.scheduleDate}} </text>
							<text class="es-mr-12">
								{{getDayOfWeek(item.scheduleDate)}}</text>
							<text class="es-mr-12">
								{{item.timeSlotType ==1?'上午':'下午'}}</text>
							<text class="es-fs-20 listBox-list-tip"
								v-if="getDateFun(item.scheduleDate)">{{getDateFun(item.scheduleDate)}}</text>
						</view>
						<view class="es=c-99 es-fs-24 es-mt-10">
							<text class="es-mr-18">专家门诊</text>
							<text class="es-fs-24 colorFF5C03">￥{{item.price}}</text>
						</view>
					</view>
					<view class="es-c-white es-fs-28 listBox-list-btn"
						:class="[item.totalSlotsByTime<=0?'bgC':'bgFF5C03']">
						{{item.totalSlotsByTime?'余号'+item.totalSlotsByTime:'约满'}}
					</view>
				</view>
			</view>
		</view>

		<u-popup :show="show" round="40rpx" mode="bottom" @close="show=false" @open="open">
			<view class="popupBox">
				<view class="u-f-ajc u-f-jsb">
					<view class="u-f-ajc es-c-22 es-fs-32 es-fw">
						<text class="es-mr-10">{{detailData && detailData.scheduleDate || ''}}</text>
						<text class="es-mr-10">{{detailData && getDayOfWeek(detailData.scheduleDate)}}</text>
						<text class="es-mr-10">{{detailData && detailData.timeSlotType ==1?'上午':'下午'}}</text>
					</view>
					<view class="u-f-ajc" @tap="show=false">
						<image class="es-icon-48" src="/static/image/agent/close.png" mode=""></image>
					</view>
				</view>
				<view class="line"></view>
				<view class="popupBox-content">
					<view class="popupBox-content-list u-f-ajc u-f-fc" v-for="(item,index) in detailList" :key="index"
						:class="[index==active?'bgFCF0E7 colorFF5C03':'bgF5F7FA es-c-22']" @tap="active=index">
						<view class="es-fs-28 es-fw-500">
							{{strSplit(item.startTime)}}-{{strSplit(item.endTime)}}
						</view>
						<view class="es-fs-24 mt-4">
							余号{{item.availableSlots}}
						</view>
					</view>
				</view>
				<view class="popupBox-btn es-mt-40 u-f-ajc es-fs-30 es-fw-500 es-c-white" @tap="sure">
					预约
				</view>
			</view>
		</u-popup>

		<!-- 分享弹窗 -->
		<u-popup :show="showShare" @close="showShare = false">
			<share-box :shareItem="shareItem" @closeShare='showShare = false'></share-box>
		</u-popup>
	</view>
</template>
<script>
	import {
		getDoctorDetails
	} from '@/api/doctor.js'
	import {
		queryDoctorScheduleInfoByUser,
		userSchedule,
		getAiDoctorForDetails,
		queryDoctorScheduleInfoByDate
	} from '@/api/agent.js'
	export default {
		data() {
			return {
				show: false,
				active: 0,

				doctor: {
					certificateCode: "",
				},
				department: {
					deptName: ""
				},
				hospital: {
					hospitalName: ""
				},
				list: [],
				doctorId: '',
				timeSlotType: '',
				timeSlotType: '',
				detailData: null,
				detailList: [],
				specialityShow: false,
				introductionShow: false,
				showShare: false,
				shareItem: {
					imageUrl: "",
					title: "",
					path: "",
					isMini: true
				},
				isShare: false,
				statusBarHeight: '',
			}
		},
		onLoad(options) {
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
			if (options.companyId) {
				this.isShare = true
				uni.setStorageSync('registration', options)
			}
			const registration = uni.getStorageSync('registration')
			if (registration && registration.companyId) {
				this.isShare = true
			}
			if (options.doctorId) {
				this.doctorId = options.doctorId
				this.getAiDoctorForDetailsFun()
				this.queryDoctorScheduleInfoByDateFun()
			}
		},
		computed: {

		},
		onShow() {

		},

		methods: {
			toBack() {
				uni.navigateBack()
			},
			doShare(title) {
				const registration = uni.getStorageSync('registration')
				this.shareItem.title = title;
				this.shareItem.imageUrl = this.doctor && this.doctor.avatar || '';
				this.shareItem.compressImage = 1
				this.shareItem.isMini = true;
				this.shareItem.path =
					`/pages_doctor/doctorRegister?doctorId=${this.doctorId}&companyId=${registration.companyId || ''}&companyUserId=${registration.companyUserId || ''}`
				let cdn = uni.getStorageSync('h5Path');
				this.shareItem.url =
					`${cdn}/pages_doctor/doctorRegister?doctorId=${this.doctorId}&companyId=${registration.companyId || ''}&companyUserId=${registration.companyUserId || ''}`;
				this.showShare = true;
			},
			strSplit(e) {
				let time = e.split(':')
				return time[0] + ':' + time[1]
			},
			getDateFun(timeData) {
				const now = new Date();
				const targetDate = new Date(timeData);
				const diffTime = targetDate.getTime() - now.getTime();
				const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
				if (diffDays === 0) {
					return '今天'
				} else if (diffDays === 1) {
					return '明天'
				} else if (diffDays === 2) {
					return '后天'
				} else {
					return ''
				}
			},
			schedulestatusFun(e) {
				let arr = ['', '余号' + e.totalSlots, '停诊', '已满']
				return arr[e.scheduleStatus]
			},
			getDayOfWeek(date) {
				const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				const today = new Date(date);
				const dayIndex = today.getDay();
				return days[dayIndex];
			},
			async getAiDoctorForDetailsFun() {
				const res = await getDoctorDetails({
					doctorId: this.doctorId
				})
				if (res.code == 200) {
					this.doctor = res.data.doctor;
					this.department = res.data.department;
					this.hospital = res.data.hospital;
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				}
			},
			async queryDoctorScheduleInfoByDateFun() {
				const res = await queryDoctorScheduleInfoByDate({
					doctorId: this.doctorId,
					isPrivate: this.isShare,
					scheduleDate: this.detailData ? this.detailData.scheduleDate : '',
					timeSlotType: this.detailData ? this.detailData.timeSlotType : ''
				})
				if (res.code == 200) {
					this.list = res.data
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				}
			},
			async queryDoctorScheduleInfoByUserFun() {
				const res = await queryDoctorScheduleInfoByUser({
					doctorId: this.doctorId,
					scheduleDate: this.detailData ? this.detailData.scheduleDate : '',
					timeSlotType: this.detailData ? this.detailData.timeSlotType : ''
				})
				if (res.code == 200) {
					if (this.detailData) {
						this.detailList = res.data
						this.show = true
						return
					}
					// this.list = res.data
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				}
			},
			detail(e) {
				if (e.totalSlotsByTime <= 0) return
				this.detailData = e
				this.queryDoctorScheduleInfoByUserFun()
			},
			async sure() {
				const res = await userSchedule({
					doctorId: this.doctorId,
					scheduleDate: this.detailData ? this.detailData.scheduleDate : '',
					startTime: this.detailList[this.active].startTime,
					endTime: this.detailList[this.active].endTime,
				})
				if (res.code == 200) {
					this.show = false
					uni.navigateTo({
						url: `/pages/store/inquiryForm1?inquiryType=1&orderType=3&doctorId=${this.doctorId}&scheduleStartTime=${this.detailData.scheduleDate+' '+this.detailList[this.active].startTime}&scheduleEndTime=${this.detailData.scheduleDate+' '+this.detailList[this.active].endTime}`
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				}
			}
		}
	}
</script>
<style scoped lang="scss">
	.container {
		background: #F5F7FA;
	}

	.info {
		padding: 24rpx;
		background-image: url('/static/image/agent/doctor-register-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 588rpx;

		.line {
			display: inline-block;
			width: 2rpx;
			height: 24rpx;
			background: #222222;
			margin: 0 16rpx 10rpx;
		}

		.color9B {
			color: #9B9B9B;
		}

		.three {
			padding: 4rpx 12rpx;
			background: #FCF0E7;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 1rpx solid #FF5030;
			color: #FF5030;
		}

		.image {
			width: 64rpx;
			height: 24rpx;
		}
	}

	.title {
		position: relative;

		&::after {
			content: '';
			width: 24rpx;
			height: 8rpx;
			background: #FF5030;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			position: absolute;
			left: 52rpx;
			bottom: -14rpx;
			// display: flex;
			// align-items: center;
			// justify-content: center;
		}
	}

	.listBox {
		margin: 32rpx 24rpx 0;

		.listBox-list {
			padding: 32rpx;

			.listBox-list-tip {
				padding: 4rpx 8rpx;
				color: #454545;
				background: #ECECEC;
				border-radius: 8rpx;
			}

			.listBox-list-btn {
				padding: 12rpx 52rpx;
				border-radius: 32rpx;
			}

			.bgC {
				background: #CCCCCC;
			}

			.bgFF5C03 {
				background: #FF5030;
			}


		}
	}

	.colorFF5C03 {
		color: #FF5030;
	}

	.popupBox {
		padding: 30rpx 24rpx;

		.line {
			height: 1rpx;
			background-color: #ECECEC;
			margin: 30rpx 0;
		}

		.bgFCF0E7 {
			background: #FCF0E7;
		}

		.bgF5F7FA {
			background: #F5F7FA;
		}

		.popupBox-content {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 16rpx;

			.popupBox-content-list {
				border-radius: 24rpx;
				height: 160rpx;
			}
		}

		.popupBox-btn {
			height: 96rpx;
			background: #FC581C;
			border-radius: 48rpx;
		}
	}

	.speciality {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>