reservation-uniapp-250509/service-uniapp-technician/pages/mine/serverTime.vue

<template>
	<mNavbar title="服务时间" :leftClick="leftClick">
	</mNavbar>
	
	<view class="box">
		<van-dropdown-menu>
			<van-dropdown-item @change='changeServer' v-model="serviceTitle" :options="techniService" />
			<van-dropdown-item @change="change" :options="operationList">
				<template #title>快捷操作</template>
			</van-dropdown-item>
		</van-dropdown-menu>

		<view v-show="serviceTitle == 0" class="time">
			<view class="date-list">
				<view :class="{'date-item' : true, act : i == index}" v-for="(item, index) in dateList"
					@click="selectDate(item, index)">
					<view>
						{{ item.format('dddd') }}
					</view>
					<view>
						{{ item.format('MM-DD') }}
					</view>
				</view>
			</view>

			<view style="display: flex;justify-content: center;" v-if="loading">
				<van-loading />
			</view>


			<view class="time-list" v-else-if="timeList.length">

				<view :class="{'time-item' : true , no : !item.timeOut && item.isDelete == 'Y' , timeOut : item.timeout }" v-for="(item, index) in timeList"
					@click="selectTime({time : item, date : dateList[i]})">
					<van-checkbox-group v-model="checked">
						<view v-if="multipleChoice" class="checked">
							<van-checkbox :name="item.id" :disabled="item.timeout"></van-checkbox>
						</view>
						<view>
							{{ item.timeName }}
						</view>
						<view class="status">
							{{ item.timeout ? '过时' : item.isDelete != 'Y' ? '打开' : '关闭' }}
						</view>
					</van-checkbox-group>
				</view>
			</view>
			
			<van-empty v-else image="/static/empty/data.png" image-size="400rpx" description="无数据请上线初始化"/>

		</view>

		<view v-show="serviceTitle == 1" class="project">
			<view v-if="projectList.length > 0" class="server-list">
				<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" ref="list"
					@load="onLoad">
					<van-checkbox-group v-model="checked">
						<view v-for="item in projectList" class="server-item">
							<view v-if="multipleChoice" class="checked">
								<van-checkbox :name="item.shopObject.id"></van-checkbox>
							</view>
							<view class="img-box">
								<image :src="item.shopObject.image" mode="aspectFill"></image>
							</view>
							<view class="server-info">
								<view class="server-title">{{ item.shopObject.title }}</view>
								<view class="time-coupon">
									<image src="@/static/home/time-icon.png"></image>
									<view class="time">{{ item.shopObject.times }}分钟</view>
								</view>
								<view class="price">
									<view class="current-price">
										<text class="unit">￥</text>{{ item.shopObject.price }}
									</view>
									<view class="original-price">
										<text class="unit">￥</text>{{ item.shopObject.oldPrice }}
									</view>
								</view>
								<view class="sales-volume">
									<image src="@/static/icons/icon1.png"></image>
									<view class="desc">已售出{{ item.shopObject.payNum }}+单</view>
								</view>
							</view>
							<view class="selective-technician">
								<view @click.stop="selectProject(item)" class="btn">
									{{ item.isDelete == 'Y' ? '取消项目' : '选择项目'}}
								</view>
							</view>
						</view>
					</van-checkbox-group>
				</van-list>
			</view>
			
			<van-empty v-else image="/static/empty/data.png" image-size="400rpx" description="无数据请上线初始化"/>
		</view>

	</view>
</template>

