fix

src/components/Picker/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <van-cell :title="title">
+      <div class="picker-item-body" @click="showPopup = true">{{value}}</div>
+    </van-cell>
+    <van-popup v-model:show="showPopup" position="bottom">
+      <van-picker
+        :title="title"
+        :columns="columns"
+        @confirm="onConfirm"
+        @cancel="onCancel"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import { Cell, Popup, Picker } from 'vant'
+import { computed, ref } from 'vue'
+
+export default {
+  components: {
+    [Cell.name]: Cell,
+    [Popup.name]: Popup,
+    [Picker.name]: Picker,
+  },
+  props: {
+    options: Array,
+    title: String,
+    placeholder: String,
+    modelValue: undefined,
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    const showPopup = ref(false)
+
+    const value = computed(() => {
+      if (props.modelValue === undefined || props.modelValue === null) {
+        return props.placeholder
+      }
+
+      return ((props.options || []).filter(x => x.value === props.modelValue)[0] || {}).text
+    })
+
+    const columns = computed(() => {
+      return (props.options || []).map(x => x.text)
+    })
+
+    const onConfirm = (value, index) => {
+      const val = ((props.options || [])[index] || {}).value
+      emit('update:modelValue', val)
+      showPopup.value = false
+    };
+
+    const onCancel = () => showPopup.value = false;
+
+    return {
+      value,
+      columns,
+      showPopup,
+      onConfirm,
+      onCancel
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.picker-item-body {
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+  text-align: left;
+}
+</style>

src/components/queryCompents/areaQuery/index.vue

@@ -1,36 +1,32 @@
 <template>
   <div class="areaQuery">
-
-        <van-field
-          v-model="state.value"
-          readonly
-          clickable
-          :name="name"
-          :label="label"
-          placeholder="请选择"
-          @click="state.showCascader = true"
+    <van-row :gutter="12">
+      <van-col span="12">
+        <Picker
+          title="区县"
+          :options="roomDistrictOptions"
+          v-model="val1"
         />
-        <van-popup v-model:show="state.showCascader" position="bottom">
-          <van-cascader
-            :options="options"
-            @finish="onConfirm"
-            @close="state.showCascader = false"
-          />
-        </van-popup>
+      </van-col>
+      <van-col span="12">
+        
+      </van-col>
+      </van-row>
     </div>
 </template>
 
 <script>
-import { reactive } from 'vue';
-import {  Field, Popup, Cascader } from "vant";
+import { computed, ref } from 'vue';
+import { Col, Row } from "vant";
+import { useModel } from '@zjxpcyc/vue-tiny-store'
+import Picker from '../../Picker'
 
 export default {
   name: "areaQuery",
   components: {
-    [Field.name]: Field,
-    [Popup.name]: Popup,
-    [Cascader.name]: Cascader,
-    // [Picker.name]: Popup,
+    [Row.name]: Row,
+    [Col.name]: Col,
+    Picker,
   },
   props: {
     name:String,
@@ -40,40 +36,25 @@ export default {
   },
 
   setup() {
-    const state = reactive({
-      value: '',
-      showCascader:false,
-      
-    });
-
-    const options = [
-      {
-        text: '浙江省',
-        value: '330000',
-        children: [{ text: '杭州市', value: '330100' }],
-      },
-      {
-        text: '江苏省',
-        value: '320000',
-        children: [{ text: '南京市', value: '320100' }],
-      },
-    ];
-
-    const onConfirm = ({selectedOptions}) => {
-      state.showCascader = false;
+    const val1 = ref()
+    const val2 = ref()
 
-      state.value = selectedOptions.map((option) => option.text).join('/')
-
-      console.log(selectedOptions.map((option) => option.text).join('/'),'333333')
-        // .filter((item) => !!item)
-        // .map((item) => item.name)
-        // .join('/');
-    };
+    const { dicts, getBusinessCity } = useModel('dicts')
+    // 楼盘
+    // 区位
+    const roomDistrict = dicts.roomDistrict
+    if (!roomDistrict) {
+      getBusinessCity(1)
+    }
 
+    const roomDistrictOptions = computed(() => {
+      return (roomDistrict || []).map(x => ({...x, text: x.label}))
+    })
+    
     return {
-      state,
-      options,
-      onConfirm,
+      val1,
+      val2,
+      roomDistrictOptions,
     };
   },
 };

src/layout/index.vue

@@ -1,9 +1,8 @@
 <template>
   <div class="layout">
     <div>
-<router-view />
+      <router-view />
     </div>
-    
 
     <van-tabbar route>
       <van-tabbar-item replace to="/home" icon="home-o">首页</van-tabbar-item>

src/router.js

@@ -4,7 +4,8 @@ import {
 } from 'vue-router';
 
 
-const routes = [{
+const routes = [
+    {
         name: 'notFound',
         path: '/:path(.*)+',
         redirect: {
@@ -20,9 +21,12 @@ const routes = [{
         }
     },
     {
+        path: '/',
+        redirect: '/home',
         name: 'layout',
         component: () => import('./layout'),
-        children: [{
+        children: [
+            {
                 path: '/home',
                 component: () => import('./view/home'),
                 meta: {
@@ -111,12 +115,8 @@ router.beforeEach((to, from, next) => {
     if (title) {
         document.title = title;
     }
-    // if (to.name !== 'login' && !isAuthenticated) next({
-    //     name: 'login'
-    // })
-    // else 
-    next()
 
+    next()
 });
 
 export {

src/store/index.js

@@ -3,12 +3,14 @@ import loading from './models/loading'
 import shiro from './models/shiro'
 import dicts from './models/dicts'
 import user from './models/user'
+import room from './models/room'
 
 const store = createStore({
   loading,
   shiro,
   dicts,
   user,
+  room,
 })
 
 export default store

src/store/models/room.js

@@ -0,0 +1,31 @@
+import { reactive, ref } from "vue"
+import request from '@/utils/request'
+
+export default () => {
+  const loading = ref(false)
+  const list = ref([])
+  const page = reactive({})
+
+  const getList = data => {
+    loading.value = true
+    request({
+      loadingId: 'room.list',
+      url: '/room/list',
+      data: {
+        pageNo: 1,
+        pageSize: 10,
+        ...data,
+      }
+    }).then(res => {
+      const { pageNo, pageSize, endRow, result } = res || {}
+      Object.assign(page, {pageNo, pageSize, endRow})
+      list.value = pageNo <= 1 ? result : list.value.concat(list.value)
+      loading.value = false
+    }).catch(e => {
+      console.error(e)
+      loading.value = false
+    })
+  }
+
+  return {list, page, getList, loading}
+}

src/utils/request/index.js

@@ -2,18 +2,14 @@ import axios from 'axios'
 import {
   router
 } from '../../router'
-import {
-  useModel
-} from '@zjxpcyc/vue-tiny-store'
+import store from '../../store'
 
 // request 拦截器
 const requestInterceptor = config => {
-  if (config.loadingId) {
-    const {
-      setLoading
-    } = useModel('loading')
+  const loading = store.getState('loading')
 
-    config.setLoading = loading => setLoading(config.loadingId, loading)
+  if (config.loadingId) {
+    config.setLoading = state => loading.setLoading(config.loadingId, state)
     config.setLoading(true)
   }
 
@@ -64,6 +60,7 @@ const responseInterceptor = response => {
 
 // 错误处理
 const handleError = type => error => {
+  console.error(error)
   if (error.config.setLoading) {
     error.config.setLoading(false)
   }
@@ -74,7 +71,6 @@ const handleError = type => error => {
   } else {
     const errorMessage = error.message || error.msg || error
     console.error(`[${type}] ${errorMessage}`)
-    console.error(error)
     return Promise.reject(errorMessage)
   }
 }

src/view/home/index.vue

@@ -2,10 +2,10 @@
   <div class="home">
     <van-tabs
       v-model:active="active"
-      background="#e6e4e4"
-      color="#d75e3a"
+      background="#d75e3a"
+      color="#fff"
       line-width="30%"
-      title-active-color="#d75e3a"
+      title-active-color="#fff"
     >
       <van-tab title="二手房"><Secondhand /></van-tab>
       <van-tab title="租房"> <Renting /></van-tab>
@@ -38,4 +38,8 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped></style>
+<style scoped>
+/deep/ .van-tab {
+  color: #000;
+}
+</style>

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

@@ -116,6 +116,8 @@ import {
   Icon,
   Popover,
 } from "vant";
+import { useModel } from '@zjxpcyc/vue-tiny-store'
+
 import {
   AreaQuery,
   DemandQuery,
@@ -155,6 +157,14 @@ export default {
   },
 
   setup() {
+    const { dicts, getBusinessCity } = useModel('dicts')
+    // 楼盘
+    // 区位
+    const roomDistrict = dicts.roomDistrict
+    if (!roomDistrict) {
+      getBusinessCity(1)
+    }
+
     const state = reactive({
       housetype: [],
       renovation: [],

src/view/secondhand/index.vue

@@ -2,15 +2,16 @@
   <div class="secondhand">
     <SecondHandScreen  @click="()=>{}" @onShowMore="onShowMore" />
     <div>
+      <van-progress color="#d75e3a" :show-pivot="false" :stroke-width="1" :percentage="percent" />
       <van-list
         class="secondhand-main"
-        v-model:loading="state.loading"
-        :finished="state.finished"
+        v-model:loading="loading"
+        :finished="finished"
         finished-text="没有更多了"
         @load="onLoad"
       >
         <SecondHandCard
-          v-for="item in state.list"
+          v-for="item in list"
           :key="item.id"
           :datas="item"
           @click="toDetail()"
@@ -28,13 +29,13 @@
 
 <script>
 // import Vue from 'vue';
-import { DropdownMenu, DropdownItem, List, Popup } from "vant";
+import { useModel } from '@zjxpcyc/vue-tiny-store'
+import { DropdownMenu, DropdownItem, List, Popup, Progress } from "vant";
 import secondhandscreen from "./components/secondhandscreen";
 import secondhandmorescreen from "./components/secondhandmorescreen";
 import secondhandcard from "./components/secondhandcard";
-import { reactive, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 import { router } from "../../router";
-import request from "../../utils/request";
 
 export default {
   name: "secondhand",
@@ -43,6 +44,7 @@ export default {
     [DropdownItem.name]: DropdownItem,
     [List.name]: List,
     [Popup.name]: Popup,
+    [Progress.name]: Progress,
     SecondHandScreen: secondhandscreen,
     SecondHandCard: secondhandcard,
     SecondHandMoreScreen: secondhandmorescreen,
@@ -53,45 +55,25 @@ export default {
 
   setup(props) {
     const moreShow = ref(false);
+    const { list, loading, page, getList } = useModel('room')
+
+    const finished = computed(() => page.pageNo && page.pageNo === page.endRow)
+    const percent = computed(() => page.pageNo ? (page.pageNo * 100 / page.endRow) : 100)
 
     const onShowMore = () => {
       console.log("22");
       moreShow.value = true;
       console.log(moreShow, "22");
     };
-    const state = reactive({
-      list: [],
-      loading: false,
-      finished: false,
-    });
-
-    const pageInfo = reactive({
-      pageNo: 1,
-      pageSize: 10,
-    });
-
-    
 
     const onLoad = () => {
-      // 异步更新数据
-      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
-      state.loading = true;
-      request({
-        url: "/room/list",
-        data: { ...pageInfo },
-      }).then((res) => {
-        console.log(res, "res");
-        state.list.push(...res.result);
-
-        state.loading = false;
-        pageInfo.pageNo += 1;
-
-        // 数据全部加载完成
-        // if (state.list.length >= 40) {
-        //   state.finished = true;
-        // }
-      });
+      // if (!loading.value) {
+        getList({
+          pageNo: page.pageNo + 1
+        })
+      // }
     };
+  
     const toDetail = () => {
       console.log(props, router, "333");
       router.push("/secondhand/detail");
@@ -110,8 +92,16 @@ export default {
 
     // getData();
 
+    onMounted(() => {
+      // getList()
+    })
+
     return {
-      state,
+      list,
+      loading,
+      percent,
+      page,
+      finished,
       onLoad,
       moreShow,
       onShowMore,

vue.config.js

@@ -7,6 +7,7 @@ module.exports = {
     config.resolve.alias.set("@", path.resolve("src"));
   },
   devServer: {
+    port: 9000,
     disableHostCheck: true,
     proxy: {
       '/mp': {