xinelu-doctor-app/pages/ServiceSchedule/ServiceSchedule.vue

<template>
	<view class="app">
		<view class="content" v-if='tabslist.length>0'>
			<view class="" v-if="timecurrent==0">
				<span>{{tabslist[0].name}}&nbsp;&nbsp;{{tabslist[0].dates}}</span>

			</view>
			<view class="" v-else>
				<span>{{tabslist[timecurrent].name}}&nbsp;&nbsp;{{tabslist[timecurrent].dates}}</span>
			</view>
			<tabs :list="tabslist" :current="timecurrent" @change="timechange" active-color="#18CBB3"
				background="#18CBB3">
			</tabs>
			<view class="imageitem">
				<image src="../../static/jiantou.png" mode="" @tap="timedata"></image>
			</view>
		</view>
		<view class="time">
			<view @tap="tapSoonerorlater('morning')"
				:class="Soonerorlater=='morning'?'morningbutton':'afternoonbutton'">
				上午
			</view>
			<view @tap="tapSoonerorlater('after')" :class="Soonerorlater=='after'?'morningbutton':'afternoonbutton'">
				下午
			</view>
			<view @tap="tapSoonerorlater('all')" :class="Soonerorlater=='all'?'morningbutton':'afternoonbutton'">
				全天
			</view>

		</view>

		<view class="morning">
			<view class="morningtime">
				上午
			</view>
			<view class="bodyitem">

				<view class="" v-for="(item ,index) in List[timecurrent].morningList">
					<view @tap='taptimemorning(item,index)'
						:class="item.status==true?'morningbodytwo':'morningbody'">
						<span class="spanitem">{{item.scheduleTimeSlot}}</span>
						<view class="spanitem" v-if="item.status==false">不可预约</view>
						<view class="spanitem" v-else>可预约</view>
					</view>

				</view>
			</view>
		</view>
		<view class="morning after">
			<view class="morningtime">
				下午
			</view>
			<view class="bodyitem">
				<view class="" v-for="(item ,index) in List[timecurrent].afternoonList">
					<view @tap='taptimeafter(item,index)'
						:class="item.status==true?'bodytwo':'body'">
						<span class="spanitem">{{item.scheduleTimeSlot}}</span>
						<view class="spanitem" v-if="item.status==false">不可预约</view>
						<view class="spanitem" v-else>可预约</view>
					</view>
				</view>
			</view>

		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import tabs from '@/components/utabs/u-tabs.vue'
	import {
		getListByDoctor,
		updateStatus
	} from '@/api/ServiceSchedule/ServiceSchedule.js'
	export default {
		components: {
			tabs
		},
		data() {
			return {
				time: 0,
				timecurrent: 0,
				tabslist: [{
					dates: '',
					name: '',
				}],
				doctorId: '', //医生id
				List: [{
					morningList: {},
					afternoonList: {},
				}],


				morningListdata: [],
				status: '',
				timeindex: null,
				timeindexafter: null,
				Soonerorlater: 'afternoonbutton',
				qurey: {
					schedulePlanDetailIds: [],
					status: "",
				},

			}
		},
		onLoad() {

		},
		onShow() {
			this.doctorId = uni.getStorageSync('id')
			// console.log(this.doctorId)
			this.getListByDoctordata()
		},
		methods: {
			//切换上下午全天
			tapSoonerorlater(item) {
				this.Soonerorlater = item
				console.log(item)
				if (this.Soonerorlater == 'morning') {
					this.timeindexafter = null
					this.timeindex = null
					this.morningdata()

				} else if (this.Soonerorlater == 'after') {
					this.timeindexafter = null
					this.timeindex = null
					this.afterdata()
				
				} else if (this.Soonerorlater == 'all') {
					this.timeindexafter = null
					this.timeindex = null
					this.alldata()
				}
			},
			// 修改上午全部状态
			morningdata(){
				this.qurey={
					schedulePlanDetailIds:[],
					status:'1',
					
				}
				getListByDoctor(this.doctorId).then(res => {
		
					if (res.data) {
		
						res.data[this.timecurrent].morningList.forEach(e=>{
						  this.qurey.schedulePlanDetailIds.push(e.schedulePlanDetailId)
							
						})
						updateStatus(this.qurey).then(res => {
							if (res.code == 500) {
								this.$refs.uToast.show({
									title: res.msg,
									type: 'error',
								})
						
							} else {
								this.$refs.uToast.show({
									title: '修改成功',
									type: 'success',
									duration: '1000'
								})
								this.updata()
						
							}
						
						})
					}
				})
				
				
			},
			// 修改下午全部状态
			afterdata(){
				this.qurey={
					schedulePlanDetailIds:[],
					status:'1',
					
				},
				getListByDoctor(this.doctorId).then(res => {
		
					if (res.data) {
						console.log(res.data[this.timecurrent].afternoonList)
						// var schedulePlanDetailId
						res.data[this.timecurrent].afternoonList.forEach(e=>{
						  this.qurey.schedulePlanDetailIds.push(e.schedulePlanDetailId)
							
						})
						updateStatus(this.qurey).then(res => {
							if (res.code == 500) {
								this.$refs.uToast.show({
									title: res.msg,
									type: 'error',
								})
						
							} else {
								this.$refs.uToast.show({
									title: '修改成功',
									type: 'success',
									duration: '1000'
								})
								this.updata()
						
							}
						
						})
					}
				})
				
			},
			// 修改全天状态
			alldata(){
				getListByDoctor(this.doctorId).then(res => {
					this.qurey={
						schedulePlanDetailIds:[],
						status:'1',
						
					}
					if (res.data) {
						console.log(res.data[this.timecurrent].afternoonList)
						// var schedulePlanDetailId
						res.data[this.timecurrent].afternoonList.forEach(e=>{
						  this.qurey.schedulePlanDetailIds.push(e.schedulePlanDetailId)
							
						})
						res.data[this.timecurrent].morningList.forEach(e=>{
						  this.qurey.schedulePlanDetailIds.push(e.schedulePlanDetailId)
							
						})
						updateStatus(this.qurey).then(res => {
							if (res.code == 500) {
								this.$refs.uToast.show({
									title: res.msg,
									type: 'error',
								})
						
							} else {
								this.$refs.uToast.show({
									title: '修改成功',
									type: 'success',
									duration: '1000'
								})
								this.updata()
						
							}
						
						})
					}
				})
				
			},
			//选择时间
			taptimemorning(item, index) {
				this.qurey={
					schedulePlanDetailIds:[],
					status:'1',
					
				}
				this.status = item.status
				this.timeindex = index
				if (item.status == true) {
					this.qurey.status = "1"

				} else {
					this.qurey.status = "0"

				}
		

				this.qurey.schedulePlanDetailIds.push(item.schedulePlanDetailId)
				console.log(this.qurey)
				updateStatus(this.qurey).then(res => {
					if (res.code == 500) {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error',
						})

					} else {
						this.$refs.uToast.show({
							title: '修改成功',
							type: 'success',
							duration: '1000'
						})
						this.updata()
					}

				})

			},
			// 下午
			taptimeafter(item, index) {
				this.timeindexafter = index
				this.qurey={
					schedulePlanDetailIds:[],
					status:''
					
				}
				if (item.status == true) {
					this.qurey.status = "1"

				} else {
					this.qurey.status = "0"

				}
			
				this.qurey.schedulePlanDetailIds.push(item.schedulePlanDetailId)
				console.log(this.qurey)
				updateStatus(this.qurey).then(res => {
					if (res.code == 500) {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error',
						})

					} else {
						this.$refs.uToast.show({
							title: '修改成功',
							type: 'success',
							duration: '1000'
						})
						this.updata()

						// this.getListByDoctordata()
					}

				})
				this.status = item.status

			},
			updata() {
				getListByDoctor(this.doctorId).then(res => {
					if (res.data) {
						this.List = res.data
					}
				})
			},
			getListByDoctordata() {
				this.tabslist = []
				getListByDoctor(this.doctorId).then(res => {
					if (res.data) {
						res.data.forEach(e => {
							// console.log(e)
							this.tabslist.push({
								dates: e.week,
								name: e.scheduleDate,
							})
						})
						console.log(this.tabslist)
						this.List = res.data
					}
				})

			},
			timechange(index) {
				this.timecurrent = index
				this.timeindexafter = null
				this.timeindex = null
				this.Soonerorlater = null
			},
			timedata(){
				this.timecurrent++
				this.timeindexafter = null
				this.timeindex = null
				this.Soonerorlater = null
				
			},
		}
	}
