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.toastMsg != null ? '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>


		<!-- 不可预约提示弹框 -->
		<van-overlay :show="showNoappointment" z-index=99999 @tap="onClickHide">
			<view class="overlay-wrapper">
				<view class="fail-wrapper" style="height: 900rpx;">
					<image src="https://mall.zhaijieshi.cc/file/wx-huawang/bj3.png" class="bgimg"></image>
					<image src="https://mall.zhaijieshi.cc/file/wx-huawang/cc.png" class="ccimg"></image>
					<view class="fail-top">
						<view class="fail-text">暂不可约</view>
						<view class="sub-color">服务可约时间遇到困难</view>
					</view>
					<view class="er-code">
						<view class="image">
							<image src="https://mall.zhaijieshi.cc/file/wx-huawang/er-code.png"
								:show-menu-by-longpress="true" @tap="previewImage"></image>
						</view>

						<view class="addwx ">
							长按识别添加
						</view>
						<view class="addwx">
							您的专属花王管家
							<image src="https://mall.zhaijieshi.cc/file/wx-huawang/tipcontent.png" class="tipcontent">
							</image>
						</view>
					</view>
					<view class="fail-bottom">
						<view class="btn" @tap="onClickHide">
							我知道了
						</view>
					</view>
				</view>
			</view>
		</van-overlay>


	</view>
</template>

<script>
	import {
		setData
	} from '../uni_modules/zp-mixins/methods/setData';
	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);
			let addressId = this.timeParams.addressId;
			if (!addressId || addressId === 'null' || addressId === 'undefined') {
				delete this.timeParams.addressId
			}

			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: '',
				showNoappointment: false,
				toastMsg: ''
			};
		},

		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 (toastMsg == null || toastMsg == '') {
					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 {
					this.setData({
						toastMsg: toastMsg,
						showNoappointment: true
					})
				}
			},
			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
					}
				});
			},
			onClickHide() {
				this.setData({
					showNoappointment: false
				})
			},
			previewImage(e) {
				uni.previewImage({
					// 需要预览的图片链接列表
					urls: [],
					// 为当前显示图片的链接/索引值
					current: 'https://mall.zhaijieshi.cc/file/wx-huawang/er-code.png',
					// 图片指示器样式	
					indicator: 'default',
					// 是否可循环预览
					loop: false,
					// 长按图片显示操作菜单，如不填默认为保存相册
					// longPressActions:{
					// 	itemList:[this.l('发送给朋友'),this.l]
					// },
					success: res => {
						console.log('res', res);
					},
					fail: err => {
						console.log('err', err);
					}
				})
			}

		},

	}
</script>

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

	.popup-content {
		flex: 1;
	}


	.appointment-tips {
		display: flex;
		justify-content: space-between;
		width: 178px;
		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;
		line-height: 54rpx;
		padding-left: 30rpx;
		position: absolute;
		bottom: 0;
	}

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

	.time-select-right {
		flex: 1;
		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 {
		width: 38rpx;
		height: 6rpx;
		background: #d77958;
		border-radius: 3rpx;
		margin: auto;
		opacity: 0 !important;
	}

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


	/* 不可预约弹框 */
	.overlay-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.fail-wrapper {
		width: 652rpx;
		height: 580rpx;
		border-radius: 22rpx;
		background-color: #fff;
		background-size: 100% 40%;
		position: relative;
		font-size: 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.fail-wrapper .bgimg {
		width: 100%;
		height: 260rpx;
		display: block;
	}

	.fail-wrapper .ccimg {
		position: absolute;
		top: 50rpx;
		left: 248rpx;
		width: 161rpx;
		height: 161rpx;
	}

	.fail-top {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.er-code {
		width: 240rpx;
		height: 280rpx;
		margin: 20rpx auto;
	}

	.er-code .image {
		width: 220rpx;
		height: 220rpx;
		margin: auto;
	}

	.er-code .image image {
		width: 100%;
		height: 100%;
	}

	.er-code .addwx {
		width: 240rpx;
		color: #c2c2c2;
		margin: 14rpx auto;
		height: 30rpx;
		line-height: 30rpx;
		font-size: 28rpx;
		text-align: center;
	}

	.er-code .addwx .tipcontent {
		width: 96rpx;
		height: 32rpx;
		position: absolute;
		top: 700rpx;
	}

	.fail-text {
		font-size: 34rpx;
		font-weight: bold;
		margin: 4rpx 0 40rpx;
		height: 34rpx;
	}

	.fail-bottom {
		height: 132rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.fail-bottom .btn {
		border: #C2C2C2 2rpx solid;
		border-radius: 48rpx;
		color: #C2C2C2;
		width: 240rpx;
		height: 80rpx;
		text-align: center;
		font-size: 28rpx;
		line-height: 80rpx;
	}
</style>