dvcp_v2_wechat_app/src/project/pingchang/AppGetwayRegister/DetailGetway.vue

<template>
<!--  v-if="pageShow" -->
  <div class="DetailGetway">
    <div class="detail-header">
      <h2>{{ info.name }}的返乡登记信息</h2>
      <div class="item-info">
        <div class="item-info__item">
          <image src="/static/img/from-icon.png"/>
          <span>{{ info.startAreaName }}</span>
        </div>
        <div class="item-info__item">
          <image src="/static/img/to-icon.png"/>
          <span>{{ info.arriveAreaName }}</span>
        </div>
        <div class="item-info__item">
          <image src="/static/img/to-date.png"/>
          <span>{{ info.arriveTime && info.arriveTime.substr(0, info.arriveTime.length - 3) }} 到达</span>
        </div>
        <div class="item-info__item">
          <image src="/static/img/kakou.png"/>
          <span>{{ info.gatewayName }}</span>
        </div>
      </div>
    </div>
    <div class="detail-info">
      <h2>基本信息</h2>
      <div class="detail-info__item">
        <div class="left">
          <label>姓名</label>
        </div>
        <div class="right">
          <span>{{ info.name }}</span>
        </div>
      </div>
      <div class="detail-info__item">
        <div class="left">
          <label>身份证号</label>
        </div>
        <div class="right">
          <span>{{ info.idNumber }}</span>
        </div>
      </div>
      <div class="detail-info__item">
        <div class="left">
          <label>联系方式</label>
        </div>
        <div class="right" @click="call(info.phone)" hover-class="text-hover">
          <image src="https://cdn.cunwuyun.cn/dvcp/h5/common/phone.png"/>
          <span style="color: #4181FF">{{ info.phone }}</span>
        </div>
      </div>
      <div class="detail-info__item">
        <div class="left">
          <label>人员类别</label>
        </div>
        <div class="right">
          <span>{{ $dict.getLabel('EP_registerPersonType', info.type) }}</span>
        </div>
      </div>
    </div>
    <div class="detail-info">
      <h2>行程信息</h2>
      <div class="detail-info__item">
        <div class="left">
          <label>出行方式</label>
        </div>
        <div class="right">
          <span>{{ $dict.getLabel('epidemicRecentTravel', info.travelType) }}</span>
        </div>
      </div>
      <div class="detail-info__item">
        <div class="left">
          <label>车次/航班</label>
        </div>
        <div class="right">
          <span>{{ info.trainNo }}</span>
        </div>
      </div>
      <div class="detail-info__item">
        <div class="left">
          <label>出发时间</label>
        </div>
        <div class="right">
          <span>{{ info.startTime && info.startTime.substr(0, info.startTime.length - 3) }}</span>
        </div>
      </div>
      <div class="detail-info__item">
        <div class="left">
          <label>出发地区</label>
        </div>
        <div class="right">
          <span :style="{color: info.denger == 1 ? '#FF4466' : '#333'}">{{ info.startAreaName }}</span>
        </div>
      </div>
      <div class="detail-info__item">
        <div class="left">
          <label>出发地址</label>
        </div>
        <div class="right">
          <span>{{ info.startAddress }}</span>
        </div>
      </div>
      <div class="detail-info__item">
        <div class="left">
          <label>行程描述</label>
        </div>
        <div class="right">
          <span>{{ info.description }}</span>
        </div>
      </div>
      <div class="detail-info__item">
        <div class="left">
          <label>抵平时间</label>
        </div>
        <div class="right">
          <span>{{ info.arriveTime && info.arriveTime.substr(0, info.arriveTime.length - 3) }}</span>
        </div>
      </div>
      <div class="detail-info__item">
        <div class="left">
          <label>返乡地区</label>
        </div>
        <div class="right">
          <span>{{ info.arriveAreaName }}</span>
        </div>
      </div>
      <div class="detail-info__item">
        <div class="left">
          <label>返乡地址</label>
        </div>
        <div class="right">
          <span>{{ info.arriveAddress }}</span>
        </div>
      </div>
    </div>
    <div class="detail-info">
      <h2>健康状况</h2>
      <div class="detail-info__item">
        <div class="left">
          <label>是否有风险旅居史？</label>
        </div>
        <div class="right">
          <span :style="{ color: info.fromHighRiskArea==1? '#FF4466' : '#42D784'}">{{ $dict.getLabel('yesOrNo',info.fromHighRiskArea) }}</span>
        </div>
      </div>
      <div class="detail-info__item">
        <div class="left">
          <label>7天内是否接触新冠确诊或疑似患者？</label>
        </div>
        <div class="right">
          <span :style="{ color: info.contactPatients==1? '#FF4466' : info.contactPatients==2? '': '#42D784'}">{{ $dict.getLabel('epidemicTouchInFourteen', info.contactPatients) }}</span>
        </div>
      </div>
      <div class="detail-info__item">
        <div class="left">
          <label>当前健康状况</label>
        </div>
        <div class="right">
          <span>{{ $dict.getLabel('EP_abnormalType',info.abnormalType) || '没有出现症状' }}</span>
        </div>
      </div>
    </div>
    <div class="detail-info" v-if="info.companionCount > 0">
      <h2>同行情况</h2>
      <div class="detail-info__item">
        <div class="left">
          <label>同行人数</label>
        </div>
        <div class="right">
          <span>{{ info.companionCount }}</span>
        </div>
      </div>
      <div class="companionList">
        小伙伴表格
      </div>
    </div>
    <div class="btn-wrapper" v-if="info.handleType == 0">
      <div class="btn" @click="toEdit" hover-class="text-hover">编辑</div>
    </div>
  </div>
