jiangximiniprogramSchool/pages/tabbar/statistics/comp/tabDate.vue

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