房源查询

src/App.vue

@@ -7,8 +7,8 @@
      <template #title > 
        <van-col style="color:#ffffff;font-weight:900;">移动销售</van-col> 
     </template>
-     <template #left>
-        <i class="fa fa-arrow-circle-left" aria-hidden="true" style="color:#ffffff;font-size:18px;"></i>
+     <template #left>  
+        <i class="fa fa-home" aria-hidden="true" style="color:#ffffff;font-size:18px;"></i>
     </template>
     
     </van-nav-bar>
@@ -21,7 +21,7 @@ export default {
   name: 'App',
   methods: {
   onClickFanhui:function(){
-    this.$router.go(-1)
+    this.$router.push('/saleindex')
   }
 }
 }

src/common/api/loginApi.js

@@ -148,4 +148,22 @@ export function GetSaClientSummaryList(data) {
     method: 'post',
     data
   })
+}
+
+/* 户型列表 */
+export function GetSaModelSelectList(data) {
+  return request({
+    url: '/GetSaModelSelectList',
+    method: 'post',
+    data
+  })
+}
+
+/* 房源查询列表 */
+export function GetSaRoomList(data) {
+  return request({
+    url: '/GetSaRoomList',
+    method: 'post',
+    data
+  })
 }

src/components/filterhouse.vue

@@ -20,19 +20,39 @@
       </template>
     </van-nav-bar>
     <van-form @submit="onSubmit">
-        <van-cell title="楼栋" value="请选择" is-link title-class="title1" value-class="value1"></van-cell>
-        <van-cell title="户型" value="请选择" is-link title-class="title1" value-class="value1"></van-cell>
+        <van-cell title="楼栋" :value="bText" is-link title-class="title1" value-class="value1" @click="showBuild=true"></van-cell>
+          <van-popup v-model="showBuild" round position="bottom" >
+            <van-picker
+              show-toolbar
+              title="选择楼栋"
+              value-key="keyValue"
+              :columns="buildingData"
+              @cancel="showBuild=false"
+              @confirm="onConfirm"
+            />
+          </van-popup>
+        
+        <van-cell title="户型" :value="hText" is-link title-class="title1" value-class="value1" @click="showHouse=true"></van-cell>
+          <van-popup v-model="showHouse" round position="bottom">
+            <van-picker
+              show-toolbar
+              title="选择户型"
+              value-key="keyValue"
+              :columns="houseData"
+              @cancel="showHouse=false"
+              @confirm="onConfirmHouse"
+            />
+          </van-popup>
+        
         <van-field
-            v-model="danyuan"
-            
+            v-model="danyuan"            
             label="单元号"
             placeholder="请输入"
             input-align="right"
             label-class="title1"
         />
         <van-field
-            v-model="fangjian"
-            
+            v-model="fangjian"            
             label="房间号"
             placeholder="请输入"
             input-align="right"
@@ -47,12 +67,19 @@
 </template>
 
 <script>
