CommunityApp/pages/choosePlot/choosePlot.vue

<template>
<view>
	<view class="cu-bar bg-white search search " >
		<view class="search-form round">
			<text class="cuIcon-search"></text>
			<input @input="nameInputSearch"  placeholder="输入小区名称" placeholder-style="font-size: 28rpx"></input>
		</view>
	</view>
	
	<view class="bg-gray" style="padding: 12rpx 30rpx;">
		<text >当前选择城市：</text>
	</view>
	<view class="cf city" 	 >
		<view class="text-blue fl">
			<text class="cuIcon-locationfill padding-right-10"></text>
			<text class="">{{city}}{{county}}</text>
		</view>
		<view class="cu-btn line-blue sm round fr" @tap="switchCity">
			<text class="cuIcon-refresh padding-right-10"></text>
			<text>切换城市</text>
		</view>
	</view>
	<view class="bg-gray" style="padding: 12rpx 30rpx;">
		<text >选择小区：</text>
	</view>
	<u-cell-group v-if="!$isEmpty(residential_list)">
		<u-cell-item  @click="jump(item)"  v-for="(item, index) in residential_list" :key="index"  :title="item.name" :arrow="false"></u-cell-item>
	</u-cell-group>
	<u-divider bg-color="#ffffff" v-if="residential_list.length>=10" height="80">没有更多了</u-divider>
	<u-empty marginTop="200" icon-size="160"  v-if="$isEmpty(residential_list)&&!loading" text="暂无小区信息" src="/static/common/empty.png"></u-empty>
	<u-back-top :scroll-top="scrollTop"></u-back-top>
</view>
</template>

<script>
const config = require("../../utils/config.js");
var app = getApp();

export default {
  data() {
    return {
      //location: app.defaultCity,
      //county: app.defaultCounty,
	  //市的名字
      city: '',
	  //区的名字
      county: '',
      currentCityCode: null,
      //选择的当前城市所在的区编号，
      residential_list: null,
      //小区数据列表
      sign: false,
	  loading:true,
	  scrollTop:0,
    };
  },
   onPageScroll(e) {
		this.scrollTop = e.scrollTop;
   },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
	  console.log(options)
	if(!this.$isEmpty(options.city)&&!this.$isEmpty(options.county)&&!this.$isEmpty(options.currentCityCode)){
		this.currentCityCode=options.currentCityCode
		this.city=options.city
		this.county=options.county
		this.getCommunity();
	}else{
		uni.showLoading({
		  mask: true,
		  title: '定位中'
		});
		this.getLocation();
	}
    if (options.from_index == 'index') {
      this.setData({
        sign: true
      });
    } else {
      this.setData({
        sign: false
      });
    }
  },
  onShow() {
  	if (this.canReset) {
  		this.getCommunity()
  	}
	this.canReset=true
  },
  methods: {
    jump(item) {
	  let that=this
      let id = item.id;
	  app.globalData.residentialId=id
      let name = item.name;

      if (this.sign) {
        //清空全局list
        app.globalData.room_list = null;
        app.globalData.device_list = null;
        uni.setStorageSync('plotName', name);
        uni.navigateTo({
          url: '/pages/index/index?residential_id=' + id + '&residential_name=' + name
        });
		
      }else {
		  let params={
			  residential_name:name,
			  residential_id:id
		  }
        uni.navigateTo({
        	url:"./chooseBuilding/chooseBuilding"+this.$u.queryParams(params)
        })
      }
    },
    //切换城市
    switchCity: function () {
      //兼容地图插件
      app.globalData.city = this.city;
      app.globalData.currentCityCode = this.currentCityCode;
      app.globalData.county = this.county;
      uni.navigateTo({
        url: '/pages/switchcity/switchcity'
      });
    },
    getLocation: function () {
      this.setData({
        county: ''
      });
      const that = this;
      uni.getLocation({
        type: 'wgs84',
        success: function (res) {
          let latitude = res.latitude;
          let longitude = res.longitude;
		  
		  let params={
			  location:latitude+","+longitude,
			  key:config.key,
		  }
		  // let operation = 'miniprogram/ws/geocoder/v1/location';
		  that.$http.getLocation(params).then(res =>{
			  uni.hideLoading(); // console.log(res)
			  let info=res.data.result.result.ad_info
			  that.setData({
			    city: info.city,
			    currentCityCode: info.adcode,
			    //区code  如，越秀区--440104
			    county: info.district
			  }); //兼容地图插件
			  app.globalData.city = info.city;
			  app.globalData.currentCityCode = info.adcode;
			  app.globalData.county = info.district; //拉取小区信息
			  
			  that.getCommunity();
			   
		  });
        },
		fail(err) {
			uni.hideLoading(); // console.log(res)
			that.setData({
			  city: '广州市',
			  currentCityCode: '440105',
			  county: '海珠区'
			});
			app.globalData.city = '广州市';
			app.globalData.currentCityCode = '440105';
			app.globalData.county = '海珠区'; //拉取小区信息
			that.getCommunity();
		}
      });
    },
    //根据区编号获取小区列表
    getCommunity: function (residential_name) {
		uni.showLoading({
			title:"加载中.."
		})
      let that = this;
      let params = {};
      params['region_area'] = this.currentCityCode;
      params['residential_name'] = residential_name;
      // let operation = 'estate/getByRegionArea';
      that.$http.getResidentialByRegionArea(params).then (res=>{
		  //获取成功
		  if (res.data.result_code == 1) {
		    that.setData({
		      residential_list: res.data.list
		    });
		  } else {
		    app.globalData.oneFailHint(res.data.result_msg);
		  }
		  that.loading=false
		  uni.hideLoading()
       
      });
    },
    //输入小区名字联想搜索
    nameInputSearch: function (e) {
      let residential_name = e.detail.value;
      this.getCommunity(residential_name);
    } 
  }
};
</script>
<style>
page{
  overflow-y: scroll;
  background-color:#FFFFFF
}

.city{
	padding:30rpx 30rpx 20rpx 30rpx;
	border-bottom: 1rpx solid #efefef;
	z-index: 99;
}

input {
  text-align: center;
  font-size: 32rpx;
  padding: 5px;
  border-radius:10rpx;
  background-color: #fff;
}
.input {
  padding: 16rpx;
  border-bottom: 1rpx solid #e2e2e2;    
}
.nav_section {
  width: 100%;
  background-color: #FFFFFF;
}

.nav_section_items {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 2rpx solid #efefef;
  position: relative;
}

.nav_section_items:active {
  background: #ddd;
}



.nav_section_items .section_cont view {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.nav_section_items .section_cont .section_cont_sub {
  font-size: 30rpx;
  line-height: 50rpx;
  color: #000;
  margin-bottom: 10rpx;
}
.section_cont_tel .info{
  width: 500rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
}
.local_city{
    padding: 30rpx;
    position:relative;
    background: #fff;
}
.local_city .changeCity{
    padding: 30rpx;
    position: absolute;
    right: 0rpx;
    top: 0;
}
.local_city .icon{
    padding: 20rpx;
    position: absolute;
    left: -36rpx;
    top: 50%;
    transform: translate(0,-50%);
    font-size: 40rpx;
}
</style>