feats

src/components/NumberRange/index.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="number-range-box">
+    <div class="number-item">
+      <input class="number-input" placeholder="请输入" type="number" v-model="num1">
+    </div>
+    <div class="number-space">-</div>
+    <div class="number-item">
+      <input class="number-input" placeholder="请输入" type="number" v-model="num2">
+    </div>
+  </div>
+</template>
+
+<script>
+import {Cell} from 'vant'
+import { watch, ref } from 'vue'
+
+export default {
+  components: {
+    [Cell.name]: Cell,
+  },
+  props: {
+    title: String,
+    modelValue: Array,
+  },
+  emits: ['update:modelValue'],
+  setup(props, {emit}) {
+    const num1 = ref()
+    const num2 = ref()
+
+    watch(num1, (nw, od) => {
+      if (nw != od) {
+        emit('update:modelValue', [nw - 0, num2.value])
+      }
+    })
+    watch(num2, (nw, od) => {
+      if (nw != od) {
+        emit('update:modelValue', [num1.value, nw - 0])
+      }
+    })
+
+    watch(props.modelValue, (nw) => {
+      if (!nw || !nw.length) {
+        num1.value = undefined
+        num2.value = undefined
+        return
+      }
+
+      num1.value = nw[0]
+      num2.value = nw[1]
+    }, {immediate: true})
+
+    return {num1, num2}
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.number-range-box {
+  display: flex;
+  align-items: center;
+  line-height: inherit;
+  text-align: left;
+
+  .number-item {
+    width: 100px;
+    flex: auto;
+  }
+
+  .number-space {
+    flex: none;
+    margin: 0 4px;
+  }
+
+  .number-input {
+    display: block;
+    box-sizing: border-box;
+    line-height: inherit;
+    outline: none;
+    border: none;
+    width: 100%;
+  }
+}
+</style>

src/components/Picker/index.vue

@@ -1,18 +1,33 @@
 <template>
   <div>
-    <div class="picker-item-body" @click="showPopup = true">{{text}}</div>
+    <div class="picker-item-body" @click="showPopup = true">
+      <span :class="{'picker-place-holder': isEmptyValue}">{{text}}</span>
+    </div>
     <van-popup v-model:show="showPopup" position="bottom">
-      <van-picker
-        :columns="columns"
-        @confirm="onConfirm"
-        @cancel="onCancel"
-      />
+      <template v-if="!loading">
+        <van-picker
+          :columns="columns"
+          @confirm="onConfirm"
+          @cancel="onCancel"
+        >
+        </van-picker>
+      </template>
+      <template v-else>
+        <van-picker
+          @confirm="onConfirm"
+          @cancel="onCancel"
+        >
+          <template #title>
+            <van-loading color="rgb(215, 94, 58)">请稍候...</van-loading>
+          </template>
+        </van-picker>
+      </template>
     </van-popup>
   </div>
 </template>
 
 <script>
-import { Popup, Picker } from 'vant'
+import { Popup, Picker, Loading } from 'vant'
 import { computed, ref, toRaw, unref } from 'vue'
 import { isEmpty } from '@/utils'
 
@@ -20,6 +35,7 @@ export default {
   components: {
     [Popup.name]: Popup,
     [Picker.name]: Picker,
+    [Loading.name]: Loading,
   },
   props: {
     options: Array,
@@ -30,12 +46,21 @@ export default {
   setup(props, { emit }) {
     const showPopup = ref(false)
 
+    const isEmptyValue = computed(() => {
+      return isEmpty(props.modelValue) || isEmpty(toRaw(props.modelValue)) || isEmpty(unref(props.modelValue))
+    })
+
     const text = computed(() => {
-      if (isEmpty(props.modelValue) || isEmpty(toRaw(props.modelValue)) || isEmpty(unref(props.modelValue))) {
+      if (isEmptyValue.value) {
         return props.placeholder
       }
 
-      return ((props.options || []).filter(x => x.value === props.modelValue)[0] || {}).text
+      const targetItem = (props.options || []).filter(x => x.value === props.modelValue)[0]
+      if (!targetItem) {
+        return props.modelValue
+      }
+
+      return targetItem.text
     })
 
     const columns = computed(() => {
@@ -50,12 +75,16 @@ export default {
 
     const onCancel = () => showPopup.value = false;
 
+    const loading = computed(() => !props.options.length)
+
     return {
       text,
       columns,
       showPopup,
       onConfirm,
-      onCancel
+      onCancel,
+      loading,
+      isEmptyValue,
     }
   }
 }
@@ -68,4 +97,8 @@ export default {
   height: 100%;
   text-align: left;
 }
+
+.picker-place-holder {
+  color: #aaa;
+}
 </style>

src/store/models/dicts.js

@@ -126,7 +126,7 @@ export default () => {
       url: '/comm/dict',
       params: { groupCode: key }
     }).then(res => {
-      dicts[key] = res
+      dicts[key] = (res || []).map(x => ({text: x.name, value: x.code}))
     })
   }
 

src/view/secondhand/components/secondhandmorescreen/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="secondhandmorescreen">
     <van-search
-      v-model="serchValue"
+      v-model="searchValue"
       placeholder="请输入搜索关键词"
       :actions="searchActions"
       @select="onSearchSelect"
@@ -25,41 +25,102 @@
     <div>
       <van-form @submit="onSubmit">
         <van-cell-group title="区位">
-          <AreaQuery v-model="roomArea"></AreaQuery>
+        <van-row :gutter="12">
+          <van-col span="12">
+            <van-field label="区县">
+              <template #input>
+                <Picker
+                  placeholder="选择区县"
+                  :options="roomDistrictOptions"
+                  v-model="formData.roomDistrict"
+                />
+              </template>
+            </van-field>
+          </van-col>
+          <van-col span="12">
+            <van-field label="商圈">
+              <template #input>
+                <Picker
+                  placeholder="选择商圈"
+                  :options="roomBussinesOptions"
+                  v-model="formData.roomBussines"
+                />
+              </template>
+            </van-field>
+          </van-col>
+        </van-row>
         </van-cell-group>
         <van-cell-group title="房间要求">
-          <van-field name="number">
+          <van-field label="楼层" ex>
             <template #input>
-              <DemandQuery></DemandQuery>
+              <NumberRange v-model="roomFloors" />
+            </template>
+          </van-field>
+          <van-field label="面积">
+            <template #input>
+              <NumberRange v-model="roomSQ" />
+            </template>
+            <template #extra>㎡</template>
+          </van-field>
+          <van-field label="总价">
+            <template #input>
+              <NumberRange v-model="roomPrices" />
+            </template>
+            <template #extra>万</template>
+          </van-field>
+          <van-field label="户型">
+            <template #input>
+              <Picker
+                placeholder="请选择户型"
+                :options="roomTypeOptions"
+                v-model="formData.roomType"
+              />
+            </template>
+          </van-field>
+          <van-field label="装修">
+            <template #input>
+              <Picker
+                placeholder="请选择装修类型"
+                :options="decorationOptions"
+                v-model="formData.decoration"
+              />
+            </template>
+          </van-field>
+          <van-field label="房源状态">
+            <template #input>
+              <Picker
+                placeholder="请选择房源状态"
+                :options="roomStatusOptions"
+                v-model="formData.roomStatus"
+              />
+            </template>
+          </van-field>
+          <van-field label="实勘状态">
+            <template #input>
+              <Picker
+                placeholder="请选择实勘状态"
+                :options="rescStatusOptions"
+                v-model="formData.rescStatus"
+              />
             </template>
           </van-field>
-        </van-cell-group>
-        <van-cell-group title="户型">
-          <CheeckButtomQuery
-            v-model="state.housetype"
-            :options="housetypeoptions"
-          ></CheeckButtomQuery>
-        </van-cell-group>
-        <van-cell-group title="装修">
-          <CheeckButtomQuery
-            v-model="state.renovation"
-            :options="housetypeoptions"
-          ></CheeckButtomQuery>
-        </van-cell-group>
-        <van-cell-group title="房源状态">
-          <CheeckButtomQuery
-            v-model="state.housetype"
-            :options="housetypeoptions"
-          ></CheeckButtomQuery>
-        </van-cell-group>
-        <van-cell-group title="实勘状态">
-          <CheeckButtomQuery
-            v-model="state.housetype"
-            :options="housetypeoptions"
-          ></CheeckButtomQuery>
         </van-cell-group>
         <van-cell-group title="房间位置">
-          <PositionQuery></PositionQuery>
+          <van-row :gutter="12">
+            <van-col span="12">
+              <van-field label="楼栋" v-model="formData.roomBuild" placeholder="请输入" />
+            </van-col>
+            <van-col span="12">
+              <van-field label="单元" v-model="formData.roomUnit" placeholder="请输入" />
+            </van-col>
+          </van-row>
+          <van-row :gutter="12">
+            <van-col span="12">
+              <van-field label="房号" v-model="formData.roomFloor" placeholder="请输入" />
+            </van-col>
+            <van-col span="12">
+            </van-col>
+          </van-row>
         </van-cell-group>
 
         <div style="margin-top: 16px;">
@@ -67,7 +128,7 @@
             <van-action-bar-icon
               icon="replay"
               text="重置"
-              @click="onClickIcon"
+              @click="handleReset"
             />
 
             <van-action-bar-button
@@ -76,18 +137,6 @@
               native-type="submit"
             />
           </van-action-bar>
-          <!-- <van-row justify="center">
-            <van-col span="6">
-              <van-button block icon="replay" type="primary"
-                >重置</van-button
-              ></van-col
-            >
-            <van-col span="18">
-              <van-button round block type="primary" native-type="submit"
-                >确定</van-button
-              ></van-col
-            >
-          </van-row> -->
         </div>
       </van-form>
     </div>
@@ -98,7 +147,7 @@
 </template>
 
 <script>
-import { computed, reactive, ref } from "vue";
+import { computed, reactive, ref, watch } from "vue";
 import {
   Col,
   Row,
@@ -116,14 +165,10 @@ import {
   Icon,
   Popover,
 } from "vant";
-// import { useModel } from '@zjxpcyc/vue-tiny-store'
+import { useModel } from '@zjxpcyc/vue-tiny-store'
 
-import {
-  AreaQuery,
-  DemandQuery,
-  CheeckButtomQuery,
-  PositionQuery,
-} from "../../../../components/queryCompents";
+import Picker from "@/components/Picker";
+import NumberRange from "@/components/NumberRange";
 
 export default {
   name: "secondhandmorescreen",
@@ -143,11 +188,8 @@ export default {
     [ActionBarButton.name]: ActionBarButton,
     [Icon.name]: Icon,
     [Popover.name]: Popover,
-
-    AreaQuery,
-    DemandQuery,
-    CheeckButtomQuery,
-    PositionQuery,
+    Picker,
+    NumberRange,
   },
   props: {
     // options: [],
@@ -155,29 +197,141 @@ export default {
   data() {
     return {};
   },
-emits:["onBack"],
+  emits:["back", 'search'],
   setup(props,{emit}) {
-    // const { dicts, getBusinessCity } = useModel('dicts')
+    const formData = reactive({
+      // 楼盘
+      estateName: undefined,
+      // 房源
+      roomCodeId: undefined,
+      // 业主电话
+      ownerTel: undefined,
+      // 区县
+      roomDistrict: undefined,
+      // 商圈
+      roomBussines: undefined,
+      // 楼层1
+      floorMin: undefined,
+      // 楼层2
+      floorMax: undefined,
+      // 面积1
+      sqMin: undefined,
+      // 面积2
+      sqMax: undefined,
+      // 总价1 -- 注意单词拼写
+      pirceMin: undefined,
+      // 总价2 -- 注意单词拼写
+      priceMax: undefined,
+      // 户型
+      roomType: undefined,
+      // 装修
+      decoration: undefined,
+      // 房源状态
+      roomStatus: undefined,
+      // 实勘状态
+      rescStatus: undefined,
+      // 楼栋
+      roomBuild: undefined,
+      // 单元
+      roomUnit: undefined,
+      // 房号
+      roomFloor: undefined,
+    })
+
+    const { dicts, getBusinessCity, getDict } = useModel('dicts')
+    // 区县
+    const roomDistrictOptions = computed(() => {
+      const roomDistrictDict = dicts.roomDistrict
+      if (!roomDistrictDict) {
+        getBusinessCity(1)
+      }
+      return (roomDistrictDict || []).map(x => ({...x, text: x.label}))
+    })
+    // 商圈 - 依据区县联动
+    const roomBussinesOptions = computed(() => {
+      if (!formData.roomDistrict) {
+        return []
+      }
+
+      const roomBussinesDict = dicts.roomBussines
+      return (roomBussinesDict || []).map(x => ({...x, text: x.label}))
+    })
     
-    const roomDistrict = ref()
-    const roomBussines = ref()
-    const roomArea = computed({
-      get: () => ({roomDistrict: roomDistrict.value, roomBussines: roomBussines.value}),
-      set: val => {
-        roomDistrict.value = val.roomDistrict
-        roomBussines.value = val.roomBussines
+    watch(
+      () => formData.roomDistrict,
+      (nw) => {
+        dicts.roomBussines = []
+        formData.roomBussines = undefined
+        getBusinessCity(2, nw)
+      }
+    )
+
+    // 楼层
+    const roomFloors = computed({
+      get: () => [formData.floorMin, formData.floorMax],
+      set: (nw) => {
+        formData.floorMin = nw[0]
+        formData.floorMax = nw[1]
+      }
+    })
+
+    // 面积
+    const roomSQ = computed({
+      get: () => [formData.sqMin, formData.sqMax],
+      set: (nw) => {
+        formData.sqMin = nw[0]
+        formData.sqMax = nw[1]
       }
     })
 
+    // 总价
+    const roomPrices = computed({
+      get: () => [formData.pirceMin, formData.priceMax],
+      set: (nw) => {
+        formData.pirceMin = nw[0]
+        formData.priceMax = nw[1]
+      }
+    })
+
+    // 户型
+    const roomTypeOptions = computed(() => {
+      return dicts.roomType
+    })
+
+    // 装修
+    const decorationOptions = computed(() => {
+      const decorationDict = dicts.decoration || []
+      if (!decorationDict.length) {
+        getDict('decoration')
+      }
+
+      return decorationDict
+    })
+
+    // 房源状态
+    const roomStatusOptions = computed(() => {
+      const roomStatusDict = dicts.roomStatus || []
+      if (!roomStatusDict.length) {
+        getDict('roomStatus')
+      }
+
+      return roomStatusDict
+    })
 
+    // 实勘状态
+    const rescStatusOptions = computed(() => {
+      return dicts.rescStatus
+    })
+    
     const state = reactive({
       housetype: [],
       renovation: [],
     });
-    const serchValue = ref("");
+
+    const searchValue = ref("");
     const searchType = ref("楼盘");
     const showPopover = ref(false);
-     const phoneShow = ref(false);
+    const phoneShow = ref(false);
 
     // 通过 actions 属性来定义菜单选项
     const searchActions = [
@@ -185,62 +339,63 @@ emits:["onBack"],
       { text: "房源", value: "2" },
       { text: "业主电话", value: "3" },
     ];
-    const onSearchSelect = (action) => {
-      console.log("housetypeChange", action);
 
+    const onSearchSelect = (action) => {
       searchType.value = action.text;
+      searchValue.value = undefined
+      formData.estateName = undefined
+      formData.roomCodeId = undefined
+      formData.ownerTel = undefined
     };
 
-    const onHousetypeChange = (values) => {
-      console.log("housetypeChange", values);
+    watch(searchValue, (nw) => {
+      switch(searchType.value) {
+        case '楼盘':
+          formData.estateName = nw
+          break
+        case '房源':
+          formData.roomCodeId = nw
+          break
+        default:
+          formData.ownerTel = nw
+      }
+    })
 
-      state.housetype = values;
-    };
-    const onSubmit = (values) => {
-      console.log(state, "submit", values);
+    const onSubmit = () => {
+      emit('search', formData)
     };
 
    const onBack = ()=>{
-           console.log('onBack');
-     emit("onBack", 333);
+     emit("back");
    }
 
-    const housetypeoptions = [
-      {
-        title: "1室",
-        value: "a",
-      },
-      {
-        title: "2室",
-        value: "b",
-      },
-      {
-        title: "3室",
-        value: "c",
-      },
-      {
-        title: "3室及以上",
-        value: "d",
-      },
-      {
-        title: "全部",
-        value: "all",
-      },
-    ];
+   const handleReset = () => {
+     Object.keys(formData).forEach(k => {
+       formData[k] = undefined
+     })
+   }
 
     return {
-      roomArea,
+      formData,
+      roomDistrictOptions,
+      roomBussinesOptions,
+      roomFloors,
+      roomSQ,
+      roomPrices,
+      roomTypeOptions,
+      decorationOptions,
+      roomStatusOptions,
+      rescStatusOptions,
       phoneShow,
-      serchValue,
+      searchValue,
       searchType,
       state,
       onSubmit,
-      housetypeoptions,
-      onHousetypeChange,
       showPopover,
       searchActions,
       onSearchSelect,
       onBack,
+      handleReset,
     };
   },
 };
@@ -252,4 +407,8 @@ emits:["onBack"],
   text-align: left;
   background-color: #f4f4f4;
 }
+
+:deep(.van-field__label) {
+  width: 4.8em;
+}
 </style>

src/view/secondhand/index.vue

@@ -22,7 +22,7 @@
       v-model:show="moreShow"
       position="right"
       :style="{ width: '100%', height: '100%' }"
-      ><SecondHandMoreScreen  @onBack="moreShow=false"/>
+      ><SecondHandMoreScreen  @back="moreShow=false" @search="handleMoreSearch"/>
     </van-popup>
   </div>
 </template>
@@ -34,7 +34,7 @@ import { DropdownMenu, DropdownItem, List, Popup, Progress } from "vant";
 import secondhandscreen from "./components/secondhandscreen";
 import secondhandmorescreen from "./components/secondhandmorescreen";
 import secondhandcard from "./components/secondhandcard";
-import { computed, onMounted, reactive, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 import { router } from "../../router";
 
 export default {
@@ -56,17 +56,15 @@ export default {
   setup(props) {
     const moreShow = ref(false);
     const { list, loading, page, getList } = useModel('room')
-    const queryData=reactive({
+    // const queryData=reactive({
+
+    // })
 
-    })
-console.log(queryData)
     const finished = computed(() => page.pageNo && page.pageNo === page.endRow)
     const percent = computed(() => page.pageNo ? (page.pageNo * 100 / page.endRow) : 100)
 
     const onShowMore = () => {
-      
       moreShow.value = true;
-    
     };
 
     const onLoad = () => {
@@ -100,6 +98,15 @@ console.log(queryData)
       console.log(query,'query')
     }
 
+    const handleMoreSearch = searchParams => {
+      moreShow.value = false
+      list.value = []
+      getList({
+        pageNo: 1,
+        ...searchParams,
+      })
+    }
+
     onMounted(() => {
       // getList()
     })
@@ -115,6 +122,7 @@ console.log(queryData)
       onShowMore,
       toDetail,
       onSearch,
+      handleMoreSearch,
       // options,
       // getData,
     };