anmo-master/pages/my/mangshi.vue

<template>
	<view class="mangshi">
		<view class="timeView">
			<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" 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()">
				保存选择
			</view>
		</view>
	</view>
</template>

<script>
	import itsCalendar from '@/components/its-calendar/its-calendar.vue';
	export default {
		components: {
			itsCalendar
		},
		data() {
			return {
				msTimeDate: 0,
				newmsList: [],
				msList: [],
				startTime: '',
				yearsDate: '',
			}
		},
		onLoad() {
			if (this.$queue.getData('msTimeDate')) {
				this.msTimeDate = parseInt(this.$queue.getData('msTimeDate'));
			} else {
				this.msTimeDate = 60;
			}
			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: {
			sub() {
				// if (this.msList.length == 0) {
				if(this.yearsDate === ''){
					this.$queue.showToast('请先添加待选时间！');
					return;
				}
				uni.showModal({
					title: '温馨提示',
					content: '是否将待选区的时间设置为忙时？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					confirmColor:'#1EDA94',
					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() {
				this.$Request.postT('/app/artificerTime/updateArtificerTime?artificerDate=' + this.yearsDate + '&times=' +
					this.msList.join(",") + '&artificerId=' + uni.getStorageSync('artificerId')).then(res => {
					if (res.code == 0) {
						this.$queue.showToast('设置成功！')
					} else {
						this.$queue.showToast(res.msg);
					}
				});
			},
			getMsTime(artificerDate) {
				this.yearsDate = artificerDate;
				this.$Request.getT('/app/artificerTime/selectArtificerTimeByArtificerId?artificerId=' + uni.getStorageSync(
					'artificerId') + '&artificerDate=' + artificerDate).then(res => {
					if (res.code == 0) {
						this.msList = [];
						this.newmsList = res.data;
						res.data.forEach(d => {
							this.msList.push(d.artificerTime);
						});
					}
				});
			},
			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)
				this.msList.push(e.hours);
			}
		}
	}
</script>

<style lang="scss">
	.mangshi {
		// background: #FFFFFF;
		.sub {
			width: 686rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			background: #1EDA94;
			border-radius: 60rpx 60rpx 60rpx 60rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			margin-top: 24rpx;
			margin-left: 32rpx;
		}
	}

	.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;
		}
	}

	
</style>