问我
web-app\src\pages\supportPoor\poorList.vue
<template>
<ag-page id="poorList">
<dl-header name="贫困户清单"></dl-header>
<main class="content list-block" ref="mainContent">
<div class="search-box" ref="sBox">
<div class="searchRelation">
<form action="#" @submit.prevent="searchDl">
<input type="search" ref='search' class="search-input" v-model="qryVal" placeholder="请输入贫困户姓名或身份证号" maxlength="18">
</form>
<img class="img" src="../../assets/images/search_new.png" @click="searchDl" />
<img v-show="qryVal&&qryVal.length" class="search-delete" src="../../assets/images/clear.svg" @click="clearVal" /></img>
</div>
<b @click="callOCR"></b>
</div>
<div v-show="!!detailList&&!detailList.length" class="empty-content">
<img src="./imgs/poor_empty.png">
<p class="empty-tips">查询不到该贫困户信息</p>
</div>
<div v-if="!!detailList&&detailList.length" class="list-scroll">
<scroll class="acListScroll" :pullup="true" @scrollDown="scrollDown" :listenScroll="true" :pulldown="true" @scrollToEnd="scrollEndEvent" :dataList="detailList" :loading="loading" :noMore="noMore" :isScrollModel="false" :startY="transform" ref="scrollHook">
<ul class="poor-list" ref="scrollUl">
<li v-for="(item,index) in detailList" class="poor-item" @click="showPoorDetaile(index)">
<div class="poor-img">
<img :src="item.image||'./static/default_head_new.png'">
<b class="hasImage" v-if="item.image"></b>
</div>
<div class="poor-detail">
<p class="fullname">{{item.poorHouseholdsName}}</p>
<p class="modul identity">身份证：{{identityMask(item.identityNo)}}</p>
<p class="modul phone">电 话：{{telMask(item.phone)}}</p>
</div>
</li>
</ul>
</scroll>
</div>
</main>
</ag-page>
</template>
<script>
import header from '@/components/headerDl/header';
import scroll from '@/components/scroll/scroll';
import axios from 'axios';
// import datajson from '../../../static/json/poorList_1.json';
export default {
name: 'poorList',
data () {
return {
qryVal: '', // 姓名或身份证查询字符串
loading: false, // 加载更多时loading显示
idAimsFpProject: '', // 扶贫项目id
page: 1, // 请求清单列表时页数
pageSize: 10, // 每页条数
someList: null, // 暂存每次请求回来的单页清单列表
detailList: null, // 农户清单列表
transform: 0 // 记录scroll垂直滚动的距离
};
},
computed: {
// 是否显示没有更多数据的提示
noMore () {
if (this.someList === null) {
return false;
} else if (this.someList.length < 10) {
return true;
}
return false;
}
},
created () {
// 读取缓存中的数据，若有数据则不再重新请求数据，并初始化列表，否则重新请求数据
let projectInfo = this.$sessionStorage.getItem('poorList') || '';
if (projectInfo) {
this.idAimsFpProject = projectInfo.idAimsFpProject;
}
let poorListInfo = this.$sessionStorage.getItem('poorListInfo');
this.$sessionStorage.removeItem('poorListInfo');
if (poorListInfo) {
this.$nextTick(() => {
this.detailList = poorListInfo.list;
this.page = poorListInfo.page;
this.transform = poorListInfo.transform;
this.someList = poorListInfo.someList;
});
} else {
this.$indicator.open();
this.scrollDown();
// this.detailList = datajson;
}
},
mounted () {
},
updated () {
if (this.detailList && this.detailList.length !== 0 && this.$refs.mainContent) {
let mainH = this.$refs.mainContent.clientHeight; // mian标签元素内容可视区域高度
let ulH = this.$refs.scrollUl.clientHeight; // ul列表内容可视区域高度
let sBoxH = this.$refs.sBox.clientHeight; // 搜索框内容可视区域高度
// scroll组件外层框内容可视区域高度
let scrollH = this.$refs.scrollHook.$refs.wrapper.clientHeight;
console.log(scrollH, mainH, ulH);
// 节流，两种情况下无需更改外层容器高度
if (scrollH + 1 === ulH || (ulH > mainH && scrollH === mainH - sBoxH)) {
return;
}
if (mainH - sBoxH < ulH) {
// 减去搜索框高度，否则列表无法拖到最底部
this.$refs.scrollHook.$refs.wrapper.style.height = mainH - sBoxH + 'px';
return;
}
// better-scroll插件要求scroll容器高度必须比ul列表高度低，否则无法滚动，这里设置低1px
this.$refs.scrollHook.$refs.wrapper.style.height = ulH - 1 + 'px';
}
},
watch: {
qryVal (newVal) {
if (newVal.length === 0) {
this.$indicator.open();
this.scrollDown();
}
}
},
methods: {
// 上拉加载
scrollEndEvent () {
if (this.noMore) {
return false;
}
this.loading = true;
axios.get('http://localhost:8080/static/json/poorList_2.json').then(res => {
this.loading = false;
if (Array.isArray(res.data.body)) {
if (res.data.body.length !== 0) {
this.page ++;
}
this.someList = res.data.body;
this.detailList = this.detailList.concat(this.someList);
} else {
this.someList = [];
this.detailList = this.detailList.concat(this.someList);
}
});
// this.$xhr('/poorHouseholds/showPoorHouseholdsList', {
// method: 'post',
// loading: false,
// body: {
// idAimsFpProject: this.idAimsFpProject,
// poorHouseholdsName: this.qryVal,
// page: this.page,
// pageSize: this.pageSize
// },
// successFun: (res) => {
// this.loading = false;
// if (Array.isArray(res.body)) {
// if (res.body.length !== 0) {
// this.page ++;
// }
// this.someList = res.body;
// this.detailList = this.detailList.concat(this.someList);
// } else {
// this.someList = [];
// this.detailList = this.detailList.concat(this.someList);
// }
// },
// failFun: (res) => {
// this.loading = false;
// this.$toast({message: res && res.head.msg || '数据请求失败，请重试'});
// }
// });
},
// 下拉刷新
scrollDown () {
axios.get('http://localhost:8080/static/json/poorList_1.json').then(res => {
console.log(res);
this.$indicator.close();
if (Array.isArray(res.data.body)) {
this.detailList = res.data.body;
} else {
this.detailList = [];
}
this.page = 2;
this.someList = null;
});
// this.$xhr('/poorHouseholds/showPoorHouseholdsList', {
// method: 'post',
// loading: false,
// body: {
// idAimsFpProject: this.idAimsFpProject,
// poorHouseholdsName: this.qryVal,
// page: 1,
// pageSize: this.pageSize
// },
// successFun: (res) => {
// this.$indicator.close();
// if (Array.isArray(res.body)) {
// this.detailList = res.body;
// } else {
// this.detailList = [];
// }
// this.page = 2;
// this.someList = null;
// console.log(res);
// },
// failFun: (res) => {
// this.$indicator.close();
// this.detailList = [];
// this.$toast({message: res && res.head.msg || '数据请求失败，请重试'});
// }
// });
},
callOCR () {
window.getIdInfo = (idInfo) => {
if (!idInfo) { window.getIdInfo = null; return; }
if (typeof idInfo === 'string') {
try {
idInfo = JSON.parse(idInfo);
} catch (err) {
this.$toast('json字符串解析错误');
}
}
if (idInfo.code === -1) {
this.$toast('ocr扫描失败');
} else if (idInfo.code === 0) {
if (idInfo.validation) {
this.$toast('请选择身份证正面');
return;
}
this.qryVal = idInfo.idNumber;
this.searchDl();
}
window.getIdInfo = null;
};
let params = JSON.stringify({isFront: true, callback: 'getIdInfo'});
if (window.idScanner && typeof window.idScanner.scanIdCard === 'function') {
window.idScanner.scanIdCard(params);
} else if (window.App.IS_IOS && typeof window.app.scanIdCard === 'function') {
window.app.scanIdCard(params);
} else {
this.$toast('身份证ocr调用失败');
}
},
searchDl () {
this.$indicator.open();
this.scrollDown();
},
// 清除搜索框值
clearVal () {
this.qryVal = '';
this.$indicator.open();
this.scrollDown();
this.$refs.search.focus();
},
identityMask (identity) {
identity = identity != null ? identity.toString() : '';
return identity ? (identity.substr(0, identity.length - 6) + '******') : '';
},
telMask (tel) {
tel = tel != null ? tel.toString() : '';
return tel ? (tel.substr(0, 3) + '****' + tel.substr(tel.length - 4, 4)) : '无';
},
showPoorDetaile (index) {
let transformStr = this.$refs.scrollHook.$refs.wrapper.firstElementChild.style.transform; // 获取scorll组件样式的transform属性值
this.transform = parseInt(transformStr.split(', ')[1]); // 提取scorll组件滚动高度
// 缓存列表数据，包括滚动高度，和请求的页数
this.$sessionStorage.setItem('poorListInfo', {list: this.detailList, someList: this.someList, transform: this.transform, page: this.page});
this.$sessionStorage.setItem('userInfo', this.detailList[index]);
this.$router.push('/personalInfo');
}
},
components: {
'dl-header': header,
'scroll': scroll
}
};
</script>
<style lang="less" scoped>
@import '../../style/mixin.less';
#poorList {
background: #fff;
}
.content {
background: #F7F7F8;
overflow: inherit;
}
.list-scroll {
}
.acListScroll {
position: absolute;
z-index: 1;
left: 0;
right: 0;
}
.search-box{
background-color: #fff;
height: 2.8rem;
line-height: 2.8rem;
padding: .6rem 1rem;
position: relative;
z-index: 2;
.searchRelation{
height: 1.6rem;
width: 14.75rem;
background-color: #F7F7F8;
border-radius: .8rem;
}
.search-input {
display: block;
width: 100%;
-webkit-appearance: none;
background:none;
border:none;
border-radius: .2rem;
line-height: 1rem;
outline: none;
padding: .35rem 2rem .35rem 1.55rem;
font-size: 0.65rem;
color: #C1C1C1;
}
::-webkit-search-cancel-button { display: none; }
input::-webkit-input-placeholder {
color:#BFBFBF;
}
b {
display: inline-block;
width: 1.1rem;
height: .95rem;
background: url('./imgs/icon-carme.png') no-repeat center;
background-size: 100% auto;
position: absolute;
right: 1.3rem;
bottom: .9rem;
z-index: 10;
}
.img{
display: inline-block;
width: .65rem;
height: .65rem;
margin-top: -1.25rem;
margin-left: .5rem;
float: left;
cursor: pointer;
}
.search-delete {
display: inline-block;
width: 1.3rem;
height: 1.3rem;
float: right;
margin-top: -1.6rem;
margin-right: .3rem;
}
}
.empty-content {
margin-top: 50%;
-webkit-transform: translateY(20%);
transform: translateY(20%);
img {
height: 6rem;
width: 6rem;
}
.empty-tips {
margin-top: .5rem;
font-size: .7rem;
color: #BFBFBF;
text-align: center;
}
}
.poor-content {
margin-top: .5rem;
position: relative;
}
.poor-introduction:after {
content: "";
display: table;
}
.poor-item:before {
content: "";
display: table;
}
.poor-item {
background: #fff;
margin-bottom: .5rem;
height: 4.5rem;
text-align: left;
padding: .75rem 1rem;
display: flex;
width: 100%;
.poor-img{
width: 3rem;
height: 3rem;
flex:0 0 3rem;
position: relative;
img{
border-radius: 50%;
width: 3rem;
height: 3rem;
object-fit:cover;
}
.hasImage{
position: absolute;
left: 0;
top: 0;
background: rgba(53,50,50,0.70);
width: 100%;
height: 100%;
border-radius: 50%;
}
.hasImage:before{
content: '';
display: block;
background: url('./imgs/default_lock.png') no-repeat center;
background-size: 100% auto;
position: absolute;
left: 50%;
top: 50%;
width: .9rem;
height: 1rem;
margin-left: -0.45rem;
margin-top:-0.5rem;
}
}
.poor-detail{
flex:1;
text-align: left;
margin-left: .75rem;
position: relative;
.fullname{
font-family: PingFangSC-Medium;
font-size: .8rem;
color: #222;
line-height: 1.1rem;
margin-bottom: .2rem;
}
.modul{
font-family: PingFangSC-Regular;
font-size: .6rem;
color: #888888;
line-height: .85rem;
}
}
.poor-detail:after{
content: '';
display: block;
width: .3rem;
height: .3rem;
position: absolute;
right: 0;
top: 50%;
margin-top:-0.2rem;
border-width: .05rem;
border-style: solid;
border-color: #999 #999 transparent transparent;
border-radius: .1rem;
transform:rotate(45deg);
}
}
</style>web-app\static\json\poorList_1.json
{
"head":{
"code":200,
"msg":"查询贫困户信息成功！"
},
"body":[
{"poorHouseholdsId":"7997636A8CDB34BCE054022128574717","idAimsFpProject":"0556b7e2-8885-49b9-9d8e-b70919542e46","poorHouseholdsName":"翟柃晶","phone":"13786335645","identityNo":"420281193301******","address":"西藏自治区 昌都地区 八宿县","attribute":"1","image":null,"averageIncome":45623.0,"lastAverageIncome":45623.0,"allAverageIncome":45623.0,"faceLibId":null,"faceId":null,"createBy":"JIANGUAN629","createDate":1541061703000,"updateBy":"JIANGUAN629","updateDate":1541061703000,"attributeName":"低保贫困户","projectName":"贵州项目","faceFlag":false,"pageSize":0,"page":0},
{"poorHouseholdsId":"7997636A8CDF34BCE054022128574717","idAimsFpProject":"0556b7e2-8885-49b9-9d8e-b70919542e46","poorHouseholdsName":"项宬桠","phone":"13782413681","identityNo":"510181195505******","address":"江西南昌清原区","attribute":"1","image":null,"averageIncome":45623.0,"lastAverageIncome":45623.0,"allAverageIncome":45623.0,"faceLibId":null,"faceId":null,"createBy":"JIANGUAN629","createDate":1541061703000,"updateBy":"JIANGUAN629","updateDate":1541061703000,"attributeName":"低保贫困户","projectName":"贵州项目","faceFlag":false,"pageSize":0,"page":0},
{"poorHouseholdsId":"7997636A8CDE34BCE054022128574717","idAimsFpProject":"0556b7e2-8885-49b9-9d8e-b70919542e46","poorHouseholdsName":"胡虹歌","phone":"18953025702","identityNo":"621001195505******","address":"江西南昌清原区","attribute":"1","image":null,"averageIncome":45623.0,"lastAverageIncome":45623.0,"allAverageIncome":45623.0,"faceLibId":null,"faceId":null,"createBy":"JIANGUAN629","createDate":1541061703000,"updateBy":"JIANGUAN629","updateDate":1541061703000,"attributeName":"低保贫困户","projectName":"贵州项目","faceFlag":false,"pageSize":0,"page":0},
{"poorHouseholdsId":"7997636A8CDD34BCE054022128574717","idAimsFpProject":"0556b7e2-8885-49b9-9d8e-b70919542e46","poorHouseholdsName":"孔涅蜀","phone":"18853021368","identityNo":"220821193507******","address":"江西南昌清原区","attribute":"1","image":null,"averageIncome":45623.0,"lastAverageIncome":45623.0,"allAverageIncome":45623.0,"faceLibId":null,"faceId":null,"createBy":"JIANGUAN629","createDate":1541061703000,"updateBy":"JIANGUAN629","updateDate":1541061703000,"attributeName":"低保贫困户","projectName":"贵州项目","faceFlag":false,"pageSize":0,"page":0},
{"poorHouseholdsId":"7997636A8CDC34BCE054022128574717","idAimsFpProject":"0556b7e2-8885-49b9-9d8e-b70919542e46","poorHouseholdsName":"汲晏殷","phone":null,"identityNo":"150625198301******","address":"江西南昌清原区","attribute":"1","image":null,"averageIncome":45623.0,"lastAverageIncome":45623.0,"allAverageIncome":45623.0,"faceLibId":null,"faceId":null,"createBy":"JIANGUAN629","createDate":1541061703000,"updateBy":"JIANGUAN629","updateDate":1541061703000,"attributeName":"低保贫困户","projectName":"贵州项目","faceFlag":false,"pageSize":0,"page":0},
{"poorHouseholdsId":"7996C738B77B35A7E054022128574717","idAimsFpProject":"dc739758-03be-4973-b036-20aeb266db9c","poorHouseholdsName":"缪巍隆","phone":"13786335645","identityNo":"420281193301******","address":"西藏自治区 昌都地区 八宿县","attribute":"1","image":null,"averageIncome":45623.0,"lastAverageIncome":45623.0,"allAverageIncome":45623.0,"faceLibId":null,"faceId":null,"createBy":"JIANGUAN629","createDate":1541059082000,"updateBy":"JIANGUAN629","updateDate":1541059082000,"attributeName":"低保贫困户","projectName":"贵州测试","faceFlag":false,"pageSize":0,"page":0},
{"poorHouseholdsId":"7996C738B77F35A7E054022128574717","idAimsFpProject":"dc739758-03be-4973-b036-20aeb266db9c","poorHouseholdsName":"逄漪贤","phone":"13782413681","identityNo":"510181195505******","address":"江西南昌清原区","attribute":"1","image":null,"averageIncome":45623.0,"lastAverageIncome":45623.0,"allAverageIncome":45623.0,"faceLibId":null,"faceId":null,"createBy":"JIANGUAN629","createDate":1541059082000,"updateBy":"JIANGUAN629","updateDate":1541059082000,"attributeName":"低保贫困户","projectName":"贵州测试","faceFlag":false,"pageSize":0,"page":0},
{"poorHouseholdsId":"7996C738B77E35A7E054022128574717","idAimsFpProject":"dc739758-03be-4973-b036-20aeb266db9c","poorHouseholdsName":"苍九倬","phone":"18953025702","identityNo":"621001195505******","address":"江西南昌清原区","attribute":"1","image":null,"averageIncome":45623.0,"lastAverageIncome":45623.0,"allAverageIncome":45623.0,"faceLibId":null,"faceId":null,"createBy":"JIANGUAN629","createDate":1541059082000,"updateBy":"JIANGUAN629","updateDate":1541059082000,"attributeName":"低保贫困户","projectName":"贵州测试","faceFlag":false,"pageSize":0,"page":0},
{"poorHouseholdsId":"7996C738B77D35A7E054022128574717","idAimsFpProject":"dc739758-03be-4973-b036-20aeb266db9c","poorHouseholdsName":"卜洁舫","phone":"18853021368","identityNo":"220821193507******","address":"江西南昌清原区","attribute":"1","image":null,"averageIncome":45623.0,"lastAverageIncome":45623.0,"allAverageIncome":45623.0,"faceLibId":null,"faceId":null,"createBy":"JIANGUAN629","createDate":1541059082000,"updateBy":"JIANGUAN629","updateDate":1541059082000,"attributeName":"低保贫困户","projectName":"贵州测试","faceFlag":false,"pageSize":0,"page":0},
{"poorHouseholdsId":"7996C738B77C35A7E054022128574717","idAimsFpProject":"dc739758-03be-4973-b036-20aeb266db9c","poorHouseholdsName":"侯语举","phone":null,"identityNo":"150625198301******","address":"江西南昌清原区","attribute":"1","image":null,"averageIncome":45623.0,"lastAverageIncome":45623.0,"allAverageIncome":45623.0,"faceLibId":null,"faceId":null,"createBy":"JIANGUAN629","createDate":1541059082000,"updateBy":"JIANGUAN629","updateDate":1541059082000,"attributeName":"低保贫困户","projectName":"贵州测试","faceFlag":false,"pageSize":0,"page":0}
]
}web-app\static\json\poorList_2.json
{
"head":{
"code":200,
"msg":"查询贫困户信息成功！"
},
"body":[
{"poorHouseholdsId":"79958FF2EB4A560DE054022128574717","idAimsFpProject":"eae45b0b-af6a-4b2a-9186-0ea3ac9eb750","poorHouseholdsName":"嵇境芙","phone":"13786335645","identityNo":"420281193301******","address":"西藏自治区 昌都地区 八宿县","attribute":"1","image":"https://stg.iobs.pingan.com.cn/download/icore-aims-dmz-stg/d8eb49694fde4d90ab1f2cc2e3e4c73f","averageIncome":45623.0,"lastAverageIncome":45623.0,"allAverageIncome":45623.0,"faceLibId":"10812","faceId":"162670","createBy":"MOJIAYOUTEST713","createDate":1541054409000,"updateBy":"MOJIAYOUTEST713","updateDate":1541054425000,"attributeName":"低保贫困户","projectName":"撒阿斯达","faceFlag":false,"pageSize":0,"page":0},
{"poorHouseholdsId":"79958FF2EB4B560DE054022128574717","idAimsFpProject":"eae45b0b-af6a-4b2a-9186-0ea3ac9eb750","poorHouseholdsName":"龙哓卜","phone":null,"identityNo":"150625198301******","address":"江西南昌清原区","attribute":"1","image":null,"averageIncome":45623.0,"lastAverageIncome":45623.0,"allAverageIncome":45623.0,"faceLibId":null,"faceId":null,"createBy":"MOJIAYOUTEST713","createDate":1541054409000,"updateBy":"MOJIAYOUTEST713","updateDate":1541054409000,"attributeName":"低保贫困户","projectName":"撒阿斯达","faceFlag":false,"pageSize":0,"page":0},
{"poorHouseholdsId":"79958FF2EB4E560DE054022128574717","idAimsFpProject":"eae45b0b-af6a-4b2a-9186-0ea3ac9eb750","poorHouseholdsName":"阳菊瀛","phone":"13782413681","identityNo":"510181195505******","address":"江西南昌清原区","attribute":"1","image":null,"averageIncome":45623.0,"lastAverageIncome":45623.0,"allAverageIncome":45623.0,"faceLibId":null,"faceId":null,"createBy":"MOJIAYOUTEST713","createDate":1541054409000,"updateBy":"MOJIAYOUTEST713","updateDate":1541054409000,"attributeName":"低保贫困户","projectName":"撒阿斯达","faceFlag":false,"pageSize":0,"page":0},
{"poorHouseholdsId":"79958FF2EB4D560DE054022128574717","idAimsFpProject":"eae45b0b-af6a-4b2a-9186-0ea3ac9eb750","poorHouseholdsName":"凤章元","phone":"18953025702","identityNo":"621001195505******","address":"江西南昌清原区","attribute":"1","image":null,"averageIncome":45623.0,"lastAverageIncome":45623.0,"allAverageIncome":45623.0,"faceLibId":null,"faceId":null,"createBy":"MOJIAYOUTEST713","createDate":1541054409000,"updateBy":"MOJIAYOUTEST713","updateDate":1541054409000,"attributeName":"低保贫困户","projectName":"撒阿斯达","faceFlag":false,"pageSize":0,"page":0},
{"poorHouseholdsId":"79958FF2EB4C560DE054022128574717","idAimsFpProject":"eae45b0b-af6a-4b2a-9186-0ea3ac9eb750","poorHouseholdsName":"蒲目炫","phone":"18853021368","identityNo":"220821193507******","address":"江西南昌清原区","attribute":"1","image":null,"averageIncome":45623.0,"lastAverageIncome":45623.0,"allAverageIncome":45623.0,"faceLibId":null,"faceId":null,"createBy":"MOJIAYOUTEST713","createDate":1541054409000,"updateBy":"MOJIAYOUTEST713","updateDate":1541054409000,"attributeName":"低保贫困户","projectName":"撒阿斯达","faceFlag":false,"pageSize":0,"page":0},
{"poorHouseholdsId":"798171EF56165C8BE054022128574717","idAimsFpProject":"0d6bf00f-1ddf-43b0-9546-19426020bfc0","poorHouseholdsName":"季峪鹭","phone":"13782413681","identityNo":"510181195505******","address":"江西南昌清原区","attribute":"1","image":"https://stg.iobs.pingan.com.cn/download/icore-aims-dmz-stg/d468076f613e4a05abe968f61adcf0c2","averageIncome":45623.0,"lastAverageIncome":45623.0,"allAverageIncome":45623.0,"faceLibId":"10812","faceId":"162392","createBy":"MOJIAYOUTEST713","createDate":1540967457000,"updateBy":"MOJIAYOUTEST713","updateDate":1540967636000,"attributeName":"低保贫困户","projectName":"20103项目","faceFlag":false,"pageSize":0,"page":0},
{"poorHouseholdsId":"798171EF56155C8BE054022128574717","idAimsFpProject":"0d6bf00f-1ddf-43b0-9546-19426020bfc0","poorHouseholdsName":"孔烽汇","phone":"18953025702","identityNo":"621001195505******","address":"江西南昌清原区","attribute":"1","image":"https://stg.iobs.pingan.com.cn/download/icore-aims-dmz-stg/f0c1271b75964a3889c8ddbc81a4728d","averageIncome":45623.0,"lastAverageIncome":45623.0,"allAverageIncome":45623.0,"faceLibId":"10812","faceId":"162391","createBy":"MOJIAYOUTEST713","createDate":1540967457000,"updateBy":"MOJIAYOUTEST713","updateDate":1540967616000,"attributeName":"低保贫困户","projectName":"20103项目","faceFlag":false,"pageSize":0,"page":0},
{"poorHouseholdsId":"798171EF56145C8BE054022128574717","idAimsFpProject":"0d6bf00f-1ddf-43b0-9546-19426020bfc0","poorHouseholdsName":"松灼驹","phone":"18853021368","identityNo":"220821193507******","address":"江西南昌清原区","attribute":"1","image":"https://stg.iobs.pingan.com.cn/download/icore-aims-dmz-stg/179bb29ae0e64c55ab779752b5d505c7","averageIncome":45623.0,"lastAverageIncome":45623.0,"allAverageIncome":45623.0,"faceLibId":"10812","faceId":"162390","createBy":"MOJIAYOUTEST713","createDate":1540967457000,"updateBy":"MOJIAYOUTEST713","updateDate":1540967598000,"attributeName":"低保贫困户","projectName":"20103项目","faceFlag":false,"pageSize":0,"page":0},
{"poorHouseholdsId":"798171EF56135C8BE054022128574717","idAimsFpProject":"0d6bf00f-1ddf-43b0-9546-19426020bfc0","poorHouseholdsName":"曹占唐","phone":null,"identityNo":"150625198301******","address":"江西南昌清原区","attribute":"1","image":"https://stg.iobs.pingan.com.cn/download/icore-aims-dmz-stg/e97ee4de77da400d84fb8499b2f71e8c","averageIncome":45623.0,"lastAverageIncome":45623.0,"allAverageIncome":45623.0,"faceLibId":"10812","faceId":"162389","createBy":"MOJIAYOUTEST713","createDate":1540967457000,"updateBy":"MOJIAYOUTEST713","updateDate":1540967588000,"attributeName":"低保贫困户","projectName":"20103项目","faceFlag":false,"pageSize":0,"page":0},
{"poorHouseholdsId":"798171EF56125C8BE054022128574717","idAimsFpProject":"0d6bf00f-1ddf-43b0-9546-19426020bfc0","poorHouseholdsName":"葛漪取","phone":"13786335645","identityNo":"420281193301******","address":"西藏自治区 昌都地区 八宿县","attribute":"1","image":"https://stg.iobs.pingan.com.cn/download/icore-aims-dmz-stg/17728acc87854432b675d4f106d97e4f","averageIncome":45623.0,"lastAverageIncome":45623.0,"allAverageIncome":45623.0,"faceLibId":"10812","faceId":"162388","createBy":"MOJIAYOUTEST713","createDate":1540967457000,"updateBy":"MOJIAYOUTEST713","updateDate":1540967570000,"attributeName":"低保贫困户","projectName":"20103项目","faceFlag":false,"pageSize":0,"page":0}
]
}web-app\static\json\poorList_3.json
{
"head":{
"code":200,
"msg":"查询贫困户信息成功！"
},
"body":[
{"poorHouseholdsId":"797E4F575AEE1773E054022128574717","idAimsFpProject":"dd58f7c8-d488-462d-86ff-1d8d09816958","poorHouseholdsName":"山楚雅","phone":"13786335645","identityNo":"420281193301******","address":"西藏自治区 昌都地区 八宿县","attribute":"1","image":null,"averageIncome":45623.0,"lastAverageIncome":45623.0,"allAverageIncome":45623.0,"faceLibId":null,"faceId":null,"createBy":"MOJIAYOUTEST713","createDate":1540955218000,"updateBy":"MOJIAYOUTEST713","updateDate":1540955218000,"attributeName":"低保贫困户","projectName":"撒旦","faceFlag":false,"pageSize":0,"page":0},
{"poorHouseholdsId":"797E4F575AEF1773E054022128574717","idAimsFpProject":"dd58f7c8-d488-462d-86ff-1d8d09816958","poorHouseholdsName":"邹首韧","phone":null,"identityNo":"150625198301******","address":"江西南昌清原区","attribute":"1","image":null,"averageIncome":45623.0,"lastAverageIncome":45623.0,"allAverageIncome":45623.0,"faceLibId":null,"faceId":null,"createBy":"MOJIAYOUTEST713","createDate":1540955218000,"updateBy":"MOJIAYOUTEST713","updateDate":1540955218000,"attributeName":"低保贫困户","projectName":"撒旦","faceFlag":false,"pageSize":0,"page":0},
{"poorHouseholdsId":"797E4F575AF01773E054022128574717","idAimsFpProject":"dd58f7c8-d488-462d-86ff-1d8d09816958","poorHouseholdsName":"雷绣壮","phone":"18853021368","identityNo":"220821193507******","address":"江西南昌清原区","attribute":"1","image":null,"averageIncome":45623.0,"lastAverageIncome":45623.0,"allAverageIncome":45623.0,"faceLibId":null,"faceId":null,"createBy":"MOJIAYOUTEST713","createDate":1540955218000,"updateBy":"MOJIAYOUTEST713","updateDate":1540955218000,"attributeName":"低保贫困户","projectName":"撒旦","faceFlag":false,"pageSize":0,"page":0},
{"poorHouseholdsId":"797E4F575AF11773E054022128574717","idAimsFpProject":"dd58f7c8-d488-462d-86ff-1d8d09816958","poorHouseholdsName":"印昂湉","phone":"18953025702","identityNo":"621001195505******","address":"江西南昌清原区","attribute":"1","image":null,"averageIncome":45623.0,"lastAverageIncome":45623.0,"allAverageIncome":45623.0,"faceLibId":null,"faceId":null,"createBy":"MOJIAYOUTEST713","createDate":1540955218000,"updateBy":"MOJIAYOUTEST713","updateDate":1540955218000,"attributeName":"低保贫困户","projectName":"撒旦","faceFlag":false,"pageSize":0,"page":0},
{"poorHouseholdsId":"797E4F575AF21773E054022128574717","idAimsFpProject":"dd58f7c8-d488-462d-86ff-1d8d09816958","poorHouseholdsName":"秦值川","phone":"13782413681","identityNo":"510181195505******","address":"江西南昌清原区","attribute":"1","image":null,"averageIncome":45623.0,"lastAverageIncome":45623.0,"allAverageIncome":45623.0,"faceLibId":null,"faceId":null,"createBy":"MOJIAYOUTEST713","createDate":1540955218000,"updateBy":"MOJIAYOUTEST713","updateDate":1540955218000,"attributeName":"低保贫困户","projectName":"撒旦","faceFlag":false,"pageSize":0,"page":0}
]
}web-app\src\pages\supportPoor\personalInfo.vue
<template>
<ag-page id="personalInfo">
<dl-header name="贫困户详情"></dl-header>
<main class="content">
<div class="head-img-content">
<div class="img-box">
<img :src="userInfo.image||'./static/default_head_bg.png'">
</div>
<div class="head-text">
<span>{{userInfo.poorHouseholdsName}}</span>
<p v-if='userInfo.phone'>电话：{{telMask(userInfo.phone)}}</p>
</div>
<a v-if='userInfo.phone' :href="'tel:'+userInfo.phone">
<div class="head-phone">
<img src="./imgs/phone_new.png">
<span>呼叫</span>
</div>
</a>
</div>
<div class="info">
<div class="info-introduction">
<p>
<span>基本信息</span>
</p>
<ul class="item-details">
<li>
<div class="item-left">身份证号：</div>
<div class="item-right">{{userInfo.identityNo}}</div>
</li>
<li>
<div class="item-left">联系地址：</div>
<div class="item-right">{{userInfo.address}}</div>
</li>
<li>
<div class="item-left">贫困户属性：</div>
<div class="item-right">{{userInfo.attributeName}}</div>
</li>
<li @click="ShowProjectDetail(userInfo.idAimsFpProject)">
<div class="item-left">参与项目：</div>
<div class="item-right projectRight">查看</div>
<div class="item-padding">{{userInfo.projectName}}</div>
</li>
</ul>
</div>
</div>
<div class="info">
<div class="info-introduction">
<p>
<span>收入信息</span>
</p>
<ul class="item-details">
<li>
<div class="item-left">滚动1年人均年收入：</div>
<div class="item-right green">{{userInfo.averageIncome?(userInfo.averageIncome):'无'}}</div>
</li>
<li>
<div class="item-left">上季度人均收入：</div>
<div class="item-right green">{{userInfo.lastAverageIncome?(userInfo.lastAverageIncome):'无'}}</div>
</li>
<li>
<div class="item-left">全年累计人均年收入：</div>
<div class="item-right green">{{userInfo.allAverageIncome?(userInfo.allAverageIncome):'无'}}</div>
</li>
</ul>
</div>
</div>
</main>
</ag-page>
</template>
<script>
import header from '@/components/headerDl/header';
export default {
name: 'personalInfo',
data () {
return {
userInfo: ''
};
},
components: {
'dl-header': header
},
created () {
let userInfo = this.$sessionStorage.getItem('userInfo');
if (userInfo) {
this.userInfo = userInfo;
} else {
this.$toast('获取贫困户详情失败，请返回重试');
}
},
mounted () {
if (this.userInfo.image) {
let idx = this.userInfo.image.lastIndexOf('/');
let key = this.userInfo.image.substr(idx + 1);
this.$xhr('/esg/getUrl', {
method: 'get',
loading: false,
body: {
params: {key: key}
},
successFun: (res) => {},
failFun: (res) => {}
});
}
},
methods: {
telMask (tel) {
tel = tel != null ? tel.toString() : '';
return tel ? (tel.substr(0, 3) + '****' + tel.substr(tel.length - 4, 4)) : '无';
},
ShowProjectDetail (id) {
this.$router.push('/projectDetail?idAimsFpProject=' + id);
}
}
};
</script>
<style lang="less" scoped>
@import '../../style/mixin.less';
#personalInfo {
background: #fff;
}
.content {
background: #F7F7F8;
}
.head-img-content {
text-align: left;
margin-top: .15rem;
background-color: #FFF;
height: 4.5rem;
.img-box {
display: inline-block;
margin: 1rem .6rem 1rem 1rem;
width: 2.25rem;
height: 2.25rem;
vertical-align: middle;
img {
width:2.25rem;
height:2.25rem;
border: .05rem solid #fff;
border-radius: 50%;
object-fit: cover;
}
}
.head-text {
display: inline-block;
vertical-align: middle;
span {
font-size: .8rem;
color: #222;
display: inline-block;
line-height: 1.1rem;
font-weight: 600;
}
p {
font-size: .6rem;
color: #888;
font-weight: 340;
line-height: .85rem;
}
}
.head-phone {
float: right;
height: 2.25rem;
width: 3.5rem;
margin: .95rem 0;
padding: .25rem 1.1rem;
border-left: .05rem solid #EDEDED;
img {
width: 1.1rem;
height: 1.1rem;
}
span {
color: #555;
font-size: .5rem;
display: block;
}
}
}
.project-introduction:after {
content: "";
display: table;
}
.info {
background: #fff;
margin-top: .5rem;
.info-introduction {
text-align: left;
padding-left: 1rem;
padding-bottom: 1rem;
padding-right: .7rem;
p {
text-align: left;
line-height: .8rem;
padding-top:1rem;
span {
font-size: .7rem;
color: #222;
font-weight: 600;
}
}
.item-details:after {
content: "";
display: table;
}
.item-details {
text-align: left;
color: #555;
font-size: .7rem;
line-height: 1rem;
.item-left {
display: inline-block;
}
.item-right {
display: inline-block;
max-width: 78.2%;
position: relative;
z-index: 0;
vertical-align: top;
color: #222;
float: right;
text-align: right;
}
.projectRight{
color: #888;
font-size: .6rem;
padding-right: .6rem;
}
.projectRight:after{
content: '';
display: block;
width: .3rem;
height: .3rem;
position: absolute;
right: 0;
top: 50%;
margin-top:-0.2rem;
border-width: .05rem;
border-style: solid;
border-color: #999 #999 transparent transparent;
border-radius: .1rem;
transform:rotate(45deg);
}
.green{
color: #54B175;
font-family: PingFangSC-Medium;
}
.item-padding{
margin-top: .5rem;
color: #222;
font-size: .7rem;
line-height: 1rem;
}
.input-textarea {
width: 100%;
margin: 0 0 .5rem 0;
padding: 0 .75rem;
font-size: .7rem;
color: #868686;
line-height: 1.3rem;
padding: 0 .75rem;
}
}
.item-details>li {
margin-top: 1rem;
line-height: 1rem;
}
.item-details>li:after{
content: '';
display: table;
clear: both;
}
.item-details>li.multi-line {
line-height: 1.25rem;
margin: .5rem .75rem;
.item-right {
line-height: 1.25rem;
}
}
}
}
.projec-item:last-child {
margin-bottom: 0;
}
</style>./imgs/phone_new.png
微信公众号登录
来源：oschina
链接：https://my.oschina.net/u/4265014/blog/3234321