jzhw_uni/components/time-select.vue

<template>
	<view>
		<view class="popup-wrapper popup-wrapper-special">
			<!-- 标题 -->
			<view class="popup-title popup-title-special popup-title-new">
				<view>请选择服务开始时间</view>
				<view v-if="selectTimeValue >= 17" class="fee-tips">您选的时间段可能会加收夜间服务费，具体以与商家的沟通为准</view>
				<!-- 选择服务者上门时段（具体服务时长以实际服务为准） -->
			</view>

			<block>
				<view class="popup-content popup-content-special">
					<view class="time-select-top" style="display: flex;">
						<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
							<view class="time-select-left-item" @tap="dateCheck" :data-index="index"
								:data-week="item.week" :data-date="item.date" :data-isbook="item.isBook"
								v-for="(item, index) in dateList" :key="index" style="display: inline-block;">
								<view class="date-line-wrapper">
									<view :class="[
		'date-msg',
		   dateIndex == index ? 'current-date' : '',
		   item.dateMsg == '不可约' ? 'avail-date' : ''
		 ]">
										{{item.weekOfDay}}
									</view>
									<view :class="[
		'date-msg1',
		   dateIndex == index ? 'current-date' : '',
		   item.dateMsg == '不可约' ? 'avail-date' : ''
		 ]"> {{ item.bookdate | formatDate }}</view>
									<view :class="[
		    dateIndex == index ? 'current-line' : '',
		    item.dateMsg == '不可约' ? 'current-line0' : ''
		  ]"></view>

								</view>
							</view>
						</scroll-view>
					</view>
					<view class="time-select-middle">
						<view class="noon-select">
							<view :class="'noon-item' + (noonType == '1' ? 'active-noon' : '')" data-noon="1"
								@tap="noonTab">上午</view>
							<view class="divider"></view>
							<view :class="'noon-item' + (noonType == '2' ? 'active-noon' : '')" data-noon="2"
								@tap="noonTab">下午</view>
						</view>

						<view class="time-item-wrapper">
							<view @tap="timeCheck" :data-stock="item.stock" :data-index="index" :data-msg="item.timeMsg" :data-toastmsg="item.toastMsg"
								:class="[
									'time-msg',
									   timeIndex == index ? 'current-time' : '',
									   item.timeMsg == '不可约' ? 'avail-time' : ''
									 ]" v-for="(item, index) in timeList" :key="index">
								<view :class="timeIndex === index ? 'current-time' : ''">{{ item.begin }}</view>



							</view>
						</view>
						<view class="appointment-tips">
							<view> <span></span>
								<text>可预约</text>
							</view>
							<view> <span class="selected"></span>
								<text>已选择</text>
							</view>
							<view> <span class="no-appointment"></span>
								<text>不可约</text>
							</view>
						</view>

						<view class="time-select-bottom" v-if="date!==''&week!==''&time!==''">
							<span>当前选择：</span>{{date}}（{{week}}）{{time}}
						</view>
					</view>
				</view>
			</block>

			<!-- 确认按钮 -->
			<view class="popup-btn-wrapper">
				<view @tap="confirmTime" class="confirm-btn" >确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	var util = require('@/utils/util.js');
	var api = require('@/config/api.js');
	var check = require('@/utils/check.js');
	export default {
		name: "time-select",
		props: {
			timeParams: Object
		},
		created() {
			console.log("传过来的参数", this.timeParams);
			this.getDayTime(this.timeParams)
		},
		onShow() {
			
		},
		filters: {
			formatDate: function(value, format) {
				// 这里可以根据format来格式化日期
				if (value) {
					return value.substring(0, 10).split('-').slice(1).join('-');
				}
			}
		},
		data() {
			return {

				noonType: 1,
				selectTimeValue: '',
				timeList: [],
				dateList: [],
				timeIndex: '',

				//选中的时间段
				dateIndex: 0,

				//选中的日期
				appointDate: '',
				futureDays: '',
				time: '',
				week: '',
				date: ''
			};
		},

		methods: {
			getDayTime(params) {
				uni.showLoading({
					title: '加载中'
				});
				util.request(api.everyDayTime, params, 'GET')
					.then((res) => {
						uni.hideLoading();
						if (res.errno == 0) {
							console.log("时间", res.data);
							this.setData({
								dateList: res.data,
								dateIndex: 0,
								timeIndex: -1,
								noonType: 1
							});
							let period = res.data[0].period;
							let list = period.filter((item) => {
								return item.ofTime == '上午';
							});
							this.setData({
								timeList: list
							});
						} else {
							uni.showToast({
								title: res.errmsg,
								icon: 'none',
								duration: 2000
							});
							this.setData({
								timeList: [],
								timeIndex: ''
							});
						}
					})
					.catch((err) => {
						console.log(err);
						uni.hideLoading();
						uni.showToast({
							title: err.errMsg,
							icon: 'none'
						});
						this.setData({
							timeList: [],
							timeIndex: ''
						});
					});
			},

			noonTab(e) {
				let noon = e.currentTarget.dataset.noon;
				console.log("noon", noon);
				this.setData({
					timeIndex: -1,
					noonType: noon,
					selectTimeValue: ''
				});
				console.log("noon1", noon);
				let period = this.dateList[this.dateIndex].period;
				let current = this.noonType == 1 ? '上午' : '下午';
				let list = period.filter((item) => {
					return item.ofTime == current;
				});
				this.setData({
					timeList: list
				});
			},
			dateCheck(e) {
				let index = e.currentTarget.dataset.index;
				let date = e.currentTarget.dataset.date;
				let week = e.currentTarget.dataset.week;
				let isbook = e.currentTarget.dataset.isbook;
				this.setData({
					dateIndex: index
				});
				let period = this.dateList[this.dateIndex].period;
				let current = this.noonType == 1 ? '上午' : '下午';
				let list = period.filter((item) => {
					return item.ofTime == current;
				});
				let bookdate = this.dateList[this.dateIndex].bookdate
				let weekOfDay = this.dateList[this.dateIndex].weekOfDay
				this.setData({
					timeList: list,
					date: bookdate,
					week: weekOfDay
				});
				let isNoTime = list.every((item) => {
					return item.timeMsg && item.timeMsg != null;
				});
				if (isNoTime) {
					this.setData({
						timeIndex: -1,
						selectTimeValue: ''
					});
				}
			},

			timeCheck(e) {
				console.log( e.currentTarget);
				let index = e.currentTarget.dataset.index;
				let msg = e.currentTarget.dataset.msg;
				let toastMsg= e.currentTarget.dataset.toastmsg;
				if (msg == null || msg == '') {
					let time = this.timeList[index].begin.split(':')[0];
					let bookTime = this.timeList[index].begin + '-' + this.timeList[index].end
					this.setData({
						timeIndex: index,
						selectTimeValue: Number(time),
						time: bookTime
					});
				}else{
					uni.showToast({
						title:toastMsg,
						icon:'none'
					})
				}
			},
			confirmTime() {
				if (this.timeIndex === '' || this.timeIndex < 0) {
					util.showErrorToast('请选择服务时间');
					return false;
				}
				let date = this.dateList[this.dateIndex].bookdate;
				let week = this.dateList[this.dateIndex].weekOfDay;
				let time = this.timeList[this.timeIndex].begin + '-' + this.timeList[this.timeIndex].end;
				let futureDays = (((new Date(date)).getTime() - (new Date()).getTime()) / (1000 * 24 * 3600));

				futureDays = Math.ceil(futureDays);
				this.setData({
					choosePopup: false,
					appointDate: date + ' ' + week + ' ' + time,
					futureDays: futureDays,

				});
				
				this.$emit('timeShow', {
					appointDate: this.appointDate,
					futureDays: this.futureDays,
					Time: {
						date,
						week,
						time
					}
				});
			},
			getDayTime(params) {
				uni.showLoading({
					title: '加载中'
				});
				util.request(api.everyDayTime, params, 'GET')
					.then((res) => {
						uni.hideLoading();
						if (res.errno == 0) {
							console.log("时间", res.data);
							this.setData({
								dateList: res.data,
								dateIndex: 0,
								timeIndex: -1,
								noonType: 1
							});
							let period = res.data[0].period;
							let list = period.filter((item) => {
								return item.ofTime == '上午';
							});
							this.setData({
								timeList: list
							});
						} else {
							uni.showToast({
								title: res.errmsg,
								icon: 'none',
								duration: 2000
							});
							this.setData({
								timeList: [],
								timeIndex: ''
							});
						}
					})
					.catch((err) => {
						console.log(err);
						uni.hideLoading();
						uni.showToast({
							title: err.errMsg,
							icon: 'none'
						});
						this.setData({
							timeList: [],
							timeIndex: ''
						});
					});
			},
		},

	}
