106 lines
1.9 KiB
Vue
106 lines
1.9 KiB
Vue
<template>
|
|
<view class="date-filter">
|
|
|
|
<!-- 开始日期 -->
|
|
<view class="filter-item" @click="$refs.startPicker.open(startDate)">
|
|
<text class="label">开始日期</text>
|
|
<text class="value">{{ startDate || '请选择' }}</text>
|
|
</view>
|
|
|
|
<view class="divider"></view>
|
|
|
|
<!-- 结束日期 -->
|
|
<view class="filter-item" @click="$refs.endPicker.open(endDate)">
|
|
<text class="label">结束日期</text>
|
|
<text class="value">{{ endDate || '请选择' }}</text>
|
|
</view>
|
|
|
|
<!-- 开始日期选择器 -->
|
|
<DatePicker
|
|
v-model="startDate"
|
|
ref="startPicker"
|
|
@confirm="selectStart"
|
|
/>
|
|
|
|
<!-- 结束日期选择器 -->
|
|
<DatePicker
|
|
v-model="endDate"
|
|
ref="endPicker"
|
|
@confirm="selectEnd"
|
|
/>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import DatePicker from './DatePicker.vue';
|
|
|
|
export default {
|
|
name: 'DateFilter',
|
|
components: { DatePicker },
|
|
|
|
props: {
|
|
start: { type: String, default: '' },
|
|
end: { type: String, default: '' }
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
startDate: this.start,
|
|
endDate: this.end
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
/** 选择开始日期 */
|
|
selectStart(e) {
|
|
this.startDate = e;
|
|
this.$emit('update:start', e);
|
|
this.$emit('change', { start: this.startDate, end: this.endDate });
|
|
},
|
|
|
|
/** 选择结束日期 */
|
|
selectEnd(e) {
|
|
this.endDate = e;
|
|
this.$emit('update:end', e);
|
|
this.$emit('change', { start: this.startDate, end: this.endDate });
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.date-filter {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20rpx;
|
|
background: #ffffff;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.filter-item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.label {
|
|
font-size: 24rpx;
|
|
color: #888;
|
|
}
|
|
|
|
.value {
|
|
font-size: 28rpx;
|
|
padding-left: 30rpx;
|
|
color: #333;
|
|
margin-top: 6rpx;
|
|
}
|
|
|
|
.divider {
|
|
width: 2rpx;
|
|
height: 40rpx;
|
|
background: #e5e5e5;
|
|
margin: 0 20rpx;
|
|
}
|
|
</style>
|