社区房屋loading效果

guanqb

2023-01-17 0eebcd2a8cadd5e144081c2cd5813fdff5f2754a

社区房屋loading效果

 src/views/house/index.vue

@@ -305,57 +305,68 @@
                                    </div>
                                </div>
                            </div>-->
                            <div class="floor-outBox">
                                <div @click="lastFloorBtn" class="floorBtn" v-show="lastFloorShow">
                                    <i class="el-icon-caret-left"></i>
                                </div>
                                <div class="floor-box">
                                    <div class="floor-num" style="left: 0">
                                        <div
                                            :class="{ on: floorsType == index }"
                                            @click="floorsType = index"
                                            v-for="index in Math.ceil(unitHouseChoosed.length / 5)"
                                            :key="index"
                                        >
                                            {{ unitHouseChoosed[index * 5 - 5].floor_num }}-{{
                                            unitHouseChoosed[index *
                                            5
                                            - 1]? unitHouseChoosed[index * 5
                                            - 1].floor_num : unitHouseChoosed[unitHouseChoosed.length - 1].floor_num
                                            }}层
                            <el-main
                                v-loading="pictLoading"
                                element-loading-background="rgba(17, 38, 163, 0.1)"
                                element-loading-text="数据正在加载中"
                                element-loading-spinner="el-icon-loading"
                            >
                                <div class="floor-outBox">
                                    <div
                                        @click="lastFloorBtn"
                                        class="floorBtn"
                                        v-show="lastFloorShow"
                                    >
                                        <i class="el-icon-caret-left"></i>
                                    </div>
                                    <div class="floor-box">
                                        <div class="floor-num" style="left: 0">
                                            <div
                                                :class="{ on: floorsType == index }"
                                                @click="floorsType = index"
                                                v-for="index in Math.ceil(unitHouseChoosed.length / 5)"
                                                :key="index"
                                            >
                                                {{ unitHouseChoosed[index * 5 - 5].floor_num }}-{{
                                                unitHouseChoosed[index *
                                                5
                                                - 1]? unitHouseChoosed[index * 5
                                                - 1].floor_num : unitHouseChoosed[unitHouseChoosed.length - 1].floor_num
                                                }}层
                                            </div>
                                        </div>
                                    </div>
                                    <div
                                        @click="nextFloorBtn"
                                        class="floorBtn rightFloorBtn"
                                        v-show="nextFloorShow"
                                    >
                                        <i class="el-icon-caret-right"></i>
                                    </div>
                                </div>
                                <div
                                    @click="nextFloorBtn"
                                    class="floorBtn rightFloorBtn"
                                    v-show="nextFloorShow"
                                >
                                    <i class="el-icon-caret-right"></i>
                                </div>
                            </div>

                            <div class="floor-detail">
                                <div
                                    v-for="(item, index) in unitHouseChoosed.slice((floorsType - 1) * 5, floorsType * 5)"
                                    :key="index"
                                >
                                    <div class="title">{{ item.floor_num }}层：</div>
                                    <div class="detail">
                                        <div
                                            v-for="(value, index) in item.floor_house"
                                            :key="index"
                                            @click="residentDetailsClick(value)"
                                        >
                                            <!-- :class="[{ 'chuzu': value.houseType == '出租' }, { 'zizhu': value.houseType == '自住' }, { 'kongzhi': value.houseType == '空置' }, { 'shangye': value.houseType == '商业' }]" -->
                                            {{ value.house_num }}
                                            <!-- <div class="flow"></div>
                                <div class="floor-detail">
                                    <div
                                        v-for="(item, index) in unitHouseChoosed.slice((floorsType - 1) * 5, floorsType * 5)"
                                        :key="index"
                                    >
                                        <div class="title">{{ item.floor_num }}层：</div>
                                        <div class="detail">
                                            <div
                                                v-for="(value, index) in item.floor_house"
                                                :key="index"
                                                @click="residentDetailsClick(value)"
                                            >
                                                <!-- :class="[{ 'chuzu': value.houseType == '出租' }, { 'zizhu': value.houseType == '自住' }, { 'kongzhi': value.houseType == '空置' }, { 'shangye': value.houseType == '商业' }]" -->
                                                {{ value.house_num }}
                                                <!-- <div class="flow"></div>
                                            <div class="focus"></div>
                                            <div class="warning"></div>-->
                                                <div class="warning"></div>-->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </el-main>
                        </div>
                    </div>

@@ -726,7 +737,7 @@
            },
            peopleName: '',
            callPhone: '',

            pictLoading: false,
        }
    },
    watch: {
@@ -855,6 +866,7 @@
                    newArr.push({ floor_num: floor, floor_house: houseArr })
                })
                this.unitHouseChoosed = newArr
                this.pictLoading = false
                console.log('unitHouseChoosed', this.unitHouseChoosed)
            })
        },
@@ -875,6 +887,7 @@
        },

        buildingClick (item) {
            this.pictLoading = true
            this.buildingChoosed = item
            this.floorInfo.elev = item.elev
            this.floorInfo.floor_num = item.floor_num
@@ -1608,6 +1621,10 @@
                        .condo {
                            margin-top: 5px;
                        }

                        .el-main {
                            padding: 0;
                        }
                    }

                    .house-element-info {