jiangximiniprogramSchool/components/timeScreen/timeScreen.vue

<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: ''
			}
		},
		methods: {
			// 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
			},
		}
	}
</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>