357 lines
9.0 KiB
Vue
357 lines
9.0 KiB
Vue
<template>
|
|
<div class="DetailGetway" v-if="pageShow">
|
|
<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>
|
|
</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 :style="{color: /[03]/.test(info.type) ? '#42D784' : '#FF4466'}">{{
|
|
$dict.getLabel('epidemicMemberType', 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.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.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 class="detail-info__item">
|
|
<div class="left">
|
|
<label>行程描述</label>
|
|
</div>
|
|
<div class="right">
|
|
<span>{{ info.description }}</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.checkTime.split(' ')[0] }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="detail-info__item">
|
|
<div class="left">
|
|
<label>核酸检测结果</label>
|
|
</div>
|
|
<div class="right">
|
|
<span :style="{color: info.checkResult === '0' ? '#42D784' : '#FF4466'}">{{
|
|
$dict.getLabel('epidemicRecentTestResult', info.checkResult)
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="detail-info__item detail-info__item--img">
|
|
<div class="left" style="max-width: 100%;">
|
|
<label>本人健康码截图或核酸检测报告</label>
|
|
</div>
|
|
<div class="right">
|
|
<image :src="item.url" @click="preview(item.url)" v-for="(item, index) in info.checkPhoto" :key="index"/>
|
|
</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.temperature >= 37.3 ? '#FF4466' : '#42D784'}">{{ info.temperature }}℃</span>
|
|
</div>
|
|
</div>
|
|
<div class="detail-info__item">
|
|
<div class="left">
|
|
<label>14天内是否接触新冠确诊或疑似患者</label>
|
|
</div>
|
|
<div class="right">
|
|
<span :style="{color: info.touchInFourteen === '0' ? '#42D784' : '#FF4466'}">{{
|
|
$dict.getLabel('epidemicTouchInFourteen', info.touchInFourteen)
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="detail-info__item">
|
|
<div class="left">
|
|
<label>当前健康状况</label>
|
|
</div>
|
|
<div class="right">
|
|
<span :style="{color: !info.isHealth ? '#42D784' : '#FF4466'}">{{ info.healthName }}</span>
|
|
</div>
|
|
</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/appepidemicbackhomerecord/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
|
|
|
|
this.$nextTick(() => {
|
|
this.pageShow = true
|
|
})
|
|
}
|
|
|
|
this.$hideLoading()
|
|
})
|
|
},
|
|
|
|
call(phone) {
|
|
uni.makePhoneCall({
|
|
phoneNumber: phone
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.DetailGetway {
|
|
padding-bottom: 40px;
|
|
|
|
.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>
|