dvcp_v2_webapp/project/sass/apps/AppSpecialMental/components/Detail.vue

 <template>
  <ai-detail class="AppSpecial" isHasSidebar>
    <template slot="title">
      <ai-title title="详情" isShowBack isShowBottomBorder @onBackClick="cancel(true)">
      </ai-title>
    </template>
    <template slot="content">
      <AiSidebar :tabTitle="tabTitle" v-model="currIndex"></AiSidebar>
      <ai-card title="基本信息" v-show="currIndex === 0">
        <template #content>
          <ai-wrapper>
            <ai-info-item label="姓名" :value="info.name"></ai-info-item>
            <ai-info-item label="身份证号" :value="info.idNumber"></ai-info-item>
            <ai-info-item label="性别" :value="idNumberInfo.gender"></ai-info-item>
            <ai-info-item label="出生日期" :value="idNumberInfo.birthday"></ai-info-item>
            <ai-info-item label="联系电话" :value="info.phone"></ai-info-item>
            <ai-info-item label="所属区域" :value="info.areaName"></ai-info-item>
            <ai-info-item label="详细地址" isLine :value="info.address"></ai-info-item>
            <ai-info-item label="所属网格" :value="info.girdName"></ai-info-item>
            <ai-info-item label="家庭年收入" :value="info.income"></ai-info-item>
            <ai-info-item label="发病日期" :value="info.sickTime"></ai-info-item>
            <ai-info-item label="监护人姓名" :value="info.helpName"></ai-info-item>
            <ai-info-item label="监护人联系方式" :value="info.helpPhone"></ai-info-item>
            <ai-info-item label="目前危险等级" :value="dict.getLabel('appSpecialDengerLevel', info.level)"></ai-info-item>
            <ai-info-item label="治疗情况" isLine :value="dict.getLabel('appSpecialCure', info.situation)"></ai-info-item>
          </ai-wrapper>
        </template>
      </ai-card>
      <div class="visit-list" v-show="currIndex === 1">
        <div class="visit-item" v-for="(item, index) in list" :key="index">
          <div class="visit-item__top">
            <div class="left">
              <div class="avatar">{{ item.name.substr(item.name.length - 2) }}</div>
              <h2>{{ item.name }}</h2>
            </div>
            <span>{{ item.visitTime }}</span>
          </div>
          <b>{{ item.title }}</b>
          <p>{{ item.description }}</p>
          <div class="visit-imgs">
            <ai-uploader v-model="item.images" :instance="instance" :limit="9" disabled/>
          </div>
          <div class="visit-status">
            <span>现实状态：</span>
            <i>{{ dict.getLabel('visitCondolenceReality', item.reality) }}</i>
          </div>
        </div>
        <ai-empty v-if="!list.length"></ai-empty>
      </div>
    </template>
  </ai-detail>
</template>

<script>
  export default {
    name: 'Detail',

    props: {
      instance: Function,
      dict: Object,
      params: Object
    },

    data () {
      return {
        currIndex: 0,
        tabTitle: ['人员信息', '走访记录'],
        info: {},
        list: [],
        idNumberInfo: {}
      }
    },

    created () {
      if (this.params && this.params.id) {
        this.id = this.params.id
      
        this.dict.load('appSpecialSituation', 'appSpecialPlacement', 'appSpecialDenger', 'appSpecialCrime',
            'appSpecialControl', 'appSpecialDebug', 'appSpecialDrug', 'appSpecialChangeType', 'appSpecialCure', 'appSpecialDengerLevel',
            'appSpecialDisableLevel', 'appSpecialDisableType', 'appSpecialHealth', 'appSpecialMarriage', 'appSpecialTypeFive','isReflection','yesOrNo').then(() => {
          this.getInfo(this.params.id)
        })
      }
    },

    methods: {
      getInfo (id) {
        this.instance.post(`/app/appspecialmental/queryDetailById?id=${id}`).then(res => {
          if (res.code === 0) {
            this.info = res.data
            this.idNumberInfo = this.idCardNoUtil.getIdCardInfo(res.data.idNumber)
          }
        })
      },

      cancel (isRefresh) {
        this.$emit('change', {
          type: 'List',
          isRefresh: !!isRefresh
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .AppSpecial {
    .visit-list {
      .visit-item {
        padding: 10px 0;
        border-bottom: 1px solid #eee;

        &:first-child {
          padding-top: 0;
        }

        &:last-child {
          border-bottom: none;
        }

        .visit-status {
          display: flex;
          align-items: center;
          font-size: 14px;

          span {
            color: #333;
          }

          i {
            color: #999;
            font-style: normal;
          }
        }

        & > p {
          line-height: 1.4;
          margin-bottom: 4px;
          text-align: justify;
          color: #666;
          font-size: 16px;
        }

        .visit-item__top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 10px;

          span {
            font-size: 14px;
            color: #999;
          }

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

            img, .avatar {
              width: 40px;
              height: 40px;
              line-height: 40px;
              text-align: center;
              margin-right: 10px;
              border-radius: 50%;
              font-size: 14px;
              color: #fff;
              background: #26f;
            }

            h2 {
              font-size: 16px;
              font-weight: 500;
            }
          }
        }
      }
    }
  }
</style>