116 lines
3.3 KiB
Vue
116 lines
3.3 KiB
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> |