5 changed files with 246 additions and 154 deletions
@ -0,0 +1,171 @@ |
|||
<template> |
|||
<div class="search-filter-bar"> |
|||
<van-search v-model="searchText" show-action :placeholder="placeholder" clearable clear-trigger="always" |
|||
@clear="onClear" @search="onSearch"> |
|||
<template #action> |
|||
<div @click="onSearch">搜索</div> |
|||
</template> |
|||
</van-search> |
|||
|
|||
<div class="search-button-list" v-if="showDateFilter"> |
|||
<van-button plain hairline :class="dateType === null ? 'search-btn active' : 'search-btn'" |
|||
@click="searchDateType(null)" round type="primary" size="mini">全部</van-button> |
|||
<van-button plain hairline :class="dateType === 1 ? 'search-btn active' : 'search-btn'" |
|||
@click="searchDateType(1)" round type="primary" size="mini">本月</van-button> |
|||
<van-button plain hairline :class="dateType === 2 ? 'search-btn active' : 'search-btn'" |
|||
@click="searchDateType(2)" round type="primary" size="mini">本季</van-button> |
|||
<van-button plain hairline :class="dateType === 3 ? 'search-btn active' : 'search-btn'" |
|||
@click="searchDateType(3)" round type="primary" size="mini">本年</van-button> |
|||
<van-button plain hairline :class="dateType === 9 ? 'search-btn active' : 'search-btn'" |
|||
@click="openDatePicker" round type="primary" size="mini">筛选</van-button> |
|||
</div> |
|||
|
|||
<div class="search-date-display" v-if="showDateFilter && dateShow"> |
|||
<span class="date-label" @click="openDatePicker">{{ dateSearchDisplay }}</span> |
|||
</div> |
|||
|
|||
<van-popup v-model:show="showDatePicker" position="bottom" v-if="showDateFilter"> |
|||
<van-date-picker title="选择月度" v-model="currentDate" :min-date="minDate" :max-date="maxDate" |
|||
:columns-type="['year', 'month']" @confirm="onDateConfirm" @cancel="showDatePicker = false" /> |
|||
</van-popup> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup name="SearchFilterBar"> |
|||
defineProps({ |
|||
placeholder: { |
|||
type: String, |
|||
default: '请输入关键字查询' |
|||
}, |
|||
minDate: { |
|||
type: Date, |
|||
default: () => new Date(2020, 0, 1) |
|||
}, |
|||
maxDate: { |
|||
type: Date, |
|||
default: () => new Date(2030, 11, 31) |
|||
}, |
|||
showDateFilter: { |
|||
type: Boolean, |
|||
default: true |
|||
} |
|||
}); |
|||
|
|||
const emit = defineEmits(['search', 'dateTypeChange', 'dateConfirm']); |
|||
|
|||
const searchText = ref(''); |
|||
const dateType = ref(null); |
|||
const dateSearch = ref(null); |
|||
const dateSearchDisplay = ref(''); |
|||
const dateShow = ref(false); |
|||
const showDatePicker = ref(false); |
|||
const now = new Date(); |
|||
const currentDate = ref([String(now.getFullYear()), String(now.getMonth() + 1).padStart(2, '0')]); |
|||
|
|||
const onSearch = () => { |
|||
emit('search', { |
|||
searchText: searchText.value, |
|||
dateType: dateType.value, |
|||
dateSearch: dateSearch.value |
|||
}); |
|||
}; |
|||
|
|||
const onClear = () => { |
|||
searchText.value = ''; |
|||
onSearch(); |
|||
}; |
|||
|
|||
const searchDateType = (val) => { |
|||
dateType.value = val; |
|||
dateSearch.value = null; |
|||
dateShow.value = false; |
|||
emit('dateTypeChange', val); |
|||
onSearch(); |
|||
}; |
|||
|
|||
const openDatePicker = () => { |
|||
dateType.value = 9; |
|||
showDatePicker.value = true; |
|||
}; |
|||
|
|||
const onDateConfirm = (value) => { |
|||
const year = value.selectedValues[0]; |
|||
const month = value.selectedValues[1]; |
|||
dateSearchDisplay.value = year + '/' + month; |
|||
dateSearch.value = year + '-' + month; |
|||
dateType.value = 9; |
|||
dateShow.value = true; |
|||
showDatePicker.value = false; |
|||
emit('dateConfirm', { |
|||
dateSearch: dateSearch.value, |
|||
dateSearchDisplay: dateSearchDisplay.value, |
|||
dateType: dateType.value |
|||
}); |
|||
onSearch(); |
|||
}; |
|||
|
|||
const resetDateType = (val) => { |
|||
dateType.value = val; |
|||
}; |
|||
|
|||
defineExpose({ |
|||
searchText, |
|||
dateType, |
|||
dateSearch, |
|||
onSearch, |
|||
resetDateType |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.search-filter-bar { |
|||
.search-button-list { |
|||
display: flex; |
|||
flex-direction: row; |
|||
padding: 0.2rem 0.27rem 0; |
|||
gap: 0.15rem; |
|||
margin-bottom: 8px; |
|||
.search-btn { |
|||
flex: 1; |
|||
height: 0.7rem; |
|||
background: #ebebeb; |
|||
border-color: #ebebeb; |
|||
color: #999; |
|||
font-size: 0.3rem; |
|||
} |
|||
|
|||
.search-btn.active { |
|||
background-color: #d9e6fd; |
|||
border-color: #75a5fb; |
|||
color: #1367fe; |
|||
} |
|||
} |
|||
|
|||
.search-date-display { |
|||
padding: 0.15rem 0.27rem 0; |
|||
|
|||
.date-label { |
|||
color: #c1bfbf; |
|||
font-size: 0.4rem; |
|||
} |
|||
} |
|||
} |
|||
|
|||
:deep(.van-search__content) { |
|||
height: 0.9rem; |
|||
border: 1px solid #ececec; |
|||
border-radius: 0.15rem 0 0 0.15rem; |
|||
} |
|||
|
|||
:deep(.van-search__action) { |
|||
margin: 0 3% 0 0; |
|||
width: 10%; |
|||
height: 0.9rem; |
|||
background: #1367fe; |
|||
border: 0.01rem solid #1367fe; |
|||
border-radius: 0 0.15rem 0.15rem 0; |
|||
color: #fff; |
|||
text-align: center; |
|||
line-height: 0.9rem; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue