feats

src/store/models/dicts.js

@@ -162,5 +162,19 @@ export default () => {
     })
   }
 
-  return { dicts, getDict, getBusinessCity }
+  const getBuilding = ({ buildingName, pageNo = 1, pageSize = 20 }) => {
+    return request({
+      url: "/comm/dict/building-list",
+      params: { buildingName, pageNo, pageSize },
+    }).then((res) => {
+      if (res.result && res.result.length && !buildingName && pageNo === 1) {
+        // 只缓存第一页的
+        dicts["building"] = res.result
+      }
+
+      return res
+    })
+  }
+
+  return { dicts, getDict, getBusinessCity, getBuilding }
 }

src/view/addhouse/addsecondhand/components/BuildingPicker.vue

@@ -0,0 +1,180 @@
+<template>
+  <van-popup
+    v-model:show="showPicker"
+    position="right"
+    get-container="#app"
+    style="width: 90vw; height: 100vh"
+  >
+    <div class="building-sider">
+      <div class="search-box">
+        <van-search
+          v-model="params.buildingName"
+          placeholder="请输入搜索关键词"
+          @search="handleSearch"
+          @cancel="handleCancel"
+        />
+      </div>
+      <div class="list-box">
+        <van-list
+          v-model="loading"
+          :finished="finished"
+          finished-text="没有更多了"
+          @load="handleLoad"
+        >
+          <van-cell
+            v-for="item in list"
+            :key="item.buildingId"
+            :title="item.buildingName"
+            @click="handleSelect(item)"
+          >
+            <template #right-icon v-if="item.id === selectedId">
+              <van-icon name="success" color="#07c160" />
+            </template>
+          </van-cell>
+        </van-list>
+      </div>
+      <div class="action-box">
+        <van-button size="small" type="warning" @click="handleSubmit">
+          确定
+        </van-button>
+        <van-button size="small" @click="showPicker = false">取消</van-button>
+      </div>
+    </div>
+  </van-popup>
+</template>
+
+<script>
+import { computed, onMounted, reactive, ref } from "vue"
+import { Button, Popup, Search, List, Cell, Icon } from "vant"
+import { useModel } from "@zjxpcyc/vue-tiny-store"
+
+export default {
+  components: {
+    [Button.name]: Button,
+    [Popup.name]: Popup,
+    [Search.name]: Search,
+    [List.name]: List,
+    [Cell.name]: Cell,
+    [Icon.name]: Icon,
+  },
+  emits: ["change", "update:show"],
+  props: {
+    show: Boolean,
+  },
+  setup(props, { emit }) {
+    const loading = ref(false)
+    const finished = ref(false)
+    const selectedId = ref()
+    const selectedItem = ref()
+
+    const params = reactive({
+      buildingName: undefined,
+      pageNo: 1,
+      pageSize: 20,
+    })
+
+    const { dicts, getBuilding } = useModel("dicts")
+    const list = ref(dicts.building || [])
+
+    const showPicker = computed({
+      get: () => props.show,
+      set: (val) => emit("update:show", val),
+    })
+
+    const handleSearch = () => {
+      params.pageNo = 1
+      finished.value = false
+      handleLoad()
+    }
+
+    const handleCancel = () => {
+      params.pageNo = 1
+      params.buildingName = undefined
+      finished.value = false
+      handleLoad()
+    }
+
+    const handleLoad = () => {
+      if (loading.value) {
+        return
+      }
+
+      loading.value = true
+      getBuilding(params)
+        .then((res) => {
+          params.pageNo += 1
+          loading.value = false
+          finished.value = res.currentPage >= res.totalPages
+          if (res.currentPage === 1) {
+            list.value = res.result || []
+          } else {
+            list.value = list.value.concat(res.result || [])
+          }
+        })
+        .catch((e) => {
+          console.error(e)
+          loading.value = false
+        })
+    }
+
+    const handleSelect = (item) => {
+      selectedId.value = item.id
+      selectedItem.value = item
+    }
+
+    const handleSubmit = () => {
+      showPicker.value = false
+      emit("change", { id: selectedId.value, item: selectedItem.value })
+    }
+
+    onMounted(() => {
+      // if (!list.value || !list.value.length) {
+      //   handleLoad()
+      // }
+    })
+
+    return {
+      showPicker,
+      loading,
+      params,
+      finished,
+      list,
+      selectedId,
+      handleSelect,
+      handleLoad,
+      handleSearch,
+      handleCancel,
+      handleSubmit,
+    }
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.building-sider {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  .search-box {
+    flex: none;
+  }
+
+  .action-box {
+    flex: none;
+    padding: 1em 0;
+    display: flex;
+    justify-content: space-around;
+
+    & > * {
+      padding: 0 2em;
+    }
+  }
+
+  .list-box {
+    flex: auto;
+    overflow-y: auto;
+  }
+}
+</style>

src/view/addhouse/addsecondhand/index.vue

@@ -10,19 +10,15 @@
       <van-form @submit="onSubmit">
         <van-field
           v-model="state.username"
-          name="22222"
+          readonly
           label="选择楼盘"
+          placeholder="请选择"
           required
-          :rules="[{ required: true, message: '请选择楼盘' }]"
-        >
-          <template #input>
-            <van-search
-              v-model="state.username"
-              style="pdding: 0"
-              placeholder="请输入"
-            />
-          </template>
-        </van-field>
+          clickable
+          @click="showBuildingPicker = true"
+        />
+
+        <BuildingPicker v-model:show="showBuildingPicker" />
 
         <van-field
           v-model="state.username"
@@ -239,7 +235,7 @@
 </template>
 
 <script>
-import { reactive } from "vue"
+import { reactive, ref } from "vue"
 
 import {
   Icon,
@@ -257,13 +253,9 @@ import {
   Radio,
 } from "vant"
 
-import {
-  Pickerc,
-  Housetypec,
-  Ladderhousec,
-} from "../../../components/editCompents"
+import { Pickerc, Housetypec, Ladderhousec } from "@/components/editCompents"
 
-// import { router } from "../../../router";
+import BuildingPicker from "./components/BuildingPicker"
 
 export default {
   name: "addsecondhand",
@@ -283,12 +275,15 @@ export default {
     Housetypec: Housetypec,
     Pickerc: Pickerc,
     Ladderhousec: Ladderhousec,
+    BuildingPicker,
   },
   data() {
     return {}
   },
 
   setup() {
+    const showBuildingPicker = ref(false)
+
     const state = reactive({
       username: "",
       password: "",
@@ -304,6 +299,7 @@ export default {
 
     return {
       state,
+      showBuildingPicker,
       onSubmit,
     }
   },