租客详情、公共维修、标签管理更新

GULIMMO

2023-11-11 1fa5d1c27506623db4be7fa9d3f517acb6988c2c

租客详情、公共维修、标签管理更新

 components/boxTitle/index2.vue

New file
@@ -0,0 +1,45 @@
<template>

    <view class="box-title">

        <view class="line">



        </view>

        <view class="text">

            {{ title }}

        </view>

    </view>

</template>



<script>

    export default {

        props: {

            title: {

                type: String,

                default: ''

            }

        },



        data() {

            return {



            }

        }

    }

</script>



<style lang="scss" scoped>

    .box-title {

        display: flex;
        align-items: center;
        color: #333;
        margin-bottom: 30rpx;

        .line {

            width: 6rpx;

            height: 30rpx;

            margin-right: 10rpx;

            background-color: #017BFC;

        }
        .text {
            font-size: 32rpx;
        }

    }

</style>

 pages.json

@@ -180,7 +180,7 @@
            "pages": [{
                    "path": "views/cscj",
                    "style": {
                        "navigationBarTitleText": "场所维护",
                        "navigationBarTitleText": "场所采集",
                        "enablePullDownRefresh": false,
                        "navigationBarBackgroundColor": "#4586fe",
                        "navigationBarTextStyle": "white"
@@ -209,7 +209,7 @@
                {
                    "path": "views/audit",
                    "style": {
                        "navigationBarTitleText": "网格任务审核",
                        "navigationBarTitleText": "标签事件",
                        "enablePullDownRefresh": false,
                        "navigationBarBackgroundColor": "#fff",
                        "navigationBarTextStyle": "black"
@@ -219,7 +219,7 @@
                    "path": "views/cshw",
                    "style": {
                        "onReachBottomDistance": 10,
                        "navigationBarTitleText": "网格任务审核",
                        "navigationBarTitleText": "场所维护",
                        "enablePullDownRefresh": false,
                        "navigationBarBackgroundColor": "#fff",
                        "navigationBarTextStyle": "black"
@@ -246,7 +246,7 @@
                {
                    "path": "views/report",
                    "style": {
                        "navigationBarTitleText": "网格任务审核",
                        "navigationBarTitleText": "保修报事",
                        "enablePullDownRefresh": false,
                        "navigationBarBackgroundColor": "#fff",
                        "navigationBarTextStyle": "black"
@@ -409,8 +409,8 @@
                    "path": "member/householdLabel",
                    "style": {
                        "navigationBarTitleText": "标签管理",
                        "navigationBarBackgroundColor": "#5887f9",
                        "navigationBarTextStyle": "white",
                        "navigationBarBackgroundColor": "#fff",
                        "navigationBarTextStyle": "black",
                        "enablePullDownRefresh": false
                    }
                },
@@ -418,8 +418,8 @@
                    "path": "roomControl/index",
                    "style": {
                        "navigationBarTitleText": "房屋管理",
                        "navigationBarBackgroundColor": "#5887f9",
                        "navigationBarTextStyle": "white",
                        "navigationBarBackgroundColor": "#fff",
                        "navigationBarTextStyle": "black",
                        "enablePullDownRefresh": false
                    }
                },

 subPackage/bs/views/addRepair.vue

@@ -1,182 +1,184 @@
<template>
    <view class="">
        <view class="site-box bgc-ff flex">
            <view class="flex a-i-c">
                <u-icon name="map-fill" color="#AAAAAA"></u-icon>
                <text class="f-28 c-aa ml-20">当前小区：</text>
            </view>

            <text class="address f-28">{{ curSelectSite.name }}</text>
        </view>
        <view class="content bgc-ff">
            <u-form labelPosition="left" :model="info" :rules="rules" ref="form" labelWidth="90"
                :labelStyle="{fontSize:'28rpx'}">
                <u-form-item label="姓名" prop="realName" borderBottom ref="realName">
                    <u-input v-model="info.realName" border="none" placeholder="请输入" placeholderClass="f-28 c-99"
                        inputAlign="right"></u-input>
                </u-form-item>
                <u-form-item label="手机" prop="phone" :borderBottom="false" ref="phone">
                    <u-input v-model="info.phone" border="none" placeholder="请输入" placeholderClass="f-28 c-99"
                        inputAlign="right"></u-input>
                </u-form-item>
            </u-form>
        </view>

        <view class="upload bgc-ff">
            <view class="f-28 mb-20">描述</view>
            <u-textarea v-model="info.remark" placeholder="请输入内容" border="none"
                placeholderClass="c-99 f-26"></u-textarea>
            <view class="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">
                    <view class="upload-item upload-icon flex_base">
                        <u-icon name="/static/icon/upload.png" width="60rpx" height="60rpx"></u-icon>
                    </view>
                </u-upload>
            </view>
        </view>


        <button class="submit-btn" @click="sumitInfo">提交</button>
        <button class="list-btn" @click="navigatorPage">我上报的事件</button>

    </view>
</template>

<script>
    import uploadMixin from "@/mixin/uploadMixin";
    import {
        save
    } from "@/api/task/taskReportForRepairs";
    export default {
        mixins: [uploadMixin],
        data() {
            return {
                info: {
                    realName: "",
                    phone: "",
                    remark: "",
                    type: -1,
                },
                rules: {
                    'realName': {
                        type: 'string',
                        required: true,
                        message: '请输入姓名',
                        trigger: ['blur', 'change']
                    },
                    'phone': {
                        type: 'string',
                        required: true,
                        message: '请输入手机号',
                        trigger: ['blur', 'change']
                    },
                },
                desc: "",
                title: "",
                curSelectSite: {}
            }
        },
        onLoad(option) {
            this.title = option.title
            uni.setNavigationBarTitle({
                title: this.title
            })
            this.info.type = option.type
        },
        onShow() {
            this.curSelectSite = uni.getStorageSync('curSelectSite')
        },
        methods: {
            sumitInfo() {
                const that = this
                this.$refs.form.validate().then(valid => {
                    if (this.form.images.length > 0) {
                        let urls = []
                        this.form.images.forEach(e => {
                            urls.push(e.name)
                        })
                        this.info.imageUrls = urls.join(",")
                    }
                    save(that.info).then(res => {
                        uni.showToast({
                            icon: 'success',
                            title: '提交成功',
                            success() {
                                setTimeout(() => {
                                    that.$u.func.globalNavigator("", "navBack")
                                }, 1000)
                            }
                        })
                    })
                })
            },
            navigatorPage() {
                let url = "/subPackage/bs/views/repairList" + "?title=" + this.title + "&type=" + this.info.type
                this.$u.func.globalNavigator(url, "navTo")
            }
        }
    }
</script>

<style lang="less">
    page {
        background-color: #F5F5F5;
    }

    .content {
        margin: 20rpx 30rpx;
        padding: 0 30rpx;
    }

    .site-box {
        padding: 30rpx;
        margin: 20rpx 30rpx;
        border-radius: 4rpx;

        .c-aa {
            color: #aaa;
        }

        .address {
            width: 60%;
            margin-left: 25rpx;
        }
    }

    .upload-item {
        width: 140rpx;
        height: 140rpx;
        border: 1px solid #EEEEEE;
    }

    .upload {
        margin: 0 30rpx;
        padding: 30rpx;


    }

    .submit-btn {
        width: 690rpx;
        height: 78rpx;
        line-height: 78rpx;
        background: linear-gradient(163deg, #01BDFC 0%, #017BFC 100%);
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        font-size: 32rpx;
        color: #fff;
        margin-top: 50rpx;
    }

    .list-btn {
        width: 690rpx;
        height: 78rpx;
        line-height: 78rpx;
        background: linear-gradient(163deg, #c7d7dc 0%, #c3cdd8 100%);
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        font-size: 32rpx;
        color: #fff;
        margin-top: 50rpx;
    }
<template>

    <view class="">

        <view class="site-box bgc-ff flex">

            <view class="flex a-i-c">

                <u-icon name="map-fill" color="#AAAAAA"></u-icon>

                <text class="f-28 c-aa ml-20">当前小区：</text>

            </view>



            <text class="address f-28">{{ curSelectSite.name }}</text>

        </view>

        <view class="content bgc-ff">

            <u-form labelPosition="left" :model="info" :rules="rules" ref="form" labelWidth="90"

                :labelStyle="{fontSize:'28rpx'}">

                <u-form-item label="姓名" prop="realName" borderBottom ref="realName">

                    <u-input v-model="info.realName" border="none" placeholder="请输入" placeholderClass="f-28 c-99"

                        inputAlign="right"></u-input>

                </u-form-item>

                <u-form-item label="手机" prop="phone" :borderBottom="false" ref="phone">

                    <u-input v-model="info.phone" border="none" placeholder="请输入" placeholderClass="f-28 c-99"

                        inputAlign="right"></u-input>

                </u-form-item>

            </u-form>

        </view>



        <view class="upload bgc-ff">

            <view class="f-28 mb-20">描述</view>

            <u-textarea v-model="info.remark" placeholder="请输入内容" border="none"

                placeholderClass="c-99 f-26"></u-textarea>

            <view class="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">

                    <view class="upload-item upload-icon flex_base">

                        <u-icon name="/static/icon/upload.png" width="60rpx" height="60rpx"></u-icon>

                    </view>

                </u-upload>

            </view>

        </view>





        <button class="submit-btn" @click="sumitInfo">提交</button>

        <button class="list-btn" @click="navigatorPage">我上报的事件</button>



    </view>

</template>



<script>

    import uploadMixin from "@/mixin/uploadMixin";

    import {

        save

    } from "@/api/task/taskReportForRepairs";

    export default {

        mixins: [uploadMixin],

        data() {

            return {

                info: {

                    realName: "",

                    phone: "",

                    remark: "",

                    type: -1,

                },

                rules: {

                    'realName': {

                        type: 'string',

                        required: true,

                        message: '请输入姓名',

                        trigger: ['blur', 'change']

                    },

                    'phone': {

                        type: 'string',

                        required: true,

                        message: '请输入手机号',

                        trigger: ['blur', 'change']

                    },

                },

                desc: "",

                title: "",

                curSelectSite: {}

            }

        },

        onLoad(option) {

            this.title = option.title

            uni.setNavigationBarTitle({

                title: this.title

            })

            this.info.type = option.type

        },

        onShow() {

            this.curSelectSite = uni.getStorageSync('curSelectSite')

            this.info.addressCode = this.curSelectSite.id
            console.log(this.curSelectSite);

        },

        methods: {

            sumitInfo() {

                const that = this

                this.$refs.form.validate().then(valid => {

                    if (this.form.images.length > 0) {

                        let urls = []

                        this.form.images.forEach(e => {

                            urls.push(e.name)

                        })

                        this.info.imageUrls = urls.join(",")

                    }

                    save(that.info).then(res => {

                        uni.showToast({

                            icon: 'success',

                            title: '提交成功',

                            success() {

                                setTimeout(() => {

                                    that.$u.func.globalNavigator("", "navBack")

                                }, 1000)

                            }

                        })

                    })

                })

            },

            navigatorPage() {

                let url = "/subPackage/bs/views/repairList" + "?title=" + this.title + "&type=" + this.info.type

                this.$u.func.globalNavigator(url, "navTo")

            }

        }

    }

</script>



<style lang="less">

    page {

        background-color: #F5F5F5;

    }



    .content {

        margin: 20rpx 30rpx;

        padding: 0 30rpx;

    }



    .site-box {

        padding: 30rpx;

        margin: 20rpx 30rpx;

        border-radius: 4rpx;



        .c-aa {

            color: #aaa;

        }



        .address {

            width: 60%;

            margin-left: 25rpx;

        }

    }



    .upload-item {

        width: 140rpx;

        height: 140rpx;

        border: 1px solid #EEEEEE;

    }



    .upload {

        margin: 0 30rpx;

        padding: 30rpx;





    }



    .submit-btn {

        width: 690rpx;

        height: 78rpx;

        line-height: 78rpx;

        background: linear-gradient(163deg, #01BDFC 0%, #017BFC 100%);

        border-radius: 8rpx 8rpx 8rpx 8rpx;

        font-size: 32rpx;

        color: #fff;

        margin-top: 50rpx;

    }



    .list-btn {

        width: 690rpx;

        height: 78rpx;

        line-height: 78rpx;

        background: linear-gradient(163deg, #c7d7dc 0%, #c3cdd8 100%);

        border-radius: 8rpx 8rpx 8rpx 8rpx;

        font-size: 32rpx;

        color: #fff;

        margin-top: 50rpx;

    }

</style>

 subPackage/bs/views/rentDetail.vue

@@ -73,9 +73,9 @@
            @cancel="dueTimeShow = false"></u-datetime-picker>



        <view class="bottom-tools">

            <u-button class="btn-item" type="error" @click="isModelShow = true" v-if="rentId !== ''">删除</u-button>

            <u-button class="btn-item" type="success" @click="verify"
            v-if="!auditStatus && currentRole.roleAlias === 'wgy'">确认</u-button>

            <u-button class="btn-item" type="error" @click="isModelShow = true"

                v-if="btnControls.deleteBtn">删除</u-button>

            <u-button class="btn-item" type="success" @click="verify" v-if="btnControls.verifyBtn">确认</u-button>

            <u-button class="btn-item" color="linear-gradient(to right, #06B0FD, #027BFE)"

                @click="saveOrUpdate">{{ rentId === '' ? "保存" : "确认修改" }}</u-button>

        </view>

@@ -215,6 +215,10 @@
                auditStatus: null,

                currentTime: Number(new Date()),

                isModelShow: false,

                btnControls: {

                    deleteBtn: false,

                    verifyBtn: false

                }



            }

        },

@@ -223,16 +227,13 @@
                id,

                houseCode

            } = option

            this.houseCode = houseCode

            this.houseCode = houseCode
            this.currentRole = uni.getStorageSync("activeRole")

            // 使用id来判断是不是修改

            if (id !== void 0) {

                this.rentId = id

                this.getCurrentRentInfo()

            }

        },

        mounted() {

            this.currentRole = uni.getStorageSync("activeRole")
            console.log(this.currentRole);

        },

        methods: {

            showSelectBus(data, title, model, key) {

@@ -363,25 +364,28 @@
                this.isAuditShow = true

            },

            verifyConfirm(e) {

                const auditStatus = e.value[0].status
                confirmHouseRental({
                    id: this.rentId,
                    auditStatus
                }).then(res => {
                    const { code, data } = res
                    if (code !== 200) {
                        uni.showToast({
                            title: "确认失败",
                            icon: 'error'
                        })
                        return
                    }
                    uni.showToast({
                        title: "确认成功",
                        icon: 'success'
                    })
                    this.isAuditShow = false
                    this.getCurrentRentInfo()
                const auditStatus = e.value[0].status

                confirmHouseRental({

                    id: this.rentId,

                    auditStatus

                }).then(res => {

                    const {

                        code,

                        data

                    } = res

                    if (code !== 200) {

                        uni.showToast({

                            title: "确认失败",

                            icon: 'error'

                        })

                        return

                    }

                    uni.showToast({

                        title: "确认成功",

                        icon: 'success'

                    })

                    this.isAuditShow = false

                    this.getCurrentRentInfo()

                })

            },

            // 更新操作

@@ -445,7 +449,7 @@
                        houseRentalList

                    }

                } = await getHouseRentInfo(this.houseCode)

                this.auditStatus = houseRentalList[0].auditStatus
                this.auditStatus = houseRentalList[0].auditStatus

                console.log(this.auditStatus);

                const images = []

                const {

@@ -484,7 +488,11 @@
                    houseTenantVOList.forEach((item, index) => {

                        this.$refs.rentform[index].form = item

                    })

                })

                })
                this.btnControls = {
                    deleteBtn: this.rentId !== '',
                    verifyBtn: !this.auditStatus && !!this.rentId && this.currentRole.roleAlias === 'wgy'
                }

            },

            async deleteRent() {

                const {

@@ -560,8 +568,9 @@
                    .l {

                        display: flex;

                        align-items: center;



                        .line {

                            width: 6rpx;
                            width: 6rpx;

                            height: 60%;

                            margin-right: 10rpx;

                            background-color: #017BFC;


 subPackage/bs/views/repair.vue

@@ -74,7 +74,7 @@
                        title: "公共维修",
                        type: 1,
                        bgImg: "/static/icon/nav-bg-06.png",
                        path: "addRepair",
                        path: `addRepair`,
                        background: "#63C875"
                    },
                    {
@@ -115,6 +115,7 @@
        onShow() {
            this.getStatistics()
            this.curSelectSite = uni.getStorageSync('curSelectSite')
            console.log(this.curSelectSite);
        },

        methods: {

 subPackage/house/member/householdLabel.vue

@@ -1,333 +1,346 @@
<template>
    <view class="container">
        <view class="main">
            <view class="content">
                <view class="base b-c-w">
                    <u-icon name="photo"></u-icon> {{ houseAddress}}
                </view>
                <view class="l flex-1 flex">
                    <view class="flex_base">
                        <view class="head-img flex_base">
                            <u--image shape="circle" :showLoading="true" src="/static/icon/user-01.png"  width="120rpx"
                                height="120rpx"></u--image>
                        </view>
                    </view>
                    <view class="info">
                        <view>姓名：{{householdInfo.name}}</view>
                        <view class="flex">
                            手机：{{householdInfo.phoneNumber}} <u-icon name="phone-fill" color="#4586FE"></u-icon>
                        </view>
                    </view>
                </view>
                <view v-for="(item, index) in labelBtnList" :key="index">
                    <box-title :title="item.name"></box-title>
                    <view class="mt-20 flex label-btn-box b-c-w">
                        <view v-for="(item, k) in item.children" :key="k">
                            <u-button color="#000" size="mini" type="primary" 
                            :style="{background: item.color}"
                            :plain="true" :text="item.name"
                                @click="showLabelPopup(item)"></u-button>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <u-modal style="flex: none;" :show="popupShow" :closeOnClickOverlay="true" showCancelButton
            @cancel="popupShow = false" @confirm="popupConfirm">
            <view class="slot-content">
                <view class="flex_base">
                    {{ labelModelInfo.title }}
                </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(item)">
                    </u-radio>
                </u-radio-group>

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

<script>
    import uploadMixin from "@/mixin/uploadMixin";

    import {
        getLabelListByParentId
    } from "@/api/label/label.js";
    import {
        getDetail
    } from "@/api/doorplateAddress/doorplateAddress.js";
    import {saveOrUpdateHouseholdLabel,removeHouseholdLabel} from "@/api/house/householdLabel.js"
    import { getHouseholdDetail } from "@/api/house/household.js"

    export default {
        mixins: [uploadMixin],
        data() {
            return {
                houseAddress:"",
                houseInfo:{},
                householdInfo:{},
                houseCode:"",
                popupShow: false,
                labelBtnList: [],
                // 安置房弹框中
                labelList: [{
                        name: '撤销',
                        disabled: false,
                        color: '#EBEDF0'
                    },
                    {
                        name: '绿',
                        disabled: false,
                        color: '#07C160'
                    },
                    {
                        name: '黄',
                        disabled: false,
                        color: '#FF976A'
                    }, {
                        name: '红',
                        disabled: false,
                        color: '#EE0A24'
                    }
                ],
                currentLabelInfo: {},
                currentColorInfo: {},
                labelModelInfo: {
                    title: '',
                    selectedColor: ''
                },
                labelValue: '',
                remark: '',
                // 标记
                number:0
            }
        },
        created() {
        },
        mounted() {
        },
        onLoad(option) {
            const data = JSON.parse(option.data);
            this.householdInfo = data;
            this.houseCode = data.houseCode
            this.getDoorPlateAddressDetail()
        },
        onShow() {
            this.getLabelList()
        },
        methods: {
            // 获取房屋详情
            async getDoorPlateAddressDetail() {
                const param = {
                    addressCode : this.houseCode
                }
                const res = await getDetail(param)
                this.houseInfo = res.data
                const aoiName = ( this.houseInfo.aoiName || this.houseInfo.subAoi)
                const unitName = this.houseInfo.unitName == null ?"":this.houseInfo.unitName
                this.houseAddress = aoiName + 
                this.houseInfo.buildingName + unitName + this.houseInfo.houseName + "室"
				
            },
            // 获取房屋标签信息
            async getLabelList() {
                const param = {
                    id : this.householdInfo.id
                }
                const res = await getHouseholdDetail(param)
                this.householdInfo = res.data
                const householdLabelList = this.householdInfo.householdLabelList
                // 房屋标签处理
                const labelParam = {
                    parentId:1000
                }
                const resLabel = await getLabelListByParentId(labelParam)
                this.labelBtnList = resLabel.data
                const labelChildAll = []
                // 将细类放到一起
                this.labelBtnList.forEach(e=>{
                    e.children.forEach(f=>{
                        labelChildAll.push(f)
                    })
                })
                if(householdLabelList.length>0){
                    labelChildAll.forEach(e=>{
                        householdLabelList.forEach(f=>{
                            if(Number(e.id) == f.labelId){
                                e['color'] = f.color
                                e['remark'] = f.remark
                            }
                        })
                    })
                }
            },
            // 房屋弹窗
            showLabelPopup(item) {
                // 先清空
                this.number = 0
                this.labelValue = ""
                this.remark = ""
                this.popupShow = true
                this.labelModelInfo.title = item.name
                this.currentLabelInfo = item
                // 遍历标签集合
                this.labelList.forEach(e=>{
                    if(e.color == item.color){
                        this.labelValue = e.name
                        this.remark = item.remark
                        this.number = 1
                    }
                })
            },
            popupConfirm() {
                this.popupShow = false
            },
            radioChange(item) {
                this.currentColorInfo = item
            },
            // 更新房屋标签
            async popupConfirm() {
                const {
                    id
                } = this.currentLabelInfo
                const {
                    color,
                    name
                } = this.currentColorInfo
                let res = null
                if (name === '撤销') {
                    if(this.number==1){
                        const data = {
                            labelId:id,
                            householdId: this.householdInfo.id
                        }
                        res = await removeHouseholdLabel(data)
                    }else{
                        uni.showToast({
                            title: "无可撤销项",
                            icon: "error",
                            duration: 1500
                        })
                        return
                    }
                } else {
                    res = await saveOrUpdateHouseholdLabel({
                        householdId: this.householdInfo.id,
                        labelId: id,
                        remark:this.remark,
                        color
                    })
                }
                if (res.code !== 200) {
                    uni.showToast({
                        title: "修改失败",
                        icon: "error",
                        duration: 1500
                    })
                    return
                }
                // 刷新页面
                this.getLabelList()
                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;
				
                .base{
                    padding-left: 20rpx;
                    background-color:#ffffff;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    height: 90rpx;
                    font-size: 32rpx;
                    letter-spacing: 3rpx;
                    border-bottom: 1rpx solid #EBEDF0;
                }
				
                .l {
                    height: 170rpx;
                    background-color: #ffffff;
                    align-items: center;
				
                    .head-img {
                        margin-left: 20rpx;
                        width: 124rpx;
                        height: 124rpx;
                        background: #EBEDF0;
                        border-radius: 50%;
                    }
				
                    .info {
                        margin-left: 20rpx;
                        font-size: 24rpx;
				
<template>

    <view class="container">

        <view class="main">

            <view class="base b-c-w">

                <u-icon name="/static/icon/map.png" width="15" height="18"></u-icon>

                <view>{{ houseAddress}}</view>

            </view>

            <view class="content">

                <view class="l flex-1 flex">

                    <view class="flex_base">

                        <view class="head-img flex_base">

                            <u--image shape="circle" :showLoading="true" src="/static/icon/user-01.png" width="120rpx"

                                height="120rpx"></u--image>

                        </view>

                    </view>

                    <view class="info">

                        <view>姓名：{{householdInfo.name}}</view>

                        <view class="flex">

                            手机：{{householdInfo.phoneNumber}} <u-icon name="phone-fill" color="#4586FE"></u-icon>

                        </view>

                    </view>

                </view>

                <view v-for="(item, index) in labelBtnList" :key="index" class="label-crad">

                    <newBoxTitle :title="item.name"></newBoxTitle>

                    <view class="label-btn-box">

                        <view v-for="(item, k) in item.children" :key="k">

                            <u-button color="#000" size="mini" type="primary" :style="{background: item.color}"

                                :plain="true" :text="item.name" @click="showLabelPopup(item)"></u-button>

                        </view>

                    </view>

                </view>

            </view>

        </view>



        <u-modal style="flex: none;" :show="popupShow" :closeOnClickOverlay="true" showCancelButton

            @cancel="popupShow = false" @confirm="popupConfirm">

            <view class="slot-content">

                <view class="flex_base">

                    {{ labelModelInfo.title }}

                </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" :labelColor="item.color" :style="{color: item.color && '#fff'}" :name="item.name" :activeColor="item.color" @change="radioChange(item)">

                    </u-radio>

                </u-radio-group>



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

            </view>

        </u-modal>

    </view>

</template>



<script>

    import uploadMixin from "@/mixin/uploadMixin";

    import newBoxTitle from '@/components/boxTitle/index2.vue'

    import {

        getLabelListByParentId

    } from "@/api/label/label.js";

    import {

        getDetail

    } from "@/api/doorplateAddress/doorplateAddress.js";

    import {

        saveOrUpdateHouseholdLabel,

        removeHouseholdLabel

    } from "@/api/house/householdLabel.js"

    import {

        getHouseholdDetail

    } from "@/api/house/household.js"



    export default {

        mixins: [uploadMixin],

        components: {

            newBoxTitle

        },

        data() {

            return {

                houseAddress: "",

                houseInfo: {},

                householdInfo: {},

                houseCode: "",

                popupShow: false,

                labelBtnList: [],

                // 安置房弹框中

                labelList: [{

                        name: '撤销',

                        disabled: false,

                        color: '#EBEDF0'

                    },

                    {

                        name: '绿',

                        disabled: false,

                        color: '#30D17C'

                    },

                    {

                        name: '黄',

                        disabled: false,

                        color: '#FFB42B'

                    }, {

                        name: '红',

                        disabled: false,

                        color: '#EA1F1F'

                    }

                ],

                currentLabelInfo: {},

                currentColorInfo: {},

                labelModelInfo: {

                    title: '',

                    selectedColor: ''

                },

                labelValue: '',

                remark: '',

                // 标记

                number: 0

            }

        },

        created() {},

        mounted() {},

        onLoad(option) {

            const data = JSON.parse(option.data);

            this.householdInfo = data;

            this.houseCode = data.houseCode

            this.getDoorPlateAddressDetail()

        },

        onShow() {

            this.getLabelList()

        },

        methods: {

            // 获取房屋详情

            async getDoorPlateAddressDetail() {

                const param = {

                    addressCode: this.houseCode

                }

                const res = await getDetail(param)

                this.houseInfo = res.data

                const aoiName = (this.houseInfo.aoiName || this.houseInfo.subAoi)

                const unitName = this.houseInfo.unitName == null ? "" : this.houseInfo.unitName

                this.houseAddress = aoiName +

                    this.houseInfo.buildingName + unitName + this.houseInfo.houseName + "室"



            },

            // 获取房屋标签信息

            async getLabelList() {

                const param = {

                    id: this.householdInfo.id

                }

                const res = await getHouseholdDetail(param)

                this.householdInfo = res.data

                const householdLabelList = this.householdInfo.householdLabelList

                // 房屋标签处理

                const labelParam = {

                    parentId: 1000

                }

                const resLabel = await getLabelListByParentId(labelParam)

                this.labelBtnList = resLabel.data

                const labelChildAll = []

                // 将细类放到一起

                this.labelBtnList.forEach(e => {

                    e.children.forEach(f => {

                        labelChildAll.push(f)

                    })

                })

                if (householdLabelList.length > 0) {

                    labelChildAll.forEach(e => {

                        householdLabelList.forEach(f => {

                            if (Number(e.id) == f.labelId) {

                                e['color'] = f.color

                                e['remark'] = f.remark

                            }

                        })

                    })

                }

            },

            // 房屋弹窗

            showLabelPopup(item) {

                // 先清空

                this.number = 0

                this.labelValue = ""

                this.remark = ""

                this.popupShow = true

                this.labelModelInfo.title = item.name

                this.currentLabelInfo = item

                // 遍历标签集合

                this.labelList.forEach(e => {

                    if (e.color == item.color) {

                        this.labelValue = e.name

                        this.remark = item.remark

                        this.number = 1

                    }

                })

            },

            popupConfirm() {

                this.popupShow = false

            },

            radioChange(item) {

                this.currentColorInfo = item

            },

            // 更新房屋标签

            async popupConfirm() {

                const {

                    id

                } = this.currentLabelInfo

                const {

                    color,

                    name

                } = this.currentColorInfo

                let res = null

                if (name === '撤销') {

                    if (this.number == 1) {

                        const data = {

                            labelId: id,

                            householdId: this.householdInfo.id

                        }

                        res = await removeHouseholdLabel(data)

                    } else {

                        uni.showToast({

                            title: "无可撤销项",

                            icon: "error",

                            duration: 1500

                        })

                        return

                    }

                } else {

                    res = await saveOrUpdateHouseholdLabel({

                        householdId: this.householdInfo.id,

                        labelId: id,

                        remark: this.remark,

                        color

                    })

                }

                if (res.code !== 200) {

                    uni.showToast({

                        title: "修改失败",

                        icon: "error",

                        duration: 1500

                    })

                    return

                }

                // 刷新页面

                this.getLabelList()

                this.popupShow = false

            },



        }

    }

</script>



<style scoped lang="scss">

    .container {

        position: relative;

        width: 100%;

        height: 100%;

        display: flex;

        flex-direction: column;

        background: #f6f6f6;



        .main {

            position: relative;

            height: 0;

            flex: 1;

            display: flex;

            flex-direction: column;



            .base {

                padding: 20rpx 18rpx;

                display: flex;

                color: #333333;

                background: #fff;

                min-height: 38rpx;

                font-size: 30rpx;



                view {

                    margin-left: 15rpx;

                }

            }



            .content {

                height: 0;

                flex: 1;

                overflow-y: auto;

                margin: 20rpx 30rpx;



                .l {

                    background-color: #ffffff;

                    align-items: center;

                    padding: 30rpx 30rpx;

                    border-radius: 8rpx;



                    .head-img {

                        width: 124rpx;

                        height: 124rpx;

                        border-radius: 50%;

                    }



                    .info {

                        margin-left: 20rpx;

                        font-size: 24rpx;



                        &>view {

                            height: 56rpx;

                            line-height: 56rpx;

                        }

                    }

                }



                .basic-info {

                    .form-item {

                        background-color: #ffffff;

                        padding: 5rpx 20rpx;

                    }

                }



                .pic {

                    background-color: #ffffff;

                    padding: 40rpx 30rpx;

                }



                .label-crad {
                    background-color: #fff;
                    margin-top: 20rpx;
                    padding: 30rpx;
                    border-radius: 8rpx;

                    .label-btn-box {

                        display: flex;

                        flex-direction: row;

                        flex-wrap: wrap;

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

                .basic-info {
                    .form-item {
                        background-color: #ffffff;
                        padding: 5rpx 20rpx;
                    }
                }

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

                .label-btn-box {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    padding: 10rpx 0;
					

                    &>view {
                        margin: 10rpx 10rpx;
						
                        .u-button {
                            padding: 6rpx 8rpx;
                            border-width: 0 !important;
                            background-color: #EFEFF0;
                        }
                    }
                }

            }
        }
    }
                            margin: 0 20rpx 20rpx 0;
							
                            .u-button {

                                padding: 6rpx 8rpx;

                                border-width: 0 !important;

                                background-color: #EFEFF0;
                                color: #999999 !important;
								
                            }

                        }

                    }

                }







            }

        }

    }

</style>

 subPackage/house/roomControl/index.vue

@@ -3,9 +3,7 @@
        <view class="main">

            <view class="content">

                <u-form labelWidth="70" :model="form" ref="form" :rules="rules">

                    <box-title title=""></box-title>



                    <view class="basic-info mt-20">

                    <view class="basic-info">

                        <u-form-item class="form-item" labelWidth="100" label="绑定手机" required prop="phone">

                            <u--input border="none" v-model="form.phone" placeholder="请输入">

                            </u--input>

@@ -27,27 +25,28 @@
                        </u-form-item>

                    </view>



                    <box-title class="mt-20" title="房屋外观"></box-title>

                    <view class="pic mt-20">

                    <view class="pic">

                        <newBoxTitle title="房屋外观"></newBoxTitle>

                        <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" :style="{background: item.color}"

                                :plain="true" :text="item.name" @click="showLabelPopup(item)"></u-button>

                    <view class=" flex label-btn-box b-c-w">

                        <newBoxTitle title="房屋标签"></newBoxTitle>

                        <view class="list">

                            <view v-for="(item, index) in labelBtnList" :key="index">

                                <u-button size="mini" type="primary" :style="{background: item.color, color: item.color && '#fff'}"

                                    :plain="true" :text="item.name" @click="showLabelPopup(item)"></u-button>

                            </view>

                        </view>

                    </view>

                </u-form>

            </view>



            <view class="edit-btn">

                <u-button type="primary" text="修改数据" @click="updateHouseInfo(item)"></u-button>

                <u-button type="primary" color="linear-gradient(163deg, #01BDFC 0%, #017BFC 100%)" text="修改数据" @click="updateHouseInfo(item)"></u-button>

            </view>

        </view>



@@ -60,7 +59,7 @@


                <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(item)">

                        :label="item.name" :labelColor="item.color" :name="item.name" :activeColor="item.color" @change="radioChange(item)">

                    </u-radio>

                </u-radio-group>



@@ -78,6 +77,7 @@


<script>

    import uploadMixin from "@/mixin/uploadMixin";

    import newBoxTitle from '@/components/boxTitle/index2.vue'

    import {

        uploadFile

    } from "@/api/doorplateAddress/doorplateAddress";

@@ -100,6 +100,9 @@
    } from "echarts";

    export default {

        mixins: [uploadMixin],

        components: {

            newBoxTitle

        },

        data() {

            return {

                houseCode: '',

@@ -113,7 +116,7 @@
                rules: {



                    phone: [{

                            required: true,
                            required: true,

                            message: '请输入手机号',

                            // 可以单个或者同时写两个触发验证方式 

                            trigger: ['change', 'blur'],

@@ -157,16 +160,16 @@
                    {

                        name: '绿',

                        disabled: false,

                        color: '#07C160'

                        color: '#30D17C'

                    },

                    {

                        name: '黄',

                        disabled: false,

                        color: '#FF976A'

                        color: '#FFB42B'

                    }, {

                        name: '红',

                        disabled: false,

                        color: '#EE0A24'

                        color: '#EA1F1F'

                    }

                ],

                currentLabelInfo: {},

@@ -380,6 +383,7 @@
        display: flex;

        flex-direction: column;

        background: #F9F9FA;

        font-size: 30rpx;



        .main {

            position: relative;

@@ -392,32 +396,57 @@
                height: 0;

                flex: 1;

                overflow-y: auto;

                padding: 20rpx 30rpx;



                .basic-info {

                    background-color: #fff;

                    padding: 30rpx;



                    .form-item {

                        background-color: #ffffff;

                        padding: 5rpx 20rpx;

                        border-bottom: 1px solid #eff1f3;



                        &:first-child {

                            padding-top: 0;

                        }



                        &:last-child {

                            padding-bottom: 0;

                        }

                    }



                }



                .pic {

                    background-color: #ffffff;

                    padding: 40rpx 30rpx;

                    padding: 30rpx;

                    margin-top: 20rpx;

                }



                .label-btn-box {

                    padding: 10rpx 0;



                    &>view {

                        margin: 0 10rpx;



                        .u-button {

                            padding: 6rpx 8rpx;

                    padding: 30rpx;

                    margin-top: 20rpx;

                    display: flex;
                    flex-direction: column;

                    .list {
                        display: flex;
                        flex-wrap: wrap;

                        &>view {
                            width: calc((100% - 80rpx) / 5);

                            margin: 0 20rpx 20rpx 0;
                            &:nth-child(5n) {
                                margin-right: 0;
                            }

                            .u-button {

                                padding: 6rpx 8rpx;

                                border-width: 0 !important;
                                background-color: #F5F5F5;
                                color: #999999;

                            }

                        }

                    }



                }



            }

@@ -429,7 +458,7 @@
                justify-content: space-around;

                align-items: center;

                background: #fff;

                border-top: 1rpx solid #ccc;

                box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);

            }

        }

    }