circulation_ancientCoins_new/components/customeDatePicker.vue

<template>
	<view class="datePicker">
		<uni-popup ref="updateTreatment" :safe-area="false">
			<view class="popup-container">
				<view class="header">
					<view class="title PfScMedium">出生年份</view>
				</view>
				<view class="desc">请选择阳历出生年份</view>

				<view class="content-container">

					<view class="datepicker-wrapper">
						<picker-view mask-class="datepicker-mask-class" :indicatorStyle="indicatorStyle" indicator-class="datepicker-custom-indicator" :value="dateValue" @change="onDateChange" @pickstart="pickstart" @pickend="pickend" class="datepicker-picker-view" v-if="visible">
							<picker-view-column v-show="showPickerColumn(0)">
								<view :class="getItemClass(0, index)+'item ft24'" v-for="(item, index) in years" :key="index">{{item}}</view>
							</picker-view-column>

							<picker-view-column v-show="showPickerColumn(1)">
								<view :class="getItemClass(1, index)+'item ft24'" v-for="(item, index) in months" :key="index">{{item.toString().length==1?('0'+item):item}}</view>
							</picker-view-column>

							<picker-view-column v-show="showPickerColumn(2)">
								<view :class="getItemClass(2, index)+'item ft24'" v-for="(item, index) in days" :key="index">{{item.toString().length==1?('0'+item):item}}</view>
							</picker-view-column>
						</picker-view>
					</view>


					<view class="close-up-btn" @click="closePop">
						<img :src="((cssUrl+'pop_close_ic.svg').replace('/user/', '/'))" alt="" />
					</view>

				</view>

				<view class="confirm-button-wrapper btPadding">
					<view class="confirm-button PfScMedium" @click="onUpdateTreatmentConfirmButtonClick">
						确认
					</view>
				</view>

			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name:'datePicker',
		data() {
			const date = new Date()
			const years = []
			var year = date.getFullYear()
			const months = []
			var month = date.getMonth() + 1
			const days = []
			var day = date.getDate()
			for (let i = date.getFullYear()-100; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}

			month = 1;
			day = 1;
			year = year - 10
			var datestr = year+'/'+(month.toString().length==1?('0'+month):month)+'/'+(day.toString().length==1?('0'+day):day)

			var dateValue = [years.indexOf(year), months.indexOf(month), days.indexOf(day)];
			return {
				title: "datepicker-picker-view",
				years,
				year,
				months,
				month,
				days,
				day,
				cssUrl:this.cssUrl,
				dateValue,
				date:datestr,
				treatmentDateString:'',
				indicatorStyle: 'height: '+uni.upx2px(68)+'px;',
				visible: true,
				timetimer:null,
				dateChangeFlag:true
			}
		},
		props: {
			defaultDate:{
				type:String,
				default:''
			},
			format:{
				type:String,
				default:'yyyy'
			}
		},
		computed: {
		},
		methods: {
			showPickerColumn(columnIndex) {
				if (columnIndex === 0 && this.format.indexOf('yyyy') !== -1) return true
				if (columnIndex === 1 && this.format.indexOf('mm')!== -1) return true
				if (columnIndex === 2 && this.format.indexOf('dd')!== -1) return true
				return false
			},
			getItemClass(columnIndex, index) {
				var curindex = this.dateValue[columnIndex]
				if(index == curindex) return 'selected PfScMedium ';
				var abs = Math.abs(index-curindex)
				if(abs <= 3) return 'style'+abs+' ';
				return '';
			},
			open(direction){
				this.visible = false;
				this.$nextTick(() => {
					this.visible = true;
					this.$refs.updateTreatment.open(direction);
				});
			},
			pickstart(e) {
				this.dateChangeFlag = false
			},
			pickend(e) {
				this.dateChangeFlag = true
			},
			onDateChange(e) {
				var datainfo = e.detail.value
				var year = this.years[datainfo[0]]
				var month = this.months[datainfo[1]]
				var day = this.days[datainfo[2]]
				this.dateValue = [datainfo[0], datainfo[1], datainfo[2]];
				this.date = year+'/'+(month.toString().length==1?('0'+month):month)+'/'+(day.toString().length==1?('0'+day):day)
			},
			closePop() {
				this.$refs.updateTreatment.close();
				this.visible = false;
			},
			onUpdateTreatmentConfirmButtonClick() {
				if(!this.dateChangeFlag) return

				this.treatmentDateString = this.date;
				this.$emit('getDateString', this.treatmentDateString);
				this.$refs.updateTreatment.close();
				this.visible = false;
			},
		}
	}
