xiaochengxu/components/min-picker/min-picker.vue

<template>
	<view class="min-picker">
		<view class="min-popup" v-if="show" :class="[show ? 'min-show' : 'min-hide']">
		  <view class="min-content" :style="{height:heightRpx+'rpx'}">
				<view class="main-top">
					<view class="picer-top">
						<text @click="cacel">取消</text>
						<text @click="sure" class="sure">确认</text>
					</view>
				</view>
				<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" style="height:400rpx" :key="value.toString()">
					<picker-view-column>
						<view class="picker item" v-for="(item,index) in years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column v-if="showType<=1">
						<view class="picker item" v-for="(item,index) in months" :key="index">{{item}}月</view>
					</picker-view-column>
					<picker-view-column v-if="showType==0">
						<view class="picker item" v-for="(item,index) in days" :key="index">{{item}}日</view>
					</picker-view-column>
				</picker-view>
		  </view>
		</view>
	</view>
</template>
<script>
	export default {
		name:'MinPicker',
		props: {
			show: {
				type: Boolean,
				default: false
			},
			///日期选择器的起始时间
			startTime:{
				type: Array,
				default: () => [2018,6,5]
			},
			///日期选择器的结束时间
			endTime:{
				type: Number,
				default: 2045
			},
			heightRpx: {
			  type: String
			},
			///日期选择器默认显示的时间,例如[2022,1,1]，默认月份与天数都是以1开始。
			currentTime : {
				type : [Array,null],
				default:null
			},
			/**
			 * 现实类型，0->年月日，1->年月，2->年
			 * 默认显示年月日
			 */
			showType : {
				type : Number,
				default: 0,
			}
		},
		data() {
			return {
				years: [],
				months: [],
				days: [],
				dayLength: 30,
				value: [0, 0, 0],
				visible: false,
				month: '',
				year: '',
				flag: false,
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth / (750 / 100))}rpx;`
			}
		},
		mounted() {
			this.getYears();
			// 获取初始位置
			if(this.currentTime == null){
				const time 	= new Date()
				const year 	= time.getFullYear()
				const month = time.getMonth() + 1
				this.month 	= month
				this.year 	= year
				this.getMonth()
				this.getDaysInOneMonth(year, month)
				this.value 	= [this.years.indexOf(this.year),this.months.indexOf(this.month),this.days.indexOf( time.getDate())]
			}else{
				this.year 	= this.currentTime[0];
				this.getMonth();
				var m 		= this.months.indexOf(this.currentTime[1]);
				console.log(m);
				this.month = this.currentTime[1];
				this.getDaysInOneMonth(this.year, this.month);
				this.value	= [this.years.indexOf(this.year),m,this.days.indexOf(this.currentTime[2])];
			}
			this.getDays()
		},
		methods: {
			bindChange: function(e) {
				//console.log(e);
				this.getDaysInOneMonth(this.years[e.target.value[0]], this.months[e.target.value[1]])
				this.flag = true;
				const val = e.detail.value;
				this.year = this.years[val[0]];
				this.getMonth();
				this.month	= this.months[val[1]];
				this.getDays();
				//this.month = this.months[val[1]] < 10 ? '0' + this.months[val[1]] : this.months[val[1]];
				this.day = this.days[val[2]];
				//console.log(this.year,this.month,this.day);
			},
			// 获得年份
			getYears() {
				this.years = []
				for (let i = this.startTime[0]; i <= this.endTime; i++) {
					this.years.push(i)
				}
			},
			// 获取月份
			getMonth() {
				this.months = []
				var year = this.year;
				//console.log("获取年份："+ year + "的所有月份！");
				if(year == this.startTime[0]){
					if(this.startTime[1]){
						//定义了起始月份的
						for(var i = this.startTime[1];i<=12;i++){
							this.months.push(i);
						}
						return;
					}
				}
				for (let i = 1; i <= 12; i++) {
					this.months.push(i)
				}
			},
			/**
			 * 获取当前月份的天数信息，在调用本方法之前，请确保你设置了this.year,this.month,
			 */
			getDays() {
				this.days = []
				var year 	= this.year;
				var month	= this.month;
				if(year == this.startTime[0] && month == this.startTime[1]){
					if(this.startTime[2]){
						for(var i = this.startTime[2];i<=this.dayLength;i++){
							this.days.push(i)
						}
						return;
					}
				}
				for (let i = 1; i <= this.dayLength; i++) {
					this.days.push(i)
				}
			},
			// 获取某年某月多少天
			getDaysInOneMonth(year, month) {
				month = parseInt(month, 10)
				var d = new Date(year, month, 0)
				this.dayLength = d.getDate()
				this.getDays()
				return d.getDate()
			},
			// 取消
			cacel() {
				this.$emit('cancel', false)
			},
			// 确认
			sure() {
				this.value = [this.years.indexOf(this.year),
					this.months.indexOf(this.month),
					this.days.indexOf(this.day ?? 1),
				];
				this.$emit('cancel', false)
				this.$emit('sure', {
					a: this.year,
					b: this.month,
					c: this.day
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.main-top {
		padding: 0 30rpx;
		border-radius: 20rpx;
		.picer-top {
			width: 100%;
			height: 100rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			font-size: 30rpx;
			//background-color: #1CBBB4;
			.sure {
				color: #007aff;
			}
		}
	}

	.picker {
		text-align: center;
		line-height: 50rpx;
	}
	
	.min-popup{
	  width: 100vw;
	  height: 100vh;
	  position: fixed;
	  top:0;
	  left: 0;
	  z-index: 100;
	  &.min-hide{
	    .min-content{
	      animation: hide .5s linear forwards;
	    }
	    .min-content-height{ animation: hide .5s linear forwards;}
	  
	  }
	  &.min-show{
	    .min-content{
	      animation: show .5s linear forwards;
	    }
	    .min-content-height{ animation: show .5s linear forwards;}
	  }
	  .min-content{
	    width: 100%;
	    height:800rpx;
	    background: #fff;
	    position: absolute;
	    left: 0;
	    bottom: 0;
	    z-index: 9999;
	    overflow: hidden;
	    border-radius: 20rpx 20rpx  0  0;
	  }
	  @keyframes hide {
	    100% {
	      transform: translateY(100%);
	    }
	    0% {
	      transform: translateY(0);
	    }
	  }
	  @keyframes show {
	    0% {
	      transform: translateY(100%);
	    }
	    100% {
	      transform: translateY(0);
	    }
	  }
	}
</style>