BiKing/components/times/times.vue

<template>
	<view class="picker-box">
		<picker-view class="picker-view" :value="value" @change="bindChange">
			<picker-view-column>
				<view class="year-item picker-item" v-for="(item,index) in years" :key="`years_${index}`">{{item}}
				</view>
			</picker-view-column>
			<picker-view-column>
				<view class="month-item picker-item" v-for="(item,index) in months" :key="`months_${index}`">{{item}}
				</view>
			</picker-view-column>
			<picker-view-column>
				<view class="day-item picker-item" v-for="(item,index) in days" :key="`days_${index}`">{{item}}</view>
			</picker-view-column>
		</picker-view>
	</view>
</template>

<script>
	import {
		dayNums
	} from "@/utils/tool.js"
	export default {
		props: {
			time: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				valueTime: [],
				value: [0 , 0 , 0],
				years: [2022, 2023],
				months: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
				days: []
			};
		},
		watch: {
			time: {
				handler(newTime, oldTime) {
					if (newTime) {
						this.splitTime(newTime)
					}
				},
				immediate: true,
				deep: true
			}
		},

		methods: {

			// 拆分时间
			splitTime(tims) {
				this.valueTime = tims.split('-')
				this.matchingYears()
			},

			// 匹配年
			matchingYears() {
				try {
					this.years.forEach((el, index) => {
						if (el == this.valueTime[0]) {
							// this.value[0] = index;
							this.$set(this.value , 0 , index)
							throw new Error()
						}
					})
				} catch {}
				this.matchingMonths()
			},
			// 匹配月
			matchingMonths() {
				try {
					this.months.forEach((el, index) => {
						if (el == this.valueTime[1]) {
							this.$set(this.value , 1 , index)
							throw new Error()
						}
					})
				} catch {};
				this.matchingDays()
			},
			// 匹配日
			matchingDays() {
				// 根据当前时间获取当前月份天数
				this.days = dayNums(this.valueTime)
				try {
					this.days.forEach((el, index) => {
						if (el == this.valueTime[2]) {
							this.$set(this.value , 2 , index)
							throw new Error()
						}
					})
				} catch {};
			},

			bindChange(e) {
				const val = e.detail.value;
				if (val[0] !== this.value[0]) {
					// 滑动年
					this.value = [val[0], 0, 0]
				} else if (val[1] !== this.value[1]) {
					// 滑动月
					this.value = [val[0], val[1], 0]
				} else if (val[2] !== this.value[2]) {
					// 滑动日
					this.value = val
				}

				
				this.modificationTime()
			},
			// 根据时间索引，修改时间
			modificationTime() {
				let year = this.years[this.value[0]]
				let month = this.months[this.value[1]]
				let day = this.days[this.value[2]]
				this.valueTime = [year, month, day]
				this.$emit("update:time", `${year}-${month}-${day}`);
			}

			// getDays() {
			// 	this.days = dayNums(this.valueTime)
			// },
		}
	}
</script>

<style lang="scss" scoped>
	.picker-box {
		width: 100%;
		height: 100%;
	}

	.picker-view {
		width: 100%;
		height: 100%;

		.year-item {
			padding-left: 80rpx;
		}

		.month-item {
			text-align: center;
		}

		.day-item {
			text-align: right;
			padding-right: 80rpx;
		}

		::v-deep .uni-picker-view-indicator {
			height: 56rpx;
		}

		.picker-item {
			font-size: 28rpx;
			font-weight: 700;
			height: 56rpx;
			line-height: 56rpx;
			letter-spacing: 1.4px;
		}
	}
</style>