<template>
|
<uni-popup ref="popup" type="top">
|
<view class="popup-container" :style="{'height':windowHeight}">
|
<view class="popup-content">
|
<view class="input-group-row">
|
<text class="label">统计单位</text>
|
<view class="right-text">
|
<picker mode="selector" :range="unitList" @change="_unitChange">
|
<view>
|
<text>{{unit}}</text>
|
<text class="iconfont iconjiantouarrow486 gray"></text>
|
</view>
|
</picker>
|
</view>
|
</view>
|
<view class="input-group-row">
|
<text class="label">开始时间</text>
|
<view class="right-text" @click="_showbeginTime">
|
<text :class="beginTime?'':'gray'">{{beginTime || '请选择开始时间'}}</text>
|
</view>
|
</view>
|
<view class="input-group-row">
|
<text class="label">结束时间</text>
|
<view class="right-text" @click="_showEndTime">
|
<text :class="endTime?'':'gray'">{{endTime || '请选择开始时间'}}</text>
|
</view>
|
</view>
|
</view>
|
<view class="btn-group">
|
<text class="btn" @click="_reset">取消</text>
|
<text class="btn btn-blue" @click="_confirm">确认</text>
|
</view>
|
<date-time-picker ref='beginTime' :type='datePickerType' toolBarTitle="" :dateString="beginTime" @change='_beginTimeChange'></date-time-picker>
|
<date-time-picker ref='endTime' :startDate="startDate" :type='datePickerType' toolBarTitle="" :dateString="endTime" @change='_endTimeChange'></date-time-picker>
|
</view>
|
</uni-popup>
|
</template>
|
|
<script>
|
import uniPopup from '../../../components/uni-popup/uni-popup'
|
import DateTimePicker from '../../../components/bory-dateTimePicker/bory-dateTimePicker.vue'
|
export default {
|
components: {
|
uniPopup,
|
DateTimePicker
|
},
|
props:{
|
isShow: {
|
default: false
|
}
|
},
|
watch:{
|
isShow(newVal){
|
if(newVal){
|
this.$refs.popup.open()
|
}else{
|
this.$refs.popup.close()
|
}
|
}
|
},
|
data(){
|
return {
|
windowHeight: "200px",
|
unit: '日',
|
unitList: ['年', '月', '日'],
|
beginTime: '',
|
endTime: ''
|
}
|
},
|
computed:{
|
datePickerType(){
|
if(this.unit==='年'){
|
return 'year'
|
} else if(this.unit==='月'){
|
return 'year-month'
|
} else{
|
return 'date'
|
}
|
},
|
startDate(){
|
return this.beginTime
|
}
|
},
|
created() {
|
this.beginTime = this.$utils.formmatTime('YY-mm')+'-01';
|
this.endTime = this.$utils.formmatTime('YY-mm-dd')
|
},
|
mounted() {
|
uni.getSystemInfo({
|
success: (res) => {
|
this.windowHeight = res.windowHeight+"px";
|
} })
|
},
|
methods:{
|
_unitChange(e){
|
let val = this.unitList[e.detail.value];
|
if(this.unit == val){
|
return
|
}
|
this.unit = val;
|
if(this.unit == '年'){
|
this.beginTime = '';
|
this.endTime = this.$utils.formmatTime('YY');
|
} else if(this.unit == '月'){
|
this.beginTime = '';
|
this.endTime = this.$utils.formmatTime('YY-mm')
|
} else {
|
this.beginTime = this.$utils.formmatTime('YY-mm')+'-01';
|
this.endTime = this.$utils.formmatTime('YY-mm-dd')
|
}
|
},
|
_showbeginTime () {
|
this.$refs['beginTime'].show();
|
},
|
_showEndTime(){
|
this.$refs['endTime'].show();
|
},
|
_beginTimeChange(val){
|
this.beginTime = val;
|
},
|
_endTimeChange(val){
|
this.endTime = val;
|
},
|
_reset(){
|
this.$refs.popup.close()
|
},
|
_confirm(){
|
if(!this.beginTime){
|
this.$toast.info('请选择开始时间');
|
return;
|
}
|
if(!this.endTime){
|
this.$toast.info('请选择结束时间');
|
return;
|
}
|
this.$refs.popup.close();
|
this.$emit('change', {
|
beginTime: this.beginTime,
|
endTime: this.endTime,
|
unit: this.unit
|
})
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.popup-container{
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
width: 100%;
|
background: #FFFFFF;
|
}
|
.input-group-row{
|
padding-left: 10px;
|
padding-right: 10px;
|
}
|
.btn-group{
|
display: flex;
|
border-top: 1px solid #EDEAF4;
|
margin-top: 20px;
|
}
|
.btn-group .btn{
|
flex: 1;
|
line-height: 44px;
|
text-align: center;
|
font-size: 15px;
|
color: #666666;
|
}
|
.btn-group .btn-blue{
|
background: #518EFF;
|
color: #FFFFFF;
|
}
|
</style>
|