</template>

<script>
export default {
  appName: "卡口登记详情",
  data() {
    return {
      info: {},
      // pageShow: false
    }
  },

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

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

    getInfo(id) {
      this.$instance.post(`/app/appepidemicpreventionregisterinfo/queryDetailById?id=${id}`).then(res => {
        if (res?.data) {
          this.info = res.data
        }

        this.$hideLoading()
      })
    },

    toEdit() {
      console.log('编辑');
    },

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

<style lang="scss">
.DetailGetway {
  padding-bottom: 140px;

  .detail-header {
    padding: 32px;
    background: #fff;

    h2 {
      margin-bottom: 32px;
      color: #333333;
      font-size: 40px;
      font-weight: 600;
    }

    .item-info {
      .item-info__item {
        display: flex;
        align-items: center;
        margin-bottom: 8px;

        &:last-child {
          margin-bottom: 0;
        }

        image {
          width: 32px;
          height: 32px;
          margin-right: 16px;
        }

        span {
          color: #333;
          font-size: 28px;
        }
      }
    }
  }

  .detail-info {
    margin-top: 24px;
    padding: 0 32px;
    background: #fff;

    & > h2 {
      height: 116px;
      line-height: 116px;
      font-size: 38px;
      font-weight: 600;
      color: #333;
    }

    .detail-info__item {
      display: flex;
      justify-content: space-between;
      padding: 34px 0;
      border-bottom: 1px solid #DDDDDD;

      &:last-child {
        border: none;
      }

      .left {
        display: flex;
        line-height: 1.3;
        max-width: 360px;

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

      .right {
        display: flex;
        max-width: 450px;

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

        image {
          width: 40px;
          height: 40px;
        }
      }
    }

    .detail-info__item--img {
      display: block;

      .right {
        flex-wrap: wrap;
        max-width: 100%;
        margin-top: 34px;

        image {
          width: 226px;
          height: 226px;
          margin: 0 9px 9px 0;

          &:nth-of-type(3n) {
            margin-right: 0;
          }
        }
      }
    }
  }
}
</style>