380 lines
9.7 KiB
Vue
380 lines
9.7 KiB
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>
|