H5_module/onlineregistration/doctorinfo/doctorinfo.vue

<template>
	<view>
		<!-- 医生信息 -->
		<view class="box doctor-item">
			<view class="header"><image :src="params.headUrl ? params.headUrl : '../static/onlineregistration/image/doctorPic.png'" mode="aspectFill"></image></view>
			<view class="header-title">
				<view>
					<text class="doctor-name">{{ params.realName }}</text>
					<text class="doctor-position" v-if="params.userExtend && params.userExtend.label">
						<block v-for="(it, idx) in params.userExtend.label.split(',')" :key="idx" v-if="idx == 0">{{ it }}</block>
					</text>
				</view>
				<view class="doctor-about" v-if="params.userExtend&&params.userExtend.projects">{{ params.userExtend.projects }}</view>
			</view>
			<!-- <view class="header-more">
				<view>
					<image src="../static/onlineregistration/image/qrcode.png"></image>
					<view class="qrcode-text">二维码</view>
				</view>
			</view> -->
		</view>
		<!-- 挂号和简介 -->
		<view class="box tab-box">
			<view class="tab bgfff dflex">
				<view :class="'li ' + (currentTab == 0 ? 'active' : '')" data-current="0" @tap="tab">预约</view>
				<view :class="'li ' + (currentTab == 1 ? 'active' : '')" data-current="1" @tap="tab">简介</view>
			</view>
			<view v-if="currentTab == 0" class="regist-bar">
				<view class="register-li" v-for="(item, index) in workList" :key="index">
					<view>{{ item.dateTime }} {{ getweekday(item.dateTime) }}</view>
					<view class="regist-content">
						<view
							:class="'regist-item' + (subItem.receivedNo - subItem.surplusNo == 0 ? ' noh' : dateIndex == index && timeIndex == subIndex ? ' active' : '')"
							v-for="(subItem, subIndex) in item.rosteringList"
							:key="subIndex"
							@click="selectTime(subItem, index, subIndex)"
							v-if="subItem.isOpen"
						>
							<text>{{ captureTime(subItem.startTime, true) }} ~ {{ captureTime(subItem.endTime, true) }}</text>
							<text class="regist-number" v-if="subItem.receivedNo - subItem.surplusNo == 0">（已约满）</text>
							<text class="regist-number" v-else>
								( 剩
								<text class="regist-number-red">{{ ' ' + subItem.receivedNo - subItem.surplusNo + ' ' }}</text>
								)
							</text>
							<image src="../static/onlineregistration/image/gou.png" class="sub-gou" v-if="dateIndex == index && timeIndex == subIndex"></image>
						</view>
					</view>
				</view>
			</view>
			<view v-if="currentTab == 1" class="info-bar">
				<!-- 简介 -->
				<block v-if="params.userExtend && (params.userExtend.brief || params.userExtend.projects)">
					<view class="info-item" v-if="params.userExtend && params.userExtend.brief">
						<view class="info-title">医生简介</view>
						<view class="info-content"><rich-text :nodes="params.userExtend.brief"></rich-text></view>
					</view>
					<view class="info-item" v-if="params.userExtend && params.userExtend.projects">
						<view class="info-title">擅长项目</view>
						<view class="info-content"><rich-text :nodes="params.userExtend.projects"></rich-text></view>
					</view>
				</block>
				<view class="nodata" v-else>
					<image :src="picUrlss + 'empty_jl.png'"></image>
					<view>暂无医生简介</view>
				</view>
				<!-- <view class="info-item">
					<view class="info-title">医生案例</view>
					<view class="info-case">
						<view class="info-case-item">
							<image src="../static/onlineregistration/image/infopic.png"></image>
							<view class="info-case-title">青少年牙齿矫正</view>
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<!-- 挂号信息 -->
		<view class="regist-bottom" v-if="currentTab == 0 && dateIndex != null && timeIndex != null">
			<block v-if="currentRoster.money >0">
				<view>
					<text class="regist-bottom-title">预约费</text>
					<text class="textcolor-red">
						￥
						<text class="regist-bottom-money">{{ currentRoster.money }}</text>
					</text>
				</view>
				<view class="regist-bottom-btn" @click="jumpUrl('/onlineregistration/confirmation/confirmation?id=' + currentRoster.id + '&departmentId=' + departmentId)">
					立即预约
				</view>
			</block>
			<view v-else class="regist-bottom-btn fflex" @click="jumpUrl('/onlineregistration/confirmation/confirmation?id=' + currentRoster.id + '&departmentId=' + departmentId)">
				立即预约
			</view>
		</view>
	</view>
