119 lines
2.7 KiB
Vue
119 lines
2.7 KiB
Vue
|
<template>
|
|||
|
|
<view class="selectTime">
|
|||
|
|
<view class="selectTime-time" :class="{'selectTime-time-y': startTime}" @click="openPicker(startTime, 0)">
|
|||
|
|
{{ startTime || '开始时间' }}
|
|||
|
|
</view>
|
|||
|
|
<view class="selectTime-time" :class="{'selectTime-time-y': endTime}" @click="openPicker(endTime, 1)">
|
|||
|
|
{{ endTime || '结束时间' }}
|
|||
|
|
</view>
|
|||
|
|
<timeDatePicker ref="timePopup" @confirmTime="confirmTime" v-model="timeValue" :timeIndex="timeIndex"
|
|||
|
|
:timeList="value" :type="type"></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: 'datetimerange', // 身份证有效期默认用日期范围
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
// 监听父组件传入的value变化，同步到子组件
|
|||
|
|
value: {
|
|||
|
|
immediate: true, // 初始化时立即执行
|
|||
|
|
handler(newVal) {
|
|||
|
|
if (Array.isArray(newVal) && newVal.length === 2) {
|
|||
|
|
this.startTime = newVal[0];
|
|||
|
|
this.endTime = newVal[1];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
openPicker(time, index) {
|
|||
|
|
if (this.disabled) 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);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="less">
|
|||
|
|
.selectTime {
|
|||
|
|
width: 100%;
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: nowrap;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
column-gap: 22rpx;
|
|||
|
|
|
|||
|
|
.selectTime-time {
|
|||
|
|
width: 100%;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #CACCCC;
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
height: 72rpx;
|
|||
|
|
border: 1rpx solid #E5E5E5;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding-left: 20rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
transition: all 0.3s; // 增加过渡效果
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.selectTime-time-y {
|
|||
|
|
color: #333;
|
|||
|
|
border-color: #409EFF; // 选中时改变边框颜色
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 禁用状态样式
|
|||
|
|
&.disabled {
|
|||
|
|
.selectTime-time {
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
cursor: not-allowed;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|