Ci2Order.vue/App/components/z-date-select/z-date-select.vue

<template>
	<view class="mask" @touchmove.stop.prevent="moveHandle" v-if="visible">
		<view class="picker-view shadow-2" :animation="animation">
		
			<view class="flex-n fac fjb plr-40 ptb-20">
				<view class="cancel" @click="cancel">取消</view>
				<view class="ok" @click="ok">确定</view>
			</view>
			<picker-view class="picker-view-content" :value="timevalue" @change="bindChange">
				<picker-view-column>
					<view class="item"  v-for="(item,index) in yearList" :key="index">{{item}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in monthList" :key="index">{{item}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in dayList" :key="index">{{item}}</view>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
</template>

<script>
	export default{
		name:'z-date-select',
		props: {
				value: String,
				visible: Boolean,
				startDate: {
					type: String,
					default: '1900/01/01'
				}, //开始时间
				endDate: {
					type: String,
					default: '2100/01/31'
				}, //结束时间
			},
			model: {
				prop: 'value',
				event: 'input'
			},
			data() {
				return {
					
					timevalue: [0,0,0],
					animation: {},
					animate: '',
					yearList:[],
					monthList:[],
					dayList:[],
					beginMonthList:[],
					endMonthList:[],
					beginDayList:[],
					endDayList:[],
				}
			},
			watch: {
				visible(newval, oldval) {
					if (newval) {
						this.getDefaultDate();
						this.animation = this.animate.translateY(500).step({
							duration: 0
						}).translateY(0).step().export();
					}
				}
			},
			mounted() {
				this.animate = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease',
				})
			},
			methods: {
				moveHandle() {},
				//获取日期默认位置
				getDefaultDate(){
					
					var today=this.$DateTime.getDayArea();
					console.log(today.date)
					var startDate=this.startDate?this.startDate:'1900/01/01',
					endDate=this.endDate?this.endDate:'2100/01/31';
					var a1=new Date(today.date).getTime()>new Date(startDate).getTime()?true:false;
					var a2=new Date(today.date).getTime()<new Date(endDate).getTime()?true:false;
					var selectDate=this.value?this.value.split('/'):(a1?(a2?today.date.split('-'):endDate.split('/')):startDate.split('/')),
					startYear=Number(startDate.split('/')[0]),
					startMonth=Number(startDate.split('/')[1]),
					startDay=Number(startDate.split('/')[2]),
					endYear=Number(endDate.split('/')[0]),
					endMonth=Number(endDate.split('/')[1]),
					endDay=Number(endDate.split('/')[2]),
					yearList=[],monthList=[],dayList=[],yearSelect=0,monthSelect=0,daySelect=0;
					for(var i=startYear;i<=endYear;i++){
						yearList.push(i);
						if(Number(selectDate[0])==i){
							yearSelect=i-startYear;
						}
					}
					
					if(this.value){  //开始1900/3/5 结束2100/1/1  value 2021-12-15
	
						//显示月
						if(startYear!=endYear){
							
							//等于开始年
							if(Number(selectDate[0])==startYear){
								for(var i=startMonth;i<=12;i++){
									monthList.push(i);
									if(Number(selectDate[1])==i){
										monthSelect=i-startMonth;
									}
								}
								//开始月
								if(monthSelect==0){
									for(var i=startDay;i<=this.$DateTime.getMonthDayNum(selectDate[0],selectDate[1]);i++){
										dayList.push(i)
									}
								}else{
									for(var i=1;i<=this.$DateTime.getMonthDayNum(selectDate[0],selectDate[1]);i++){
										dayList.push(i)
									}
								}
							}else if(Number(selectDate[0])==endYear){//等于结束年
								for(var i=1;i<=endMonth;i++){
									monthList.push(i);
									if(Number(selectDate[1])==i){
										monthSelect=i-1; 
									}
								}
								if(monthSelect==monthList.length-1){
									for(var i=1;i<=endDay;i++){
										dayList.push(i)
									}
								}else{
									for(var i=1;i<=this.$DateTime.getMonthDayNum(selectDate[0],selectDate[1]);i++){
										dayList.push(i)
									}
								}
							}else{
								for(var i=1;i<=12;i++){
									monthList.push(i);
									if(Number(selectDate[1])==i){
										monthSelect=i-1; 
									}
								}
								for(var i=1;i<=this.$DateTime.getMonthDayNum(selectDate[0],selectDate[1]);i++){
									dayList.push(i)
								}
							}
						}else{
							for(var i=startMonth;i<=endMonth;i++){
								monthList.push(i);
								if(Number(selectDate[1])==i){
									monthSelect=i-startMonth;
								}
							}
							for(var i=startDay;i<=endDay;i++){
								dayList.push(i)
							}
						}
						
					}else{
						if(startYear==endYear){
							for(var i=startMonth;i<=endMonth;i++){
								monthList.push(i);
								if(Number(selectDate[1])==i){
									monthSelect=i-startMonth; 
								}
							}
							//获取日
							if(monthList.length==1){
								//显示日
								for(var i=startDay;i<=endDate;i++){
									dayList.push(i)
								}
							}else{
								if(monthSelect==0){
									for(var i=startDay;i<=this.$DateTime.getMonthDayNum(yearList[yearSelect],monthList[monthSelect]);i++){
										dayList.push(i)
									}
								}else if(monthSelect==(monthList.length-1)){
									for(var i=1;i<=endDay;i++){
										dayList.push(i)
									}
								}else{
									for(var i=1;i<=this.$DateTime.getMonthDayNum(yearList[yearSelect],monthList[monthSelect]);i++){
										dayList.push(i)
									}
								}
							}
							
							
						}else{
							if(Number(selectDate[0])==startYear){
								for(var i=startMonth;i<=12;i++){
									monthList.push(i);
									if(Number(selectDate[1])==i){
										monthSelect=i-startMonth; 
									}
								}
								if(monthSelect==0){
									for(var i=startDay;i<=this.$DateTime.getMonthDayNum(yearList[yearSelect],monthList[monthSelect]);i++){
										dayList.push(i)
									}
								}else{
									for(var i=1;i<=this.$DateTime.getMonthDayNum(yearList[yearSelect],monthList[monthSelect]);i++){
										dayList.push(i)
									}
								}
							}
							else if(Number(selectDate[0])==endYear){
								for(var i=1;i<=endMonth;i++){
									monthList.push(i);
									if(Number(selectDate[1])==i){
										monthSelect=i-1; 
									}
								}
								if(monthSelect==(monthList.length-1)){
									for(var i=1;i<=endDay;i++){
										dayList.push(i)
									}
								}else{
									for(var i=1;i<=this.$DateTime.getMonthDayNum(yearList[yearSelect],monthList[monthSelect]);i++){
										dayList.push(i)
									}
								}
							}else{
								for(var i=1;i<=12;i++){
									monthList.push(i);
									if(Number(selectDate[1])==i){
										monthSelect=i-1; 
									}
								}
								for(var i=1;i<=this.$DateTime.getMonthDayNum(yearList[yearSelect],monthList[monthSelect]);i++){
									dayList.push(i)
								}
							}

						}
		
						
					}
					for(var i=0;i<dayList.length;i++){
						if(dayList[i]==selectDate[2]){
							daySelect=i;
						}
					}
					this.timevalue=[].concat([yearSelect,monthSelect,daySelect])
					console.log(yearSelect,monthSelect,daySelect)
					this.yearList=yearList;
					this.monthList=monthList;
					this.dayList=dayList;
					
				},
			
				//根据 第几年判断是不是起始年，和末尾年
				getMonth(yearNum){
					var startDate=this.startDate?this.startDate:'1900/01/01',
					endDate=this.endDate?this.endDate:'2100/01/31';
					var monthStart=Number(startDate.split('/')[1]),
					monthEnd=Number(endDate.split('/')[1]),
					monthList=[];
					if(yearNum==0&&yearNum!=this.yearList.length-1){//最小年最初月
						for(var i=monthStart;i<=12;i++){
							monthList.push(i)
						}
					}else if(yearNum!=0&&yearNum==this.yearList.length-1){//最大年最末月
						for(var i=1;i<=monthEnd;i++){
							monthList.push(i)
						}
					}else if(yearNum==0&&yearNum==this.yearList.length-1){//起始末尾是同一年
						for(var i=monthStart;i<=monthEnd;i++){
							monthList.push(i)
						}
					}else{
						for(var i=1;i<=12;i++){
							monthList.push(i)
						}
					}
					this.monthList=monthList;
					this.getDay(yearNum,0,0);
				},
				
				getDay(yearNum,monthNum,dayNum){
					var startDate=this.startDate?this.startDate:'1900/01/01',
					endDate=this.endDate?this.endDate:'2100/01/31';
					var dayStart=Number(startDate.split('/')[2]),
					dayEnd=Number(endDate.split('/')[2]),
					dayList=[];
					console.log('dayEnd',dayEnd)
					if(this.yearList.length!=1){
						if(this.monthList.length!=1){
							if(yearNum==0&&monthNum==0){
								for(var i=dayStart;i<=this.$DateTime.getMonthDayNum(this.yearList[yearNum],this.monthList[monthNum]);i++){
									dayList.push(i)
								}
							}else if(yearNum==(this.yearList.length-1)&&monthNum==(this.monthList.length-1)){
								for(var i=1;i<=dayEnd;i++){
									dayList.push(i)
								}
							}else{
								for(var i=1;i<=this.$DateTime.getMonthDayNum(this.yearList[yearNum],this.monthList[monthNum]);i++){
									dayList.push(i)
								}
							}
						}else{
								for(var i=dayStart;i<=this.$DateTime.getMonthDayNum(this.yearList[yearNum],this.monthList[monthNum]);i++){
									dayList.push(i)
								}
						}
					}else{
						if(this.monthList.length!=1){
							if(monthNum==0){
								for(var i=dayStart;i<=this.$DateTime.getMonthDayNum(this.yearList[yearNum],this.monthList[monthNum]);i++){
									dayList.push(i)
								}
							}else if(monthNum==(this.monthList.length-1)){
								for(var i=1;i<=dayEnd;i++){
									dayList.push(i)
								}
							}else{
								for(var i=1;i<=this.$DateTime.getMonthDayNum(this.yearList[yearNum],this.monthList[monthNum]);i++){
									dayList.push(i)
								}
							}
						}else{
							for(var i=dayStart;i<=dayEnd;i++){
								dayList.push(i)
							}
						}
						
					}
					
					this.dayList=dayList;
					console.log(dayList.length)
					if(yearNum!=this.timevalue[0]){
						this.timevalue=[yearNum,0,0];
					}
					if(monthNum!=this.timevalue[1]){
						this.timevalue=[yearNum,monthNum,0];
					}else{
						if(dayNum!=this.timevalue[2]){
							this.timevalue=[yearNum,monthNum,dayNum];
						}
					}
					
					
					
						console.log(this.timevalue)
				},
				
			
				bindChange(e) {
					console.log(e)
					if(e.detail.value[0]!=this.timevalue[0]){
						console.log(e.detail.value[0],this.timevalue[0],1)
						this.getMonth(e.detail.value[0]);
					}
					else{
						console.log(e.detail.value[1],this.timevalue[1],2)
						this.getDay(e.detail.value[0],e.detail.value[1],e.detail.value[2]);
					}
					
				},
				ok() {
					this.$emit('input',this.yearList[this.timevalue[0]]+'/'+this.monthList[this.timevalue[1]]+'/'+this.dayList[this.timevalue[2]])
					// this.$emit('input',this.timeList[this.oneId].hours+':'+this.timeList[this.oneId].minutesList[this.secondId])
					this.$emit('update:visible', false);
					this.$emit('ok');	
				},
				cancel() {
					this.$emit('cancel');
					this.$emit('update:visible', false)
				}
			}
		}
</script>

<style scoped lang="scss">
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		height: 100vh;
		background: rgba($color: #000000, $alpha: 0.3);
	}
	
	.picker-view {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 476rpx;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		overflow: hidden;
		background-color: white;
		z-index: 1000;
	
		.cancel {
			font-size: 38rpx;
			color: #ccc;
		}
	
		.ok {
			font-size: 38rpx;
			color: #F0AD4E;
		}
	
		.picker-view-content {
			height: 350rpx;
		}
	
		.disabled {
			background: #eeeeee;
			color: white;
		}
	
		.item {
			text-align: center;
			font-size: 32rpx;
			line-height: 64rpx;
		}
	}
</style>