dvcp_v2_wechat_app/project/sanjianxi/AppNeighborLinkage/memberInfo.vue

<template>
  <div class="memberInfo">
    <div class="user">
      <div class="pic">
        <img :src="data.photo" alt="" v-if="data.photo">
        <img src="https://cdn.cunwuyun.cn/dvcp/myFamily/tx.png" alt="" v-else>
      </div>
      <div class="info">
        <div class="name">{{ data.name }}</div>
        <div class="idNumber">{{ String(data.householdIdNumber).replace(/(.{6}).*(.{4})/, '$1********$2') }}</div>
      </div>
      <div class="relation" :style="{color:data.householdRelation == 11? '#4181FF' : '#999999' }">
        {{ $dict.getLabel('householdRelation',data.householdRelation) }}
      </div>
    </div>

    <div class="basicInfo">
      <h2>个人基本信息</h2>
      <div class="items">
        <p>家庭住址</p>
        <div>{{ data.householdAreaName }}</div>
      </div>
      <div class="item">
        <span>性别</span><span>{{ $dict.getLabel('sex',data.sex) }}</span>
      </div>
      <div class="item">
        <span>年龄</span><span>{{ data.age }}</span>
      </div>
      <div class="item">
        <span>民族</span><span>{{ $dict.getLabel('nation',data.nation) }}</span>
      </div>
      <div class="item">
        <span>文化程度</span><span>{{ $dict.getLabel('education',data.education) }}</span>
      </div>
      <div class="item">
        <span>婚姻状况</span><span>{{ $dict.getLabel('maritalStatus',data.maritalStatus) }}</span>
      </div>
      <div class="item">
        <span>政治面貌</span><span>{{ $dict.getLabel('politicsStatus',data.politicsStatus) }}</span>
      </div>
      <div class="item">
        <span>兵役状况</span><span>{{ $dict.getLabel('militaryStatus',data.militaryStatus) }}</span>
      </div>
      <div class="item">
        <span>宗教信仰</span><span>{{ $dict.getLabel('faithType',data.faithType) }}</span>
      </div>
      <div class="item">
        <span>职业</span><span>{{ $dict.getLabel('job',data.job) }}</span>
      </div>
    </div>

    <div class="contactInfo">
      <h2>联络信息</h2>
      <div class="item">
        <span>联系方式</span><span>{{ data.phone }}</span>
      </div>
      <div class="items">
        <p>现住址</p>
        <div>{{ data.currentAreaName }}</div>
      </div>
      <div class="items">
        <p>现住详细地址</p>
        <div>{{ data.currentAddress }}</div>
      </div>
      <div class="items">
        <p>户籍地址</p>
        <div>{{ data.householdAreaName }}</div>
      </div>
      <div class="items">
        <p>户籍详细地址</p>
        <div>{{ data.householdAddress }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "memberInfo",
  appName: "家庭详情",
  data() {
    return {
      id: '',
      data: {},
    }
  },

  onShow() {
    this.getUserInfo()
  },

  onLoad(o) {
    this.$dict.load('sex','householdRelation','nation','education','maritalStatus','politicsStatus','faithType','job')
    this.id = o.id
  },
  methods: {
    getUserInfo() {
      this.$instance.post('/app/appresident/detailForWx',null,{
        params: {
          id: this.id
        }
      }).then(res => {
        if(res.code ==0) {
          this.data = res.data.resident
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.memberInfo {
  .user {
    display: flex;
    background: #FFF;
    padding: 32px;
    .pic {
      width: 96px;
      height: 96px;
      margin-right: 10px;
      img {
        border-radius: 50%;
        width: 100%;
        height: 100%;
      }
    }

    .info {
      width: calc(100% - 176px);
      .name {
        font-size: 32px;
        font-weight: 600;
      }
      .idNumber {
        margin-top: 8px;
        color: #999999;
      }
    }

    .relation {
      width: 80px;
      align-self: center;
    }

  }

  .basicInfo,
  .contactInfo {
    margin-top: 24px;
    padding: 0 32px;
    box-sizing: border-box;
    background: #FFF;
    h2 {
      padding: 26px 0;
      font-style: 32px;
      font-weight: 600;
    }
    .items {
      padding: 12px 0;
      p {
        margin-bottom: 12px;
        color: #999999;
        font-style: 30px;
      }
    }
    .item {
      display: flex;
      justify-content: space-between;
      padding: 12px 0;
      span:first-child {
        color: #999999;
        font-style: 30px;
      }
    }
  }
  .contactInfo {
    margin-bottom: 24px;
  }
}
</style>