楼盘表相关页面

shuishen

2023-10-30 4efa964eede86720346feb454f5bb3c20d24d901

楼盘表相关页面

 pages.json

@@ -435,8 +435,44 @@
                }

            ]
        },


        // 楼栋管理
        {
            "root": "subPackage/house",
            "pages": [{
                    "path": "list/index",
                    "style": {
                        "navigationBarTitleText": "楼栋列表",
                        "navigationBarBackgroundColor": "#5887f9",
                        "navigationBarTextStyle": "white",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "family/index",
                    "style": {
                        "navigationBarTitleText": "楼盘",
                        "navigationBarBackgroundColor": "#5887f9",
                        "navigationBarTextStyle": "white",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "roomDetails/index",
                    "style": {
                        "navigationBarTitleText": "房屋详情",
                        "navigationBarBackgroundColor": "#5887f9",
                        "navigationBarTextStyle": "white",
                        "enablePullDownRefresh": false
                    }
                }

            ]
        }


    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",

 static/margin.css

@@ -59,6 +59,10 @@
    margin-top: 20rpx;
}

.mt-40 {
    margin-top: 40rpx;
}

.mt-55 {
    margin-top: 55rpx;
}

 subPackage/house/family/index.vue

New file
@@ -0,0 +1,310 @@
<template>
    <view class="container">
        <view class="flex f-d-c main">
            <view class="cur-header">
                <u-icon name="home" color="#fff"></u-icon>
                {{housingName}}/{{buildingName}}栋
            </view>
            <view class="h0 flex-1 build-list-box">
                <u-collapse :border="false">
                    <u-collapse-item style="border: none;" :title="item.unitName" :name="index"
                        v-for="(item, index) in buildingList" :key="index">
                        <view class="flex floor-content" v-for="(floor, floorIndex) in item.floorList"
                            :key="floorIndex">
                            <view class="floor-num-box flex a-i-c j-c-c">
                                {{floor.floorName}}
                            </view>
                            <view class="room-content">
                                <u-grid class="flex flex-wrap" col="2" :border="true">
                                    <u-grid-item v-for="(family, familyIndex) in floor.familyList" :key="familyIndex">
                                        <view class="room-box flex f-d-c">
											
                                            <view class="flex a-i-c j-c-s-b" v-show="family.resideStatus">
                                                <view class="l">{{family.houseHoldName}}</view>
                                                <view class="r flex">
                                                    <view v-show="family.resideStatus">
                                                        <u-icon name="photo"></u-icon>
                                                    </view>

                                                    <view v-show="family.isOwner">
                                                        <u-icon name="photo"></u-icon>
                                                    </view>
                                                </view>
                                            </view>

                                            <view class="flex">
                                                <view class="l flex">
                                                    <u-icon name="home" color="blue"></u-icon>
                                                    {{family.roomNumber}}
                                                </view>
                                                <view class="r">
													
                                                </view>
                                            </view>
											
                                        </view>
                                    </u-grid-item>
                                </u-grid>
                            </view>
                        </view>
                    </u-collapse-item>
                </u-collapse>
			
                <u-divider text="已经到底了"></u-divider>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        components: {},

        data() {
            return {
                housingName: '万达晶座',
                buildingName: 11,
                buildingList: [{
                        unitName: '一单元',
                        floorList: [{
                                floorName: '1层',
                                familyList: [{
                                        houseHoldName: '王子豪1',
                                        resideStatus: 1, // 1居住，0未居住
                                        isOwner: 1, // 1业主， 0不是业主
                                        roomNumber: 301
                                    },
                                    {
                                        houseHoldName: '王子豪2',
                                        resideStatus: 1, // 1居住，0未居住
                                        isOwner: 1, // 1业主， 0不是业主
                                        roomNumber: 301
                                    },
                                    {
                                        houseHoldName: '王子豪3',
                                        resideStatus: 0, // 1居住，0未居住
                                        isOwner: 0, // 1业主， 0不是业主
                                        roomNumber: 301
                                    },
                                    {
                                        houseHoldName: '王子豪4',
                                        resideStatus: 1, // 1居住，0未居住
                                        isOwner: 1, // 1业主， 0不是业主
                                        roomNumber: 301
                                    },
                                    {
                                        houseHoldName: '王子豪5',
                                        resideStatus: 1, // 1居住，0未居住
                                        isOwner: 1, // 1业主， 0不是业主
                                        roomNumber: 301
                                    },
                                    {
                                        houseHoldName: '王子豪6',
                                        resideStatus: 1, // 1居住，0未居住
                                        isOwner: 1, // 1业主， 0不是业主
                                        roomNumber: 301
                                    },
                                    {
                                        houseHoldName: '王子豪',
                                        resideStatus: 1, // 1居住，0未居住
                                        isOwner: 1, // 1业主， 0不是业主
                                        roomNumber: 301
                                    }
                                ]
                            },
                            {
                                floorName: '2层',
                                familyList: [{
                                        houseHoldName: '王子豪1',
                                        resideStatus: 1, // 1居住，0未居住
                                        isOwner: 1, // 1业主， 0不是业主
                                        roomNumber: 301
                                    },
                                    {
                                        houseHoldName: '王子豪2',
                                        resideStatus: 1, // 1居住，0未居住
                                        isOwner: 1, // 1业主， 0不是业主
                                        roomNumber: 301
                                    },
                                    {
                                        houseHoldName: '王子豪3',
                                        resideStatus: 1, // 1居住，0未居住
                                        isOwner: 1, // 1业主， 0不是业主
                                        roomNumber: 301
                                    },
                                    {
                                        houseHoldName: '王子豪4',
                                        resideStatus: 1, // 1居住，0未居住
                                        isOwner: 1, // 1业主， 0不是业主
                                        roomNumber: 301
                                    },
                                    {
                                        houseHoldName: '王子豪5',
                                        resideStatus: 1, // 1居住，0未居住
                                        isOwner: 1, // 1业主， 0不是业主
                                        roomNumber: 301
                                    },
                                    {
                                        houseHoldName: '王子豪6',
                                        resideStatus: 1, // 1居住，0未居住
                                        isOwner: 1, // 1业主， 0不是业主
                                        roomNumber: 301
                                    },
                                    {
                                        houseHoldName: '王子豪',
                                        resideStatus: 1, // 1居住，0未居住
                                        isOwner: 1, // 1业主， 0不是业主
                                        roomNumber: 301
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        unitName: '二单元',
                        floorList: [{
                                floorName: '1层',
                                familyList: [{
                                    houseHoldName: '王子豪1',
                                    resideStatus: 0, // 1居住，0未居住
                                    isOwner: 0, // 1业主， 0不是业主
                                    roomNumber: 301
                                }]
                            },
                            {
                                floorName: '2层',
                                familyList: [{
                                        houseHoldName: '王子豪1',
                                        resideStatus: 1, // 1居住，0未居住
                                        isOwner: 1, // 1业主， 0不是业主
                                        roomNumber: 301
                                    },
                                    {
                                        houseHoldName: '王子豪2',
                                        resideStatus: 1, // 1居住，0未居住
                                        isOwner: 1, // 1业主， 0不是业主
                                        roomNumber: 301
                                    },
                                    {
                                        houseHoldName: '王子豪3',
                                        resideStatus: 1, // 1居住，0未居住
                                        isOwner: 1, // 1业主， 0不是业主
                                        roomNumber: 301
                                    },
                                    {
                                        houseHoldName: '王子豪4',
                                        resideStatus: 1, // 1居住，0未居住
                                        isOwner: 1, // 1业主， 0不是业主
                                        roomNumber: 301
                                    },
                                    {
                                        houseHoldName: '王子豪5',
                                        resideStatus: 1, // 1居住，0未居住
                                        isOwner: 1, // 1业主， 0不是业主
                                        roomNumber: 301
                                    },
                                    {
                                        houseHoldName: '王子豪6',
                                        resideStatus: 1, // 1居住，0未居住
                                        isOwner: 1, // 1业主， 0不是业主
                                        roomNumber: 301
                                    },
                                    {
                                        houseHoldName: '王子豪',
                                        resideStatus: 1, // 1居住，0未居住
                                        isOwner: 1, // 1业主， 0不是业主
                                        roomNumber: 301
                                    },
                                    {
                                        houseHoldName: '王子豪',
                                        resideStatus: 1, // 1居住，0未居住
                                        isOwner: 1, // 1业主， 0不是业主
                                        roomNumber: 301
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        },

        onShow() {},

        methods: {

        }
    }
</script>

<style lang="scss" scoped>
    .container {
        width: 100%;
        height: 100%;

        display: flex;
        flex-direction: column;
        background: #F9F9FA;
        font-size: 26rpx;


        .main {
            position: relative;
            height: 0;
            flex: 1;
            overflow-y: auto;

            .cur-header {
                padding-left: 16rpx;
                display: flex;
                align-items: center;
                min-height: 96rpx;
                color: #fff;
                background: #6A9DFD;
            }

            .build-list-box {
                /deep/ .u-cell {
                    background: #A0C0FC !important;
                }

                /deep/ .u-collapse-item__content__text {
                    padding: 0 !important;
                }
            }

            /deep/ .floor-content {
                border-bottom: 1rpx solid #ccc;

                .floor-num-box {
                    padding: 0 20rpx !important;
                    background: #EAECF0;
                }

                .room-content {
                    width: 0;
                    flex: 1;
                    background: #FEFEFF;

                    .room-box {
                        padding: 8rpx;
                        justify-content: center;
                        align-items: center;
                        width: 100%;
                        min-height: 116rpx;
                        box-sizing: border-box;
						
                        &>view {
                            margin: auto;
                            width: 100%;
                        }
                    }

                    .u-grid-item:nth-child(2n-1) {
                        border-right: 1rpx solid #dadbde !important;
                    }
                }
            }
        }
    }
</style>

 subPackage/house/list/index.vue

New file
@@ -0,0 +1,83 @@
<template>
    <view class="container">
        <view class="flex f-d-c main">
            <view class="flex house-container">
                <view class="house-list-box" v-for="(item, index) in houseList">
                    <view class="l">
                        <u-icon name="home" color="#fff"></u-icon>
                    </view>
                    <view class="r">
                        {{item.title}}栋
                    </view>
                </view>
            </view>

            <u-divider text="已经到底了"></u-divider>
        </view>
    </view>
</template>

<script>
    export default {
        components: {},

        data() {
            return {
                houseList: [{
                        title: 11
                    },
                    {
                        title: 12
                    },
                    {
                        title: 13
                    }
                ]
            }
        },

        onShow() {},

        methods: {

        }
    }
</script>

<style lang="scss" scoped>
    .container {
        width: 100%;
        height: 100%;

        display: flex;
        flex-direction: column;
        background: #F9F9FA;
        font-size: 26rpx;
		
		
        .main {
            position: relative;
            height: 0;
            flex: 1;
            overflow-y: auto;

            .house-container {
                flex-wrap: wrap;
				
                .house-list-box {
                    margin: 16rpx;
                    padding: 0 16rpx;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: calc((100% - 96rpx) / 3);
                    height: 68rpx;
                    border-radius: 34rpx;
                    color: #fff;
                        background: linear-gradient(to right, #417BE9, #6D9FFB);
                    box-sizing: border-box;
                }
            }
        }
    }
</style>

 subPackage/house/roomDetails/index.vue

New file
@@ -0,0 +1,249 @@
<template>
    <view class="container">
        <view class="main">
            <view class="content">
                <view class="base b-c-w">
                    <view class="flex a-i-c">
                        <u-icon name="photo"></u-icon> 万达晶座：11栋
                    </view>
                    <view class="flex j-c-s-b">
                        <view>
                            一单元单元 2901室（共2人）
                        </view>
                        <view class="flex a-i-c">
                            <u-button size='small' shape="circle" type="primary" :plain="true" text="房屋管理"></u-button>
                        </view>
                    </view>
                </view>

                <view class="mt-40 owner-box b-c-w" v-for="(item, index) in ownerInfoList" :key="index">
                    <view class="flex">
                        <view class="l flex-1 flex">
                            <view class="flex_base">
                                <view class="head-img flex_base">
                                    <u--image shape="circle" :showLoading="true" :src="item.src" width="120rpx"
                                        height="120rpx"></u--image>
                                </view>
                            </view>
                            <view class="info">
                                <view>姓名：{{item.name}}</view>
                                <view class="flex">
                                    手机：{{item.phone}} <u-icon name="phone-fill" color="#4586FE"></u-icon>
                                </view>
                                <view class="flex">
                                    关系：
                                    <view class="flex a-i-c">
                                        <u-tag :text="item.relation" size="mini"
                                            :bgColor="item.relationType == 1 ? '#07C160' : '#1989FA'"></u-tag>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="r flex f-d-c j-c-s-a">
                            <view>
                                <u-button size='small' type="primary" :plain="true" text="资料管理"></u-button>
                            </view>
                            <view>
                                <u-button size='small' type="primary" :plain="true" text="标签管理"></u-button>
                            </view>
                        </view>
                    </view>
                    <view class="flex a-i-c j-c-s-b">
                        <view class="l flex">
                            <u-icon name="photo"></u-icon>
                            <u-icon name="photo"></u-icon>
                        </view>
                        <view class="r">
                            <u-icon name="trash-fill" color="red"></u-icon>
                        </view>
                    </view>
                </view>

                <view class="mt-20 rent-out-box">
                    <box-title :title="'出租管理'"></box-title>

                    <view class="mt-40 rent-out-list b-c-w" v-for="(item, index) in rentOutList" :key="index">
                        <view class="t flex j-c-s-b a-i-c">
                            <view class="l">
                                租客：{{item.name}}（共{{item.allNum}}人）
                            </view>
                            <view class="r">
                                <u-icon name="trash-fill" color="red"></u-icon>
                            </view>
                        </view>
                        <view class="t flex j-c-s-b a-i-c">
                            <view class="l">
                                {{item.startTime}} - {{item.endTime}}
                            </view>
                            <view class="r">
                                {{item.status == 1 ? '已到期' : '未到期'}}
                            </view>
                        </view>
                        <view class="btn-box flex j-c-s-a">
                            <u-button color="#CDF3DF" text="修改"></u-button>
                            <u-button color="#DAE7FF" text="续租"></u-button>
                            <u-button color="#FCCED3" text="终止"></u-button>
                        </view>
                    </view>
                </view>

                <u-divider text="已经到底了"></u-divider>
            </view>

            <view class="edit-btn">
                <veiw>
                    <u-button type="primary" text="添加成员"></u-button>
                </veiw>

                <view>
                    <u-button type="primary" :plain="true" text="添加租赁信息"></u-button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        components: {},

        data() {
            return {
                ownerInfoList: [{
                        src: 'https://cdn.uviewui.com/uview/album/1.jpg',
                        name: '郑洪峰',
                        phone: 13566687549,
                        relationType: 1,
                        relation: '业主'
                    },
                    {
                        src: 'https://cdn.uviewui.com/uview/album/1.jpg',
                        name: '郑小峰',
                        phone: 13547687549,
                        relationType: 3,
                        relation: '儿子'
                    }
                ],
				
                rentOutList: [
                    {
                        name: '皇阿玛',
                        startTime: '2023-01-01',
                        endTime: '2024-01-01',
                        status: 0, // 0 未到期，1已到期
                        allNum: 1
                    },
                    {
                        name: '皇阿玛two',
                        startTime: '2023-01-01',
                        endTime: '2024-01-01',
                        status: 0, // 0 未到期，1已到期
                        allNum: 2
                    }
                ]
            }
        },

        onShow() {},

        methods: {

        }
    }
</script>

<style lang="scss" scoped>
    .container {
        width: 100%;
        height: 100%;

        display: flex;
        flex-direction: column;
        background: #F9F9FA;
        font-size: 26rpx;


        .main {
            position: relative;
            height: 0;
            flex: 1;
            display: flex;
            flex-direction: column;

            .content {
                height: 0;
                flex: 1;
                overflow-y: auto;

                .base {
                    &>view {
                        padding: 0 10rpx;
                        height: 96rpx;
                        line-height: 96rpx;
                        border-bottom: 1rpx solid #EBEDF0;
                    }
                }

                .owner-box {


                    .l {
                        align-items: center;

                        .head-img {
                            width: 164rpx;
                            height: 164rpx;
                            background: #EBEDF0;
                            border-radius: 50%;
                        }

                        .info {
                            margin-left: 16rpx;

                            &>view {
                                height: 66rpx;
                                line-height: 66rpx;
                            }
                        }
                    }

                    &>view {
                        padding: 10px;
                    }

                    &>view:last-child {
                        height: 44rpx;
                        border-top: 1rpx solid #EBEDF0;
                    }
                }

                .rent-out-box {

                    .rent-out-list {
                        padding: 20rpx 16rpx;
						
                        .t {
                            height: 72rpx;
							
                        }

                        .btn-box {
                            &>.u-button {
                                margin: 0 16rpx;
                            }
                        }
                    }
                }
            }

            .edit-btn {
                height: 116rpx;
                display: flex;
                justify-content: space-around;
                align-items: center;
                background: #fff;
                border-top: 1rpx solid #ccc;
            }
        }
    }
</style>