H5_module/onlineregistration/index/index.vue

<template>
	<view>
		<view class="cons">
			<!-- 位置 -->
			<view class="box tap-area" @click="jumpUrl('/pages/nearby/nearby')">
				<view class="header" v-if="merchant.logo">
					<image :src="merchant.logo" mode="aspectFill"></image>
				</view>
				<view class="header-title">
					<view class="header-name">{{merchant.title}}</view>
					<view class="header-text"><text>距离您</text>{{merchant.range ? merchant.mDistance < 1000 ? merchant.mDistance+'m' : merchant.range+'km' : ''}}</view>
				</view>
				<view class="header-more">
					<view class="more ddflex"><image src="../../static/pages/images/more.png"></image></view>
				</view>
			</view>
			<!-- 科室 -->
			<view class="box">
				<view class="title ddflex">
					<view class="fflex">选择科室</view>
					<!-- <view class="more ddflex"><image src="../../static/pages/images/more.png"></image></view> -->
				</view>
				<view class="tab ddflex pro-item">
					<view :class="'li' + (index==departmentIndex ? ' active':'')" v-for="(item,index) in departmentList" :key="index" @click="selectDepartment(item.id,index)">
						{{item.name}}
					</view>
				</view>
			</view>
			<!-- 医生 -->	
			<view class="box">
				<view class="title ddflex">
					<image class="date-icon" src="../static/onlineregistration/image/dateIcon.png"></image>
					<biaofun-datetime-picker
						:dateStr="dateTime"
						:start="today"
						:end="endDate"
						fields="day"
						class="date-title fflex"
						@change="changeDatesPicker"
					></biaofun-datetime-picker>
					<view class="more pmore ddflex"><image src="../../static/pages/images/more.png"></image></view>
				</view>
				<block v-if="doctorList&&doctorList.length>0">
				<view class="box doctor-item" v-for="(item,index) in doctorList" :key="index" @click="jumpUrl('/onlineregistration/doctorinfo/doctorinfo?id='+item.id+'&departmentId='+departmentList[departmentIndex].id)">
					<view class="header">
						<image :src="item.headUrl?item.headUrl:'../static/onlineregistration/image/doctorPic.png'" mode="aspectFill"></image>
					</view>
					<view class="header-title">
						<view>
							<text class="doctor-name">{{item.realName}}</text>
							<text class="doctor-position" v-if="item.userExtend&&item.userExtend.label">
							<block v-for="(it,idx) in item.userExtend.label.split(',')" :key="idx" v-if="idx==0">{{it}}</block></text>
						</view>
						<view class="doctor-about tovers" v-if="item.userExtend.projects">{{item.userExtend.projects}}</view>
					</view>
					<view class="header-more">
						<view class="regist-btn">预约</view>
					</view>
				</view>
				</block>
				<view class="nodata" v-else>
					<image :src="picUrlss+'empty_jl.png'"></image>
					<view>没有医生排班</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
//index.js
//获取应用实例
const app = getApp();
const req = require('../../utils/request.js');
const utils = require('../../utils/util.js');
const api = require('../../utils/api.js');
import biaofunDatetimePicker from '../../components/biaofun-datetime-picker/biaofun-datetime-picker.vue'
export default {
	components: {
		biaofunDatetimePicker
	},
	data() {
		return {
			picUrlss: req.public.picUrls,
			query: {},
			merchant: {},
			departmentList: '',
			departmentIndex: 0,
			today: utils.formatTime(new Date).t2,
			endDate: this.getNowdate(new Date()),
			dateTime: utils.formatTime(new Date).t2,
			doctorList:[]
		};
	},

	onReachBottom() {
	},
	onLoad: async function(options) {
		this.query = options;
	},

	async onShow() {
		this.merchant = req.getStorage('MERCHANT')?req.getStorage('MERCHANT'):req.getStorage('defaultMerchant');
		console.log('merchant==',this.merchant)
		await this.getDepartmentList()
		await this.getDoctorList();
	},
	onShareAppMessage: function() {
	},
	onShareTimeline() {
	},
	methods: {
		getNowdate(start){
			var date_now = new Date(start)//获取当前时间
			var year = date_now.getFullYear()//获取当前时间的年份
			var month = date_now.getMonth()//获取当前时间的月份
			var day = date_now.getDate()//获取当前时间的日
			var days = new Date(year,month,0)//将获取到的年月赋值给days
			days = days.getDate()//获取当前年月的日
			var year2 = year
			var month2 =  parseInt(month+7)//获取当前月份的1一个月以后的月份
			if(month2 > 12){
			year2 = parseInt(year2) + 1
			month2 = parseInt(month2) % 12
			}//考虑到12月要是获取一个月以后，就是一月，年份需要加一 ，一年没有13月，所以%12，取得来年1月
			var day2 = day
			var days2 = new Date(year2,month2,0)
			days2 = days2.getDate()
			if(day2>days2){
			day2 = days2
			}//获取了当前年份的日和6个月以后的日，为的就是判断如果前一个月是有31号，后一个月没有，就将一个月以后的日期取到，赋值给day2
			if(month2 < 10){
			month2 = '0' + month2
			}
			var time = year2 + '-' + month2 + '-' + day2
			return time
		},
		selectDepartment(id,index){
			if(this.departmentIndex == index) return false;
			this.departmentIndex = index
			this.getDoctorList()
		},
		// 获取科室列表
		getDepartmentList(){
			let that = this;
			return new Promise((resolve,reject)=>{
				req.getRequest(api.unified_tree_list, {type:2}, data => {
					this.departmentList = data
					resolve()
				});
			})
		},
		// 获取医生列表
		getDoctorList(){
			let that = this;
			let params = {
				merchantId: this.merchant.id,
				dateTime: this.dateTime,
				departmentId: this.departmentList[this.departmentIndex].id
			}
			return new Promise((resolve,reject)=>{
				req.getRequest(api.doctor_list, params, data => {
					this.doctorList = data;
					resolve()
				});
			})
		},
		changeDatesPicker(e){
			this.dateTime = e.f1
			this.getDoctorList()
		},
		jumpUrl(url) {
			uni.navigateTo({
				url: url
			})
		}
	}
};
</script>

<style>
	@import "index.css";
</style>