jje_uniapp/orderPages/bookService/components/chooseServiceTime.vue

<template>
	<view>
		<uni-popup ref="chooseServiceTimePopup" :catchtouchmove="true" type="bottom">

			<view class="chooseServiceTimeView">
				<view class="chooseServiceTimeTitle">
					<text>选择服务时段</text>
				</view>

				<scroll-view class="scrollY" scroll-y>

					<view v-if="periodDateList === null || periodDateList.length === 0">
						<view class="flex-row justify-center">
							<image class="timeNull" src="/static/order/timeNull.png"></image>
						</view>
						<view class="timeNullText"><text>暂无服务时段，请选择其他技师</text></view>
					</view>


					<u-grid v-else :border="false" col="5">
						<u-grid-item v-for="(item,index) in periodDateList" :key="index" @click="selectPeriod(item,index)">
							<view class="flex-col justify-center timeItem" :class="{selectBack: item.label == label}">
								<view class="flex-row justify-center">
									<text class="time">{{item.label}}</text>
								</view>
								<view class="flex-row justify-center">
									<text class="price">￥{{item.price}}</text>
								</view>
							</view>
						</u-grid-item>
					</u-grid>

				</scroll-view>

				<view class="flex-row justify-between chooseServiceTeacherButton">
					<view class="chooseServiceTeacherButtonL" @click="closePopup">
						<text>取消</text>
					</view>
					<view class="chooseServiceTeacherButtonR" @click="submit">
						<text>确定</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: 'chooseServiceTime',
		data() {
			return {
				label:'',
				selectIndex:0,
				periodDateList: []
			}
		},
		methods: {
			submit(){
				this.$emit("getPeriodDate",this.periodDateList[this.selectIndex])
				this.closePopup()
			},


			closePopup() {
				this.$refs.chooseServiceTimePopup.close()
			},

			selectPeriod(e,index){
				this.label = e.label
				this.selectIndex = index
			},

			openPopup(personId, date,storeId,childService,selectChildService,label) {
				this.$refs.chooseServiceTimePopup.open()
				this.label =label
				this.getServiceTime(personId, date,storeId,childService,selectChildService)
			},

			//获取门店排班时段
			getServiceTime(personId, date,storeId,childService,selectChildService) {
				this.$api.getServicePersonTime({
					personId:personId,
					date: date,
					storeId:storeId
				}).then(res => {
					let periodTimeList = res.data.data
					let selectServiceObjectList = childService.filter(selectServiceObject =>
							(selectServiceObject.serviceUserId === personId
							&& selectServiceObject.serviceObjectId !== childService[selectChildService].serviceObjectId)
							|| selectServiceObject.serviceUserId === -1

				)
					selectServiceObjectList.forEach(selectServiceObject =>{
						periodTimeList.forEach(periodTime =>{
							if (selectServiceObject.serviceStartTime === periodTime.label ){
								periodTime.total = periodTime.total - 1
							}
						})
					})
					periodTimeList = periodTimeList.filter(periodTime=> periodTime.total>0)
					console.log(periodTimeList)
					this.periodDateList = periodTimeList
					// if (this.periodTimeList.length === 0) {
					// 	uni.$u.toast('暂无排班时段')
					// }
				})
			},


		}
	}
</script>

<style scoped lang="scss">
	.chooseServiceTimeView {
		width: 750rpx;
		height: 850rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
	}

	.chooseServiceTimeTitle {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		line-height: 44rpx;
		margin-left: 34rpx;
		padding-top: 26rpx;
	}

	.scrollY {
		width: 730rpx;
		height: 604rpx;
		margin-top: 8rpx;
		margin-left: 10rpx;
	}

	.timeItem {
		width: 124rpx;
		height: 124rpx;
		background: #FAFAFA;
		border-radius: 16rpx;
		margin-top: 16rpx;
	}


	.time {
		font-size: 24rpx;
		color: #333333;
		line-height: 40rpx;
	}

	.price {
		font-size: 24rpx;
		color: #ED569F;
		line-height: 40rpx;
	}

	.chooseServiceTeacherButton {
		width: 686rpx;
		height: 80rpx;
		margin-left: 32rpx;
		margin-top: 32rpx;
	}

	.chooseServiceTeacherButtonL {
		width: 332rpx;
		height: 80rpx;
		background: #F5F5F5;
		border-radius: 54rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
	}

	.chooseServiceTeacherButtonR {
		width: 332rpx;
		height: 80rpx;
		background: #FFE05C;
		border-radius: 54rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.serobV {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		top: 0;
		right: 0;
	}

	.serobVicon {
		width: 32rpx;
		height: 32rpx;
	}

	.selectBack {
		background: rgba(255, 224, 92, 0.1);
		border: 4rpx solid #FFE05C;
		box-sizing:border-box
	}
	.timeNull{
		width: 200rpx;
		height: 200rpx;
		margin-top: 100rpx;
	}
	.timeNullText{
		text-align: center;
		font-size: 28rpx;
		color: #333333;
		margin-top: 40rpx;
	}
</style>