Ci2Order.vue/App/pages/book/manage/date-select.vue

<template>
	<view>
		<z-text style="min-width: 300rpx;" arrow v-model="showTextValue" :placeholder="placeholder"
			@click="visible=true"></z-text>
		<z-slide-card class="outside-slide" title="选择时间范围" :visible.sync="visible">
			<scroll-view class="date-select" scroll-y>
				<z-date-area v-model="date" @change="changeDate"></z-date-area>
				<view class="time-tips-list flex-n fac">
					<view class="time-tips-item shadow-2" :class="timechoose==index?'time-tips-item_choose':''"
						v-for="(item,index) in orderTagList" :key="index" @click="chooseTag(index,item)">
						{{item.tagName?item.tagName:(item.startTimeContext+'~'+item.endTimeContext)}}
					</view>
				</view>
				<view class="select_time_range shadow-2">
					<z-cell height="100rpx" :contentStyle="{color:'#999999'}" label="开始时间"
						:content="startTimeContext||'请选择'" arrow @click.native="showTime1=true;">
						<image slot="icon" class="common_icon" src="../../../static/icon_time.png"></image>
					</z-cell>
					<z-cell height="100rpx" :contentStyle="{color:'#999999'}" hideline label="结束时间"
						:content="endTimeContext||'请选择'" arrow @click.native="showTime2=true;">
						<image slot="icon" class="common_icon" src="../../../static/icon_time.png"></image>
					</z-cell>
					<!-- <view>请选择开始时间和结束时间</view> -->
				</view>
				<view class="select_time_old shadow-2" v-if="disableSelectedRange.length">
					<view class="order_title">{{date}}
						{{houseName}} 已被预定时间段
					</view>
					<view class="line mt-20"></view>
					<view class="flex-w fac">
						<z-tags
							:type="(new Date(date + ' ' + startTime).getTime() >= new Date(date + ' ' + item.activityBeginTime).getTime()
                        &&new Date(date + ' ' + startTime).getTime() < new Date(date + ' ' + item.activityEndTime).getTime()
                        ||new Date(date + ' ' + endTime).getTime() >new Date(date + ' ' + item.activityBeginTime).getTime()
                        &&new Date(date + ' ' +endTime).getTime() <= new Date(date + ' ' + item.activityEndTime).getTime()) ?'danger':'info'"
							class="mt-20 mr-20" v-for="(item,index) in disableSelectedRange" :key="index">
							{{item.startTimeContext}}~{{item.endTimeContext}}</z-tags>
					</view>
				</view>
				<view style="height: 40rpx;"></view>
			</scroll-view>
			<view class="select_time_result shadow-2 flex-n fac fjb">
				<view class="select_time_result_left">
					<view class="select_time_result_left_1">
						当前选定时间：
					</view>
					<view class="select_time_result_left_2 mt-10">
						<!-- 2019年08月07日 星期三  10:30-12:00 -->
						{{showtext}}
					</view>
				</view>
				<view class="select_time_result_btn" v-if="isSelect" @click="submit">确定</view>
				<view class="select_time_result_btn select_time_result_btn_disabled" v-else>确定</view>
			</view>
		</z-slide-card>
		<z-time-select :visible.sync="showTime1" :step="30" :start="beginTime" :maxTime="maxTime" v-model="startTime"
			@ok="selectStartTime"></z-time-select>
		<z-time-select :visible.sync="showTime2" :step="30" :start="beginTime" :maxTime="maxEndTime"
			:minTime="startTime||beginTime" v-model="endTime" @ok="selectEndTime"></z-time-select>

	</view>
</template>

