uni-niu-ui/pages/Sub/Pro/SelectTime/day.vue

<template>
	<view class="day component">
		<picker-view :value="active" :style="[{height:height}]" :indicator-style="`height: ${lineHeight};`"
			@change="bindChange" class="picker-view">
			<!-- 使用v-show会有问题 -->
			<picker-view-column v-if="typeList.includes('year')">
				<view class="item" :style="[{height:lineHeight}]" v-for="(item,index) in yearList" :key="index">
					{{item}}年
				</view>
			</picker-view-column>
			<picker-view-column v-if="typeList.includes('month')">
				<view class="item" :style="[{height:lineHeight}]" v-for="(item,index) in monthList" :key="index">
					{{item}}月
				</view>
			</picker-view-column>
			<picker-view-column v-if="typeList.includes('day')">
				<view class="item" :style="[{height:lineHeight}]" v-for="(item,index) in dayList" :key="index">
					{{item}}日
				</view>
			</picker-view-column>
			<picker-view-column v-if="typeList.includes('hour')">
				<view class="item" :style="[{height:lineHeight}]" v-for="(item,index) in hourList" :key="index">
					{{item}}时
				</view>
			</picker-view-column>
			<picker-view-column v-if="typeList.includes('minute')">
				<view class="item" :style="[{height:lineHeight}]" v-for="(item,index) in minuteList" :key="index">
					{{item}}分
				</view>
			</picker-view-column>
			<picker-view-column v-if="typeList.includes('second')">
				<view class="item" :style="[{height:lineHeight}]" v-for="(item,index) in secondList" :key="index">
					{{item}}秒
				</view>
			</picker-view-column>
		</picker-view>
	</view>
</template>

<script>
	import {
		buildYearData,
		buildMonthData,
		buildDayData,
		buildHourData,
		buildMinuteData,
		buildSecondData,
		bigerZero
	} from "./util.js"
	export default {
		props: {
			type: {
				type: String,
				default: "year,month,day,hour,minute,second"
			},
			filter: {
				type: Boolean,
				default: false
			},
			value: {
				type: Date,
				default: () => new Date()
			},
			height: {
				type: String,
				default: "600rpx"
			},
			lineHeight: {
				type: String,
				default: "60rpx"
			},
			year1: {
				type: Number | Array,
				default: new Date().getFullYear()
			},
			interval: {
				type: Array,
				default: () => [-3, 1]
			},
			current: {
				type: Boolean,
				default: true
			},
			rightnow: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				time: null,
				active: [0, 0, 0, 0, 0, 0],
				yearList: [],
				monthList: [],
				dayList: [],
				hourList: [],
				minuteList: [],
				secondList: [],
			}
		},
		created() {

		},
		watch: {
			value: {
				handler(val, oldVal) {
					this.setDefault(val)
				},
				deep: true,
				immediate: false,
			},
			typeList: {
				handler(val, oldVal) {
					this.$nextTick(() => {
						this.emitChange()
					})
				},
				deep: true,
				immediate: false,
			}
		},
		computed: {
			typeList() {
				return this.type.split(",")
			}
		},
		mounted() {
			this.setDefault(this.value)
			if (this.rightnow) {
				this.emitChange()
			}
		},
		methods: {
			setTime(time) {
				this.setDefault(time)
				this.$nextTick(() => {
					this.emitChange()
				})
			},
			setDefault(time) {
				this.time = time;
				if (typeof this.year1 == "number") {
					this.buildInternalYearData()
				} else if (Array.isArray(this.year1)) {
					this.yearList = this.year1
				}
				let array = this.buildActiveItem()
				this.buildInternalData(array)
				this.$nextTick(() => {
					this.active = array
				})
			},
			buildActiveItem() {
				let array = [0, 0, 0, 0, 0, 0];
				let curTime = this.time;
				array[0] = bigerZero(curTime.getFullYear() - this.yearList[0])
				array[1] = bigerZero(curTime.getMonth())
				array[2] = bigerZero(curTime.getDate() - 1)
				array[3] = bigerZero(curTime.getHours())
				array[4] = bigerZero(curTime.getMinutes())
				array[5] = bigerZero(curTime.getSeconds())
				return array
			},
			buildInternalYearData() {
				if (typeof this.year1 == "number") {
					this.yearList = buildYearData(this.year1, this.interval);
				} else if (Array.isArray(this.year1)) {
					this.yearList = this.year1
				}
			},
			buildInternalData(active) {
				this.monthList = buildMonthData(this.yearList[active[0]])
				this.dayList = buildDayData(this.yearList[active[0]], this.monthList[active[1]])
				this.hourList = buildHourData()
				this.minuteList = buildMinuteData()
				this.secondList = buildSecondData()
			},
			bindChange: function(e) {
				const val = e.detail.value
				this.active = val;
				this.buildInternalYearData()
				this.buildInternalData(this.active)
				this.emitChange()
			},
			emitChange() {
				let result = []
				let year = this.yearList[this.active[0] >= this.yearList.length ? this.yearList.length - 1 : this.active[
					0]]
				let month = this.monthList[this.active[1] >= this.monthList.length ? this.monthList.length - 1 : this
					.active[1]]
				let day = this.dayList[this.active[2] >= this.dayList.length ? this.dayList.length - 1 : this.active[2]]
				let hour = this.hourList[this.active[3] >= this.hourList.length ? this.hourList.length - 1 : this.active[
					3]]
				let minute = this.minuteList[this.active[4] >= this.minuteList.length ? this.minuteList.length - 1 : this
					.active[4]]
				let second = this.secondList[this.active[5] >= this.secondList.length ? this.secondList.length - 1 : this
					.active[5]]
				result = [year, month, day, hour, minute, second]
				let timeStr = result[0] + "/" + result[1] + "/" + result[2] + " " + result[3] + ":" + result[4] + ":" +
					result[5]
				let time = new Date(timeStr)
				this.$emit("change", time)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.day.component {
		.picker-view {
			background: #f5f5f5;
		}

		.item {
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;

		}
	}
</style>