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> |