江西小程序管理端
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.
 
 
 

77 lines
1.7 KiB

<template>
<view class="tabBox">
<view class="tabs">
<view class="tab" @click="tabClick(1)" :class="{active: currentTab==1}">按日</view>
<view class="tab" @click="tabClick(2)" :class="{active: currentTab==2}">按月</view>
<view class="tab" @click="tabClick(3)" :class="{active: currentTab==3}">按年</view>
<view class="tab long" @click="tabClick(4)" :class="{active: currentTab==4}">{{ customDate }}</view>
</view>
<u-popup :show="showDatePicker" mode="bottom" :round="20" :closeable="true" :closeOnClickOverlay="true" @close="showDatePicker=false">
<timeScreen @selectDateClick="selectDateClick" />
</u-popup>
</view>
</template>
<script>
export default {
data() {
return {
currentTab: 1,
showDatePicker: false,
customDate: '自定义日期'
}
},
mounted() {
let numDate = this.$u.utils.getCustomDay(-7)
console.log(numDate)
},
methods: {
tabClick(num) {
this.currentTab = num
if(num==4) {
this.showDatePicker = true
}
},
// 2选择时间选择器里的时间
selectDateClick(val) {
if(val.date1) {
this.customDate = val.date1
}else {
this.customDate = val.date2+ '至' + val.date3
}
this.showDatePicker = false
}
}
}
</script>
<style lang="scss" scoped>
.tabs {
display: flex;
justify-content: space-between;
padding-bottom: 24rpx;
.tab {
width: 96rpx;
height: 60rpx;
background: rgba(25, 137, 250, 0.1);
border-radius: 8rpx;
border: 2rpx solid #1989FA;
font-size: 28rpx;
text-align: center;
line-height: 60rpx;
color: $themC;
&.active {
color: #fff;
background-color: $themC;
}
&.long {
min-width: 336rpx;
width: fit-content !important;
}
}
}
</style>