examTeamApp/components/pyh-rdtpicker.vue

<template>
	<view class="rpickerBox" v-if="show">
		<view class="pickerMask" @click="maskClick">
			<view class="r-dtpicker r-dtpicker-show" @click.stop>
				<view class="rdtBtn">
					<view @click="pickerCancel">取消</view>
					<view>选择日期</view>
					<view class="bluecolor" @click="pickerConfirm">确定</view>
				</view>
				<picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="startValue"
					@change="startChangeMul" :style="{'width':type==2?'calc(50% - 1px)':'100%'}">
					<block>
						<picker-view-column>
							<view class="picker-item" v-for="(item,index) in startyearArr" :key="index">{{item}}年</view>
						</picker-view-column>
						<picker-view-column v-if="fields!='year'">
							<view class="picker-item" v-for="(item,index) in startmonthArr" :key="index">{{item}}月
							</view>
						</picker-view-column>
						<picker-view-column v-if="fields=='day'">
							<view class="picker-item" v-for="(item,index) in startdayArr" :key="index">{{item}}日</view>
						</picker-view-column>
					</block>
				</picker-view>
				<picker-view indicator-style="height: 40px;" class="mpvue-picker-view mpvue-picker-view2"
					:value="endValue" @change="endChangeMul" v-if="type==2">
					<block>
						<picker-view-column>
							<view class="picker-item" v-for="(item,index) in endyearArr" :key="index">{{item}}年</view>
						</picker-view-column>
						<picker-view-column>
							<view class="picker-item" v-for="(item,index) in endmonthArr" :key="index">{{item}}月</view>
						</picker-view-column>
						<picker-view-column>
							<view class="picker-item" v-for="(item,index) in enddayArr" :key="index">{{item}}日</view>
						</picker-view-column>
					</block>
				</picker-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		nextTick
	} from "vue";
	export default {
		name: 'range-dtpicker',
		props: {
			fields: {
				type: String,
				default: 'day'
			},
			value: {
				type: Array,
				default () {
					return [0, 0]
				}
			},
			//是否显示
			show: {
				type: Boolean,
				default: false
			},
			// 单双排日历显示
			type: {
				type: Number,
				default: 1 //1单2双
			},
			//服务日期/成交日期
			name: {
				type: String,
				default: ""
			},
			end: {
				type: String,
				default: ""
			}

		},
		created() {
			this.init()
		},
		data() {
			return {
				startValue: this.fields == 'year' ? [0] : this.fields == 'month' ? [0, 0] : [0, 0, 0], //开始日期数组下标
				endValue: this.fields == 'year' ? [0] : this.fields == 'month' ? [0, 0] : [0, 0, 0], //结束日期数组下标
				startDate: '', //开始日期字符
				endDate: "", //结束日期字符
				start: "1873-01-01", //日历起始日期
			};
		},
		watch: {
			value(value) {
				this.value = value;
				this.init()
			},
		},
		computed: {
			getStart() {
				return this.end ? this.end : this.$tools.getDate('start')
			},
			startyearArr() {
				let that = this
				return that.yearArr(parseInt(that.start.slice(0, 4)), parseInt(that.getStart.slice(0, 4)))
			},
			endyearArr() {
				let that = this
				return that.type == 2 ? that.yearArr(parseInt(that.start.slice(0, 4)), parseInt(that.getStart.slice(0,
					4))) : []
			},

			startmonthArr() {
				let that = this
				return that.monthArr(that.getStart.slice(0, 4) == that.startDate.slice(0, 4) ? that.getStart.slice(5, 7) :
					12)
			},
			endmonthArr() {
				let that = this
				return that.type == 2 ? that.monthArr(that.getStart.slice(0, 4) == that.endDate.slice(0, 4) ? that.getStart
					.slice(5, 7) : 12) : []
			},

			startdayArr() {
				let that = this
				let isstart = (that.getStart.slice(0, 4) == that.startDate.slice(0, 4) && that.startDate.slice(5, 7) ==
					that.getStart.slice(5, 7)) ? true : false
				return that.dayArr(that.value[0].slice(0, 4), that.startDate.slice(5, 7), isstart, that.getStart.slice(8,
					10))
			},
			enddayArr() {
				let that = this
				let isend = (that.type == 2 && that.getStart.slice(0, 4) == that.endDate.slice(0, 4) && that.endDate.slice(
						5, 7) ==
					that.getStart.slice(5, 7)) ? true : false

				return that.type == 2 ? that.dayArr(that.value[1].slice(0, 4), that.endDate.slice(5, 7), isend, that
					.getStart.slice(8, 10)) : []
			}
		},
		methods: {
			// 初始化
			init() {
				var that = this,
					endVal = "",
					startVal = "";
				that.startDate = that.value[0];
				that.endDate = that.value[1];
				startVal = this.getIndex(this.value[0], 'start');
				endVal = that.type == 2 ? this.getIndex(this.value[1], 'end') : [];
				// console.log("init", this.value[0], this.value[1], startVal, endVal)
				if (startVal) setTimeout(function() {
					that.startValue = startVal
					that.endValue = endVal
				}, 20)
			},
			// 开始日期滑动
			startChangeMul(e) {
				let that = this
				const val = e.detail.value
				let year = that.startyearArr[val[0]]
				let month = that.startmonthArr[val[1]]
				let day = that.startdayArr[val[2]]
				that.startValue = e.detail.value
				that.startDate = this.fields == 'year' ? year : this.fields == 'month' ? year + '/' + month : year + '/' +
					month + '/' + day
				// console.log("开始", e.detail.value, that.startDate)
			},
			// 结束日期滑动
			endChangeMul(e) {
				let that = this
				const val = e.detail.value
				let year = that.endyearArr[val[0]]
				let month = that.endmonthArr[val[1]]
				let day = that.enddayArr[val[2]]
				that.endtValue = e.detail.value
				that.endDate = this.fields == 'year' ? year : this.fields == 'month' ? year + '/' + month : year + '/' +
					month + '/' + day
				// console.log("结束", e.detail.value, that.endDate)
			},
			// 确定选择
			pickerConfirm() {
				if (this.endDate < this.startDate) {
					uni.showToast({
						title: "结束时间不得小于开始时间",
						icon: "none",
						mask: true
					})
					return;
				}
				this.$emit("change", [this.startDate, this.endDate], this.name);
				this.$emit("showchange", false);
			},
			// 取消设置
			pickerCancel() {
				this.$emit("cancel");
				this.$emit("showchange", false);
			},
			// 点击其他位置关闭弹框
			maskClick() {
				this.$emit("showchange", false);
			},
			// 年
			yearArr(start, end) {
				var arr = []
				for (var i = 0; i <= end - start; i++) {
					arr.push(start + i)
				}
				return arr;
			},
			// 月
			monthArr(num) {
				var arr = [];
				for (var i = 1; i <= num; i++) {
					var v = i;
					if (v < 10) v = "0" + v;
					arr.push(v.toString())
				}
				return arr;
			},
			// 日
			dayArr(year, month, isNew, day) {
				var arr = [],
					start = 1,
					end = 30,
					array = [],
					flag = year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)
				if (isNew) {
					end = day
				} else if (month == "01" || month == "03" || month == "05" || month == "07" || month == "08" ||
					month ==
					"10" || month == "12") {
					end = 31
				} else if (month == "04" || month == "06" || month == "09" || month == "11") {
					end = 30
				} else {
					if (flag) {
						end = 29

					} else {
						end = 28
					}
				}
				for (var i = start; i <= end; i++) {
					array.push(i < 10 ? '0' + i : '' + i);
				}
				return array;
			},
			// 获取年月日的下标
			getIndex(value, type) {
				// console.log("index", value)
				var year = value.slice(0, 4),
					month = value.slice(5, 7),
					day = value.slice(8, 10),
					y = 0,
					m = 0,
					d = 0;

				let yearArr = type == 'start' ? this.startyearArr : this.endyearArr,
					monthArr = type == 'start' ? this.startmonthArr : this.endmonthArr,
					dayArr = type == 'start' ? this.startdayArr : this.enddayArr;
				for (var i in yearArr) {
					if (year == yearArr[i]) {
						y = i;
						break;
					}
				}
				for (var i in monthArr) {
					if (month == monthArr[i]) {
						m = i;
						break;
					}
				}
				for (var i in dayArr) {
					if (day == dayArr[i]) {
						d = i;
						break;
					}
				}
				var value = [];
				switch (this.fields) {
					case 'year':
						value = [Number(y)]
						break;
					case 'month':
						value = [Number(y), Number(m)]
						break;
					default:
						value = [Number(y), Number(m), Number(d)]
						break;
				}
				return value;
			},
		}
	}
