CommunityApp/pages/choosePlot/choosePlot.vue

<template>
<view>
	<view class="cu-bar bg-white 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  style="padding:30rpx 30rpx 20rpx 30rpx;border-bottom: 1rpx solid #efefef;display: flex;justify-content: space-between;">
		<view class="text-blue">
			<text class="cuIcon-location padding-right-10"></text>
			<text class="">{{city}}{{county}}</text>
		</view>
		<view class="cu-btn line-blue sm round" @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>
<view class="nav_section" v-if="residential_list.length>0">
  <view v-for="(item, index) in residential_list" :key="index" @tap="jump" :data-id="item.id" :data-name="item.name">
    <view class="nav_section_items">
      <view class="section_cont">
        <view class="section_cont_tel">
          <text class="info">{{item.name}}</text>
        </view>
      </view>
    </view>
  </view>
</view>
<view class="default" v-if="residential_list==null || residential_list.length==0">
  <image src="http://139.9.103.171:1888/img/image/default_icon.png"></image>
  <view>
    <text>没有获取到小区信息</text>
  </view>
</view>
</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
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  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() {
  	
  },
  methods: {
    jump(e) {
	  let that=this
      let id = e.currentTarget.dataset.id;
	  app.globalData.residentialId=id
      let name = e.currentTarget.dataset.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 {
		 console.log("1111")
        uni.navigateTo({
          url: '/pages/choosePlot/chooseUnit/chooseUnit?residential_id=' + id + '&residential_name=' + name,
          success: function (res) {
			  
		  },
          fail: function (res) {
			  console.log(res)
		  },
          complete: function (res) {}
        });
      }
    },

    //切换城市
    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 () {
      //console.log("正在定位城市");
      this.setData({
        county: ''
      });
      const that = this;
      uni.getLocation({
        type: 'wgs84',
        success: function (res) {
          let latitude = res.latitude;
          let longitude = res.longitude;
          uni.request({
            url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=${config.key}`,
            success: res => {
              uni.hideLoading(); // console.log(res)

              console.log(res.data.result.ad_info.city + res.data.result.ad_info.adcode);
              that.setData({
                city: res.data.result.ad_info.city,
                currentCityCode: res.data.result.ad_info.adcode,
                //区code  如，越秀区--440104
                county: res.data.result.ad_info.district
              }); //兼容地图插件

              app.globalData.city = res.data.result.ad_info.city;
              app.globalData.currentCityCode = res.data.result.ad_info.adcode;
              app.globalData.county = res.data.result.ad_info.district; //拉取小区信息

              that.getCommunity();
            }
          });
        }
      });
    },
    //根据区编号获取小区列表
    getCommunity: function (residential_name) {
      let that = this;
      let params = {};
      params['region_area'] = this.currentCityCode;
      params['residential_name'] = residential_name;
      let operation = 'estate/getByRegionArea';
      app.globalData.postRequest(params, operation, function (res) {
        //获取成功
        if (res.data.result_code == 1) {
          that.setData({
            residential_list: res.data.list
          });
        } else {
          app.globalData.oneFailHint(res.data.result_msg);
        }
      });
    },
    //输入小区名字联想搜索
    nameInputSearch: function (e) {
      let residential_name = e.detail.value;
      this.getCommunity(residential_name);
    } // //小程序 点击搜索 按钮时  事件
    // inputSearch(e) {
    //   console.info("11111111");
    //   debugger
    // },

  }
};
</script>
<style>
page{
  overflow-y: scroll;
  background-color:#FFFFFF
}
input {
  text-align: center;
  font-size: 32rpx;
  padding: 5px;
  border-radius:10rpx;
  background-color: #fff;
}
.input {
  padding: 16rpx;
  border-bottom: 1rpx solid #e2e2e2;    
}


/* pages/myHome/myHome.wxss */

.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;
}
.default {
  text-align: center;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.default image {
  width: 128rpx;
  height: 128rpx;
  display: inline-block;
}
</style>