xs-manage/src/pages/property/proprietor/Detail.jsx

import React, { useState } from 'react'
import { Button, Descriptions } from 'antd'
import Section from './components/Section'
import Edit from './components/Edit'

export default props => {
  const [editorShow, setEditorShow] = useState(false)
  const [roomName, setRoomName] = useState('1期1号楼1单元13层1331')

  const handleEdit = () => {}

  return (
    <div>
      <Section title="基本信息">
        <Descriptions column={3}>
          <Descriptions.Item label="姓名">测试</Descriptions.Item>
          <Descriptions.Item label="性别">男</Descriptions.Item>
          <Descriptions.Item label="手机号">1382383843</Descriptions.Item>
          <Descriptions.Item label="微信昵称">Big Big</Descriptions.Item>
          <Descriptions.Item label="微信ID">iwnxlspqpsisnxghgys</Descriptions.Item>
          <Descriptions.Item label="身份证">320101200001011234</Descriptions.Item>
          <Descriptions.Item label="头像">
            <img src="" alt=""/>
          </Descriptions.Item>
        </Descriptions>
      </Section>
      <Section title="在当前房屋" subTitle={roomName} action={<Button type="link" onClick={() => setEditorShow(true)}>修改</Button>}>
        <Descriptions column={3}>
          <Descriptions.Item label="身份">户主</Descriptions.Item>
          <Descriptions.Item label="审核状态">未审核</Descriptions.Item>
          <Descriptions.Item label="资料手机">1382383843</Descriptions.Item>
          <Descriptions.Item label="人脸">
            <img src="" alt=""/>
          </Descriptions.Item>
        </Descriptions>
      </Section>
      <Section title="关联本小区其他房屋">

      </Section>
      <p style={{ color: '#888' }}>
        若想修改户主登录手机号，需要户主自己登录APP在个人中心修改。
        或者联系荟房网络运营人员核实后修改，因为此手机号可能在其他社区在用。
        若想修改成员为其他成员的手机号，请删除此成员后添加新成员。 
      </p>
      <Edit
        visible={editorShow}
        onSubmit={handleEdit}
        onCancel={() => setEditorShow(false)}
      />
    </div>
  )
}