kubbo/dvcp_v2_wxcp_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

居民档案

Browse Source
This commit is contained in:
yanran200730
2022-08-09 10:59:46 +08:00
parent 0d1999e553
commit 8f6d53fa7d
2 changed files with 381 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

333
src/project/saas/AppResidentDocument/DetailCard.vue
View File

@@ -1,49 +1,135 @@
<template>
<div class="DetailCard" v-if="pageShow">
<div class="top"></div>
<div class="middle">
<div class="hint">家庭地址</div>
<div class="areaHint">
<u-icon name="map-fill" color="#73ABFF"></u-icon>
<span style="margin-left: 14px;">{{resident.currentAreaName}}</span>
<span v-if="resident.currentAddress">{{resident.currentAddress}}</span>
<div class="top">
<image src="./components/img/4.png" />
<div class="top-right">
<div class="top-right__top">
<div class="left">
<h2>卓作旺</h2>
<i>已注销</i>
</div>
<span>户主</span>
</div>
<div class="top-right__bottom">
<span>退役军人</span>
<span>退役军人</span>
<span>退役军人</span>
<span>退役军人</span>
<span>退役军人</span>
<span>退役军人</span>
<span>退役军人</span>
</div>
</div>
</div>
<div class="bottom">
<div class="hints">家庭成员 {{ data.family && data.family.length }}人</div>
<div v-if="data.family && data.family.length > 0">
<div class="card" v-for="(item, i) in data.family" :key="i" @click="toDetailPeople(item)">
<div class="photos">
<img :src="item.photo" alt="" v-if="item.photo" />
<img src="./components/img/44.png" alt="" v-else />
</div>
<div class="right">
<div class="rightTop">
<div class="rightTop-lefts">
<span class="names">{{ item.name }}</span>
<span class="fileStatuss" v-if="item.fileStatus == 1">已注销</span>
<span class="householdNames" v-if="item.householdName == 1">户主</span>
<span class="householdNames" v-else>
{{ $dict.getLabel('householdRelation', item.householdRelation) }}
</span>
</div>
<div class="rightTop-rights">
<u-section :show-line="false" sub-title="详情"></u-section>
</div>
<div class="body">
<div class="tab">
<span @click="currIndex = 0" :class="[currIndex === 0 ? 'active' : '']">基本信息</span>
<span @click="currIndex = 1" :class="[currIndex === 1 ? 'active' : '']">家庭成员信息</span>
</div>
<div class="info" v-show="currIndex === 0">
<div class="info-group">
<h2>个人基本信息</h2>
<div class="info-wrapper">
<div class="item">
<span>籍贯</span>
<i>{{ data.resident && data.resident.birthplaceAreaName }}</i>
</div>
<div class="rightBottom">
<span>身份证号：</span>
<span>{{ item.idNumber.replace(/^(\w{6})\w{8}(.*)$/, '$1********$2') }}</span>
<div class="item">
<span>身份证号</span>
<i>{{ data.resident && data.resident.idNumber.replace(/^(\w{6})\w{8}(.*)$/, '$1********$2') }}</i>
</div>
<div class="item">
<span>民族</span>
<i v-if="data.resident && data.resident.nation"> {{ $dict.getLabel('nation', data.resident.nation) }}</i>
</div>
<div class="item">
<span>文化程度</span>
<i v-if="data.resident && data.resident.education">{{ $dict.getLabel('education', data.resident.education) }}</i>
</div>
<div class="item">
<span>婚姻状况</span>
<i v-if="data.resident && data.resident.maritalStatus">{{ $dict.getLabel('maritalStatus', data.resident.maritalStatus) }}</i>
</div>
<div class="item">
<span>政治面貌</span>
<i v-if="data.resident && data.resident.politicsStatus">{{ $dict.getLabel('politicsStatus', data.resident.politicsStatus) }}</i>
</div>
<div class="item">
<span>兵役状况</span>
<i v-if="data.resident && data.resident.militaryStatus">{{ $dict.getLabel('militaryStatus', data.resident.militaryStatus) }}</i>
</div>
<div class="item">
<span>宗教信仰</span>
<i v-if="data.resident && data.resident.faithType">{{ $dict.getLabel('faithType', data.resident.faithType) }}</i>
</div>
<div class="item">
<span>职业</span>
<i v-if="data.resident && data.resident.job">{{ $dict.getLabel('job', data.resident.job) }}</i>
</div>
</div>
</div>
<div class="info-group">
<h2>联络信息</h2>
<div class="info-wrapper">
<div class="item">
<span>联系方式</span>
<i class="phones" v-if="data.resident && data.resident.phone" @click="callPhone(data.resident.phone)">{{ data.resident.phone }}</i>
</div>
<div class="item">
<span>现住址</span>
<i v-if="data.resident && data.resident.currentAreaName">{{ data.resident.currentAreaName }}</i>
</div>
<div class="item">
<span>现住详细地址</span>
<i v-if="data.resident && data.resident.currentAddress">{{ data.resident.currentAddress }}</i>
</div>
<div class="item">
<span>户籍地址</span>
<i v-if="data.resident && data.resident.householdAreaName">{{ data.resident.householdAreaName }}</i>
</div>
<div class="item">
<span>户籍详细地址</span>
<i v-if="data.resident && data.resident.householdAddress">{{ data.resident.householdAddress }}</i>
</div>
</div>
</div>
</div>
<div class="bottom" v-show="currIndex === 1">
<div class="hints">家庭成员({{ data.family && data.family.length }}人)</div>
<AiEmpty v-else></AiEmpty>
<div v-if="data.family && data.family.length > 0">
<div class="card" v-for="(item, i) in data.family" :key="i" @click="toDetailPeople(item)">
<div class="photos">
<img :src="item.photo" alt="" v-if="item.photo" />
<img src="./components/img/44.png" alt="" v-else />
</div>
<div class="right">
<div class="rightTop">
<div class="rightTop-lefts">
<span class="names">{{ item.name }}</span>
<span class="fileStatuss" v-if="item.fileStatus == 1">已注销</span>
<span class="householdNames" v-if="item.householdName == 1">户主</span>
<span class="householdNames" v-else>
{{ $dict.getLabel('householdRelation', item.householdRelation) }}
</span>
</div>
<div class="rightTop-rights">
<u-section :show-line="false" sub-title="详情"></u-section>
</div>
</div>
<div class="rightBottom">
<span>身份证号：</span>
<span>{{ item.idNumber.replace(/^(\w{6})\w{8}(.*)$/, '$1********$2') }}</span>
</div>
</div>
</div>
</div>
<AiEmpty v-else></AiEmpty>
</div>
</div>
</div>
</template>
@@ -59,6 +145,7 @@
id: '',
data: [],
resident: {},
currIndex: 0,
pageShow: false
}
},
@@ -98,35 +185,169 @@
<style scoped lang="scss">
.DetailCard {
height: 100%;
.top {
height: 112px;
background: #3975c6;
* {
box-sizing: border-box;
}
.middle {
margin: -80px 32px 0 32px;
padding: 38px 30px 78px 28px;
background: #ffffff;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.02);
border-radius: 16px;
z-index: 999;
.hint {
font-size: 32px;
font-weight: 500;
color: #333333;
.top {
display: flex;
align-items: center;
padding: 48px 32px 32px;
background: #fff;
& > image {
width: 112px;
height: 112px;
margin-right: 24px;
border-radius: 50%;
}
.areaHint {
margin-top: 38px;
.top-right {
flex: 1;
.top-right__bottom {
display: flex;
align-items: center;
flex-wrap: wrap;
color: #999999;
font-size: 28px;
span {
line-height: 1.4;
margin-right: 16px;
}
}
.top-right__top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
& > span {
color: #5AAD6A;
font-size: 32px;
}
.left {
display: flex;
align-items: center;
h2 {
margin-right: 16px;
color: #333;
font-size: 36px;
font-weight: 700;
}
i {
width: 88px;
height: 40px;
line-height: 40px;
text-align: center;
background: #FFECEF;
border-radius: 8px;
color: #FF4466;
font-size: 24px;
font-style: normal;
}
}
}
}
}
.body {
.tab {
display: flex;
align-items: center;
height: 96px;
padding: 0 32px;
border-bottom: 1px solid #D4D4D4;
background: #fff;
span {
position: relative;
flex: 1;
height: 100%;
line-height: 96px;
color: #000;
font-size: 32px;
text-align: center;
&.active {
color: #1365DD;
&:after {
position: absolute;
bottom: 0;
left: 50%;
z-index: 1;
width: 192px;
height: 6px;
background: #1365DD;
content: ' ';
transform: translateX(-50%);
}
}
}
}
.info {
.info-group {
margin-bottom: 4px;
padding: 0 32px;
background: #FFFFFF;
&:first-child {
margin-bottom: 4px;
}
& > h2 {
height: 108px;
line-height: 108px;
font-weight: 700;
font-size: 32px;
color: #333333;
}
.item {
display: flex;
line-height: 1.3;
padding: 14px 0;
font-size: 32px;
.phones {
color: #3d94fb;
}
span {
width: 190px;
flex-shrink: 1;
color: #999;
}
i {
flex: 1;
margin-left: 16px;
text-align: right;
color: #333;
font-style: normal;
}
}
}
}
}
.bottom {
margin: 32px 30px 48px 30px;
background: #fff;
padding: 38px 30px 30px 30px;
padding: 0 60px 32px;
.hints {
margin-bottom: 38px;
height: 108px;
line-height: 108px;
margin-bottom: 32px;
font-weight: 700;
font-size: 32px;
color: #333333;
}
.card {
display: flex;

160
src/project/saas/AppResidentDocument/DetailPeople.vue
View File

@@ -1,6 +1,27 @@
<template>
<div class="DetailPeople" v-if="pageShow">
<div class="top">
<image src="./components/img/4.png" />
<div class="top-right">
<div class="top-right__top">
<div class="left">
<h2>卓作旺</h2>
<i>已注销</i>
</div>
<span>户主</span>
</div>
<div class="top-right__bottom">
<span>退役军人</span>
<span>退役军人</span>
<span>退役军人</span>
<span>退役军人</span>
<span>退役军人</span>
<span>退役军人</span>
<span>退役军人</span>
</div>
</div>
</div>
<!-- <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 />
@@ -17,7 +38,7 @@
<div class="rightBottom" v-if="data.resident && data.resident.phone">{{ data.resident.phone }}</div>
</div>
</div>
</div> -->
<div class="line"></div>
<div class="middle">
<div class="hint">个人基本信息</div>
@@ -134,48 +155,67 @@
background: #fff;
.top {
display: flex;
padding: 48px 32px 32px 32px;
.photos {
img {
width: 112px;
height: 112px;
border-radius: 50%;
}
align-items: center;
padding: 48px 32px 32px;
background: #fff;
& > image {
width: 112px;
height: 112px;
margin-right: 24px;
border-radius: 50%;
}
.right {
display: flex;
flex-direction: column;
width: 100%;
margin-left: 24px;
.rightTop {
.top-right {
flex: 1;
.top-right__bottom {
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;
align-items: center;
flex-wrap: wrap;
color: #999999;
font-size: 28px;
span {
line-height: 1.4;
margin-right: 16px;
}
}
.rightBottom {
margin-top: 16px;
.top-right__top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
& > span {
color: #5AAD6A;
font-size: 32px;
}
.left {
display: flex;
align-items: center;
h2 {
margin-right: 16px;
color: #333;
font-size: 36px;
font-weight: 700;
}
i {
width: 88px;
height: 40px;
line-height: 40px;
text-align: center;
background: #FFECEF;
border-radius: 8px;
color: #FF4466;
font-size: 24px;
font-style: normal;
}
}
}
}
}
@@ -190,30 +230,38 @@
padding: 0 32px;
.hint {
padding: 32px 0;
height: 108px;
line-height: 108px;
font-weight: 700;
font-size: 32px;
color: #333333;
}
.contents {
.item {
display: flex;
justify-content: space-between;
padding: 14px 0;
.item {
display: flex;
line-height: 1.3;
padding: 14px 0;
font-size: 32px;
.phones {
color: #3d94fb;
}
.phones {
color: #3d94fb;
}
span {
width: 180px;
margin-right: 20rpx;
}
span {
width: 190px;
flex-shrink: 1;
color: #999;
}
i {
flex: 1;
text-align: right;
font-style: normal;
i {
flex: 1;
margin-left: 16px;
text-align: right;
color: #333;
font-style: normal;
}
}
}
}
}