</template>

<script>
// mine/coupons/coupons.js
const req = require('../../utils/request.js');
const api = require('../../utils/api.js');
const util = require('../../utils/util.js');
const app = getApp();

export default {
	data() {
		return {
			picUrlss: req.public.picUrls,
			id: '',
			departmentId: '',
			params: {},
			currentTab: 0,
			timeIndex: null,
			dateIndex: null,
			form: {
				page: 1,
				limit: 10
			},
			workList: [],
			isLoad: true,
			currentRoster: '' ,//选中的排班
			isReservation: false,//该时间段是否预约
		};
	},

	components: {},
	props: {},
	onLoad(options) {
		this.id = options.id;
		this.departmentId = options.departmentId;
		this.getInfo();
	},
	onShow: function() {
		this.getRostering();
	},
	onReachBottom() {
		this.form.page++;
		this.getRostering();
	},
	methods: {
		getInfo() {
			req.getRequest(api.doctor_info, { id: this.id }, data => {
				this.params = data;
			});
		},
		captureTime(time, isTime) {
			return util.captureTime(time, isTime);
		},
		DateToUnix(string) {
			//将日期时间转为时间戳
			var f = string.split(' ', 2);
			var d = (f[0] ? f[0] : '').split('-', 3);
			var t = (f[1] ? f[1] : '').split(':', 3);
			var ts = new Date(
				parseInt(d[0], 10) || null,
				(parseInt(d[1], 10) || 1) - 1,
				parseInt(d[2], 10) || null,
				parseInt(t[0], 10) || null,
				parseInt(t[1], 10) || null,
				parseInt(t[2], 10) || null
			).getTime();
			// ts=ts/1000;
			return ts;
		},
		timeRange(startTime, endTime) {
			let endTimes = this.DateToUnix(endTime);
			let n = new Date();
			var thisResult = (Number(Date.parse(n)) - endTimes) / 3600 / 1000;
			if (thisResult > 0) {
				return false;
			} else {
				return true;
			}
		},
		getRostering() {
			let that = this;
			let form = that.form;
			form.sysUid = this.id;
			req.getRequest(api.doctor_rostering, form, data => {
				data.map(it => {
					it.rosteringList.map(sub => {
						sub.isOpen = that.timeRange(sub.startTime, sub.endTime);
					});
					return it;
				});
				if (data && data.length == 10) this.isLoad = true;
				if (this.form.page > 1) data = this.workList.concat(data);
				this.workList = data;
			});
		},
		tab(e) {
			let that = this;
			const index = e.currentTarget.dataset.current;
			if (that.currentTab === index) {
				return false;
			}
			that.setData({
				currentTab: index
			});
		},
		async selectTime(subItem, index, subIndex) {
			let that = this;
			console.log('subItem==', subItem);
			if (subItem.receivedNo - subItem.surplusNo == 0) return false;
			let isReservation = await this.checkReservation(subItem);
			if(isReservation){
				req.alertMsg('你已预约该时间段',data=>{
					// this.jumpUrl('/onlineregistration/registrationlist/registrationlist')
				})
			}else{
				that.timeIndex = subIndex;
				that.dateIndex = index;
				this.currentRoster = subItem;
			}
			
		},
		checkReservation(item){
			let pa = {
				rosteringId: item.id
			}
			return new Promise((resolve,reject)=>{
				req.getRequest(api.rostering_isReservation,pa,data=>{
					resolve(data);
					// this.isReservation = data;
					// if(data){
					// 	return req.alertMsg('你已预约该时间段','查看详情',data=>{
					// 		this.jumpUrl('/onlineregistration/registrationlist/registrationlist')
					// 	})
					// }
				})
			})
		},
		jumpUrl(url) {
			uni.navigateTo({
				url: url
			});
		},
		getweekday(date) {
			var weekArray = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六');
			var week = weekArray[new Date(date).getDay()];
			return week;
		}
	}
};
</script>

<style>
@import 'doctorinfo.css';
</style>