</script>

<style>
	.popup-wrapper view {
		color: #888;
		font-size: 30rpx;
	}

	.popup-content {
		flex: 1;
	}


	.appointment-tips {
		display: flex;
		justify-content: space-between;
		width: 178px;
		/* margin: 170px auto 10px; */
		position: absolute;
		bottom: 72rpx;
		left: calc(50% - 89px);
	}

	.appointment-tips view span {
		width: 20rpx;
		height: 20rpx;
		border-radius: 20rpx;
		background-color: #feebd7;
		display: inline-block;
		margin-right: 10rpx;
	}

	.appointment-tips view .selected {
		background-color: #d77958;
	}

	.appointment-tips view .no-appointment {
		background-color: #ccc;
	}

	.appointment-tips view text {
		color: #d77958;
		font-size: 24rpx;
	}

	.time-select-bottom {
		width: 100vw;
		background-color: #feebd7;
		height: 54rpx;
		font-size: 22rpx !important;
		/* color: #00b4fe !important; */
		line-height: 54rpx;
		padding-left: 30rpx;
		position: absolute;
		bottom: 0;
	}

	.time-select-left {
		/* flex: 2; */
		border-right: 1rpx solid #ddd;
		padding: 0 8rpx 0 20rpx;
		width: 370rpx;
	}

	.time-select-right {
		flex: 1;
		/* padding: 0 8rpx; */
		height: 900rpx;
		overflow-y: hidden;
	}

	.scroll-view_H {
		white-space: nowrap;
		/* 确保子元素在同一行内显示 */
		overflow-x: scroll;
		/* 允许横向滚动 */
	}

	.time-select-left-item {
		height: 108rpx;
		display: flex;
		flex-direction: column;
		padding: 4rpx 0;
		width: 20vw;
	}

	.date-line-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.time-select-left-item .date-msg {
		height: 36rpx;
		line-height: 36rpx;
		color: #292929;
		font-size: 36rpx;
		font-weight: bold;
	}

	.time-select-left-item .date-msg1 {
		height: 36rpx;
		line-height: 36rpx;
		color: #292929;
		font-size: 22rpx;
		margin-top: 10rpx;

	}

	.time-select-left-item .date-msg.avail-date {
		color: #999 !important;
		font-weight: bold;
	}

	.time-select-left-item .date-msg1.avail-date {
		color: #999 !important;
		font-weight: bold;
	}

	.popup-wrapper .popup-content .current-date {
		color: #d77958;
		font-weight: bold;
	}
	view.popup-btn-wrapper {
	    margin: 10rpx auto;
	    padding: 24rpx;
	    background-color: #d77958;
	    text-align: center;
	    width: 682rpx;
	    border-radius: 16rpx;
	}

	view.popup-btn-wrapper view {
		color: #fff;
	}

	.time-select-middle {
		background-color: #FCFCFC;
		padding: 10rpx 0rpx;
		height: 800rpx;
		position: relative;
	}

	.noon-select {
		width: 100%;
		display: flex;
		justify-content: center;
		margin: 30rpx auto;
	}

	.noon-select .divider {
		height: 40rpx;
		width: 2rpx;
		background-color: #e5e5e5;
	}

	.noon-select .noon-item {
		text-align: center;
		color: #979797;
		font-size: 36rpx;
		width: 49%;
	}

	.noon-itemactive-noon {
		text-align: center;
		color: #d77958!important;
		font-size: 36rpx !important;
		width: 49%;
	}
	.popup-title-new.popup-title {
		display: flex;
		flex-direction: column;
		font-size: 20px;
		font-weight: bold;
		text-align: left;
		padding: 30rpx;
		
	}
	.popup-title-new view {
		color: #000;
		font-size: 40rpx;
		font-weight: bold;
	}
	.popup-title-new view.fee-tips {
		color: #d77958;
		font-size: 22rpx;
	}


	.current-line {
		width: 38rpx;
		height: 6rpx;
		background: #d77958;
		border-radius: 3rpx;
		margin: auto;
		opacity: 1;
	}

	.current-line0 {
		opacity: 0;
	}

	.current-time {
		color: #fff !important;
		font-family: AlibabaPuHuiTi_2_65_Medium;
		line-height: 70rpx;
		height: 70rpx;
		background-color: #d77958;
		border-radius: 8px;
		font-size: 36rpx;
	}
	
	
		.time-item-wrapper {
		display: flex;
		width: 90vw;
		justify-content: flex-start;
		flex-wrap: wrap;
		text-align: center;
		gap: 20px;
		margin: 10px auto;
	}
	
	
		.time-item-wrapper .time-msg {
		width: 20%;
		line-height: 70rpx;
		height: 70rpx;
		background-color: #feebd7;
		border-radius: 8px;
		font-size: 36rpx;
		font-weight: bold;
	}
	.time-item-wrapper .avail-time {
		width: 20%;
		line-height: 70rpx;
		height: 70rpx;
		background-color: #CCCCCC;
		border-radius: 8px;
		font-size: 36rpx;
		font-weight: bold;
	}
	
</style>