<script>
	import mNavbar from '@/components/base/m-navbar.vue'
	export default {
		name: "serverTime",
		components: {
			mNavbar,
		},
		data() {
			return {
				i: 0,
				dateList: [],
				timeList: [],
				loading: false,
				projectList: [],
				finished: false,
				serviceTitle: 0,
				techniService: [{
						text: '服务时间',
						value: 0
					},
					{
						text: '服务项目',
						value: 1
					}
				],
				checked: [],
				multipleChoice: false, //是否开启多选
				operationList: [{
						text: '打开',
						value: 0
					}, {
						text: '关闭',
						value: 1
					},
					{
						text: '开启多选',
						value: 2
					},
					{
						text: '全选',
						value: 3
					}
				],
				today : null,
				selDate : null,
				isInit : false
			};
		},
		onShow() {
			if(this.dateList.length >= 7) return;		//防止多次添加日期,onShow这个钩子每次离开页面然后回来都会调用一下
			this.today = this.dayjs()
			this.dateList.push(this.today)
			for (let i = 1; i < 7; i++) {
				this.dateList.push(this.today.add(i, 'day'))
			}
			this.selectDate(this.today,0)
			this.getProjectList()
		},
		methods: {
			
			// 选择日期
			selectDate(item, index) {
				this.i = index
				this.loading = true
				this.$api('getVipTenOrderList', {
					tenId: this.$route.query.uid,
					name: item.format('dddd')
				}, res => {
					if (res.code == 200) {
						res.result.forEach(time => {
							if(this.isFormerly({ time, date : this.dateList[this.i] })){		//判断时间是否超时了
								time.timeout = true
							}else{
								time.timeout = false
							}
						})
						this.timeList = res.result;
						this.selDate = item
					}
					this.loading = false
				})
			},
			
			//选择时间
			selectTime(item) {
				if(item.time.timeout){		//判断是否是过去时间
					return uni.showToast({
						title: '选择时间已过时',
						duration: 2000
					});
				}
				
				if (this.multipleChoice) {
					if (this.checked.includes(item.time.id)) {
						this.checked = this.checked.filter(id => id !== item.time.id);
					} else {
						this.checked.push(item.time.id);
					}
					return
				}
				this.updateTerTime([item.time.id], item.time.isDelete == 'Y' ? 'N' : 'Y');
			},
			
			//返回个人中心
			leftClick() {
				uni.switchTab({
					url: '/pages/index/center'
				})
			},
			
			//修改上钟时间
			updateTerTime(selectTimeArr, isDelete) { 
				let data = {
					ids: selectTimeArr.toString(),
					isDelete
				}
				this.$api('updateTerTime', data, res => {
					if (res.code == 200) {
						this.selectDate(this.selDate, this.i)
					}
				})
			},
			
			//获取项目列表
			getProjectList() { 
				this.$api('queryTerProject', this.queryParams, res => {
					if (res.code == 200) {
						this.projectList = res.result;
					}
				})
			},
			
			//开启或关闭项目
			updateTerProject(selectTimeArr, isDelete) { 
				let data = {
					ids: selectTimeArr.toString(),
					isDelete
				}
				this.$api('updateTerProject', data, res => {
					if(res.code == 200){
						this.getProjectList()
					}
				})
			},
			
			//切换选择
			changeServer() { 
				this.checked = [];		//清空已经选择的时间id或项目id
			},
			
			//打开关闭时间、项目
			operationItem(isOpen) { 
				if (this.serviceTitle == 0) { //打开关闭时间 isOpen 是否打开(打开Y 关闭N)
					this.updateTerTime(this.checked, isOpen)
				} else { //打开关闭项目
					this.updateTerProject(this.checked, isOpen)
				}
			},
			
			//选择项目
			selectProject(item) { 
				if (this.multipleChoice) {
					if (this.checked.includes(item.id)) {
						this.checked = this.checked.filter( id => id !== item.id);
					} else {
						this.checked.push(item.id);
					}
					return
				}
				this.updateTerProject([item.id], item.isDelete == 'Y' ? 'N' : 'Y')
			},
			
			//区分不同操作列表不同操作(全选，打开，关闭等)
			change(value) {
				if (value == 0) {
					this.operationItem('Y')
				} else if (value == 1) {
					this.operationItem('N')
				} else if (value == 2) {
					this.multipleChoice = !this.multipleChoice
					this.operationList[2].text = this.multipleChoice ? '取消多选' : '开启多选'
					this.checked = []
					
					if (this.operationList[3].text == '取消全选') { //取消全选逻辑
						this.operationList[3].text = '全选'
					}
				} else if (value == 3) { //全选
					if (!this.multipleChoice) {
						return uni.showToast({
							title: '请开启多选',
							icon: 'none'
						})
					}
					
					if (this.operationList[3].text == '取消全选') { //取消全选逻辑
						this.operationList[3].text = '全选'
						return this.checked = []
					}

					let arr = []
					if (this.serviceTitle == 0) {		//遍历时间列表
						this.timeList.forEach(time => {
							if(!time.timeout){		//筛选掉已过时的
								arr.push(time.id)
							}
						})
					} else {
						this.projectList.forEach(project => {
							arr.push(project.shopObject.id)
						})
					}
					this.checked = arr
					this.operationList[3].text = '取消全选'
				}
			},
			
			//项目滑动到底部
			onLoad(){},
			
			//判断时间是否为过去时间
			isFormerly(e){
				let day = e.date.format('YYYY-MM-DD')
				let selectTime = this.dayjs(`${day} ${e.time.timeName}`)
				let nowTime = this.dayjs()
				
				if(selectTime.isBefore(nowTime)){
					return true
				}
				
				return false
			}
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		box-sizing: border-box;

		.date-list {
			display: flex;
			width: 100%;
			overflow: hidden;
			overflow-x: scroll;
			padding: 30rpx 0rpx;
			text-align: center;
			font-size: 24rpx;

			.date-item {
				flex-shrink: 0;
				padding: 10rpx;
				margin: 0 10rpx;

				&>view {
					padding: 6rpx 10rpx;
				}
			}

			.act {
				background-color: #50a2a7;
				color: #fff;
				border-radius: 10rpx;
			}
		}

		.time-list {
			display: flex;
			width: 100%;
			text-align: center;
			font-size: 24rpx;
			flex-wrap: wrap;
			height: calc(100% - 200rpx);
			overflow: hidden;
			overflow-y: scroll;

			.time-item {
				position: relative;
				padding: 20rpx;
				width: calc(25% - 20rpx);
				background-color: #E4E4E4;
				box-sizing: border-box;
				margin: 10rpx;
				border-radius: 16rpx;
				position: relative;
				line-height: 40rpx;
				color: #777;

				.status {
					color: #EBA44B;
				}

				&.no {
					background-color: #50a2a7;
					color: #fff;

					.status {
						color: #fff;
					}
				}
				
				&.timeOut {
					background: #ccc;
					color: #FFFFFF;
					
					.status{
						color: #FFFFFF;
					}
				}

				.checked {
					position: absolute;
					top: 10rpx;
					left: 10rpx;
				}
			}

			.act {
				background-color: #fff;
				color: #55B16E;
				border-radius: 10rpx;
			}
		}

		.server-list {
			padding-bottom: 80rpx;

			.server-item {
				position: relative;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				background: white;
				border-radius: 15rpx;
				box-sizing: border-box;
				padding: 15rpx;
				margin: 20rpx 0rpx;

				.img-box {
					width: 180rpx;
					height: 180rpx;
					border-radius: 10rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.server-info {
					width: calc(100% - 320rpx);
					box-sizing: border-box;
					padding: 0 15rpx;

					.server-title {}

					.time-coupon,
					.price {
						display: flex;
						flex-wrap: wrap;
						align-items: center;
					}

					.time-coupon {
						margin: 10rpx 0rpx;
						font-size: 26rpx;

						image {
							width: 25rpx;
							height: 25rpx;
						}

						.time {
							color: #B8B8B8;
							margin-left: 6rpx;
						}

						.coupon {
							display: flex;
							justify-content: center;
							align-items: center;
							background: #F29E45;
							color: white;
							width: 140rpx;
							height: 45rpx;
							border-radius: 10rpx;
							margin-left: 10rpx;
						}
					}

					.price {
						font-size: 26rpx;
						color: #B8B8B8;

						.current-price {
							font-size: 30rpx;
							font-weight: 600;
							color: #D34430;
						}

						.unit {
							font-size: 20rpx;
						}
					}

					.sales-volume {
						display: flex;
						align-items: center;
						color: #B8B8B8;
						font-size: 26rpx;

						image {
							width: 25rpx;
							height: 25rpx;
						}

					}
				}

				.selective-technician {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					width: 140rpx;

					.btn {
						background: linear-gradient(178deg, #4FD3BC, #60C285);
						color: white;
						width: 100%;
						height: 60rpx;
						line-height: 60rpx;
						border-radius: 40rpx;
						font-size: 26rpx;
						text-align: center;
					}
				}

				.checked {
					position: absolute;
					left: 15rpx;
					top: 15rpx;
					z-index: 1;
				}
			}
		}

		.select-button {
			position: fixed;
			display: flex;
			align-items: center;
			justify-content: center;
			bottom: 0;
			left: 0;
			height: 100rpx;
			width: 750rpx;
			margin: 0 auto;
			box-shadow: -2px -2px 10px rgba(0, 0, 0, .1);
			padding: 0 10rpx;
			box-sizing: border-box;

			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 3;
				height: 80rpx;
				margin: 0 10rpx;
				background: #50a2a7;
				border-radius: 42.5rpx;
				color: white;
				font-size: 28rpx;
			}
		}
	}
</style>