特殊人群
This commit is contained in:
shijingjing
@@ -1,11 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="DetailPeople">
|
<div class="DetailPeople">
|
||||||
|
<!-- 头像 姓名 -->
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<div class="photos">
|
<div class="photos">
|
||||||
<img :src="data.resident.photo" alt="" v-if="data.resident && data.resident.photo" />
|
<img :src="data.resident.photo" alt="" v-if="data.resident && data.resident.photo" />
|
||||||
<img src="./components/img/44.png" alt="" v-else />
|
<img src="./components/img/44.png" alt="" v-else />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="rightTop">
|
<div class="rightTop">
|
||||||
<span class="names">{{ data.resident && data.resident.name }}</span>
|
<span class="names">{{ data.resident && data.resident.name }}</span>
|
||||||
@@ -18,91 +18,114 @@
|
|||||||
<div class="rightBottom" v-if="data.resident && data.resident.phone">{{ data.resident.phone }}</div>
|
<div class="rightBottom" v-if="data.resident && data.resident.phone">{{ data.resident.phone }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
|
<!-- tab栏 -->
|
||||||
|
<div class="tab-list">
|
||||||
|
<div v-for="(item, index) in data.resident.tsrqInfos" :key="index" :class="tabIndex == index ? 'tab-item active' : 'tab-item' " @click="tabIndex=index">
|
||||||
|
<img :src="tabIndex == index ? item.activeIcon : item.icon" alt="">
|
||||||
|
<p>{{item.name}}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 基础信息 -->
|
||||||
|
<div v-if="tabIndex == 0">
|
||||||
|
<div class="middle">
|
||||||
|
<div class="hint">个人基本信息</div>
|
||||||
|
|
||||||
<div class="middle">
|
<div class="contents">
|
||||||
<div class="hint">个人基本信息</div>
|
<div class="item">
|
||||||
|
<span>籍贯</span>
|
||||||
|
<span>{{ data.resident && data.resident.birthplaceAreaName }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="contents">
|
<div class="item">
|
||||||
<div class="item">
|
<span>身份证号</span>
|
||||||
<span>籍贯</span>
|
<span>{{ data.resident && data.resident.idNumber.replace(/^(\w{6})\w{8}(.*)$/, '$1****$2') }}</span>
|
||||||
<span>{{ data.resident && data.resident.birthplaceAreaName }}</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>
|
||||||
|
|
||||||
<div class="item">
|
<div class="lines"></div>
|
||||||
<span>身份证号</span>
|
|
||||||
<span>{{ data.resident && data.resident.idNumber.replace(/^(\w{6})\w{8}(.*)$/, '$1****$2') }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="item">
|
<div class="bottom">
|
||||||
<span>民族</span>
|
<div class="hint">联络信息</div>
|
||||||
<span v-if="data.resident && data.resident.nation"> {{ $dict.getLabel('nation', data.resident.nation) }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="item">
|
<div class="contents">
|
||||||
<span>文化程度</span>
|
<div class="item">
|
||||||
<span v-if="data.resident && data.resident.education">{{ $dict.getLabel('education', data.resident.education) }}</span>
|
<span>联系方式</span>
|
||||||
</div>
|
<span class="phones" v-if="data.resident && data.resident.phone" @click="callPhone(data.resident.phone)">{{ data.resident.phone }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<span>婚姻状况</span>
|
<span>现住址</span>
|
||||||
<span v-if="data.resident && data.resident.maritalStatus">{{ $dict.getLabel('maritalStatus', data.resident.maritalStatus) }}</span>
|
<span v-if="data.resident && data.resident.currentAreaName">{{ data.resident.currentAreaName }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<span>政治面貌</span>
|
<span>现住详细地址</span>
|
||||||
<span v-if="data.resident && data.resident.politicsStatus">{{ $dict.getLabel('politicsStatus', data.resident.politicsStatus) }}</span>
|
<span v-if="data.resident && data.resident.currentAddress">{{ data.resident.currentAddress }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<span>兵役状况</span>
|
<span>户籍地址</span>
|
||||||
<span v-if="data.resident && data.resident.militaryStatus">{{ $dict.getLabel('militaryStatus', data.resident.militaryStatus) }}</span>
|
<span v-if="data.resident && data.resident.householdAreaName">{{ data.resident.householdAreaName }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<span>宗教信仰</span>
|
<span>户籍详细地址</span>
|
||||||
<span v-if="data.resident && data.resident.faithType">{{ $dict.getLabel('faithType', data.resident.faithType) }}</span>
|
<span v-if="data.resident && data.resident.householdAddress">{{ data.resident.householdAddress }}</span>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 残疾人员 -->
|
||||||
<div class="lines"></div>
|
<div v-if="tabIndex == 1">
|
||||||
|
<div v-if="data.resident.tsrqInfos"></div>
|
||||||
<div class="bottom">
|
<AiEmpty v-else />
|
||||||
<div class="hint">联络信息</div>
|
</div>
|
||||||
|
<!-- 精神病人 -->
|
||||||
<div class="contents">
|
<div v-if="tabIndex == 2">
|
||||||
<div class="item">
|
<div v-if="data.resident.tsrqInfos"></div>
|
||||||
<span>联系方式</span>
|
<AiEmpty v-else />
|
||||||
<span class="phones" v-if="data.resident && data.resident.phone" @click="callPhone(data.resident.phone)">{{ data.resident.phone }}</span>
|
</div>
|
||||||
</div>
|
<!-- 吸毒人员 -->
|
||||||
|
<div v-if="tabIndex == 3">
|
||||||
<div class="item">
|
<div v-if="data.resident.tsrqInfos"></div>
|
||||||
<span>现住址</span>
|
<AiEmpty v-else />
|
||||||
<span v-if="data.resident && data.resident.currentAreaName">{{ data.resident.currentAreaName }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="item">
|
|
||||||
<span>现住详细地址</span>
|
|
||||||
<span v-if="data.resident && data.resident.currentAddress">{{ data.resident.currentAddress }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="item">
|
|
||||||
<span>户籍地址</span>
|
|
||||||
<span v-if="data.resident && data.resident.householdAreaName">{{ data.resident.householdAreaName }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="item">
|
|
||||||
<span>户籍详细地址</span>
|
|
||||||
<span v-if="data.resident && data.resident.householdAddress">{{ data.resident.householdAddress }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -116,6 +139,29 @@ export default {
|
|||||||
return {
|
return {
|
||||||
id: '',
|
id: '',
|
||||||
data: [],
|
data: [],
|
||||||
|
tabList: [
|
||||||
|
{
|
||||||
|
icon: require('./components/img/icon1n@2x.png'),
|
||||||
|
activeIcon: require('./components/img/icon1h@2x.png'),
|
||||||
|
name: '基本信息',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: require('./components/img/tsrq@2x.png'),
|
||||||
|
activeIcon: require('./components/img/tsrq备份@2x.png'),
|
||||||
|
name: '残疾人员',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: require('./components/img/tsrq@2x.png'),
|
||||||
|
activeIcon: require('./components/img/tsrq备份@2x.png'),
|
||||||
|
name: '精神病人',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: require('./components/img/tsrq@2x.png'),
|
||||||
|
activeIcon: require('./components/img/tsrq备份@2x.png'),
|
||||||
|
name: '吸毒人员',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tabIndex: 0,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {},
|
computed: {},
|
||||||
@@ -134,9 +180,6 @@ export default {
|
|||||||
this.$http.post(`/app/appresident/detail?id=${this.id}`).then((res) => {
|
this.$http.post(`/app/appresident/detail?id=${this.id}`).then((res) => {
|
||||||
if (res.code == 0) {
|
if (res.code == 0) {
|
||||||
this.data = res.data
|
this.data = res.data
|
||||||
// this.$nextTick(() => {
|
|
||||||
// this.currentAreaName = res.data.resident.currentAreaName
|
|
||||||
// })
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
@@ -151,6 +194,38 @@ export default {
|
|||||||
.DetailPeople {
|
.DetailPeople {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
.tab-list{
|
||||||
|
height: 100%;
|
||||||
|
padding: 32px 0;
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.active{
|
||||||
|
background-color: #357CE3;
|
||||||
|
p{
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
.top {
|
.top {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 48px 32px 32px 32px;
|
padding: 48px 32px 32px 32px;
|
||||||
@@ -197,6 +272,7 @@ export default {
|
|||||||
|
|
||||||
.hint {
|
.hint {
|
||||||
padding: 32px 0;
|
padding: 32px 0;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contents {
|
.contents {
|
||||||
|
|||||||
BIN
src/saas/AppResidentDocument/components/img/icon1h@2x.png
Normal file
BIN
src/saas/AppResidentDocument/components/img/icon1h@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 491 B |
BIN
src/saas/AppResidentDocument/components/img/icon1n@2x.png
Normal file
BIN
src/saas/AppResidentDocument/components/img/icon1n@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 590 B |
BIN
src/saas/AppResidentDocument/components/img/tsrq@2x.png
Normal file
BIN
src/saas/AppResidentDocument/components/img/tsrq@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/saas/AppResidentDocument/components/img/tsrq备份@2x.png
Normal file
BIN
src/saas/AppResidentDocument/components/img/tsrq备份@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Reference in New Issue
Block a user