hitap-chat/pages/approve/date-search.vue

<template>
	<view class="">
		<view class="date-content">
			<view class="date-item">
				<view class="date-item-label">
					开始时间
				</view>
				<view class="date-item-value" @click="handleOpen('startShow')">
					{{startDate || '请选择'}}
				</view>
				<u-icon v-show="startDate" @click="handleClear('start')" size="16" name="close-circle"></u-icon>
			</view>
			<view class="date-item">
				<view class="date-item-label">
					结束时间
				</view>
				<view class="date-item-value" @click="handleOpen('endShow')">
					{{endDate || '请选择'}}
				</view>
				<u-icon v-show="endDate" @click="handleClear('end')" size="16" name="close-circle"></u-icon>
			</view>
		</view>
		<u-datetime-picker :show="startShow" title="开始时间" :value="start" mode="date" @cancel="startShow = false"
			@confirm="changeDate.call(this,$event, 'startDate')" :max-date="getCurTimeForX()"></u-datetime-picker>
		<u-datetime-picker :show="endShow" title="结束时间" :value="end" mode="date" @cancel="endShow = false"
			@confirm="changeDate.call(this,$event, 'endDate')" :max-date="getCurTimeForX()"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		name: 'date-search',
		props: {
			startDate: {
				type: String,
				default: ''
			},
			endDate: {
				type: String,
				default: ''
			}
		},
		computed: {
			start: {
				get() {
					return this.startDate || this.formatTime(this.$moment().subtract(7, 'd'))
				},
				set(value) {
					this.$emit('update:startDate', value)
				}
			},
			end: {
				get() {
					return this.endDate || this.formatTime()
				},
				set(value) {
					this.$emit('update:endDate', value)
				}
			}
		},
		data() {
			return {
				startShow: false,
				endShow: false
			}
		},
		methods: {
			getCurTimeForX() {
				return (new Date()).getTime()
			},
			formatTime(time) {
				return this.$moment(time).format('YYYY-MM-DD')
			},
			handleOpen(key) {
				this.$nextTick(() => {
					this[key] = true
				})
			},
			handleClear(key) {
				this[key] = ''
				this.$nextTick(() => {
					if (!this.endDate && !this.startDate) {
						this.$emit('handleSearch')
					}
				})
			},
			changeDate(dateEvent, key) {
				if (key === 'startDate') {
					if (this.endDate && this.endDate < this.formatTime(dateEvent.value)) {
						this.$.toast('开始时间不能大于结束时间')
						return
					} else {
						this.start = this.formatTime(dateEvent.value)
					}
				} else {
					if (this.startDate && this.startDate > this.formatTime(dateEvent.value)) {
						this.$.toast('结束时间不能小于开始时间')
						return
					} else {
						this.end = this.formatTime(dateEvent.value)
					}
				}
				this.startShow = false
				this.endShow = false
				this.$nextTick(() => {
					if (this.endDate && this.startDate) {
						this.$emit('handleSearch')
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.date-content {
		display: flex;
		align-items: center;
		padding: 10px 10px;
		justify-content: space-between;

		.date-item {
			display: flex;
			align-items: center;

			&-label {
				margin-right: 3px;
			}

			&-value {
				width: 185rpx;
				text-align: right;
				margin-right: 2px;
			}
		}
	}
</style>