405 lines
11 KiB
Vue
405 lines
11 KiB
Vue
<template>
|
|
<div class="DetailPeople" v-if="data.resident">
|
|
|
|
<div class="top">
|
|
<div class="photos">
|
|
<img :src="data.resident.photo" alt="" v-if="data.resident && data.resident.photo" />
|
|
<img src="./components/img/44.png" alt="" v-else />
|
|
</div>
|
|
|
|
<div class="right">
|
|
<div class="rightTop">
|
|
<span class="names">{{ data.resident && data.resident.name }}<span v-if="data.resident.fileStatus == 1" class="fileStatuss"> 已注销 </span></span>
|
|
<span class="householdNames" v-if="data.resident && data.resident.householdName == 1">户主</span>
|
|
<span class="householdNames" v-else>
|
|
{{ $dict.getLabel('householdRelation', data.resident && data.resident.householdRelation) }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="rightBottom" v-if="data.resident && data.resident.phone">{{ data.resident.phone }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="line"></div>
|
|
|
|
<div class="tab-list">
|
|
<div v-for="(item, index) in tabList" :key="index" :class="tabIndex == index ? 'tab-item active' : 'tab-item' " @click="tabIndex=index">
|
|
<div v-if="index == 0">
|
|
<img :src="item.activeIcon" alt="" v-if="tabIndex==0">
|
|
<img :src=" item.icon" alt="" v-if="tabIndex!=0">
|
|
</div>
|
|
<div v-if="index != 0">
|
|
<img src="./components/img/tsrq备份@2x.png" alt="" v-if="tabIndex==index && index != 0">
|
|
<img src="./components/img/tsrq@2x.png" alt="" v-if="tabIndex!=index && index != 0">
|
|
</div>
|
|
|
|
<p v-if="index==0">{{item.name}}</p>
|
|
<p v-else class="type">{{item.applicationName}}</p>
|
|
</div>
|
|
</div>
|
|
<!-- 基本信息 -->
|
|
<div v-if="tabIndex == 0">
|
|
<div class="middle">
|
|
<div class="hint">个人基本信息</div>
|
|
|
|
<div class="contents">
|
|
<div class="item">
|
|
<span>籍贯</span>
|
|
<span>{{ data.resident && data.resident.birthplaceAreaName }}</span>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<span>身份证号</span>
|
|
<span>{{ data.resident && data.resident.idNumber.replace(/^(\w{6})\w{8}(.*)$/, '$1********$2') }}</span>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<span>民族</span>
|
|
<span v-if="data.resident && data.resident.nation"> {{ $dict.getLabel('nation', data.resident.nation) }}</span>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<span>文化程度</span>
|
|
<span v-if="data.resident && data.resident.education">{{ $dict.getLabel('education', data.resident.education) }}</span>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<span>婚姻状况</span>
|
|
<span v-if="data.resident && data.resident.maritalStatus">{{ $dict.getLabel('maritalStatus', data.resident.maritalStatus) }}</span>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<span>政治面貌</span>
|
|
<span v-if="data.resident && data.resident.politicsStatus">{{ $dict.getLabel('politicsStatus', data.resident.politicsStatus) }}</span>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<span>兵役状况</span>
|
|
<span v-if="data.resident && data.resident.militaryStatus">{{ $dict.getLabel('militaryStatus', data.resident.militaryStatus) }}</span>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<span>宗教信仰</span>
|
|
<span v-if="data.resident && data.resident.faithType">{{ $dict.getLabel('faithType', data.resident.faithType) }}</span>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<span>职业</span>
|
|
<span v-if="data.resident && data.resident.job">{{ $dict.getLabel('job', data.resident.job) }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lines"></div>
|
|
|
|
<div class="bottom">
|
|
<div class="hint">联络信息</div>
|
|
|
|
<div class="contents">
|
|
<div class="item">
|
|
<span>联系方式</span>
|
|
<span class="phones" v-if="data.resident && data.resident.phone" @click="callPhone(data.resident.phone)">{{ data.resident.phone }}</span>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<span class="label">现住址</span>
|
|
<span class="value" v-if="data.resident && data.resident.currentAreaName">{{ data.resident.currentAreaName }}</span>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<span class="label">现住详细地址</span>
|
|
<span class="value" v-if="data.resident && data.resident.currentAddress">{{ data.resident.currentAddress }}</span>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<span class="label">户籍地址</span>
|
|
<span class="value" v-if="data.resident && data.resident.householdAreaName">{{ data.resident.householdAreaName }}</span>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<span class="label">户籍详细地址</span>
|
|
<span class="value" v-if="data.resident && data.resident.householdAddress">{{ data.resident.householdAddress }}</span>
|
|
</div>
|
|
|
|
<div class="item" v-if="type == 1 && data.resident.auditStatus != 0">
|
|
<span class="label">处理结果</span>
|
|
<span class="value">{{ data.resident.auditStatus == 1 ? '通过' : '不通过' }}</span>
|
|
</div>
|
|
|
|
<div class="item" v-if="type == 1 && data.resident.auditStatus != 0">
|
|
<span class="label">原因</span>
|
|
</div>
|
|
<div class="item">{{data.resident.auditOpinion || ''}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 特殊人群 -->
|
|
<div v-if="tabIndex != 0 && tabList && tabList.length">
|
|
<div class="spacial" v-for="(item,index) in tabList" :key="index" v-if="tabIndex == index">
|
|
<div class="specialList" v-for="(t,indexs) in item.tableInfos" :key="indexs" v-if="item.tableInfos && item.tableInfos.length">
|
|
<div class="spacial-row">
|
|
<div>{{ t.fieldName }}</div>
|
|
<div>{{ t.fieldValue }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pad-b112" v-if="data.resident.auditStatus == 0 && type == 1"></div>
|
|
<div class="footer" v-if="data.resident.auditStatus == 0 && type == 1">
|
|
<div @click="toContent">不通过</div>
|
|
<div class="pass" @click="examine(1)">通过</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'DetailPeople',
|
|
components: {},
|
|
props: {},
|
|
data() {
|
|
return {
|
|
id: '',
|
|
data: [],
|
|
type: 0, //0查看详情 1审核详情
|
|
tabList:[],
|
|
tabIndex: 0,
|
|
}
|
|
},
|
|
computed: {},
|
|
watch: {},
|
|
onLoad(o) {
|
|
this.id = o.id
|
|
this.type = o.type
|
|
this.$dict.load('householdRelation', 'nation', 'education', 'maritalStatus', 'politicsStatus', 'militaryStatus', 'faithType', 'job', 'fileStatus').then(() => {
|
|
this.getDetail()
|
|
})
|
|
uni.$on('updatePeople', res => {
|
|
this.getDetail()
|
|
})
|
|
},
|
|
onShow() {
|
|
document.title = '家庭成员信息'
|
|
},
|
|
methods: {
|
|
getDetail() {
|
|
this.$http.post(`/app/appresident/detail?id=${this.id}`).then((res) => {
|
|
if (res.code == 0) {
|
|
this.data = res.data
|
|
if (res.data.resident.tsrqInfos) {
|
|
this.tabList = res.data.resident.tsrqInfos
|
|
let info = {
|
|
icon: require('./components/img/icon1n@2x.png'),
|
|
activeIcon: require('./components/img/icon1h@2x.png'),
|
|
name: '基本信息',
|
|
}
|
|
this.tabList.unshift(info)
|
|
} else {
|
|
this.tabList =[{
|
|
icon: require('./components/img/icon1n@2x.png'),
|
|
activeIcon: require('./components/img/icon1h@2x.png'),
|
|
name: '基本信息',
|
|
}]
|
|
}
|
|
}
|
|
})
|
|
},
|
|
callPhone(phone) {
|
|
uni.makePhoneCall({ phoneNumber: phone })
|
|
},
|
|
examine(pass) {
|
|
this.$confirm('确认通过该审核？').then(() => {
|
|
this.$http.post(`/app/appresident/examine?id=${this.id}&pass=${pass}`).then((res) => {
|
|
if (res.code == 0) {
|
|
uni.$emit('updatePeople')
|
|
this.$u.toast('审核成功')
|
|
setTimeout(() => {
|
|
uni.navigateBack()
|
|
}, 600)
|
|
}
|
|
})
|
|
})
|
|
|
|
},
|
|
toContent() {
|
|
uni.navigateTo({url: `./Content?id=${this.id}`})
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.DetailPeople {
|
|
height: 100%;
|
|
background: #fff;
|
|
.top {
|
|
display: flex;
|
|
padding: 48px 32px 32px 32px;
|
|
.photos {
|
|
img {
|
|
width: 112px;
|
|
height: 112px;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
margin-left: 24px;
|
|
.rightTop {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.fileStatuss {
|
|
display: inline-block;
|
|
margin-left: 30px;
|
|
color: #ff4466;
|
|
background: #ffecef;
|
|
border-radius: 8px;
|
|
width: 120px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
font-size: 28px;
|
|
}
|
|
.names {
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
}
|
|
.householdNames {
|
|
margin-left: 30px;
|
|
font-size: 26px;
|
|
font-weight: 500;
|
|
color: #5aad6a;
|
|
}
|
|
}
|
|
.rightBottom {
|
|
margin-top: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tab-list{
|
|
padding-top: 32px;
|
|
display: flex;
|
|
word-wrap: nowrap;
|
|
overflow-x: scroll;
|
|
-webkit-overflow-scrolling: touch;
|
|
.tab-item{
|
|
display: inline-block;
|
|
width: 148px;
|
|
height: 136px;
|
|
background-color: #F8F9FB;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
margin-left: 32px;
|
|
img{
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-top: 30px;
|
|
}
|
|
p{
|
|
font-size: 22px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #C5C9CD;
|
|
line-height: 32px;
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
.type {
|
|
padding: 0 10px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space:nowrap;
|
|
}
|
|
.active{
|
|
background-color: #357CE3;
|
|
p{
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.line {
|
|
height: 8px;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.middle,
|
|
.bottom {
|
|
padding: 0 32px;
|
|
|
|
.hint {
|
|
font-weight: 600;
|
|
padding: 32px 0;
|
|
}
|
|
|
|
.contents {
|
|
.item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 14px 0;
|
|
.phones {
|
|
color: #3d94fb;
|
|
}
|
|
.label{
|
|
width: 200px;
|
|
}
|
|
.value{
|
|
width: calc(100% - 200px);
|
|
text-align: right;
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.lines {
|
|
height: 4px;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.spacial {
|
|
margin-top: 30px;
|
|
.specialList {
|
|
padding: 14px 32px;
|
|
.spacial-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pad-b112{
|
|
padding-bottom: 112px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.footer {
|
|
width: 100%;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 99999;
|
|
display: flex;
|
|
font-size: 32px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
height: 112px;
|
|
line-height: 112px;
|
|
text-align: center;
|
|
div{
|
|
flex: 1;
|
|
background: #fff;
|
|
color: #FF4466;
|
|
}
|
|
|
|
.pass {
|
|
background: #1365DD;
|
|
color: #FFF;
|
|
}
|
|
}
|
|
}
|
|
</style>
|