You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
151 lines
3.6 KiB
151 lines
3.6 KiB
<template>
|
|
<view class="popupCon">
|
|
<view class="popTab">
|
|
<view class="tabItem" :class="{active: currentPopTab==1}" @click="changePopTab(1)">月份选择</view>
|
|
<view class="tabItem" :class="{active: currentPopTab==2}" @click="changePopTab(2)">自定义时间</view>
|
|
</view>
|
|
<view class="timer">
|
|
<view class="tabCon" v-if="currentPopTab==1">
|
|
<view class="dateBtn" @click="showDatePickerFn(1)" :class="{hui: !date1}">{{ date1 }}</view>
|
|
<!-- <u-datetime-picker-my
|
|
:show="show"
|
|
v-model="value1"
|
|
mode="year-month"
|
|
:showToolbar="false"
|
|
:visibleItemCount="4"
|
|
@confirm="confirm"
|
|
></u-datetime-picker-my> -->
|
|
</view>
|
|
<view class="tabCon" v-else>
|
|
<view class="dateBtn" :class="{hui: !date2}" @click="showDatePickerFn(2)">{{ date2 }}</view>
|
|
<view class="to">至</view>
|
|
<view class="dateBtn" :class="{hui: !date3}" @click="showDatePickerFn(3)">{{ date3 }}</view>
|
|
</view>
|
|
<view class="btnBg" @click="selectDateClick">确定</view>
|
|
<!-- <u-picker-my></u-picker-my> -->
|
|
</view>
|
|
<u-datetime-picker
|
|
:show="showDatePicker"
|
|
v-model="value1"
|
|
mode="year-month"
|
|
:visibleItemCount="4"
|
|
:closeOnClickOverlay="false"
|
|
@confirm="confirmDatePicker"
|
|
></u-datetime-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
currentPopTab: 1,
|
|
showDatePicker: false,
|
|
value1: '',
|
|
currentBtnDate: '',
|
|
date1: '',
|
|
date2: '',
|
|
date3: '',
|
|
}
|
|
},
|
|
methods: {
|
|
changePopTab(num) {
|
|
this.currentPopTab = num
|
|
},
|
|
// 1打开时间选择器
|
|
showDatePickerFn(num) {
|
|
this.showDate = false
|
|
this.showDatePicker = true
|
|
this.currentBtnDate = num
|
|
},
|
|
// 2选择时间选择器里的时间
|
|
confirmDatePicker(val) {
|
|
this.showDatePicker = false
|
|
let date = uni.$u.date(val.value, 'yyyy-mm-dd')
|
|
if(this.currentBtnDate==1) {
|
|
date = uni.$u.date(val.value, 'yyyy-mm')
|
|
}
|
|
this['date'+this.currentBtnDate] = date
|
|
this.$emit('confirmDatePicker')
|
|
},
|
|
// 3确定筛选时间
|
|
selectDateClick() {
|
|
let obj = {
|
|
date1: this.date1,
|
|
date2: this.date2,
|
|
date3: this.date3,
|
|
}
|
|
if(this.currentPopTab==2) {
|
|
if(!this.date2) return this.$u.toast('请选择开始时间')
|
|
if(!this.date3) return this.$u.toast('请选择结束时间')
|
|
if(new Date(this.date2)*1>new Date(this.date3)*1) return this.$u.toast('开始时间不能大于结束时间')
|
|
delete obj.date1
|
|
}else {
|
|
if(!this.date1) return this.$u.toast('请选择时间')
|
|
delete obj.date2
|
|
delete obj.date3
|
|
}
|
|
this.$emit('selectDateClick', obj)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.popupCon {
|
|
height: 430rpx;
|
|
.popTab {
|
|
display: flex;
|
|
padding: 40rpx 32rpx;
|
|
.tabItem {
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
margin-right: 60rpx;
|
|
&.active {
|
|
color: $themC;
|
|
position: relative;
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -20rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 128rpx;
|
|
height: 4rpx;
|
|
background: #1989FA;
|
|
border-radius: 3rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.tabCon {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 32rpx;
|
|
padding-top: 20rpx;
|
|
.dateBtn {
|
|
width: 280rpx;
|
|
height: 80rpx;
|
|
border-radius: 10rpx;
|
|
border: 2rpx solid #1989FA;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
color: $themC;
|
|
font-size: 32rpx;
|
|
&.hui {
|
|
border: 2rpx solid #E8E9EC;
|
|
}
|
|
}
|
|
.to {
|
|
font-size: 32rpx;
|
|
margin: 0 40rpx;
|
|
}
|
|
}
|
|
|
|
.btnBg {
|
|
width: 396rpx;
|
|
margin: 34rpx auto 42rpx auto;
|
|
}
|
|
}
|
|
</style>
|