dvcp_v2_wxcp_app/library/apps/AppMonitoringObject/residentDetail.vue

<template>
  <div class="residentDetail">
    <div class="item-wrapper">
      <div class="item-header item-avatar">
        <div class="left">
          <!-- <img :src="info.photo" alt="" v-if="info.photo" /> -->
          <img :src="$cdn + 'avatar.png'" />
          <div class="left-right">
            <h2>{{ info.name }}</h2>
            <p>{{ info.phone }}</p>
          </div>
        </div>
        <span>{{ $dict.getLabel('fpRelationship',info.householdRelation) }}</span>
      </div>
      <div class="item-info">
        <label>现住地址</label>
        <span>{{ info.countyName  +  info.townName + info.villageName }}</span>
      </div>
      <div class="item-info">
        <label>详细地址</label>
        <span>{{ info.currentAddress }}</span>
      </div>
      <div class="more-info">
        <div class="item-info">
          <label>身份证号</label>
          <span>{{ info.idNumber }}</span>
        </div>
        <div class="item-info">
          <label>性别</label>
          <span>{{ $dict.getLabel('sex', info.sex) }}</span>
        </div>
        <div class="item-info">
          <label>出生日期</label>
          <span>{{ info.birthDate }}</span>
        </div>
        <div class="item-info">
          <label>民族</label>
          <span>{{ $dict.getLabel('fpNation', info.nation) }}</span>
        </div>
        <div class="item-info">
          <label>政治面貌</label>
          <span>{{ $dict.getLabel('fpPoliticalOutlook', info.politicsStatus) }}</span>
        </div>
        <div class="item-info">
          <label>文化程度</label>
          <span>{{ $dict.getLabel('fpEducation', info.education) }}</span>
        </div>
        <div class="item-info">
          <label>在校生情况</label>
          <span>{{ $dict.getLabel('fpStudentsInSchool', info.schoolStatus) }}</span>
        </div>
        <div class="item-info">
          <label>健康状况</label>
          <span>
             <span v-for="(item, index) in healthyStatusList" :key="index"><span v-if="index > 0">,</span>{{$dict.getLabel("fpHealth", item)}}</span>
          </span>

          <!-- <span v-for="(item,index) in">{{ $dict.getLabel('fpHealth', info.healthyStatus) }}</span>  -->
        </div>
        <div class="item-info">
          <label>残疾类别</label>
          <span>{{ $dict.getLabel('fpDisabilityType', info.disabilityType) }}</span>
        </div>
        <div class="item-info">
          <label>残疾证办证年度</label>
          <span>{{ $dict.getLabel('fpYear', info.disabilityCertificateYear) }}</span>
        </div>
        <div class="item-info">
          <label>家庭人口数</label>
          <span>{{ info.familyCount }}</span>
        </div>
        <!-- 基础保障 -->
        <h4 style="fon-size: 17px;font-weight: 600;margin-top: 8px;">基础保障</h4>
        <div class="item-info">
          <label>是否参加城乡居民基本医保</label>
          <span>{{ $dict.getLabel('fpYesOrNo', info.jcbxCxyiliao) }}</span>
        </div>
        <div class="item-info">
          <label>是否参加城镇职工基本医保</label>
          <span>{{ $dict.getLabel('fpYesOrNo', info.jcbxCzyiliao) }}</span>
        </div>
        <div class="item-info">
          <label>是否参加大病保险</label>
          <span>{{ $dict.getLabel('fpYesOrNo', info.jcbxDabing) }}</span>
        </div>
        <div class="item-info">
          <label>是否参加商业补充医保</label>
          <span>{{ $dict.getLabel('fpYesOrNo', info.jcbxShangye) }}</span>
        </div>
        <div class="item-info">
          <label>是否参加城乡居民养老保险</label>
          <span>{{ $dict.getLabel('fpYesOrNo', info.jcbxCxyanglao) }}</span>
        </div>
        <div class="item-info">
          <label>是否参加城镇职工养老保险</label>
          <span>{{ $dict.getLabel('fpYesOrNo', info.jcbxCzyanglao) }}</span>
        </div>
        <div class="item-info">
          <label>享受人身意外保险</label>
          <span>{{ $dict.getLabel('fpYesOrNo', info.jcbxRenshenyiwai) }}</span>
        </div>
        <div class="item-info">
          <label>享受最低生活保障</label>
          <span>{{ $dict.getLabel('fpYesOrNo', info.bzcsNongcundibao) }}</span>
        </div>
        <div class="item-info">
          <label>是否特困供养</label>
          <span>{{ $dict.getLabel('fpYesOrNo', info.bzcsTekungongyang) }}</span>
        </div>
        <div class="item-info">
          <label>分散转集中供养</label>
          <span>{{ $dict.getLabel('fpYesOrNo', info.bzcsWubaohu) }}</span>
        </div>
        <div class="item-info">
          <label>是否接受医疗救助</label>
          <span>{{ $dict.getLabel('fpYesOrNo', info.bzcsYiliaojiuzhu) }}</span>
        </div>
        <div class="item-info">
          <label>是否接受其他健康扶助</label>
          <span>{{ $dict.getLabel('fpYesOrNo', info.bzcsQita) }}</span>
        </div>
        <!-- 务工就业 -->
        <h4 style="fon-size: 17px;font-weight: 600;margin-top: 8px;">务工就业</h4>
        <div class="item-info">
          <label>劳动技能</label>
          <span>{{ $dict.getLabel('fpLaborSkills', info.labourStatus) }}</span>
        </div>
        <div class="item-info">
          <label>是否会讲普通话</label>
          <span>{{ $dict.getLabel('fpYesOrNo', info.mandarin) }}</span>
        </div>
        <div class="item-info">
          <label>就业渠道</label>
          <span>{{ $dict.getLabel('fpEmploymentChannels', info.employmentChannels) }}</span>
        </div>
        <div class="item-info">
          <label>务工企业名称</label>
          <span>{{ info.migrantEnterprises }}</span>
        </div>
        <div class="item-info">
          <label>务工时间/月</label>
          <span>{{ info.workeMonths }}</span>
        </div>
        <div class="item-info">
          <label>公益性岗位</label>
          <span>{{ info.publicWelfarePosts }}</span>
        </div>
        <div class="item-info">
          <label>公益性岗位(月数)</label>
          <span>{{ info.publicWelfarePostsMonths }}</span>
        </div>
        <div class="item-info">
          <label>是否国外务工</label>
          <span>{{ $dict.getLabel('fpYesOrNo',info.foreignWorkers) }}</span>
        </div>
        <div class="item-info">
          <label>务工所在地</label>
          <span>{{ info.foreignWorkersAddress }}</span>
        </div>
      </div>
    </div>

    <div class="btn" @click="toAdd" v-if="$permissions('app_apppreventionreturntopoverty_edit')">编辑</div>
  </div>