-import { GetSaClientSummary } from "@/common/api/loginApi.js";
+import { GetSaBuildingSelectList ,GetSaModelSelectList,GetSaRoomList} from "@/common/api/loginApi.js";
 export default {
   name: "login",
   data() {
     return {
-      data: [], 
+      buildingData: [], 
+      showBuild:false,
+      houseData:[],
+      showHouse:false,
+      bText:'请选择',   //楼栋
+      hText:'请选择',   //户型
+      bValue:'',   //楼栋
+      hValue:'',   //户型
       danyuan:'',
       fangjian:''
       
@@ -62,35 +89,79 @@ export default {
     console.info("created");
     //console.info(this.$util);
     this.$util.persistLogin(this);
+    this.GetSaBuildingSelectList();
+    this.GetSaModelSelectList();
   },
   computed:{   //计算属性
     
    
   },
   methods: {
-    GetSaClientSummary: function () {
+    //获取楼栋信息
+    GetSaBuildingSelectList: function () {
       var that = this;
       var data = {
-        userCode: that.$store.state.data.userCode,
-        projectId: that.$store.state.projectId
+        projectId: that.$store.state.projectId       
+      };
+      console.info("data", data);
+      GetSaBuildingSelectList(data).then((res) => {
+        console.info("GetSaBuildingSelectList", res);
+        if (!res.result) {
+          that.$toast(res.msg);
+          return;
+        }
+        res.data.forEach(function (item, index, array) {
+          that.$set(that.buildingData, index, item);
+        });
        
+      });
+    },
+    //获取户型列表
+    GetSaModelSelectList: function () {
+      var that = this;
+      var data = {
+        projectId: that.$store.state.projectId       
       };
       console.info("data", data);
-      GetSaClientSummary(data).then((res) => {
-        console.info("GetSaClientSummary", res);
+      GetSaModelSelectList(data).then((res) => {
+        console.info("GetSaModelSelectList", res);
         if (!res.result) {
           that.$toast(res.msg);
           return;
         }
         res.data.forEach(function (item, index, array) {
-          that.$set(that.data, index, item);
+          that.$set(that.houseData, index, item);
         });
-        that.loading = false;
-        that.finished = true;
+       
       });
     },
-     onSubmit(values) {    //提交按钮
-      console.log('submit', values);
+     onConfirm(value) {   //楼栋选定项
+     console.info('onConfirm',value);
+      this.bValue = value.keyId;
+      this.bText=value.keyValue;
+      console.info('onConfirm bValue',this.bValue);
+      this.showBuild = false;
+      //console.info('onConfirm showBuild',this.showBuild);
+    },
+     onConfirmHouse(value) {   //户型选定项
+      console.info('onConfirmHouse',value);
+      this.hValue = value.keyId;
+      this.hText=value.keyValue;
+      console.info('onConfirmHouse hValue',this.bValue);
+      this.showHouse = false;
+    },
+    onSubmit() {    //提交按钮  查询房源
+     
+      var that = this;
+      if(that.bValue=='请选择'){
+        that.bValue='';
+      }
+       if(that.hValue=='请选择'){
+        that.hValue='';
+      }
+      let jsonQuery={buildingId:that.bValue,modelId:that.hValue,danyuan:that.danyuan,fangjian:that.fangjian};
+      this.$router.push({path:'/getsaroomlist',query:jsonQuery});
+     
     },
     onClickLeft() {
       // this.$toast('返回')

src/components/getsaroomlist.vue

@@ -0,0 +1,194 @@
+<template>
+  <div>
+    <van-nav-bar
+      @click-left="onClickLeft"
+      @click-right="onClickRight"
+      style="background-color: #1989fa"
+    >
+      <template #title>
+        <van-col style="color: #ffffff">房源查询</van-col>
+      </template>
+      <template #left>
+        <i
+          class="fa fa-arrow-circle-left"
+          aria-hidden="true"
+          style="color: #ffffff; font-size: 18px"
+        ></i>
+      </template>
+      <template #right>
+        <van-icon name="replay" size="18" color="#ffffff" />
+      </template>
+    </van-nav-bar>
+
+    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
+      <van-list
+        v-model="loading"
+        :finished="finished"
+        loading-text="加载中..."
+        finished-text="我是有底线的~"
+        @load="onLoad"
+      >
+        <van-cell
+          v-for="item in list"
+          :key="item.RoomId"
+          :to="'/getsaroominfo?id='+item.RoomId"
+        >
+          <template #title>
+            <van-col span="24" class="title1">
+                {{item.BuildingName}} {{item.rFullName}}
+            </van-col>
+            </template>
+            <template #default>
+                <van-row><van-col span="24">
+                    <van-col span="5" v-if="item.rStateName=='认购'" class="bgOrange">
+                      {{item.rStateName}}
+                    </van-col>
+                    <van-col span="5" v-else-if="item.rStateName=='签约'" class="bgRed">
+                        {{item.rStateName}}
+                    </van-col>
+                    <van-col span="5" v-else class="bgGray">
+                        {{item.rStateName}}
+                    </van-col>
+                </van-col></van-row>
+                
+            </template>
+        </van-cell>
+      </van-list>
+    </van-pull-refresh>
+  </div>
+</template>
+
+<script>
+import { GetSaRoomList } from "@/common/api/loginApi.js";
+export default {
+  name: "login",
+  data() {
+    return {
+      list: [], 
+      loading: false,
+      finished: false,
+      isLoading: false,
+      page:"1",
+      buildingId:'',
+      modelId:'',
+      danyuan:'',
+      fangjian:''
+    };
+  },
+  created: function () {
+    console.info("created");
+    //console.info(this.$util);
+    this.$util.persistLogin(this);
+    this.buildingId=this.$route.query.buildingId+'';
+    this.modelId=this.$route.query.modelId+'';
+    this.danyuan=this.$route.query.danyuan+'';
+    this.fangjian=this.$route.query.fangjian+'';
+  },
+  methods: {
+    GetSaRoomList: function () {
+      var that = this;
+      let jsonQuery={buildingId:that.buildingId,modelId:that.modelId,chamberName:this.danyuan,roomName:this.fangjian};
+      var data = {
+        userCode:that.$store.state.data.userCode,
+        projectId: that.$store.state.projectId ,
+        page:'',
+        pageCount:'',
+        jsonQuery:JSON.stringify(jsonQuery) 
+      };
+      console.info("data", data);
+      GetSaRoomList(data).then((res) => {
+        console.info("GetSaRoomList", res);
+        if (!res.result) {
+          that.$toast(res.msg);
+          return;
+        }
+        if(res.data!=null&&res.data.list.length>0){
+          that.loading=false;
+          res.data.list.forEach(function (item, index, array) {
+            that.list.push(item);
+            //console.info('length:'+res.data.list.length,'index:'+index);
+            // if(res.data.list.length-1==index){
+            //   that.page++;
+            //   if(res.data.list.length<20){
+            //     that.finished=true;
+            //   }
+            // }
+          });
+        //   if(res.data==null||res.data.list==null||res.data.list.length==0){
+        //     that.finished = true;
+        //   }
+          that.finished = true;
+        }
+         else{
+          that.finished=true;
+        }
+      });
+    },
+    // 列表加载
+    onLoad () {
+      setTimeout(() => {
+        this.GetSaRoomList()
+        this.loading = true
+      }, 500)
+    },
+    onRefresh () {
+      setTimeout(() => {
+        // 重新初始化这些属性
+        this.isLoading = false
+        this.listdata = []
+        this.page = 1
+        this.loading = false
+        this.finished = false
+        //this.noData = false
+        // 请求信息
+        this.GetSaRoomList()
+      }, 500)
+    },
+    onClickLeft() {
+      // this.$toast('返回')
+      console.info("left");
+      this.$router.go(-1);
+    },
+    onClickRight() {
+      this.$router.go(0);
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.title1 {
+   color:#0f0fa7;
+    font-size:16px;
+    text-align: left;
+    margin-left:15px;
+    height:35px;
+}
+
+
+.bgGray{
+    background:#999;  
+    margin-right: 5px;  
+    float:right;
+    color:#000;
+    text-align: center;
+    width:120px;
+}
+.bgRed{
+    background:#ff0000; 
+     margin-right: 5px;    
+     float:right;
+    color:#000;
+    text-align: center;
+    width:120px;
+}
+.bgOrange{
+    background:#ff8800;  
+     margin-right: 5px;  
+     float:right;
+    color:#000; 
+    text-align: center;
+    width:120px;
+}
+</style>

src/main.js

@@ -13,7 +13,7 @@ import {
   Form,
   Col,
   Row,
-  NavBar, RadioGroup, Radio, Cell, CellGroup, Grid, GridItem, Image as VanImage, Circle, Icon, List, Divider, PullRefresh,Picker 
+  NavBar, RadioGroup, Radio, Cell, CellGroup, Grid, GridItem, Image as VanImage, Circle, Icon, List, Divider, PullRefresh,Picker,Popup  
 } from 'vant'
 
 // 引入全局css
@@ -47,6 +47,7 @@ Vue.use(Button)
   .use(Divider)
   .use(PullRefresh)
   .use(Picker)
+  .use(Popup)
 
 /* eslint-disable no-new */
 new Vue({

src/router/index.js

@@ -17,6 +17,7 @@ import getsaclientcontactinfo from '@/components/getsaclientcontactinfo'
 import getsaclientsummary from '@/components/getsaclientsummary'
 import getsaclientsummarylist from '@/components/getsaclientsummarylist'
 import filterhouse from '@/components/filterhouse'
+import getsaroomlist from '@/components/getsaroomlist'
 Vue.use(Router)
 
 export default new Router({
@@ -106,5 +107,10 @@ export default new Router({
       name: 'filterhouse',
       component: filterhouse
     },
+    {     //房源查询
+      path: '/getsaroomlist',
+      name: 'getsaroomlist',
+      component: getsaroomlist
+    },
   ]
 })