Ci2Order.vue/App/pages/settlement/supplement/date-select.vue

<template>
	<view>
		<z-text style="min-width: 300rpx;" arrow v-model="value" :placeholder="placeholder" @click="visible=true">
		</z-text>
		<z-slide-card title="选择日期时间" :visible.sync="visible">
			<scroll-view class="date-select" scroll-y>
				<z-date-area v-model="date" @change="changeDate"></z-date-area>

				<view class="select_time_range shadow-2">
					<z-cell height="100rpx" :contentStyle="{color:'#999999'}" label="时间" :content="startTime||'请选择'"
						arrow hideline @click.native="showTime1=true;">
						<image slot="icon" class="common_icon" src="../../../static/icon_time.png"></image>
					</z-cell>
				</view>
				<z-time-select :visible.sync="showTime1" start="07:00" v-model="startTime" @ok="getBottomShowText">
				</z-time-select>

			</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>
	</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 {
				weekName: ['一', '二', '三', '四', '五', '六', '日'],
				monthDayList: [],
				isSelect: false,
				choose: 20,
				timechoose: -1,
				once: true,
				visible: false,
				startTime: '', //开始时间
				date: '', //日期
				showTime1: false,
				showTime2: false,
				showtext: '请选择日期时间',
				orderTagList: [], //预定时间标签
				houseName: '',
				disableSelectedRange: [],
				importantDataList: []
			}
		},
		mounted() {

			//时间段列表
			// this.getTimeRange();
		},
		watch: {
			visible(newval, oldval) {
				if(newval){
					if (this.value) {
						console.error(this.value)
						var data = this.value.split(' ');
						var time = data[1];
						this.startTime = time;
						this.date = data[0];
						this.getBottomShowText();
					}
				}
			},
		},
		methods: {
			//禁止触发后面移动
			moveHandle() {},


			getBottomShowText() {
				let xx = new Date(this.date).getDay();
				let week = ['日', '一', '二', '三', '四', '五', '六'];
				this.showtext = this.$Date.setTextData(this.date) + ' 星期' + week[xx] + ' ' + this.startTime;
				this.isSelect = true;
			},
			changeDate(date) {
				console.log(date)
				this.date=date.date;
				if (this.startTime != '') {
					this.getBottomShowText();
				} else {
					this.isSelect = false;
					if (this.startTime == '')
						return this.showtext = '请选择时间';
				}
			},
			submit() {
				this.visible = false;
				this.$emit('input', this.date + ' ' + this.startTime);
				// this.$emit('changeDate', this.day.yy + '-' + (this.day.mm > 9 ? this.day.mm : ('0' + this.day.mm)) + '-' +
				// 	(this.day
				// 		.dd >
				// 		9 ? this.day.dd : ('0' + this.day.dd)));
			},
			beforeClose() {
				// this.$emit('update:visible', false);
				this.visible = false;
			}
		}
	}
</script>

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

	.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;
		margin-top: 40rpx;
		height: 100rpx;
	}

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

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