329 lines
7.3 KiB
Vue
329 lines
7.3 KiB
Vue
|
|
|||
|
|
<template>
|
|||
|
|
<view class="content-pop">
|
|||
|
|
<view class="pop-cont" >
|
|||
|
|
<view class="zdp-pop">
|
|||
|
|
<view class="top-cont">
|
|||
|
|
<view class="text-info">
|
|||
|
|
<view class="time-sub" @click="checkMonths(3)" :class="{ active: timeType == 3 }">
|
|||
|
|
近一个月
|
|||
|
|
</view>
|
|||
|
|
<view class="time-sub" @click="checkMonths(4)" :class="{ active: timeType == 4 }">
|
|||
|
|
近三个月
|
|||
|
|
</view>
|
|||
|
|
<view class="time-sub" @click="checkMonths(5)" :class="{ active: timeType == 5 }">
|
|||
|
|
近六个月
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="text-info">
|
|||
|
|
<view class="time" @click="checkStart" :class="{ active: timeType == 1 }">
|
|||
|
|
{{startTime}}
|
|||
|
|
</view>
|
|||
|
|
<view>-</view>
|
|||
|
|
<view class="time" @click="checkEnd" :class="{ active: timeType == 2 }">
|
|||
|
|
{{endTime}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="date-cont">
|
|||
|
|
<picker-view :value="value" @change="handleChange" class="picker-view">
|
|||
|
|
<picker-view-column v-for="obj in SelArr">
|
|||
|
|
<view class="item" v-for="(item,index) in obj.child" :key="index">
|
|||
|
|
{{item<10?'0'+item:item}}{{obj.value}}
|
|||
|
|
</view>
|
|||
|
|
</picker-view-column>
|
|||
|
|
</picker-view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
props: {
|
|||
|
|
timeType: {//1-开始时间，2-结束时间，3-1个月，4-3个月，5-6个月
|
|||
|
|
type: Number,
|
|||
|
|
default:0
|
|||
|
|
},
|
|||
|
|
// endTime: {
|
|||
|
|
// type: String
|
|||
|
|
// },
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
startTime:'',
|
|||
|
|
endTime:'',
|
|||
|
|
// timeType:0,//1-开始时间，2-结束时间，3-1个月，4-3个月，5-6个月
|
|||
|
|
value: [], //选择的值,要设置默认值
|
|||
|
|
dateArr: [],
|
|||
|
|
day: 18,
|
|||
|
|
month: 8, //
|
|||
|
|
years: 24,
|
|||
|
|
SelArr: [],
|
|||
|
|
range: [],
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {},
|
|||
|
|
created() {
|
|||
|
|
this.newDate()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
checkStart(){
|
|||
|
|
this.timeType=1;
|
|||
|
|
this.startTime = `20${this.years}-${this.month<10?'0'+this.month:this.month}-${this.day<10?'0'+this.day:this.day}`
|
|||
|
|
this.range[0] = this.startTime;
|
|||
|
|
this.handleEmit()
|
|||
|
|
},
|
|||
|
|
checkEnd(){
|
|||
|
|
this.timeType=2;
|
|||
|
|
this.endTime = `20${this.years}-${this.month<10?'0'+this.month:this.month}-${this.day<10?'0'+this.day:this.day}`
|
|||
|
|
this.range[1] = this.endTime;
|
|||
|
|
this.handleEmit()
|
|||
|
|
},
|
|||
|
|
checkMonths(type){
|
|||
|
|
this.timeType=type;
|
|||
|
|
const date = new Date()
|
|||
|
|
let years = date.getFullYear();
|
|||
|
|
let month = date.getMonth() + 1;
|
|||
|
|
let day = date.getDate();
|
|||
|
|
this.range[1] = `${years}-${month<10?'0'+month:month}-${day<10?'0'+day:day}`;
|
|||
|
|
if(type==3){//近一个月
|
|||
|
|
var lastDate = new Date(new Date().getTime() -(24 * 60 * 60 * 1000 * 30));
|
|||
|
|
}
|
|||
|
|
if(type==4){//近三个月
|
|||
|
|
var lastDate = new Date(new Date().getTime() -(24 * 60 * 60 * 1000 * 90));
|
|||
|
|
}
|
|||
|
|
if(type==5){//六个月
|
|||
|
|
var lastDate = new Date(new Date().getTime() -(24 * 60 * 60 * 1000 * 180));
|
|||
|
|
}
|
|||
|
|
let lastyears = lastDate.getFullYear();
|
|||
|
|
let lastmonth = lastDate.getMonth() + 1;
|
|||
|
|
let lastday = lastDate.getDate();
|
|||
|
|
this.range[0] = `${lastyears}-${lastmonth<10?'0'+lastmonth:lastmonth}-${lastday<10?'0'+lastday:lastday}`;
|
|||
|
|
this.handleEmit()
|
|||
|
|
},
|
|||
|
|
// 初始化选择器日期为今天
|
|||
|
|
newDate() {
|
|||
|
|
this.initArr()
|
|||
|
|
const date = new Date()
|
|||
|
|
this.day = date.getDate()
|
|||
|
|
this.years = date.getFullYear();
|
|||
|
|
this.month = date.getMonth() + 1;
|
|||
|
|
let str=this.years+"-"+this.month+"-"+this.day;
|
|||
|
|
let arr = []
|
|||
|
|
arr = str.split('-');
|
|||
|
|
this.month = arr[1] - 0;
|
|||
|
|
this.day = arr[2] - 0;
|
|||
|
|
for (let i = 0; i < arr.length; i++) {
|
|||
|
|
if (i == 0) {
|
|||
|
|
arr[0] = arr[0].slice(2)
|
|||
|
|
arr[0] -= 0
|
|||
|
|
this.years = arr[0]
|
|||
|
|
} else {
|
|||
|
|
arr[i]--
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
this.value = arr;
|
|||
|
|
},
|
|||
|
|
// 初始化选择器日期数据
|
|||
|
|
initArr() {
|
|||
|
|
const date = new Date()
|
|||
|
|
let arr = []
|
|||
|
|
let day = []
|
|||
|
|
let month = []
|
|||
|
|
let years = []
|
|||
|
|
for (let i = 2000; i <= date.getFullYear()+1; i++) {
|
|||
|
|
years.push(i)
|
|||
|
|
}
|
|||
|
|
for (let i = 1; i <= 12; i++) {
|
|||
|
|
month.push(i)
|
|||
|
|
}
|
|||
|
|
let num = this.getMonthDays(this.years, this.month)
|
|||
|
|
for (let i = 1; i <= num; i++) {
|
|||
|
|
day.push(i)
|
|||
|
|
}
|
|||
|
|
arr = [{
|
|||
|
|
value: "年",
|
|||
|
|
child: years
|
|||
|
|
}, {
|
|||
|
|
value: "月",
|
|||
|
|
child: month
|
|||
|
|
}, {
|
|||
|
|
value: "日",
|
|||
|
|
child: day
|
|||
|
|
}]
|
|||
|
|
this.SelArr = arr
|
|||
|
|
},
|
|||
|
|
//提交父组件
|
|||
|
|
handleEmit() {
|
|||
|
|
let {range,timeType} = this
|
|||
|
|
this.$emit('submit-date', {range,timeType})
|
|||
|
|
},
|
|||
|
|
// 选择器选择
|
|||
|
|
handleChange(e) {
|
|||
|
|
let {
|
|||
|
|
value
|
|||
|
|
} = e.detail
|
|||
|
|
// console.log(value);
|
|||
|
|
// 年小于前面+0
|
|||
|
|
if (value[0] < 10) {
|
|||
|
|
value[0] = '0' + value[0]
|
|||
|
|
}
|
|||
|
|
this.years = value[0]
|
|||
|
|
this.month = value[1] + 1 //月
|
|||
|
|
this.day = value[2] + 1 //日
|
|||
|
|
this.initArr()
|
|||
|
|
let str = `20${this.years}-${this.month<10?'0'+this.month:this.month}-${this.day<10?'0'+this.day:this.day}`
|
|||
|
|
if(this.timeType==1){
|
|||
|
|
this.startTime=str
|
|||
|
|
}
|
|||
|
|
if(this.timeType==2){
|
|||
|
|
this.endTime=str
|
|||
|
|
}
|
|||
|
|
this.range[0] = this.startTime;
|
|||
|
|
this.range[1] = this.endTime;
|
|||
|
|
this.handleEmit()
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
//获取当前月的天数
|
|||
|
|
getMonthDays(year, month) {
|
|||
|
|
var thisDate = new Date(year, month, 0);
|
|||
|
|
return thisDate.getDate();
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.pop-cont {
|
|||
|
|
// position: fixed;
|
|||
|
|
// left: 0%;
|
|||
|
|
// bottom: 0%;
|
|||
|
|
width: 100%;
|
|||
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|||
|
|
height: 100%;
|
|||
|
|
// .zdp-pop{
|
|||
|
|
// transform: translateY(100%);
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// .pop-cont.open {
|
|||
|
|
// height: 100%;
|
|||
|
|
// .zdp-pop{
|
|||
|
|
// transform: translateY(0);
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
.zdp-pop {
|
|||
|
|
// position: absolute;
|
|||
|
|
// bottom: 0%;
|
|||
|
|
// left: 0%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
width: 100%;
|
|||
|
|
height: 750rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
transition: all 1s;
|
|||
|
|
.top-cont {
|
|||
|
|
width: 100%;
|
|||
|
|
height: auto;
|
|||
|
|
// display: flex;
|
|||
|
|
// justify-content: space-between;
|
|||
|
|
// align-items: center;
|
|||
|
|
// margin-bottom: 32rpx;
|
|||
|
|
|
|||
|
|
.close-cont {
|
|||
|
|
color: #aaa;
|
|||
|
|
letter-spacing: 6rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-info {
|
|||
|
|
width: 100%;
|
|||
|
|
height: auto;
|
|||
|
|
margin: 30rpx auto;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
.time{
|
|||
|
|
width: 45%;
|
|||
|
|
height: 80rpx;
|
|||
|
|
line-height: 80rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
background: #F5F5F5;
|
|||
|
|
color: #1A1A1A;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
}
|
|||
|
|
.time-sub{
|
|||
|
|
width: 30%;
|
|||
|
|
height: 80rpx;
|
|||
|
|
line-height: 80rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
background: #F5F5F5;
|
|||
|
|
color: #1A1A1A;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
}
|
|||
|
|
.active{
|
|||
|
|
background: #D4E4FF;
|
|||
|
|
border: 2rpx solid #7691FC;
|
|||
|
|
color: #0052D9;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.save-cont {
|
|||
|
|
background: #409EFF;
|
|||
|
|
color: #fff;
|
|||
|
|
width: 100rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 60rpx;
|
|||
|
|
border-radius: 6rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tabs-cont {
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
height: 80rpx;
|
|||
|
|
background-color: #F3F5F9;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
border-radius: 4rpx;
|
|||
|
|
padding: 0 10rpx;
|
|||
|
|
|
|||
|
|
.tab-list {
|
|||
|
|
min-width: 20%;
|
|||
|
|
display: flex;
|
|||
|
|
height: 60%;
|
|||
|
|
flex: 1;
|
|||
|
|
justify-content: center;
|
|||
|
|
border-radius: 4rpx;
|
|||
|
|
|
|||
|
|
&.active {
|
|||
|
|
background-color: #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.date-cont {
|
|||
|
|
height: calc(750rpx - 180rpx);
|
|||
|
|
|
|||
|
|
.picker-view {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-wrap: nowrap;
|
|||
|
|
width: 100rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-picker-view-indicator {
|
|||
|
|
height: 100rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|