mrr.sj.front/components/select-active-time/select-active-time2.vue

<template>
	<view>
		<!-- <view class="selectTime">
			<view class="select-title">开始日期</view>
			<view class="select-title">结束日期</view>
		</view> -->
		<view class="selectTime">
			<view class="selectTime-time" :class="{'selectTime-time-y': startTime}" @click="openPicker(startTime, 0)">
				<view class="selectTime-time-left">
				{{ startTime || '开始时间' }}
				<image src="/static/images/recruit/close.png" v-if="startTime" class="clearing" @tap.stop="clear(0)"></image>
				</view>
				<view class="selectTime-time-right">
					<image src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/fd0058af-7e38-4442-a7d3-6a65768ce0da" mode="aspectFill"></image>
				</view>
			</view>
			<view class="selectTime-time" :class="{'selectTime-time-y': endTime}" @click="openPicker(endTime, 1)">
				
				<view class="selectTime-time-left">
				{{ endTime || '结束时间' }}
				<image src="/static/images/recruit/close.png" v-if="endTime" class="clearing" @tap.stop="clear(1)"></image>
				</view>
				<view class="selectTime-time-right">
					<image src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/fd0058af-7e38-4442-a7d3-6a65768ce0da" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<timeDatePicker ref="timePopup" @confirmTime="confirmTime" v-model="timeValue" :timeIndex="timeIndex"
			:timeList="value" :type="type" :endDistanceYear="endDistanceYear"></timeDatePicker>
	</view>
	
</template>

<script>
	import timeDatePicker from 'components/time-picker/time-date-picker.vue';
	export default {
		data() {
			return {
				startTime: null,
				endTime: null, // 修复拼写错误：endTiem → endTime
				timeValue: null,
				timeIndex: 0,
			};
		},
		components: {
			timeDatePicker,
		},
		props: {
			value: {
				type: Array,
				default: () => [] // 确保默认值是数组
			},
			disabled: {
				type: Boolean,
				default: false,
			},
			type: {
				type: String,
				default: 'daterange', // 身份证有效期默认用日期范围
			},
			idCardtype: {
				type: Number,
				default: 2,
			},
			endDistanceYear:{
				type: Number,
				default: 0,//结束时间，与当前时间点相距的时间
			},
		},
		watch: {
			// 监听父组件传入的value变化，同步到子组件
			value: {
				immediate: true, // 初始化时立即执行
				handler(newVal) {
					if (Array.isArray(newVal) && newVal.length === 2) {
						this.startTime = newVal[0];
						this.endTime = newVal[1];
					}
				}
			},
			idCardtype:{
				handler(newVal) {
					if (newVal ==1) {
						// 确保数组格式正确
						this.endTime = ""
						const timeArry = [this.startTime || '', ''];
						// 触发父组件更新
						this.$emit("input", timeArry);
						// 额外触发change事件，方便父组件处理
						this.$emit("change", timeArry);
					}
				}
			}
		},
		methods: {
			openPicker(time, index) {
				if (this.disabled) return;
				if(!this.idCardtype) return;
				if(index==1 && this.idCardtype==1) return;
				this.timeIndex = index;
				this.timeValue = time;
				this.$refs.timePopup.openTimePopup();
			},
			confirmTime(e) {
				
				// 更新对应的值
				if (this.timeIndex === 0) {
					this.startTime = e;
				} else {
					this.endTime = e;
				}
				// 确保数组格式正确
				const timeArry = [this.startTime || '', this.endTime || ''];
				// 触发父组件更新
				this.$emit("input", timeArry);
				// 额外触发change事件，方便父组件处理
				this.$emit("change", timeArry);
			},
			clear(index){
				// 更新对应的值
				if (index === 0) {
					this.startTime = "";
				} else {
					this.endTime = "e";
				}
				// 确保数组格式正确
				const timeArry = [this.startTime || '', this.endTime || ''];
				// 触发父组件更新
				this.$emit("input", timeArry);
				// 额外触发change事件，方便父组件处理
				this.$emit("change", timeArry);
			}
		}
	};
</script>

<style scoped lang="less">
	.selectTime {
		flex: 1;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		column-gap: 26rpx;

		.selectTime-time {
			width: 328rpx;
			height: 56rpx;
			border-radius: 10rpx;
			border: 2rpx solid #E9E9E9;
			display: flex;
			transition: all 0.3s; // 增加过渡效果
			background: #F8F8F8 ;
			.selectTime-time-left{
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				line-height: 40rpx;
				justify-content: center;
				font-style: normal;
				flex: 1;
				display: flex;
				align-items: center;
				padding-left: 19rpx;
				position: relative;
				.clearing{
					width: 20rpx;
					height: 20rpx;
					position: absolute;
					right: 8rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
			.selectTime-time-right{
				width: 59rpx;
				height: 100%;
				border-left: 2rpx solid #E9E9E9;
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					width: 35rpx;
					height: 33rpx;
				}
			}
		}

		.selectTime-time-y {
			color: #333;
			border-color: #409EFF; // 选中时改变边框颜色
		}

		// 禁用状态样式
		&.disabled {
			.selectTime-time {
				background-color: #f5f5f5;
				cursor: not-allowed;
			}
		}
		
		.select-title{
			box-sizing: border-box;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
			width: 317rpx;
			padding-left: 14rpx;
			padding-bottom: 20rpx;
		}
	}
	
</style>