sadjv3_jishi/pages/my/mangshi.vue

<template>
	<view>
		<view class="timeView">
			<view class="timeView-top">
				<span class="dx_title">是否接单 <!-- <text class="switchTxt">{{switchTxt=='true'?'接单':'不接单'}}</text> --></span>
				<switch checked style="transform:scale(0.7)" @change="switch1Change"/>
			</view>
			<view class="selectTimt">
				<view class="dx_title">选择接单时问</view>
				<view class="selectTimt-bottom">
					<picker class="selectTimt-time" mode="time" :value="starTime" :start="starTime" end="23:59" @change="bindTimeChange">
						<view class="selectTimt-time-title">开始时间</view>
						<view class="uni-input">{{starTime}}</view>
					</picker>
					<picker class="selectTimt-time" mode="time" :value="endTime" start="00:00" end="23:59" @change="bindTimeChangeEndTime">
						<view class="selectTimt-time-title">结束时间</view>
						<view class="uni-input">
							<span style="margin-right: 5px;">次日</span>
							<span>{{endTime}}</span>
						</view>
					</picker>
				</view>
				
			</view>
			<times selectedTabColor="#28BA92" selectedItemColor="#28BA92"  @change="getTime" :timeInterval="0.5" :appointTime="msList"
			        :isMultiple="true" :disableTimeSlot = "disableTimeSlot"></times>
			<!-- <its-calendar :sta_num="0" :end_num="24" :int_num="msTimeDate" @getTime="TimeData" @getDate="SelData">
			</its-calendar> -->
			<view class="dx_view margin-bottom-sm" v-if="msList.length > 0">
				<view class="dx_title">不可接单时间</view>
				<view class="flex align-center flex-wrap ">
					<view v-for="(item,index) in msList" :key="index" class="btn flex align-center margin-top">
						<view>{{item}}</view>
						<view class="margin-left-sm" @tap.stop="bindupdata(index,item)">x</view>
					</view>
				</view>
			</view>
			<view class="sub" @click="sub()" v-if="switchTxt==true">保存选择1</view>
			<view class="sub" @click="sub()"  v-if="switchTxt==false">保存选择2</view>
		</view>
	</view>
</template>

