dvcp_v2_wechat_app/src/project/pingchang/AppGetewayRegister/getewayDetail.vue

<template>
  <div class="getewayDetail" v-if="pageShow">
    <div class="detail-header">
      <h2>{{ info.name }}的返乡登记信息</h2>
      <div class="item-info">
        <div class="item-info__item">
          <image src="https://cdn.cunwuyun.cn/wxmp/pingchang/from-icon.png"/>
          <span>{{ info.startAreaName }}</span>
        </div>
        <div class="item-info__item">
          <image src="https://cdn.cunwuyun.cn/wxmp/pingchang/to-icon.png"/>
          <span>{{ info.arriveAreaName }}</span>
        </div>
        <div class="item-info__item">
          <image src="https://cdn.cunwuyun.cn/wxmp/pingchang/to-date.png"/>
          <span>{{ info.arriveTime && info.arriveTime.substr(0, info.arriveTime.length - 3) }} 到达</span>
        </div>
        <div class="item-info__item">
          <image src="https://cdn.cunwuyun.cn/wxmp/pingchang/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 class="detail-info__item">
        <div class="left">
          <label>高危行业</label>
        </div>
        <div class="right">
          <span>{{ $dict.getLabel('EP_highRiskIndustries', info.highRiskIndustries) }}</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 v-for="(item, index) in travelType" :key="index">
            {{ $dict.getLabel('EP_travelType', item) }}
            <span v-show="index < travelType.length - 1">，</span>
          </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'}">{{ info.fromHighRiskArea==1? info.highRiskAreaName: '否' }}</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 :style="{ color: info.abnormalType? '#FF4466' :'#42D784'}">{{ $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">
        <u-table>
          <u-tr>
            <u-th>姓名</u-th>
            <u-th>手机号</u-th>
          </u-tr>
          <u-tr v-for="(e,index) in companionList" :key="index">
            <u-td>{{ e.name }}</u-td>
            <u-td>{{ e.phone }}</u-td>
          </u-tr>
        </u-table>
      </div>
    </div>
    <div class="btn-wrapper" v-if="info.handleType == 0">
      <div class="btn" @click="$linkTo(`./getewayAdd?id=${info.id}`)" hover-class="text-hover">编辑</div>
    </div>
  </div>
</template>

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

  onLoad(query) {
    this.$loading()
    this.$dict.load(['epidemicRecentHealth', 'epidemicRecentTravel', 'epidemicTouchInFourteen', 'epidemicMemberType', 'epidemicRecentTestResult','EP_travelType']).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.companionList = res.data.companionList
          this.travelType = res.data.travelType?.split(',')
          this.pageShow = true
        }
        this.$hideLoading()
      })
    },

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

<style lang="scss" scoped>
.getewayDetail {
  padding-bottom: 150px;
  box-sizing: border-box;

  .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;
          }
        }
      }
    }

    .companionList {
      padding: 20px;
      box-sizing: border-box;

      u-table {
        u-tr {
          u-th {
            width: 50%;
          }
          u-td {
            width: 50%;
          }
        }
      }
    }
  }
}
</style>