<template>
|
<QueryMenuView @close="handleReset" @confirm="emit('close')" cancelText="重置">
|
<div class="home-query-menu-view">
|
<QueryMenuItem title="性别">
|
<ProRadio v-model="query.gender" :value-enum="GenderText" show-all-btn></ProRadio>
|
</QueryMenuItem>
|
<QueryMenuItem title="身份">
|
<ProRadio v-model="query.gender" :value-enum="IdentityList" show-all-btn></ProRadio>
|
</QueryMenuItem>
|
<QueryMenuItem>
|
<template #title>
|
<div class="rang-title-wrapper">
|
<div class="rang-title">年龄</div>
|
<div class="rang-value">{{ query.age[0] }} - {{ query.age[1] }} 岁</div>
|
</div>
|
</template>
|
<nut-range
|
v-model="query.age"
|
range
|
:min="15"
|
:max="65"
|
class="home-query-menu-range"
|
></nut-range>
|
</QueryMenuItem>
|
<QueryMenuItem title="资格证书">
|
<ProRadio v-model="query.gender" :value-enum="CertificateTypeList" show-all-btn></ProRadio>
|
</QueryMenuItem>
|
</div>
|
</QueryMenuView>
|
</template>
|
|
<script setup lang="ts">
|
import { QueryMenuView, QueryMenuItem, ProRadio } from '@12333/components';
|
import { GenderText, SearchType } from '@12333/constants';
|
import { useSearchSettingType } from '@12333/hooks';
|
|
defineOptions({
|
name: 'HomeQueryMenuView',
|
});
|
|
// type Props = {};
|
|
// const props = withDefaults(defineProps<Props>(), {});
|
|
const { searchSettingTypeList: CertificateTypeList } = useSearchSettingType({
|
searchType: SearchType.CertificateType,
|
});
|
const { searchSettingTypeList: IdentityList } = useSearchSettingType({
|
searchType: SearchType.Identity,
|
});
|
|
const emit = defineEmits<{
|
(e: 'reset'): void;
|
(e: 'close'): void;
|
}>();
|
|
const query = defineModel<{
|
gender: number | string;
|
age: number[];
|
}>('query');
|
|
const DefaultQuery = {
|
...query.value,
|
};
|
|
console.log('query: ', query.value);
|
function handleReset() {
|
for (const key in DefaultQuery) {
|
query.value[key] = DefaultQuery[key];
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
|
.home-query-menu-view {
|
max-height: 400px;
|
padding: 30px;
|
overflow: auto;
|
|
.home-query-menu-range {
|
padding: 36px 0;
|
}
|
|
.rang-title-wrapper {
|
display: flex;
|
align-items: center;
|
|
.rang-title {
|
margin-right: 36px;
|
}
|
|
.rang-value {
|
color: boleGetCssVar('color', 'primary');
|
}
|
}
|
}
|
</style>
|
