更新
This commit is contained in:
xiaozhiyong
196
components/datePopup.vue
Normal file
196
components/datePopup.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<view>
|
||||
<uni-popup @change="change" ref="popup" type="center">
|
||||
<view class="datebody">
|
||||
<view style="text-align: end;">
|
||||
<uni-icons @click="change({show:false})" type="clear" size="30"></uni-icons>
|
||||
</view>
|
||||
<view style="flex: 1;display: flex;flex-wrap: wrap;align-content: flex-start; gap:25rpx">
|
||||
<view @click="seleFn(index)" v-for="(item,index) in dateOptions"
|
||||
:class=" seleIndex==index?'seledatebody_item': 'datebody_item'">{{item.label}}</view>
|
||||
<uni-datetime-picker @change='pickerClick' type="datetimerange" :start="starDate" :end="endDate"
|
||||
rangeSeparator="至" v-model="single">
|
||||
<view @click="seleIndex=4" :class=" seleIndex==4?'seledatebody_item':'datebody_item'">自定义</view>
|
||||
</uni-datetime-picker>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [{
|
||||
value: '1',
|
||||
label: '江'
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '湖'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: function(n, o) {
|
||||
console.log('监听', n)
|
||||
if (n) {
|
||||
this.$refs.popup.open('center')
|
||||
} else {
|
||||
this.$refs.popup.close()
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
single: '',
|
||||
endDate: '',
|
||||
starDate: '',
|
||||
seleIndex: 1,
|
||||
seachValue: '',
|
||||
dateOptions: [{
|
||||
value: 0,
|
||||
label: '当天'
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: '昨日'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '上周'
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: '上月'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// let date = new Date
|
||||
// this.starDate = new Date
|
||||
// this.starDate.setMonth((date.getMonth() - 1 == 0 ? 12 : date.getMonth() - 1))
|
||||
// this.starDate.setDate(1)
|
||||
// this.starDate =
|
||||
// `${this.starDate.getFullYear()}-${this.starDate.getMonth()+1}-${this.starDate.getDate()} ${this.starDate.getHours()}:${this.starDate.getMinutes()}`
|
||||
// this.endDate =
|
||||
// `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`
|
||||
},
|
||||
methods: {
|
||||
pickerClick(e) {
|
||||
this.$emit('input', false)
|
||||
this.$emit('datePopupChange', e)
|
||||
},
|
||||
handlerDate(date) {
|
||||
if(date instanceof String || date instanceof Number) {
|
||||
date = new Date(parseInt(date))
|
||||
}
|
||||
if (!(date instanceof Date)) return {}
|
||||
return {
|
||||
y: date.getFullYear(),
|
||||
M: (date.getMonth() + 1 + '').padStart(2, '0'),
|
||||
d: (date.getDate() + '').padStart(2, '0'),
|
||||
}
|
||||
},
|
||||
seleFn(index) {
|
||||
this.seleIndex = index
|
||||
let date = new Date()
|
||||
switch (this.seleIndex) {
|
||||
case 0:
|
||||
let dayInfo = this.handlerDate(date)
|
||||
this.$emit('datePopupChange', [
|
||||
`${dayInfo.y}-${dayInfo.M}-${dayInfo.d} 00:00:00`,
|
||||
`${dayInfo.y}-${dayInfo.M}-${dayInfo.d} 23:59:59`
|
||||
])
|
||||
break;
|
||||
case 1:
|
||||
let yesterday = new Date((date.getTime() - (86400000)));
|
||||
let yesterdayInfo = this.handlerDate(yesterday)
|
||||
this.$emit('datePopupChange', [
|
||||
`${yesterdayInfo.y}-${yesterdayInfo.M}-${yesterdayInfo.d} 00:00:00`,
|
||||
`${yesterdayInfo.y}-${yesterdayInfo.M}-${yesterdayInfo.d} 23:59:59`
|
||||
])
|
||||
break;
|
||||
case 2:
|
||||
let endLastWeek = new Date(date.getTime() - ((date.getDay() == 0 ? 7 : date.getDay()) * 86400000))
|
||||
let starLastWeek = new Date(endLastWeek.getTime() - (6 * 86400000))
|
||||
|
||||
let starLastWeekInfo = this.handlerDate(starLastWeek)
|
||||
let endLastWeekInfo = this.handlerDate(endLastWeek)
|
||||
|
||||
this.$emit('datePopupChange', [
|
||||
`${starLastWeekInfo.y}-${starLastWeekInfo.M}-${starLastWeekInfo.d} 00:00:00`,
|
||||
`${endLastWeekInfo.y}-${endLastWeekInfo.M}-${endLastWeekInfo.d} 23:59:59`
|
||||
])
|
||||
break;
|
||||
case 3:
|
||||
let LastMonth = new Date(date.getTime() - ((86400000 * date.getDate())))
|
||||
let LastMonthInfo = this.handlerDate(LastMonth)
|
||||
this.$emit('datePopupChange', [
|
||||
`${LastMonthInfo.y}-${LastMonthInfo.M}-01 00:00:00`,
|
||||
`${LastMonthInfo.y}-${LastMonthInfo.M}-${LastMonthInfo.d} 23:59:59`
|
||||
])
|
||||
break;
|
||||
}
|
||||
this.$emit('input', false)
|
||||
},
|
||||
pickerChange(e) {
|
||||
this.$emit('pickerChange', this.list[e.detail.value[0]])
|
||||
},
|
||||
change(e) {
|
||||
this.$emit('input', e.show)
|
||||
},
|
||||
confirmFn() {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.seledatebody_item {
|
||||
width: 140rpx;
|
||||
height: 60rpx;
|
||||
background: #ADCEFF;
|
||||
border-radius: 10px;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
|
||||
.datebody_item {
|
||||
width: 140rpx;
|
||||
height: 60rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 10px;
|
||||
color: #BBBBBB;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
|
||||
.datebody {
|
||||
width: 520rpx;
|
||||
height: 500rpx;
|
||||
background: #F0F0F0;
|
||||
border-radius: 20px !important;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
padding: 15rpx 23rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user