feats

src/components/Picker/index.vue

 <template>
   <div>
-    <van-cell :title="title">
-      <div class="picker-item-body" @click="showPopup = true">{{value}}</div>
-    </van-cell>
+    <div class="picker-item-body" @click="showPopup = true">{{text}}</div>
     <van-popup v-model:show="showPopup" position="bottom">
       <van-picker
-        :title="title"
         :columns="columns"
         @confirm="onConfirm"
         @cancel="onCancel"
 </template>
 
 <script>
-import { Cell, Popup, Picker } from 'vant'
-import { computed, ref } from 'vue'
+import { Popup, Picker } from 'vant'
+import { computed, ref, toRaw, unref } from 'vue'
+import { isEmpty } from '@/utils'
 
 export default {
   components: {
-    [Cell.name]: Cell,
     [Popup.name]: Popup,
     [Picker.name]: Picker,
   },
   props: {
     options: Array,
-    title: String,
     placeholder: String,
     modelValue: undefined,
   },
   setup(props, { emit }) {
     const showPopup = ref(false)
 
-    const value = computed(() => {
-      if (props.modelValue === undefined || props.modelValue === null) {
+    const text = computed(() => {
+      if (isEmpty(props.modelValue) || isEmpty(toRaw(props.modelValue)) || isEmpty(unref(props.modelValue))) {
         return props.placeholder
       }
 
     const onCancel = () => showPopup.value = false;
 
     return {
-      value,
+      text,
       columns,
       showPopup,
       onConfirm,

src/components/queryCompents/areaQuery/index.vue

   <div class="areaQuery">
     <van-row :gutter="12">
       <van-col span="12">
-        <Picker
-          title="区县"
-          :options="roomDistrictOptions"
-          v-model="val1"
-        />
+        <van-cell title="区县">
+          <Picker
+            placeholder="请选择区县"
+            :options="roomDistrictOptions"
+            v-model="val1"
+          />
+        </van-cell>
       </van-col>
       <van-col span="12">
-        
+        <van-cell title="商圈">
+          <Picker
+            placeholder="请选择商圈"
+            :options="roomBussinesOptions"
+            v-model="val2"
+          />
+        </van-cell>
       </van-col>
       </van-row>
     </div>
 </template>
 
 <script>
-import { computed, ref } from 'vue';
-import { Col, Row } from "vant";
+import { computed } from 'vue';
+import { Cell, Col, Row } from "vant";
 import { useModel } from '@zjxpcyc/vue-tiny-store'
 import Picker from '../../Picker'
 
   components: {
     [Row.name]: Row,
     [Col.name]: Col,
+    [Cell.name]: Cell,
     Picker,
   },
   props: {
-    name:String,
-    label:String,
-    other:Object,
-    // placeholder:'请选择',
+    modelValue: undefined,
   },
+  emits: ['update:modelValue'],
 
-  setup() {
-    const val1 = ref()
-    const val2 = ref()
+  setup(props, {emit}) {
+    const val1 = computed({
+      get: () => (props.modelValue || {}).roomDistrict,
+      set: val => emit('update:modelValue', { ...(props.modelValue || {}), roomDistrict: val })
+    })
+    const val2 = computed({
+      get: () => (props.modelValue || {}).roomBussines,
+      set: val => emit('update:modelValue', { ...(props.modelValue || {}), roomBussines: val })
+    })
 
     const { dicts, getBusinessCity } = useModel('dicts')
-    // 楼盘
-    // 区位
-    const roomDistrict = dicts.roomDistrict
-    if (!roomDistrict) {
-      getBusinessCity(1)
-    }
 
     const roomDistrictOptions = computed(() => {
+      // 楼盘
+      // 区县
+      const roomDistrict = dicts.roomDistrict
+      if (!roomDistrict) {
+        getBusinessCity(1)
+      }
       return (roomDistrict || []).map(x => ({...x, text: x.label}))
     })
+
+    // 商圈 - 依据区县联动
+    const roomBussinesOptions = computed(() => {
+      if (!val1.value) {
+        return []
+      }
+
+      const roomBussines = dicts.roomBussines
+      if (!roomBussines) {
+        getBusinessCity(2, val1.value)
+      }
+
+      return (roomBussines || []).map(x => ({...x, text: x.label}))
+    })
     
     return {
       val1,
       val2,
       roomDistrictOptions,
+      roomBussinesOptions,
     };
   },
 };

src/store/models/dicts.js

         dicts['roomDistrict'] = res
       } else {
         // 商圈
-        dicts['roomDistrict'] = res
+        dicts['roomBussines'] = res
       }
     })
   }

src/utils/index.js

+
+export function isEmpty (o) {
+  if (o === undefined || o === null || o === '') {
+    return true
+  }
+
+  if (Array.isArray(o) && o.length < 1) {
+    return true
+  }
+
+  return false
+}

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

     <div>
       <van-form @submit="onSubmit">
         <van-cell-group title="区位">
-          <AreaQuery name="area.b" label=""></AreaQuery>
+          <AreaQuery v-model="roomArea"></AreaQuery>
         </van-cell-group>
         <van-cell-group title="房间要求">
           <van-field name="number">
 </template>
 
 <script>
-import { reactive, ref } from "vue";
+import { computed, reactive, ref } from "vue";
 import {
   Col,
   Row,
   Icon,
   Popover,
 } from "vant";
-import { useModel } from '@zjxpcyc/vue-tiny-store'
+// import { useModel } from '@zjxpcyc/vue-tiny-store'
 
 import {
   AreaQuery,
   },
 emits:["onBack"],
   setup(props,{emit}) {
-    const { dicts, getBusinessCity } = useModel('dicts')
-    console.log(props)
-    // 楼盘
-    // 区位
-    const roomDistrict = dicts.roomDistrict
-    if (!roomDistrict) {
-      getBusinessCity(1)
-    }
+    // const { dicts, getBusinessCity } = useModel('dicts')
+    
+    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
+      }
+    })
+
 
     const state = reactive({
       housetype: [],
     ];
 
     return {
+      roomArea,
       phoneShow,
       serchValue,
       searchType,