</template>

<script>
export default {
  name: 'residentDetail',
  data() {
    return {
      id: '',
      info: {},
      healthyStatusList: []
    }
  },
  onLoad(o) {
    this.$dict.load('fpRelationship','sex','fpNation','fpPoliticalOutlook','fpYear','fpLaborSkills','fpEmploymentChannels')
    this.id = o.id,
    this.getInfo()
    uni.$on('reload',()=>{
      this.getInfo()
    })
  },
  methods: {
    getInfo() {
      this.$http.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${this.id}`).then(res => {
        if (res.code === 0) {
          this.info = res.data
          this.healthyStatusList = res.data.healthyStatus.split(',')

        }
      })
    },
    toAdd() {
      uni.navigateTo({url: `./Add?id=${this.id}`})
    }
  }
}
</script>

<style lang="scss" scoped>
.residentDetail {
  .item-wrapper {
    background: #fff;
    margin-bottom: 16px;
    padding: 0 32px 130px;

    .item-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 96px;

      & > span {
        color: #3975C6;
        font-size: 32px;
      }

      .left {
        display: flex;
        align-items: center;

        h2 {
          color: #333333;
          font-size: 32px;
          font-weight: 500;
        }

        i {
          font-style: normal;
          color: #2EA222;
          font-size: 32px;
        }
      }
    }

    .item-info {
      display: flex;
      justify-content: space-between;
      padding: 14px 0;

      label {
        color: #999999;
        font-size: 32px;
      }

      span {
        max-width: 496px;
        text-align: right;
        color: #333333;
        font-size: 32px;
      }
    }

    .item-avatar {
      height: 192px;

      img {
        width: 112px;
        height: 112px;
        margin-right: 24px;
      }

      .left-right {
        p {
          margin-top: 8px;
          color: #999999;
          font-size: 28px;
        }
      }
    }
  }
  .btn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 112px;
    line-height: 112px;
    text-align: center;
    background: #3192F4;
    color: #FFFFFF;
  }
}
</style>