zhengyiming
2025-02-17 24dc7ec489cc2206c69ad26b4c931905ad81bd8a
apps/bMiniApp/src/pages/home/HomeQueryMenuView.vue
@@ -1,13 +1,28 @@
<template>
  <QueryMenuView @close="handleReset" @confirm="emit('close')" cancelText="重置">
    <div class="home-query-menu-view">
      <QueryMenuItem title="结算方式">
      <QueryMenuItem title="性别">
        <ProRadio v-model="query.gender" :value-enum="GenderText" show-all-btn></ProRadio>
      </QueryMenuItem>
      <QueryMenuItem title="员工福利">
      <QueryMenuItem title="身份">
        <ProRadio v-model="query.gender" :value-enum="GenderText" show-all-btn></ProRadio>
      </QueryMenuItem>
      <QueryMenuItem title="性别要求">
      <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="GenderText" show-all-btn></ProRadio>
      </QueryMenuItem>
    </div>
@@ -33,12 +48,14 @@
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];
@@ -53,5 +70,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>