</script>

<style scoped lang="scss">
	.datePicker{
		.popup-container {
			position: relative;
		  max-height: calc(100vh - 50rpx);
		  overflow-y: scroll;
		  background: #ffffff;
		  border-radius: 40rpx 40rpx 0px 0px;
		  padding: 42rpx 32rpx 0;

		  .header {
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    position: relative;

		    .title {
		      font-size: 36rpx;
		      color: #000000;
					height: 50px;
					line-height: 50px;
		      display: flex;
		      align-items: center;
		      justify-content: center;
		    }

		    .close-icon {
		      position: absolute;
		      z-index: 1;
		      top: 50%;
		      transform: translateY(-50%);
		      right: 0;
		      width: 40rpx;
		      height: 40rpx;
		    }
		  }
			.desc{
				font-size: 28rpx;
				font-weight: normal;
				line-height: 38rpx;
				height: 38rpx;
				color: #666666;
				text-align: center;
				margin-top: 12rpx;
			}
			.content-container{
				width: 100%;
				padding: 0 25rpx;
				box-sizing: border-box;
				margin-bottom: 42rpx;
				background: #F7F7F7;

				.datepicker-wrapper{
					width: calc(100% - 80rpx);
					margin: 0 auto;
				}
				.close-up-btn{
					position: absolute;
					right: 44rpx;
					top: 44rpx;
					z-index: 9;
					width: 40rpx;
					height: 40rpx;
					img{
						width: 40rpx;
						height: 40rpx;
					}
				}
				.item{
					line-height: 68rpx;
					height: 68rpx;
					color: #E5E5E5;
					&.selected {
						font-size: 57rpx !important;
						color: #000000 !important;
					}
					&.style1 {
						font-size: 26rpx !important;

						color: #999999 !important;
					}
					&.style2 {
						color: #BEBEBE !important;
						font-size: 24rpx !important;
					}
					&.style3 {
						color: #E5E5E5 !important;
						font-size: 24rpx !important;
					}
				}
			}

		  .datepicker-picker-view {
		    margin-top: 46rpx;
				width: 100%;
				height: 470rpx;
				background: #F7F7F7;
		  }

		  .item {
		    line-height: 100rpx;
		    text-align: center;
		  }

			.confirm-button-wrapper{
				box-shadow: 0rpx -2rpx 6rpx 0rpx rgba(181,181,181,0.13);
				height: 124rpx;
				width: 750rpx;
				margin-left: -32rpx;
				background: #FFFFFF;
				overflow: hidden;
				position: relative;
				z-index: 888;
				.confirm-button {
				  margin: 16rpx 54rpx;
				  height: 92rpx;
				  background: #39d067;
				  border-radius: 16rpx;
				  font-size: 32rpx;
				  color: #ffffff;
				  display: flex;
				  align-items: center;
				  justify-content: center;
				}
			}
		}
	}

</style>
<style>
>>> .datepicker-mask-class{
	background-image: none;
}
.datepicker-custom-indicatorr::before{
		border-top: 3rpx solid #D7D7D7 !important;
}
.datepicker-custom-indicatorr::after{
		border-bottom: 3rpx solid #D7D7D7 !important;
}
</style>