448 lines
9.7 KiB
Vue
448 lines
9.7 KiB
Vue
<template>
|
|
<view class="mask" v-if="show" @tap="close">
|
|
<view class="box" @tap.stop="nullFunction">
|
|
<view class="u-flex u-relative u-row-center u-p-30 top">
|
|
<view class="font-bold u-font-32">筛选日期时间</view>
|
|
<view class="close" @tap="close">
|
|
<uni-icons type="closeempty" size="24"></uni-icons>
|
|
</view>
|
|
|
|
</view>
|
|
<!-- <view class="u-p-30 u-flex u-flex-wrap gap-20 fastTime">
|
|
<view class="item" v-for="(item,index) in fastTime" :key="index" @tap="changeTime(item.key)">
|
|
{{item.title}}
|
|
</view>
|
|
</view> -->
|
|
<picker-view :immediate-change="true" @pickend="pickend" :value="value" @change="bindChange"
|
|
class="picker-view">
|
|
<picker-view-column>
|
|
<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
|
|
</picker-view-column>
|
|
<picker-view-column>
|
|
<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
|
|
</picker-view-column>
|
|
<picker-view-column>
|
|
<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
|
|
</picker-view-column>
|
|
<!-- <picker-view-column>
|
|
<view class="item" v-for="(item,index) in hours" :key="index">{{item}}时</view>
|
|
</picker-view-column>
|
|
<picker-view-column>
|
|
<view class="item" v-for="(item,index) in minutes" :key="index">{{item}}分</view>
|
|
</picker-view-column>
|
|
<picker-view-column>
|
|
<view class="item" v-for="(item,index) in seconds" :key="index">{{item}}秒</view>
|
|
</picker-view-column> -->
|
|
</picker-view>
|
|
<view class="u-text-center color-999">至</view>
|
|
<picker-view :immediate-change="true" :value="value1" @pickend="pickend1" @change="bindChange1"
|
|
class="picker-view">
|
|
<picker-view-column>
|
|
<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
|
|
</picker-view-column>
|
|
<picker-view-column>
|
|
<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
|
|
</picker-view-column>
|
|
<picker-view-column>
|
|
<view class="item" v-for="(item,index) in days1" :key="index">{{item}}日</view>
|
|
</picker-view-column>
|
|
<!-- <picker-view-column>
|
|
<view class="item" v-for="(item,index) in hours" :key="index">{{item}}时</view>
|
|
</picker-view-column>
|
|
<picker-view-column>
|
|
<view class="item" v-for="(item,index) in minutes" :key="index">{{item}}分</view>
|
|
</picker-view-column>
|
|
<picker-view-column>
|
|
<view class="item" v-for="(item,index) in seconds" :key="index">{{item}}秒</view>
|
|
</picker-view-column> -->
|
|
</picker-view>
|
|
|
|
<!-- 站位 -->
|
|
<view style="height: 80px;"></view>
|
|
<view class="fixed_b">
|
|
<my-button shape="circle" @tap="confirm">确定</my-button>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import myButton from "@/components/my-components/my-button.vue"
|
|
import {
|
|
reactive,
|
|
ref
|
|
} from 'vue';
|
|
const $nowDate = new Date()
|
|
const nowDate = {
|
|
year: $nowDate.getFullYear(),
|
|
month: $nowDate.getMonth() + 1,
|
|
day: $nowDate.getDate(),
|
|
hours: $nowDate.getHours(),
|
|
minutes: $nowDate.getMinutes(),
|
|
seconds: $nowDate.getSeconds()
|
|
}
|
|
const yearsLen = 30
|
|
const years = new Array(yearsLen).fill(1).map((v, index) => {
|
|
return nowDate.year - index
|
|
}).reverse()
|
|
const months = new Array(12).fill(1).map((v, index) => {
|
|
return index + 1
|
|
})
|
|
const days = ref(new Array(getMonthArea($nowDate, 'end').getDate()).fill(1).map((v, index) => {
|
|
return index + 1
|
|
}))
|
|
const days1 = ref(new Array(getMonthArea($nowDate, 'end').getDate()).fill(1).map((v, index) => {
|
|
return index + 1
|
|
}))
|
|
const hours = new Array(24).fill(1).map((v, index) => {
|
|
return index
|
|
})
|
|
const minutes = new Array(60).fill(1).map((v, index) => {
|
|
return index
|
|
})
|
|
const seconds = new Array(60).fill(1).map((v, index) => {
|
|
return index
|
|
})
|
|
const fastTime = reactive([{
|
|
title: '今日',
|
|
key: 'now'
|
|
},
|
|
{
|
|
title: '昨日',
|
|
key: 'prve'
|
|
},
|
|
{
|
|
title: '本月',
|
|
key: 'nowMonth'
|
|
},
|
|
{
|
|
title: '上月',
|
|
key: 'prveMonth'
|
|
}
|
|
])
|
|
|
|
|
|
|
|
function setPrveDay() {
|
|
|
|
}
|
|
|
|
function setNowMoneth() {
|
|
|
|
}
|
|
|
|
function setprveMoneth() {
|
|
|
|
}
|
|
|
|
|
|
function setDay(start, end) {
|
|
value.value = [
|
|
start.year,
|
|
start.month,
|
|
start.day,
|
|
0,
|
|
0,
|
|
0,
|
|
]
|
|
value1.value = [
|
|
end.year,
|
|
end.month,
|
|
end.day,
|
|
23,
|
|
59,
|
|
59,
|
|
]
|
|
}
|
|
|
|
function changeTime(key) {
|
|
const yearIndex = years.findIndex(v => v == nowDate.year)
|
|
const prveyearIndex = years.findIndex(v => v == nowDate.year) - 1
|
|
const nowMonthIndex = nowDate.month - 1
|
|
const nowDayIndex = nowDate.day - 1
|
|
const dataMap = {
|
|
now: function() {
|
|
return {
|
|
start: {
|
|
year: yearIndex,
|
|
month: nowMonthIndex,
|
|
day: nowDayIndex
|
|
},
|
|
end: {
|
|
year: yearIndex,
|
|
month: nowMonthIndex,
|
|
day: nowDayIndex
|
|
}
|
|
}
|
|
},
|
|
prve: function() {
|
|
const oneDay=1000*60*60*24
|
|
const date=new Date(new Date(nowDate.year,nowDate.month,nowDate.day,0,0,0).getTime()-oneDay)
|
|
return {
|
|
start: {
|
|
year:years.findIndex(v=>v==date.getFullYear()),
|
|
month:date.getMonth()-1<0?11:date.getMonth()-1,
|
|
day: date.getDate()-1
|
|
},
|
|
end: {
|
|
year:years.findIndex(v=>v==date.getFullYear()),
|
|
month:date.getMonth()-1<0?11:date.getMonth()-1,
|
|
day: date.getDate()-1
|
|
}
|
|
}
|
|
},
|
|
nowMonth: function() {
|
|
return {
|
|
start: {
|
|
year:yearIndex,
|
|
month:nowMonthIndex,
|
|
day: 0
|
|
},
|
|
end: {
|
|
year:yearIndex,
|
|
month:nowMonthIndex,
|
|
day:new Date(nowDate.year, nowDate.month , 0).getDate() - 1
|
|
}
|
|
}
|
|
},
|
|
prveMonth: function() {
|
|
const oneDay=1000*60*60*24
|
|
const date=new Date(new Date(nowDate.year, nowDate.month-1,0,0,0).getTime()-oneDay)
|
|
console.log(date.getMonth());
|
|
return {
|
|
start: {
|
|
year:years.findIndex(v=>v==date.getFullYear()),
|
|
month:date.getMonth(),
|
|
day: 0
|
|
},
|
|
end: {
|
|
year:years.findIndex(v=>v==date.getFullYear()),
|
|
month:date.getMonth(),
|
|
day: date.getDate()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
const data = dataMap[key]()
|
|
setDay(data.start, data.end)
|
|
changeDays(false,value.value)
|
|
changeDays(true,value1.value)
|
|
|
|
console.log(value1.value);
|
|
const start = returnDateString(value.value)
|
|
const end = returnDateString(value1.value)
|
|
|
|
emits('confirm', {
|
|
text: `${start}——${end}`,
|
|
start,
|
|
end
|
|
})
|
|
close()
|
|
}
|
|
let value = ref([
|
|
years.length - 1,
|
|
nowDate.month - 1,
|
|
nowDate.day - 1,
|
|
0,
|
|
0,
|
|
0,
|
|
])
|
|
let value1 = ref([
|
|
years.length - 1,
|
|
nowDate.month - 1,
|
|
nowDate.day - 1,
|
|
23,
|
|
59,
|
|
59,
|
|
])
|
|
|
|
let show = ref(false)
|
|
const emits = defineEmits('close', 'open', 'confirm')
|
|
|
|
function toggle() {
|
|
show.value = !show.value
|
|
if (show.value) {
|
|
emits('open', true)
|
|
} else {
|
|
emits('close', false)
|
|
}
|
|
}
|
|
|
|
function close() {
|
|
show.value = false
|
|
emits('close', false)
|
|
}
|
|
|
|
function open() {
|
|
show.value = true
|
|
emits('open', true)
|
|
}
|
|
|
|
function returnDateString(arr) {
|
|
const year = years[arr[0]]
|
|
const month = arr[1] + 1
|
|
const day = arr[2] + 1
|
|
const hour = ('0' + arr[3]).slice(-2)
|
|
const min = ('0' + arr[4]).slice(-2)
|
|
const sen = ('0' + arr[5]).slice(-2)
|
|
return `${year}-${month}-${day} ${hour}:${min}:${sen}`
|
|
}
|
|
|
|
|
|
function confirm(e) {
|
|
const start = returnDateString(value.value)
|
|
const end = returnDateString(value1.value)
|
|
console.log(start);
|
|
console.log(end);
|
|
emits('confirm', {
|
|
text: `${start}——${end}`,
|
|
start,
|
|
end
|
|
})
|
|
close()
|
|
}
|
|
|
|
function returnMonthStart(arr) {
|
|
return new Date(years[arr[0]], months[arr[1]] - 1, 1).getDate();
|
|
}
|
|
|
|
function returnMonthEnd(arr) {
|
|
return new Date(years[arr[0]], months[arr[1]], 0).getDate();
|
|
}
|
|
|
|
function changeDays(isDays1,arr){
|
|
const end = returnMonthEnd(arr)
|
|
if (end) {
|
|
if(isDays1){
|
|
days1.value= new Array(end).fill(1).map((v,
|
|
index) => {
|
|
return index + 1
|
|
})
|
|
}else{
|
|
days.value= new Array(end).fill(1).map((v,
|
|
index) => {
|
|
return index + 1
|
|
})
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
function bindChange(e) {
|
|
value.value = e.detail.value
|
|
changeDays(false, e.detail.value)
|
|
}
|
|
|
|
function bindChange1(e) {
|
|
value1.value = e.detail.value
|
|
changeDays(true, e.detail.value)
|
|
}
|
|
|
|
function getDayDate(date = new Date(), type) {
|
|
const now = date
|
|
if (type === 'start') {
|
|
const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate());
|
|
return startOfDay
|
|
}
|
|
if (type === 'end') {
|
|
const endOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999);
|
|
return endOfDay;
|
|
}
|
|
}
|
|
|
|
function getMonthArea(date = new Date(), type) {
|
|
let now = date
|
|
let currentMonthStart = new Date(now.getFullYear(), now.getMonth(), 1);
|
|
let currentMonthEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59, 999);
|
|
if (type === 'start') {
|
|
return currentMonthStart
|
|
}
|
|
if (type === 'end') {
|
|
return currentMonthEnd;
|
|
}
|
|
return {
|
|
start: currentMonthStart,
|
|
end: currentMonthEnd
|
|
};
|
|
}
|
|
|
|
function nullFunction() {
|
|
|
|
}
|
|
|
|
function pickend(e) {
|
|
console.log(e);
|
|
}
|
|
|
|
function pickend1(e) {
|
|
console.log(e);
|
|
}
|
|
defineExpose({
|
|
close,
|
|
open,
|
|
confirm,
|
|
toggle
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.fastTime {
|
|
.item {
|
|
background-color: rgb(247, 247, 247);
|
|
padding: 6rpx 40rpx;
|
|
border-radius: 6rpx;
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
|
|
.top {
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.close {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
right: 30rpx;
|
|
}
|
|
|
|
.mask {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
top: 0;
|
|
background-color: rgba(0, 0, 0, .7);
|
|
|
|
.box {
|
|
position: absolute;
|
|
background-color: #fff;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
border-radius: 16rpx 16rpx 0 0;
|
|
}
|
|
}
|
|
|
|
.fixed_b {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 30rpx;
|
|
z-index: 100;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.picker-view {
|
|
width: 750rpx;
|
|
height: 300rpx;
|
|
}
|
|
|
|
.item {
|
|
line-height: 34px;
|
|
text-align: center;
|
|
}
|
|
</style> |