Project-Annex/operationSupport/src/views/assetManagement/stepPage/houseDataPop.vue

<template>
    <div class="content-item">
        <div class="formContent-item_title">基础信息</div>
        <div class="widthFlex">
            <household-table :tableName="householdTable.left" :tabData="houseData"></household-table>
            <household-table :tableName="householdTable.right" :tabData="houseData"></household-table>
        </div>
        <div class="formContent-item_title">人脸信息</div>
        <div class="detailImg">
            <div class="clickUpText">
                <img class="dataImg" v-if="!!houseData.facePictureUrl" :src="houseData.facePictureUrl" />
                <template v-else>
                    <img class="bg-img" src="@/assets/img/ownerManagement/img_zhaopian2@2x.png" alt="" />
                    <div>无人脸图片</div>
                </template>
            </div>
        </div>
    </div>
</template>
<script>
import list from '@utils/list.js';
import householdTable from './householdTable.vue';
let type = '';
let typeArr = ['业主', '亲属', '租客'];
export default {
    components: { householdTable },
    mixins: [list],
    props: ['params'],
    data() {
        return {
            houseData: {},
            householdTable: {
                left: [
                    {
                        lable: '姓名',
                        prop: 'name'
                    },
                    {
                        lable: '手机号',
                        prop: 'phone'
                    },
                    {
                        lable: '身份证号',
                        prop: 'idNumber'
                    },
                    {
                        lable: '出生日期',
                        prop: 'birthDate'
                    },
                    {
                        lable: '民族',
                        prop: 'nation'
                    }
                    // {
                    //     lable: '入住时间',
                    //     prop: 'checkInDate'
                    // }
                ],
                right: [
                    {
                        lable: '类型',
                        prop: 'householdType',
                        const: true,
                        format(val) {
                            return type;
                        }
                    },
                    {
                        lable: '人员编号',
                        prop: 'personnelNumber'
                    },
                    {
                        lable: '性别',
                        prop: 'sex',
                        typeArray: [
                            { type: 0, lable: '未知' },
                            { type: 1, lable: '男' },
                            { type: 2, lable: '女' }
                        ]
                    },
                    {
                        lable: '国籍',
                        prop: 'nationality',
                        typeArray: [
                            { type: 1, lable: '中国' },
                            { type: 2, lable: '其他' }
                        ]
                    },
                    {
                        lable: '户籍地址',
                        prop: 'permanentAddress'
                    }
                ]
            }
        };
    },
    created() {
        if (!!this.params.data) {
            type = typeArr[Number(this.params.data.householdType) - 1];
            this.getHouse(this.params.data.residentId);
        }
    },
    methods: {
        getHouse(id) {
            this.$http
                .get('/sc-community/scResident/find/' + id)
                .then(({ data, status, msg }) => {
                    if (0 === status) {
                        if (data !== null) {
                            this.houseData = data;
                        }
                    } else {
                        this.$message.error(msg);
                    }
                })
                .catch(() => {});
        }
    }
};
</script>
<style lang="scss" scoped>
@import '../style.scss';
.content {
    .content-item {
        padding: 0;
    }
}
.detailImg {
    width: 200px;
    height: 280px;
    background: #f8fcff;
    border-radius: 4px;
    border: 1px solid #e0e1e3;
    color: #424656;
    text-align: center;
    .clickUpText {
        position: inherit;
        img.bg-img {
            width: 100px;
        }
    }
}
</style>