539 lines
13 KiB
Vue
539 lines
13 KiB
Vue
<template>
|
|
<div class="detail" v-if="pageShow" :class="[isFrom ? 'active' : '']">
|
|
<div class="tab" v-if="!isFrom">
|
|
<span @click="changeTab(0)" :class="[currIndex === 0 ? 'active' : '']">基本信息</span>
|
|
<span @click="changeTab(1)" :class="[currIndex === 1 ? 'active' : '']">帮扶日志</span>
|
|
</div>
|
|
<div class="tab-content">
|
|
<div class="tab-content__item" v-show="currIndex === 0">
|
|
<div class="item-wrapper">
|
|
<div class="item-header item-avatar">
|
|
<div class="left">
|
|
<image :src="$cdn + 'avatar.png'"/>
|
|
<div class="left-right">
|
|
<h2>{{ info.name }}</h2>
|
|
<p>{{ info.phone }}</p>
|
|
</div>
|
|
</div>
|
|
<span @click="linkTo('./MonitorAdd?id=' + info.id)">编辑</span>
|
|
</div>
|
|
<div class="item-info">
|
|
<label>行政区划</label>
|
|
<span>{{ info.addressArea }}</span>
|
|
</div>
|
|
<div class="item-info">
|
|
<label>家庭地址</label>
|
|
<span>{{ info.address }}</span>
|
|
</div>
|
|
<div class="item-info">
|
|
<label>是否扶贫搬迁</label>
|
|
<span>{{ $dict.getLabel('fpYesOrNo', info.move) }}</span>
|
|
</div>
|
|
<div class="item-info" v-if="info.move === '01'">
|
|
<label>安置地区</label>
|
|
<span>{{ info.placeArea }}</span>
|
|
</div>
|
|
<div class="item-info" v-if="info.move === '01'">
|
|
<label>安置详细地址</label>
|
|
<span>{{ info.place }}</span>
|
|
</div>
|
|
<div class="item-info">
|
|
<label>纳入监测时间</label>
|
|
<span>{{ info.createTime }}</span>
|
|
</div>
|
|
<div class="item-info">
|
|
<label>监测员</label>
|
|
<span>{{ info.monitoringContact || '-' }}</span>
|
|
</div>
|
|
<div class="item-info">
|
|
<label>监测员电话</label>
|
|
<span style="color: #3D94FB;"
|
|
@click="call(info.monitoringContactPhone)">{{ info.monitoringContactPhone || '-' }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="item-wrapper">
|
|
<div class="item-header">
|
|
<div class="left">
|
|
<h2>家庭成员</h2>
|
|
<i :style="{color: info.familyList.length ? '#2EA222' : '#FF4466'}">({{
|
|
info.familyList.length ? '已填写' : '未填写'
|
|
}})</i>
|
|
</div>
|
|
<span @click="linkTo('./MonitorFamilyMember?id=' + info.id)">编辑</span>
|
|
</div>
|
|
<div class="item-info">
|
|
<label>未参加医疗参保</label>
|
|
<span>{{ info.ylbxCount }}人</span>
|
|
</div>
|
|
<div class="item-info">
|
|
<label>未参加养老保险</label>
|
|
<span>{{ info.ylCount }}人</span>
|
|
</div>
|
|
</div>
|
|
<div class="item-wrapper">
|
|
<div class="item-header">
|
|
<div class="left">
|
|
<h2>家庭情况</h2>
|
|
<i :style="{color: isFamilySituation ? '#2EA222' : '#FF4466'}">({{
|
|
isFamilySituation ? '已填写' : '未填写'
|
|
}})</i>
|
|
</div>
|
|
<span @click="linkTo('./MonitorFamilySituation?id=' + info.id)">编辑</span>
|
|
</div>
|
|
<div class="item-info">
|
|
<label>是否危房</label>
|
|
<span>{{ $dict.getLabel('fpYesOrNo', info.dilapidatedHouse) || '-' }}</span>
|
|
</div>
|
|
<div class="item-info">
|
|
<label>饮用水安全问题</label>
|
|
<span>{{ $dict.getLabel('fpYesOrNo', info.drinkingWaterSafety) || '-' }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="item-wrapper">
|
|
<div class="item-header">
|
|
<div class="left">
|
|
<h2>收支情况</h2>
|
|
<i :style="{color: isIncome ? '#2EA222' : '#FF4466'}">({{ isIncome ? '已填写' : '未填写' }})</i>
|
|
</div>
|
|
<span @click="linkTo('./MonitorIncome?id=' + info.id)">编辑</span>
|
|
</div>
|
|
<div class="item-info">
|
|
<label>家庭纯收入</label>
|
|
<span>{{ info.income6 }}元</span>
|
|
</div>
|
|
<div class="item-info">
|
|
<label>家庭人均纯收入</label>
|
|
<span>{{ info.income7 }}元</span>
|
|
</div>
|
|
</div>
|
|
<div class="item-wrapper">
|
|
<div class="item-header">
|
|
<div class="left">
|
|
<h2>风险解除</h2>
|
|
<i :style="{color: isPoorStatus ? '#2EA222' : '#FF4466'}">({{ isPoorStatus ? '已填写' : '未填写' }})</i>
|
|
</div>
|
|
<span @click="linkTo('./MonitorPoorStatus?id=' + info.id)">编辑</span>
|
|
</div>
|
|
<div class="item-info">
|
|
<label>是否消除风险</label>
|
|
<span>{{ info.riskEliminationMethod ? '是' : '-' }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-content__item" v-show="currIndex === 1">
|
|
<div class="log-item" v-for="(item, index) in list" :key="index">
|
|
<div class="log-item__wrapper">
|
|
<div class="log-item__user">
|
|
<div class="left">
|
|
<div class="user">
|
|
<span>{{ item.createUserName.substr(item.createUserName.length - 2) }}</span>
|
|
</div>
|
|
<h2>{{ item.createUserName }}</h2>
|
|
</div>
|
|
<div class="right">
|
|
<span>{{ item.createTime }}</span>
|
|
<image src="/static/images/more.png" @click="edit(item.id)"/>
|
|
</div>
|
|
</div>
|
|
<p>{{ item.detail }}</p>
|
|
<div class="imgs">
|
|
<image :src="img.url" @click="prevImg(item.imgs, img.url)" v-for="(img, index) in item.imgs"
|
|
:key="index"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<AiEmpty v-if="!list.length" style="padding-bottom: 20px;"></AiEmpty>
|
|
</div>
|
|
</div>
|
|
<AiFixedBtn v-if="currIndex === 1">
|
|
<div class="addBtn iconfont iconfont-iconfangda" @tap="toAddLog"></div>
|
|
</AiFixedBtn>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name: 'detail',
|
|
|
|
data() {
|
|
return {
|
|
info: {},
|
|
pageShow: false,
|
|
currIndex: 0,
|
|
list: [],
|
|
isFrom: false
|
|
}
|
|
},
|
|
|
|
|
|
computed: {
|
|
isIncome() {
|
|
if (!this.info.id) {
|
|
return false
|
|
}
|
|
|
|
return this.info.income6 > 0 && this.info.income7 > 0;
|
|
|
|
|
|
},
|
|
|
|
isPoorStatus() {
|
|
if (!this.info.id) {
|
|
return false
|
|
}
|
|
|
|
return !!this.info.riskEliminationMethod;
|
|
|
|
|
|
},
|
|
|
|
isFamilySituation() {
|
|
if (!this.info.id) {
|
|
return false
|
|
}
|
|
|
|
return !!(this.info.drinkingWaterSafety && this.info.dilapidatedHouse);
|
|
|
|
|
|
}
|
|
},
|
|
|
|
onLoad(query) {
|
|
if (query.isFrom) {
|
|
this.isFrom = true
|
|
}
|
|
uni.showLoading()
|
|
this.$dict.load(['fpType', 'riskEliminationMethod', 'fpRiskType', 'fpYesOrNo']).then(() => {
|
|
this.getInfo(query.id)
|
|
})
|
|
|
|
this.id = query.id
|
|
uni.$on('reload', () => {
|
|
this.getInfo(query.id)
|
|
})
|
|
},
|
|
onShow() {
|
|
document.title = '风险预警详情'
|
|
},
|
|
|
|
methods: {
|
|
linkTo(url) {
|
|
uni.navigateTo({url})
|
|
},
|
|
|
|
call(phone) {
|
|
if (phone) {
|
|
uni.makePhoneCall({
|
|
phoneNumber: phone
|
|
})
|
|
}
|
|
},
|
|
|
|
edit(id) {
|
|
uni.showActionSheet({
|
|
itemList: ['编辑', '删除'],
|
|
success: res => {
|
|
if (res.tapIndex === 0) {
|
|
uni.navigateTo({
|
|
url: `./MonitorAddLog?pid=${this.info.id}&id=${id}`
|
|
})
|
|
} else if (res.tapIndex === 1) {
|
|
this.$confirm('确定删除该数据？').then(() => {
|
|
uni.showLoading()
|
|
this.$http.post(`/app/apppreventionreturntopovertylog/delete?ids=${id}`).then(res => {
|
|
if (res.code === 0) {
|
|
this.$u.toast('删除成功')
|
|
this.getInfo(this.id)
|
|
}
|
|
uni.hideLoading()
|
|
})
|
|
}).catch(() => {
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
prevImg(urls, img) {
|
|
const imgs = urls.map(v => v.url)
|
|
uni.previewImage({
|
|
urls: imgs,
|
|
current: img
|
|
})
|
|
},
|
|
|
|
toAddLog() {
|
|
uni.navigateTo({
|
|
url: './MonitorAddLog?pid=' + this.info.id
|
|
})
|
|
},
|
|
|
|
changeTab(index) {
|
|
this.currIndex = index
|
|
},
|
|
|
|
getInfo(id) {
|
|
this.$http.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${id}`).then(res => {
|
|
if (res.code === 0) {
|
|
this.info = res.data
|
|
|
|
let ylbxCount = 0
|
|
let ylCount = 0
|
|
res.data.familyList.forEach(item => {
|
|
if (item.medicalInsurance === '02') {
|
|
ylbxCount = ylbxCount + 1
|
|
}
|
|
if (item.endowmentInsurance === '02') {
|
|
ylCount = ylCount + 1
|
|
}
|
|
})
|
|
this.info.ylbxCount = ylbxCount
|
|
this.info.ylCount = ylCount
|
|
this.pageShow = true
|
|
}
|
|
|
|
uni.hideLoading()
|
|
})
|
|
this.$http.post(`/app/apppreventionreturntopovertylog/list?pid=${id}&size=1000¤t=1`).then(res => {
|
|
if (res.code === 0) {
|
|
this.list = res.data.records.map(item => {
|
|
return {
|
|
...item,
|
|
imgs: JSON.parse(item.picture)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.detail {
|
|
padding-top: 96px;
|
|
padding-bottom: 60px;
|
|
|
|
&.active {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.addBtn {
|
|
width: 96px;
|
|
height: 96px;
|
|
flex-shrink: 0;
|
|
background: $uni-color-primary;
|
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
|
|
font-size: 48px;
|
|
color: #fff;
|
|
border-radius: 50%;
|
|
justify-content: center;
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
|
|
.tab {
|
|
display: flex;
|
|
position: fixed;
|
|
align-items: center;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 1;
|
|
width: 100%;
|
|
height: 96px;
|
|
padding: 0 60px;
|
|
background: #FFFFFF;
|
|
border-bottom: 1px solid #D4D4D4;
|
|
box-sizing: border-box;
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
span {
|
|
position: relative;
|
|
flex: 1;
|
|
height: 96px;
|
|
line-height: 96px;
|
|
color: #000000;
|
|
text-align: center;
|
|
font-size: 32px;
|
|
|
|
&::after {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
width: 192px;
|
|
height: 6px;
|
|
background: transparent;
|
|
transform: translateX(-50%);
|
|
content: ' ';
|
|
}
|
|
|
|
&.active {
|
|
color: #1365DD;
|
|
|
|
&::after {
|
|
background: #1365DD;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.item-wrapper {
|
|
background: #fff;
|
|
margin-bottom: 16px;
|
|
padding: 0 32px 16px;
|
|
|
|
.item-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 96px;
|
|
|
|
& > span {
|
|
color: #3975C6;
|
|
font-size: 32px;
|
|
}
|
|
|
|
.left {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
h2 {
|
|
color: #333333;
|
|
font-size: 32px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
i {
|
|
font-style: normal;
|
|
color: #2EA222;
|
|
font-size: 32px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 14px 0;
|
|
|
|
label {
|
|
color: #999999;
|
|
font-size: 32px;
|
|
}
|
|
|
|
span {
|
|
max-width: 496px;
|
|
text-align: right;
|
|
color: #333333;
|
|
font-size: 32px;
|
|
}
|
|
}
|
|
|
|
.item-avatar {
|
|
height: 192px;
|
|
|
|
image {
|
|
width: 112px;
|
|
height: 112px;
|
|
margin-right: 24px;
|
|
}
|
|
|
|
.left-right {
|
|
p {
|
|
margin-top: 8px;
|
|
color: #999999;
|
|
font-size: 28px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.log-item {
|
|
padding: 0 0 0 32px;
|
|
background: #fff;
|
|
|
|
&:first-child {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
&:last-child {
|
|
.log-item__wrapper {
|
|
border: none !important;
|
|
}
|
|
}
|
|
|
|
.log-item__wrapper {
|
|
padding: 32px 32px 32px 0;
|
|
border-bottom: 1px solid #E4E5E6;
|
|
|
|
.log-item__user {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
& > div {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.left {
|
|
.user, image {
|
|
width: 80px;
|
|
height: 80px;
|
|
line-height: 80px;
|
|
margin-right: 16px;
|
|
text-align: center;
|
|
border-radius: 50%;
|
|
background: #2266FF;
|
|
|
|
span {
|
|
color: #fff;
|
|
font-size: 28px;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
color: #333;
|
|
font-size: 32px;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
image {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
span {
|
|
margin-right: 6px;
|
|
color: #999999;
|
|
font-size: 28px;
|
|
}
|
|
}
|
|
}
|
|
|
|
p {
|
|
margin: 4px 0 16px 96px;
|
|
color: #343D65;
|
|
font-size: 28px;
|
|
}
|
|
|
|
.imgs {
|
|
margin-left: 96px;
|
|
|
|
image {
|
|
width: 136px;
|
|
height: 136px;
|
|
margin-right: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|