dvcp_v2_wechat_app/src/mods/conv/AppHealthReport/Detail.vue

<template>
  <div class="detail">
    <div class="detail-header">
      <div class="name">
        <h2>张三<span>返乡人员</span></h2>
        <p @click="call(info.phone)"><u-icon name="phone" color="#4181FF" size="28"></u-icon>拨打电话</p>
      </div>
      <div class="idNumber">
        <span>身份证号：</span>
        <span>420107197309172837</span>
      </div>
      <div class="phone">
        <span>手机号码：</span>
        <span>13827263092</span>
      </div>
      <div class="address">
        <span>详细地址：</span>
        <span>辛店镇北靳楼-北靳楼大学学生宿舍560</span>
      </div>
    </div>

    <div class="detail-info">
      <div class="title">
        <div class="left">
          <h2>上报记录</h2>
          <p>个人连续无异常上报<span>7</span>>天后自动解除风险</p>
        </div>
        <div class="right">
          <span>3</span>/<span>7</span>天
        </div>
      </div>
      <div class="list">
        <div class="item">
          <div class="item_card">
            <div class="left">
              <span></span><span>2020-07-20</span><span>（自主上报）</span>
            </div>
            <div class="right">
              <span :class="'status0'">异常</span>
              <!-- :class="item.check ? 'img-active' : ''" -->
              <img src="./components/down-icon.png" :class="checked == true ? '': 'img-active'" alt="" @click="putOn" />
            </div>
          </div>
          <div class="item_info" v-if="checked">
            <div class="items">
              <label>当前健康状况</label>
              <div>发烧、乏力、咳嗽</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    appName:"上报记录",
    data () {
      return {
        info: {},
        checked: true,
      }
    },

    onLoad (query) {
      this.$dict.load(['epidemicTouchInFourteen', 'epidemicRecentHealth', 'epidemicRecentTestResult', 'epidemicHealthCode', 'epidemicVaccineTime']).then(() => {
        this.getInfo(query.id)
      })
      this.getInfo(query.id)
    },

    methods: {
      preview (url) {
        uni.previewImage({
          urls: this.info.checkPhoto.map(v => v.url),
          current: url
        })
      },

      // 收起展开
      putOn() {
        this.checked = !this.checked
      },

      call(phone) {
        uni.makePhoneCall({
          phoneNumber: phone
        })
      },

      getInfo (id) {
        this.$instance.post(`/app/appepidemichealthreport/queryDetailById?id=${id}`).then(res => {
          if (res.code === 0) {
            this.info = res.data
            this.info.checkPhoto = JSON.parse(res.data.checkPhoto)
            let healthName = ''
            this.info.isHealth = false
            res.data.health.split(',').forEach(v => {
              if (v > 0) {
                this.info.isHealth = true
              }
              healthName = healthName + this.$dict.getLabel('epidemicRecentHealth', v)
            })
            this.info.healthName = healthName
          }
        })
      },

      call (phone) {
        uni.makePhoneCall({
          phoneNumber: phone
        })
      }
    }
  }
</script>

<style lang="scss">
  .detail {
    padding-bottom: 40px;

    .detail-header {
      padding: 32px;
      box-sizing: border-box;
      background: #FFF;

      .name {
        display: flex;
        justify-content: space-between;
        align-items: center;
        h2 {
          font-weight: 600;
          font-size: 40px;
          span {
            font-weight: normal;
            font-size: 26px;
            padding: 4px 8px;
            margin-left: 16px;
            background: #FFF5F7;
            color: #FF4466;
          }
        }
        p {
          font-size: 26px;
          color: #4181FF;
        }
      }

      .idNumber, 
      .phone,
      .address {
        color: #999999;
        font-size: 26px;
        margin-top: 8px;
        
        span:first-child {
          display: inline-block;
          width: 130px;
          vertical-align: top;
        }
        span:last-child {
          display: inline-block;
          width: calc(100% - 130px);
          vertical-align: top;
        }
      }
      .idNumber {
        margin-top: 16px;
      }
    }

    .detail-info {
      margin-top: 24px;
      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #FFF;
        padding: 32px;
        box-sizing: border-box;
        .left {
          h2 {
            font-size: 38px;
            color: #333333;
            font-weight: 600;
          }
          p {
            font-size: 26px;
            color: #999999;
            margin-top: 8px;
          }
        }
        .right {
          display: flex;
          color: #999999;
          font-size: 28px;
          span:first-child {
            color: #4181FF;
          }
          
        }
      }

      .list {
        .item {
          .item_card {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 26px 32px;
            background: #FFF;
            
            .left {
              span:first-child {
                display: inline-block;
                width: 4px;
                height: 24px;
                background: #1365DD;
                vertical-align: center;
                margin-right: 12px;
              }
            }
            .right {
              span {
                display: inline-block;
                vertical-align: center;
                margin-right: 16px;
                padding: 4px 8px;
              }
              .status0 {
                color: #FF4466;
                background: #FFF5F7;
              }
              .status1 {
                color: #1AAAFF;
                background: #E8F6FF;
              }
              .status2 {
                color: #42D784;
                background: #ECFBF2;
              }

              img {
                width: 48px;
                height: 48px;
                transition: all 0.3s ease-in-out;
                transform: rotate(180deg);
                vertical-align: bottom;
              }

              .img-active {
                transform: rotate(0deg);
              }
            }
          }

          .item_info {
            padding: 16px 32px;
            background: #FAFAFA;
            .items {
              display: flex;
              justify-content: space-between;
              align-items: center;
            }
          }
        }
      }
    }
  }
</style>