房屋管理页面

shuishen

2023-10-31 83ddcb99e1fddf7b4087f18c5e8fbdda93080c1d

房屋管理页面

 pages.json

@@ -478,6 +478,15 @@
                        "navigationBarTextStyle": "white",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "roomControl/index",
                    "style": {
                        "navigationBarTitleText": "房屋管理",
                        "navigationBarBackgroundColor": "#5887f9",
                        "navigationBarTextStyle": "white",
                        "enablePullDownRefresh": false
                    }
                }

            ]

 subPackage/house/roomControl/index.vue

New file
@@ -0,0 +1,227 @@
<template>
    <view class="container">
        <view class="main">
            <view class="content">
                <u-form labelWidth="70" :model="form" :rules="rules" ref="form">
                    <box-title title=""></box-title>

                    <view class="basic-info mt-20">
                        <u-form-item class="form-item" labelWidth="100" label="绑定手机" required prop="location">
                            <u--input border="none" v-model="form.location" placeholder="请输入">
                            </u--input>
                        </u-form-item>

                        <u-form-item class="form-item" labelWidth="100" label="地址" required prop="location">
                            <u--input border="none" v-model="form.location">
                            </u--input>
                        </u-form-item>

                        <u-form-item class="form-item" labelWidth="100" label="物业月费" required prop="location">
                            <u--input border="none" v-model="form.location">
                            </u--input>
                        </u-form-item>

                        <u-form-item class="form-item" labelWidth="100" label="到期时间" required prop="location">
                            <u--input border="none" v-model="form.location">
                            </u--input>
                        </u-form-item>
                    </view>

                    <box-title class="mt-20" title="房屋外观"></box-title>
                    <view class="pic mt-20">
                        <u-upload :fileList="form.images" :previewFullImage="uploadConfig.previewFullImage"
                            :accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple"
                            :maxCount="uploadConfig.maxCount" :capture="uploadConfig.capture" @afterRead="afterReadImg"
                            @delete="deletePic">
                        </u-upload>
                    </view>

                    <box-title title="房屋标签"></box-title>
                    <view class="mt-20 flex label-btn-box b-c-w">
                        <view v-for="(item, index) in labelBtnList" :key="index">
                            <u-button color="#000" size="mini" type="primary" :plain="true" :text="item.name" @click="showLabelPopup(item)"></u-button>
                        </view>
                    </view>
                </u-form>
            </view>

            <view class="edit-btn">
                <u-button type="primary" text="修改数据"></u-button>
            </view>
        </view>

        <u-modal :show="popupShow" :closeOnClickOverlay="true" showCancelButton @cancel="popupShow = false" @confirm="popupConfirm">
            <view class="slot-content">
                <view class="flex_base">
                    安置房
                </view>

                <u-radio-group class="mt-40" v-model="labelValue" placement="row">
                    <u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in labelList" :key="index"
                        :label="item.name" :name="item.name" :activeColor="item.color" @change="radioChange">
                    </u-radio>
                </u-radio-group>

                <u--textarea class="mt-40" v-model="value1" placeholder="请输入内容"></u--textarea>
            </view>
        </u-modal>


        <!-- 租客关系下拉框 -->
        <my-select v-if="showList.relation" :show="showList.relation" v-model="form.relation" type="radio"
            popupTitle="请选择租客关系" :dataLists="dataList.relation" @cancel="showList.relation = false">
        </my-select>
    </view>
</template>

<script>
    import uploadMixin from "@/mixin/uploadMixin";
    export default {
        mixins: [uploadMixin],
        data() {
            return {
                form: {
                    relation: ""
                },
                showList: {
                    relation: false
                },
                nameList: {
                    relation: ""
                },
                dataList: {
                    relation: []
                },

                popupShow: false,

                labelBtnList: [{
                        name: '商品房'
                    },
                    {
                        name: '自建房'
                    },
                    {
                        name: '安置房'
                    },
                    {
                        name: '公房'
                    },
                    {
                        name: '危房'
                    },
                    {
                        name: '出租房'
                    },
                ],

                // 安置房弹框中
                labelList: [{
                        name: '撤销',
                        disabled: false,
                        color: '#EBEDF0'
                    },
                    {
                        name: '绿',
                        disabled: false,
                        color: '#07C160'
                    },
                    {
                        name: '黄',
                        disabled: false,
                        color: '#FF976A'
                    }, {
                        name: '红',
                        disabled: false,
                        color: '#EE0A24'
                    }
                ],
                labelValue: '苹果',
            }
        },
        created() {

        },
        mounted() {

        },
        onLoad(option) {

        },
        onShow() {

        },
        methods: {
            showLabelPopup(item) {
                this.popupShow = true
            },
			
            popupConfirm(){
                this.popupShow = false
            }
        }
    }
</script>

<style scoped lang="scss">
    .container {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background: #F9F9FA;

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

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

                .basic-info {

                    .form-item {
                        background-color: #ffffff;
                        padding: 5rpx 20rpx;
                        border-bottom: 1px solid #eff1f3;
                    }

                }

                .pic {
                    background-color: #ffffff;
                    padding: 40rpx 30rpx;
                }

                .label-btn-box {
                    padding: 10rpx 0;
					
                    &>view {
                        margin: 0 10rpx;
						
                        .u-button {
                            padding: 6rpx 8rpx;
                        }
                    }
                }

            }

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