<script>
	const app = getApp({
		allowDefault: true
	});
	export default {
		name: 'date-select',
		props: {
			value: String,
			placeholder: {
				type: String,
				default: ''
			},
			houseInfo: Object,
			// visible:{
			// 	type:Boolean,
			// 	default:false
			// } 
		},
		model: {
			prop: 'value',
		},
		onBackPress() {
			if (this.visible) {
				this.visible = false;
				return true;
			}
		},
		data() {
			return {
				showTextValue: '',
				weekName: ['一', '二', '三', '四', '五', '六', '日'],
				monthDayList: [],
				isSelect: false,
				choose: 20,
				timechoose: -1,
				once: true,
				visible: false,
				startTime: '', //开始时间
				startTimeContext: '', //文本
				endTime: '', //结束时间
				endTimeContext: '', //文本
				beginTime: '',
				maxTime: '',
				maxEndTime: '',
				date: '', //日期
				showTime1: false,
				showTime2: false,
				showtext: '请选择开始时间和结束时间',
				orderTagList: [], //预定时间标签
				houseName: '',
				disableSelectedRange: [],
				importantDataList: []
			}
		},
		mounted() {
			//时间段列表
			this.getTimeRange();
		},
		watch: {
			visible(newval, oldval) {
				if (this.value) {
					this.setDefaultDate();
				}else{
					this.date=this.$Date.getDayDate().date;
				}
			},
			value(newval, oldval) {
				if (newval) {
					this.setDefaultDate();
				}else{
					this.date=this.$Date.getDayDate().date;
				}
			},
			date(newval, oldval) {
				if (this.houseInfo) {
					this.timeRepeat(newval, this.houseInfo.id);
				}
			}
		},
		methods: {
			//默认值
			setDefaultDate() {
				console.warn(this.value)
				var data = this.value.split('  ');
				var time = data[1].split('~');
				this.startTime = time[0];
				this.endTime = time[1];


				this.date = data[0];
				let day = data[0].split('-')

				//显示文本
				this.startTimeContext = this.getFormatTimeText(this.startTime);
				this.endTimeContext = this.getFormatTimeText(this.endTime);
				console.warn(this.date + '  ' + this.startTimeContext + '~' + this.endTimeContext)
				this.showTextValue = this.date + '  ' + this.startTimeContext + '~' + this.endTimeContext;
				this.getBottomShowText();

				if (this.houseInfo)
					this.timeRepeat(this.date, this.houseInfo.id);
			},

			getFormatTimeText(time) {
				let ytime = Number(time.replace(':', ''));
				var c1 = Number(ytime / 100).toFixed(0)
				c1 = c1 < 10 ? ('0' + c1) : (c1 > 23 ? ('次日' + ((c1 - 24) > 9 ? (c1 - 24) : ('0' + (c1 - 24)))) : c1);
				c1 = c1 + ':' + (ytime % 100 ? '30' : '00')
				return c1;
			},
			//禁止触发后面移动
			moveHandle() {},
			//获取时间段
			getTimeRange() {
				this.$axios.get('app/config/baseByStoreId/' + uni.getStorageSync('storeId')).then(res => {
					console.log('基本店铺设置信息', res.data)
					let timeRange = res.data.timeRange.split('-');
					this.beginTime = timeRange[0] || '00:00';
					this.maxTime = timeRange[1] || '24:00'
					if (timeRange[1].indexOf(':30') > -1) {
						this.maxEndTime = (Number(timeRange[1].split(':')[0]) + 1) + ':00';
					} else if (timeRange[1].indexOf(':00')) {
						this.maxEndTime = timeRange[1].split(':')[0] + ':30';
					} else {
						this.maxEndTime = '24:00'
					}

					var orderTagList = [];

					res.data.orderTag.forEach((item, index) => {
						orderTagList.push({
							beginTime: item.beginTime,
							startTimeContext: this.getFormatTimeText(item.beginTime),
							endTime: item.endTime,
							endTimeContext: this.getFormatTimeText(item.endTime),
							tagName: item.tagName
						})
					})
					this.orderTagList = orderTagList;

				}).catch(err => {
					this.$message.error(err.msg);
				})
			},
			timeRepeat(orderDate, houseId) {
				this.$axios.post('app/order/houseActivityTimes', {
					"houseId": houseId,
					"orderDate": orderDate,
					"storeId": uni.getStorageSync('storeId')
				}).then(res => {
					console.log('重复时间', res.data)
					//获取当前
					var data = res.data.list;

					for (var i = 0, len = data.length; i < len; i++) {
						data[i].startTimeContext = this.getFormatTimeText(data[i].activityBeginTime);
						data[i].endTimeContext = this.getFormatTimeText(data[i].activityEndTime);
						if (new Date(orderDate + ' ' + this.startTime).getTime() == new Date(orderDate +
								' ' + data[i].activityBeginTime).getTime() && new Date(orderDate + ' ' + this
								.endTime).getTime() ==
							new Date(orderDate + ' ' + data[i].activityEndTime).getTime()) {
							data.splice(i, 1);
							break;
						}
						if (i == 0) {
							this.houseName = data[0].houseName;
						}
					}
					data.sort(function(a, b) {
						return Number(a.activityBeginTime.replace(':', '')) - Number(b.activityBeginTime
							.replace(':', ''))
					})
					console.warn(data)
					this.disableSelectedRange = data;
				}).catch(err => {
					// this.$message.error(err.msg);
				})
			},
			selectStartTime() {
				this.startTimeContext = this.getShowText(this.startTime);
				this.endTimeContext = '';
				this.endTime = '';
				this.showtext = '请选择结束时间';
			},
			selectEndTime() {
				this.endTimeContext = this.getShowText(this.endTime);
				if (this.startTime != '') {
					this.getBottomShowText();
				} else {
					this.isSelect = false;
					return this.showtext = '请选择开始时间';
				}

			},
			getShowText(text) {
				let sptext = text.split(':');
				let time1 = Number(sptext[0]);
				return (time1 >= 24 ? ('次日' + (time1 - 24 > 9 ? (time1 - 24) : ('0' + (time1 - 24)))) : sptext[0]) + ':' +
					sptext[1];
			},
			//获取下面展示的文本
			getBottomShowText() {
				let xx = new Date(this.date).getDay();
				let week = ['日', '一', '二', '三', '四', '五', '六'];
				this.showtext = this.$Date.setTextData(this.date) + ' 星期' + week[xx] + '  ' + this.startTimeContext + '-' +
					this.endTimeContext;
				this.isSelect = true;
			},

			chooseTag(index, item) {
				if (this.timechoose == index) {
					this.timechoose = -1;
				} else
					this.timechoose = index;
				this.startTime = item.beginTime;
				this.endTime = item.endTime;
				this.startTimeContext = item.startTimeContext;
				this.endTimeContext = item.endTimeContext;
				this.setInfo();
			},

			changeDate(date) {
				console.warn(date)
				this.date = date.date;
				this.setInfo();
			},
			setInfo() {
				if (this.startTime != '' && this.endTime != '') {
					this.getBottomShowText();
				} else {
					this.isSelect = false;
					if (this.startTime == '')
						return this.showtext = '请选择开始时间';
					if (this.endTime == '')
						return this.showtext = '请选择结束时间';
				}
			},
			submit() {
				this.visible = false;
				this.$emit('input', this.date + '  ' + this.startTime + '~' + this.endTime);
				this.$emit('changeDate', {
					date: this.date,
					startTime: this.startTime,
					endTime: this.endTime
				});
				this.showTextValue = this.date + '  ' + this.startTimeContext + '~' + this.endTimeContext;
			},
			beforeClose() {
				// this.$emit('update:visible', false);
				this.visible = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.date-select {
		position: relative;
		height: calc(100vh - 98rpx - var(--status-bar-height));
	}

	.outside-slide {
		position: relative;
	}

	.time-tips-list {
		padding: 35rpx 30rpx 35rpx 20rpx;

		text-align: center;

		.time-tips-item {
			width: 165rpx;
			line-height: 86rpx;
			border-radius: 2px;
			font-size: 24rpx;
			color: #666666;
			margin-left: 10rpx;
			white-space: nowrap;
		}

		.time-tips-item_choose {
			background: #2481EE !important;
			color: white !important;
		}
	}

	.select_time_range {
		width: 690rpx;
		margin: 0 auto;
	}

	.select_time_old {
		width: 650rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		padding: 20rpx;

		// outline:1px solid #fb7a7a;//重复时使用得提示色
		.order_title {
			font-size: 30rpx;
			line-height: 30rpx;
			color: #007aff;
			font-weight: bold;
		}
	}

	.select_time_result {
		height: 80rpx;
		width: calc(100% - 60rpx);
		padding: 30rpx;
		position: absolute;
		z-index: 100;
		bottom: 0;

		.select_time_result_left {
			font-size: 24rpx;
			color: #333333;
		}

		.select_time_result_btn {
			width: 165rpx;
			text-align: center;
			font-size: 30rpx;
			color: white;
			padding: 20rpx 0;
			background: #2481EE;
			border-radius: 6rpx;
		}

		.select_time_result_btn_disabled {
			background: #dddddd !important;
		}
	}

	.common_icon {
		width: 58rpx;
		height: 58rpx;
		min-width: 58rpx;
		margin-right: 30rpx;
	}
</style>