<script>
	import {
		currentTime,
		initData,
		tomorrow
	} from '../../utils/date.js'
	import times from '@/components/pretty-times/pretty-times.vue'
	import itsCalendar from '@/components/its-calendar/its-calendar.vue';
	export default {
		components: {
			itsCalendar,
			times
		},
		data() {
			return {
				starTime:'',
				endTime: '00:00',
				endTimes:'23:30',
				appointTime:[],
				disableTimeSlot:[],
				msTimeDate: 0,
				newmsList: [],
				msList: [],
				startTime: '',
				yearsDate: '',
				switchTxt:'',
				timeCurrent:'',
				tomorrowTime:''
			}
		},
		onLoad() {
			if (this.$queue.getData('msTimeDate')) {
				this.msTimeDate = parseInt(this.$queue.getData('msTimeDate'));
			} else {
				this.msTimeDate = 60;
			}
			if(this.timeCurrent==''){
				this.timeCurrent=tomorrow().tomorrow+' '+this.endTime;
			}
			this.starTime=currentTime().times;
			this.tomorrowTime=currentTime().date+' '+currentTime().times;
			
			var date = new Date();
			var year = date.getFullYear();
			let month = (parseInt(date.getMonth()) + 1) > 9 ? (parseInt(date.getMonth()) + 1) : "0" + (parseInt(
				date.getMonth()) + 1) // 当前月份
			let days = (date.getDate()) > 9 ? date.getDate() : "0" + date.getDate() //当前日期
			let fullDate = `${month}-${days}`
			let Time = year + '-' + fullDate
			this.yearsDate = Time;
			// this.getMsTime(Time);
		},
		methods: {
			bindTimeChange: function(e) {// 当天接单开始时间
				this.starTime = e.detail.value;
				this.tomorrowTime=currentTime().date+' '+this.starTime;
			},
			bindTimeChangeEndTime(e){//次日接单结束时间
				this.endTime = e.detail.value;
				this.timeCurrent=tomorrow().tomorrow+' '+this.endTime;
			},
			switch1Change: function (e) {
				this.switchTxt=e.detail.value
				var time=''
				if(this.switchTxt==true){
					time='1'
				}else{
					time='2'
				}
				this.sfJdan(time)
				
			},
			sfJdan(time){//是否接单
				var data={
					flag:time,
					userId:uni.getStorageSync('userId')
				}
				this.$Request.postT('/app/artificerTime/setArtificerAccept',data).then(res => {
					if (res.code == 0) {
						this.$queue.showToast('设置成功！')
					} else {
						this.$queue.showToast(res.msg);
					}
				});
			},
			getTime(time){
				
				this.msList=time;
			
			},
			sub() {
				this.saveMangShi();
				// if (this.msList.length == 0) {
				// if(this.yearsDate === ''){
				// 	this.$queue.showToast('请先添加待选时间！');
				// 	return;
				// }
				// uni.showModal({
				// 	title: '温馨提示',
				// 	content: '是否将待选区的时间设置为忙时？',
				// 	showCancel: true,
				// 	cancelText: '取消',
				// 	confirmText: '确认',
				// 	success: res => {
				// 		if (res.confirm) {
				// 			this.saveMangShi();
				// 		}
				// 	}
				// });
			},
			//删除规格
			bindupdata(index1, item) {
				let over = false;
				for (var i = 0; i < this.newmsList.length; i++) {
					if (this.newmsList[i].artificerTime === item) {
						if (this.newmsList[i].classify == 1) {
							over = true;
							break;
						}
					}
				}
				if (!over) {
					this.msList.splice(index1, 1)
				} else {
					this.$queue.showToast('当前时间已被用户下单，禁止删除！')
				}
			},
			saveMangShi() {
				// artificerId:uni.getStorageSync('artificerId')
				var data={
					idleTime:this.tomorrowTime+','+this.timeCurrent,
					busyTime:this.msList.toString(),
					userId:uni.getStorageSync('userId')
				}
				this.$Request.postT('/app/artificerTime/setArtificerTime',data).then(res => {
					if (res.code == 0) {
						this.$queue.showToast('设置成功！')
					} else {
						this.$queue.showToast(res.msg);
					}
				});
			},
			getMsTime(artificerDate) {
				this.yearsDate = artificerDate;
				this.$Request.getT('/selectArtificerTimeByArtificerId?userId=' + uni.getStorageSync('userId') + '&artificerDate=' + artificerDate).then(res => {
					if (res && res.code == 0 && res.data) {
						this.msList = [];
						this.newmsList = res.data;
						this.msList = res.data.map((item)=> item.artificerTime);
						console.log('getMsTime',this.msList);
						uni.$emit("sendChildMsList",this.msList);
					}
				});
			},
			SelData(e) {
				console.log(e)
				var date = new Date();
				var year = date.getFullYear();
				let Time = year + '-' + e.days
				this.getMsTime(Time);
				this.msList = [];
			},
			// 时间段数据
			TimeData(e) {
				console.log(e, e.days)
				var date = new Date();
				var year = date.getFullYear();
				this.startTime = year + '-' + e.days + ' ' + e.hours
				this.yearsDate = year + '-' + e.days
				console.log(this.yearsDate)
				var hours=e.hours;
				for(var i=0;i<hours.length;i++){
					if (!this.msList.includes(hours[i].hours)) {
					  this.msList.push(hours[i].hours);
					}
				}
				
				
				console.log('忙时list' + JSON.stringify(this.msList) );

				// this.msList.push(e.hours);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.selectTimt-time-title{
		text-align: center;
		margin-bottom: 5px;
	}
	/deep/.uni-input{
		text-align: center;
		color: #28BA92;
	}
	.selectTimt-time{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.selectTimt-bottom{
		margin-top:10px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		width: 100%;
	}
	.selectTimt{
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 10px 5px;
		background: #fff;
		margin: 10px auto;
	}
	.dx_title{
		font-size: 14px;
		font-weight: bold;
	}
	.switchTxt{
		font-size: 13px;
		font-weight: 400;
		margin-left: 5px;
		color: #28BA92;
	}
	.timeView-top{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 10px 5px;
		background: #fff;
		margin: 10px auto;
	}
	page {
		background: #f7f7f7;
	}

	.dx_view {
		background: #FFFFFF;
		border-radius: 8rpx;
		padding: 20rpx 20rpx 40rpx;
		width: 710rpx;
		margin-top: 20rpx;

		.dx_title {
			font-size: 30rpx;
			font-weight: bold;
		}
	}

	.timeView {
		display: flex;
		width: 750rpx;
		flex-wrap: wrap;

		.timeview_item {
			background: #F7F7F7;
			border-radius: 15rpx;
			width: 120rpx;
			height: 140rpx;
			text-align: center;
			padding-top: 14rpx;
			margin: 20rpx 20rpx 20rpx 6rpx;
		}

		.timeview_acitem {
			width: 120rpx;
			height: 140rpx;
			text-align: center;
			background: #E8F9EF;
			border: 1px solid #00B88F;
			color: #00B88F;
			border-radius: 15rpx;
			padding-top: 14rpx;
			margin: 20rpx 20rpx 20rpx 6rpx;
		}

		.item_text {
			width: 120rpx;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 500;
			margin-top: 6rpx;
		}
	}

	.btn {
		border: 1upx solid #CCCCCC;
		border-radius: 28px;
		padding: 15rpx 30rpx;
		margin-right: 25rpx;
	}

	.btns {
		border: 1upx dashed #333333;
		border-radius: 28px;
		padding: 10rpx 30rpx;
		margin-right: 25rpx;
	}

	.active {
		/* background: #FCD202; */
		/* border: none; */
	}

	.topView {
		width: 750rpx;
		height: 180rpx;
		background: #FFFFFF;

		.topview_item {
			width: 160rpx;
			height: 120rpx;
			text-align: center;
			padding-top: 14rpx;
			margin: 0rpx 10rpx;
		}

		.topview_acitem {
			width: 160rpx;
			height: 120rpx;
			text-align: center;
			background: #E8F9EF;
			border: 1px solid #00B88F;
			color: #00B88F;
			border-radius: 20rpx;
			padding-top: 14rpx;
			margin: 0rpx 10rpx;
		}

		.item_text {
			width: 160rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: bold;
			margin-top: 6rpx;
		}
	}

	.sub {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 696rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 50rpx;
		margin: 30rpx 10rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		background: linear-gradient(90deg, #019C88, #28BA92, #35C495);
	}
</style>