</script>

<style>
	.pickerMask {
		position: fixed;
		z-index: 999998;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.4);
	}

	.r-dtpicker {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		transition: all 0.3s ease;
		transform: translateY(100%);
		z-index: 999998;
		background: #eee;
	}

	.r-dtpicker-show {
		transform: translateY(0);
	}

	.rdtBtn {
		display: flex;
		padding: 9px 15px;
		background-color: #fff;
		position: relative;
		text-align: center;
		font-size: 17px;
	}

	.rdtBtn:after {
		content: ' ';
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		height: 1px;
		border-bottom: 1px solid #e5e5e5;
		color: #e5e5e5;
		transform-origin: 0 100%;
		transform: scaleY(0.5);
	}

	.rdtBtn view {
		display: block;
		flex: 1;
		color: #1aad19;
	}

	.rdtBtn view:first-child {
		text-align: left;
		color: #888;
	}

	.rdtBtn view:last-child {
		text-align: right;
	}

	.picker-item {
		text-align: center;
		line-height: 40px;
		font-size: 16px;
	}

	.mpvue-picker-view {
		position: relative;
		bottom: 0;
		left: 0;
		width: calc(50% - 1px);
		height: 238px;
		float: left;
		background-color: rgba(255, 255, 255, 1);
	}

	.mpvue-picker-view2 {
		left: 1px;
		width: 50%;
		right: 0;
	}

	.rangeBox {
		background: #fff;
		display: flex;
		justify-content: center;
		padding: 15px 0;
		font-size: 16px;
		align-items: center;
	}

	.rangeBox input {
		width: 180upx;
		margin: 0 10px;
		text-align: center;
		align-items: center;
		display: flex;
		min-height: auto;
		border-bottom: 1px solid #000;
	}
</style>