emsapp/pages/work/DateRangeSelect.vue

<template>
	<view class="time-range">
		<uni-datetime-picker v-model="dateRange" type="daterange" :end="defaultDateRange[1]" :clear-icon="false"
			rangeSeparator="至" @change="changeTime" />
		<view class="btns-container">
			<button size="mini" class="small" :disabled="loading" @click="reset">重置</button>
			<!-- <button type="primary" class="small" size="mini" :disabled="loading" @click="search">搜索</button> -->
			<button type="primary" class="large" size="mini" :disabled="loading"
				@click="timeLine('before')">上一时段</button>
			<button type="primary" class="large" size="mini" @click="timeLine('next')"
				:disabled="loading || disabledNextBtn">下一时段</button>
		</view>
	</view>
</template>

<script>
	import {
		formatDate
	} from '@/utils/filters'
	export default {
		computed: {
			disabledNextBtn() {
				return new Date(this.dateRange[1]) >= new Date(this.defaultDateRange[1])
			}
		},
		data() {
			return {
				loading: false,
				dateRange: [],
				defaultDateRange: [],
			}
		},
		methods: {
			init(today = false) {
				const now = new Date(),
					formatNow = formatDate(now);
				const weekAgo = formatDate(today ? new Date(now.getTime()) : new Date(now.getTime() - 7 * 24 * 60 * 60 *
					1000))
				this.dateRange = [weekAgo, formatNow];
				this.defaultDateRange = [weekAgo, formatNow];
				console.log('初始化完成', this.defaultDateRange)
				this.$emit('updateDate', this.dateRange)
			},
			changeTime(val) {
				this.dateRange = val || []
				this.$emit('updateDate', this.dateRange)
			},
			showBtnLoading(status) {
				this.loading = status
			},
			resetDate() {
				this.dateRange = this.defaultDateRange
			},
			//重置 设置时间范围为初始化时间段
			reset() {
				this.resetDate()
				this.$emit('reset')
				this.$emit('updateDate', this.dateRange)
			},
			// 搜索
			search() {
				this.$emit('updateDate', this.dateRange)
			},
			timeLine(type) {
				if (!this.dateRange || !this.dateRange[0] || !this.dateRange[1]) return
				const nowStartTimes = new Date(this.dateRange[0]).getTime(),
					nowEndTimes = new Date(this.dateRange[1]).getTime(),
					maxTime = new Date(this.defaultDateRange[1]).getTime()
				const nowDis = nowEndTimes - nowStartTimes //用户当前选择时间差 可能=0
				//baseTime,maxTime 毫秒数
				const baseDis = 24 * 60 * 60 * 1000
				const calcDis = nowDis === 0 ? baseDis : nowDis
				let start = type === 'before' ? nowStartTimes - calcDis : nowStartTimes + calcDis
				if (start > maxTime) start = maxTime
				let end = type === 'before' ? nowEndTimes - calcDis : nowEndTimes + calcDis
				if (end > maxTime) end = maxTime
				this.dateRange = [formatDate(start), formatDate(end)]
				this.$emit('updateDate', this.dateRange)
			},
		}
	}
</script>
<style lang="scss" scoped>
	.time-range {
		padding: 10rpx 22rpx;

		.btns-container {
			margin-top: 20rpx;
			margin-bottom: 40rpx;

			uni-button {
				padding-left: 0;
				padding-right: 0;
				text-align: center;
				font-size: 26rpx;

				&:not(:last-child) {
					margin-right: 20rpx;
				}
			}

			.small {
				width: 120rpx;
			}

			.large {
				width: 160rpx;
				background-color: #547ef4;

				&[disabled][type=primary] {
					background-color: #89a8ffe6;
				}
			}
		}
	}
</style>