</script>

<style lang="scss">
	.app {
		height: 100vh;
		background: #F1F1F1;
		position: relative;
		overflow: hidden;

		.time {
			display: flex;
			position: absolute;
			right: 2%;
			top: 20%;
			flex-wrap: wrap;
			width: 400rpx;

			.morningbutton {
				width: 128rpx;
				margin: 0 1px 1px 2px;
				font-size: 32rpx;
				border-radius: 30rpx;
				line-height: 54rpx;
				text-align: center;
				color: #FFFFFF;
				background-color: #18CBB3;
			}

			.afternoonbutton {
				margin: 0 1px 1px 2px;
				width: 128rpx;
				font-size: 32rpx;
				border-radius: 30rpx;
				line-height: 54rpx;
				text-align: center;
				color: #18CBB3;
				background-color: #FFFFFF;
				border: 1rpx solid #18CBB3;
			}
		}

		.afternoon {
			width: 100%;
			height: 361px;
			background: #fff;
			border-radius: 0rpx 5rpx 5rpx 0rpx;
			// margin: 15px 0 15px 0;
		}

		.after {
			height: 100vh !important;

		}

		.morning {
			width: 100%;
			height: 420rpx;
			background: #FFFFFF;
			border-radius: 0rpx 5rpx 5rpx 0rpx;
			margin: 20rpx auto;
			background-color: #fff;
			margin: 15px 0 15px 0;

			.morningtime {
				padding: 15px 27px 62rpx 20rpx;
				width: 150rpx;
				font-size: 28rpx;
				font-family: SourceHanSansSC-Medium, SourceHanSansSC;
				font-weight: 500;
				color: #333333;
				line-height: 38rpx;
			}

			.bodyitem {
				display: flex;
				align-items: flex-start;
				justify-content: flex-start;
				height: 50rpx;
				color: #000000;
				line-height: 27rpx;
				text-align: center;
				flex-wrap: wrap;
			}

			.bodytwo {
				background-color: #18CBB3;
				// font-size: 36rpx;
				// color: #26A888;
				margin-bottom: 30rpx;
				width: 200rpx;
				height: 109rpx;
				// background: #fff;
				margin: 10rpx 30rpx 10rpx 22rpx;

				.spanitem {
					// width: 121px;
					// height: 22px;
					display: inline-block;
					padding: 8rpx;
					font-size: 28rpx;
					font-family: SourceHanSansSC-Medium, SourceHanSansSC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 38rpx;
				}
			}

			.body {
				font-size: 36rpx;
				color: #18CBB3;
				margin-bottom: 30rpx;
				width: 200rpx;
				height: 109rpx;
				background: #fff;
				margin: 10rpx 30rpx 10rpx 22rpx;
				// border-radius: 10rpx 10rpx 10rpx 10rpx;
				// opacity: 1;
				// margin: 30rpx;
				border: 1rpx solid #E6E6E6;



				.spanitem {
					// width: 121px;
					// height: 22px;
					display: inline-block;
					padding: 8rpx;
					font-size: 28rpx;
					font-family: SourceHanSansSC-Medium, SourceHanSansSC;
					font-weight: 500;
					color: #666666;
					line-height: 38rpx;
				}
			}



			.morningbodytwo {
				background-color: #18CBB3;
				// font-size: 36rpx;
				// color: #26A888;
				margin-bottom: 30rpx;
				width: 200rpx;
				height: 109rpx;
				// background: #fff;
				margin: 10rpx 30rpx 10rpx 22rpx;

				.spanitem {
					// width: 121px;
					// height: 22px;
					display: inline-block;
					padding: 8rpx;
					font-size: 28rpx;
					font-family: SourceHanSansSC-Medium, SourceHanSansSC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 38rpx;
				}
			}

			.morningbody {
				font-size: 36rpx;
				color: #18CBB3;
				margin-bottom: 30rpx;
				width: 200rpx;
				height: 109rpx;
				background: #fff;
				margin: 10rpx 30rpx 10rpx 22rpx;
				// border-radius: 10rpx 10rpx 10rpx 10rpx;
				// opacity: 1;
				// margin: 30rpx;
				border: 1rpx solid #E6E6E6;



				.spanitem {
					// width: 121px;
					// height: 22px;
					display: inline-block;
					padding: 8rpx;
					font-size: 28rpx;
					font-family: SourceHanSansSC-Medium, SourceHanSansSC;
					font-weight: 500;
					color: #666666;
					line-height: 38rpx;
				}
			}

		}




		.content {
			background-color: #fff;
			width: 100%;
			height: 214rpx;
			border-radius: 5rpx 5rpx 5rpx 0rpx;

			::v-deep .u-tabs[data-v-59a86fad] {
				padding: 74rpx 0 0 0;
			}

			::v-deep .uni-scroll-view,
			.uni-scroll-view-content {
				width: 96%;
				height: 100%;
			}

			span {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: 1%;
			}

			::v-deep.tabs {
				width: 100%;
				position: fixed;


			}

			.imageitem {
				position: absolute;
				top: 8%;
				right: 1%;


				// padding-top: 100rpx;
				float: right;

				image {
					width: 18rpx;
					height: 32rpx;
				}
			}
		}
	}
</style>