yinchuan-community-all/mini-program/smart-city-yinchuan-wx/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="260" v-if="$isEmpty(residential_list)&&!loading" text="暂无小区信息"
                 src="https://szsq.nxzhsq.cn/community/miniofile/xlyq/empty/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';
                        getApp().globalData.postRequest(params, operation, function (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';
                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);
                    }
                    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: 30 rpx 30 rpx 20 rpx 30 rpx;
        border-bottom: 1 rpx solid #efefef;
        z-index: 99;
    }

    input {
        text-align: center;
        font-size: 32 rpx;
        padding: 5px;
        border-radius: 10 rpx;
        background-color: #fff;
    }

    .input {
        padding: 16 rpx;
        border-bottom: 1 rpx solid #e2e2e2;
    }

    .nav_section {
        width: 100%;
        background-color: #FFFFFF;
    }

    .nav_section_items {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 30 rpx;
        border-bottom: 2 rpx 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: 30 rpx;
        line-height: 50 rpx;
        color: #000;
        margin-bottom: 10 rpx;
    }

    .section_cont_tel .info {
        width: 500 rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
    }

    .local_city {
        padding: 30 rpx;
        position: relative;
        background: #fff;
    }

    .local_city .changeCity {
        padding: 30 rpx;
        position: absolute;
        right: 0 rpx;
        top: 0;
    }

    .local_city .icon {
        padding: 20 rpx;
        position: absolute;
        left: -36 rpx;
        top: 50%;
        transform: translate(0, -50%);
        font-size: 40 rpx;
    }
</style>