zhengyiming
2 天以前 ba48054b6f2680cfa1a0b3b912880925a8b5861b
apps/bMiniApp/src/pages/home/HomeQueryMenuView.vue
@@ -1,14 +1,37 @@
<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 title="性别">
        <ProRadio
          v-model="query.genderLimit"
          :value-enum="EnumUserGenderText"
          show-all-btn
        ></ProRadio>
      </QueryMenuItem>
      <QueryMenuItem title="员工福利">
        <ProRadio v-model="query.gender" :value-enum="GenderText" show-all-btn></ProRadio>
      <QueryMenuItem title="身份">
        <ProRadio v-model="query.identity" :value-enum="identityList" show-all-btn></ProRadio>
      </QueryMenuItem>
      <QueryMenuItem title="性别要求">
        <ProRadio v-model="query.gender" :value-enum="GenderText" show-all-btn></ProRadio>
      <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.certificateType"
          :value-enum="certificateTypeList"
          show-all-btn
        ></ProRadio>
      </QueryMenuItem>
    </div>
  </QueryMenuView>
@@ -16,7 +39,8 @@
<script setup lang="ts">
import { QueryMenuView, QueryMenuItem, ProRadio } from '@12333/components';
import { GenderText } from '@12333/constants';
import { EnumUserGenderText, CategoryCode } from '@12333/constants';
import { useDictionaryDataSelect } from '@12333/hooks';
defineOptions({
  name: 'HomeQueryMenuView',
@@ -26,17 +50,29 @@
// const props = withDefaults(defineProps<Props>(), {});
const { dictionaryDataList: identityList } = useDictionaryDataSelect({
  categoryCode: CategoryCode.Identity,
});
const { dictionaryDataList: certificateTypeList } = useDictionaryDataSelect({
  categoryCode: CategoryCode.CertificateType,
});
const emit = defineEmits<{
  (e: 'reset'): void;
  (e: 'close'): void;
}>();
const query = defineModel<{
  gender: number | string;
  genderLimit: number | string;
  age: number[];
  identity: string;
  certificateType: string;
}>('query');
const DefaultQuery = {
  ...query.value,
  age: [...query.value.age],
};
function handleReset() {
@@ -53,5 +89,22 @@
  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>