yinchuan-community-all/mini-program/smart-city-yinchuan-wx/pages/choosePlot/chooseUnit/chooseUnit.vue

<template>
    <view :class="$isEmpty(unit_list)?'empty-wrap':''">
        <view class="bg-gray" style="padding: 16rpx 30rpx;">
            <text>当前选择楼栋</text>
        </view>
        <view class="bg-white"
              style="padding:30rpx 30rpx 20rpx 30rpx;border-bottom: 1rpx solid #efefef;display: flex;justify-content: space-between;">
            <view class="text-blue">
                <text class="">{{building_name}}</text>
            </view>
            <view class="cu-btn line-blue sm round" @tap="change">
                <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="unit_list.length>0">
            <u-cell-item @click="jump(item)" v-for="(item, index) in unit_list" :key="index" :title="item.name"
                         :arrow="false"></u-cell-item>
        </u-cell-group>
        <u-empty marginTop="200" icon-size="260" v-if="$isEmpty(unit_list)" text="暂无单元信息"
                 src="https://szsq.nxzhsq.cn/community/miniofile/xlyq/empty/empty.png"></u-empty>

    </view>
</template>

<script>
    var app = getApp();

    export default {
        data() {
            return {
                unit_list: null,
                //小区
                residential_name: null,
                //楼栋
                building_name: null
            };
        },

        components: {},
        props: {},

        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function (options) {
            //小区名字
            this.residential_name = options.residential_name

            //楼栋名字
            this.building_name = options.building_name;

            var buildingId = options.building_id;
            this.getUnit(buildingId);
        },
        methods: {
            change() {
                uni.navigateBack({
                    delta: 1
                })
            },
            jump(item) {
                app.globalData.unitId = item.id
                let params = {
                    residential_name: this.residential_name,//小区名称
                    building_name: this.building_name,//楼栋名称
                    building_id: this.building_id,//楼栋id
                    unit_name: item.name,//单元名称
                    unit_id: item.id,//单元id
                }
                uni.navigateTo({
                    url: "/pages/choosePlot/chooseRoom/chooseRoom" + this.$u.queryParams(params)
                })
            },
            //根据楼栋id获取楼栋信息
            getUnit: function (buildingId) {
                let that = this;
                let params = {};
                params['building_id'] = buildingId;
                let operation = 'estate/getUnitsByBuildingId';
                app.globalData.postRequest(params, operation, function (res) {
                    //获取成功
                    if (res.data.result_code == 1) {
                        that.setData({
                            unit_list: res.data.list
                        });
                    } else {
                        app.globalData.oneFailHint(res.data.result_msg);
                    }
                });
            }
        }
    };
</script>
<style>
    /* pages/choosePlot/chooseUnit/chooseUnit.wxss */
    page {
        overflow-y: scroll
    }

    .nav_section {
        width: 100%;
        background: #fff;

    }

    .nav_section_items {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 30 rpx;
        border-bottom: 2 rpx solid #ddd;
        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;
    }

    .empty-wrap {
        background-color: #FFFFFF;
        min-height: 100vh;
    }
</style>