328 lines
8.3 KiB
Vue
328 lines
8.3 KiB
Vue
<template>
|
|
<div class="detail">
|
|
|
|
<!-- 待走访 -->
|
|
<div class="userInfo">
|
|
<div class="user-phone">
|
|
<div class="user">
|
|
<img src="./img/phone.png" alt="">
|
|
<span>{{ data.name }}</span>
|
|
<span :style="{color: data.status==0? '#FFBB00':data.status==1? '#FF8822':data.status==2? '#FF4466':'#2EA222'}">
|
|
{{ $dict.getLabel('fpRiskPersonStatus',data.status) }}
|
|
</span>
|
|
</div>
|
|
<div class="phone" @click="callPhone">
|
|
<img src="./img/user.png" alt="">
|
|
<span>拨打电话</span>
|
|
</div>
|
|
</div>
|
|
<div class="line"></div>
|
|
|
|
<div class="user-info">
|
|
<div class="item-info">
|
|
<label>风险类型:</label>
|
|
<span>{{ $dict.getLabel('fpRiskType',data.riskType) }}</span>
|
|
</div>
|
|
<div class="item-info">
|
|
<label>联系电话:</label>
|
|
<span>{{ data.phone || '' }}</span>
|
|
</div>
|
|
<div class="item-info">
|
|
<label>身份证号:</label>
|
|
<span>{{ data.idNumber }}</span>
|
|
</div>
|
|
<div class="item-info">
|
|
<label>所属区划:</label>
|
|
<span>{{ data.areaName }}</span>
|
|
</div>
|
|
<div class="item-info">
|
|
<label>联系地址:</label>
|
|
<span>{{ data.address || '' }}</span>
|
|
</div>
|
|
<div class="item-info">
|
|
<label>备注说明:</label>
|
|
<span>{{ data.remarks }}</span>
|
|
</div>
|
|
<div class="item-info">
|
|
<label>操作人:</label>
|
|
<span>{{ data.createUserName }}</span>
|
|
</div>
|
|
<div class="item-info">
|
|
<label>归口部门:</label>
|
|
<span>{{ data.departmentName }}</span>
|
|
</div>
|
|
<div class="item-info">
|
|
<label>操作时间:</label>
|
|
<span>{{ data.createTime }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 待审核 -->
|
|
<div class="to-check" v-if="data.visitUserName">
|
|
<div class="title">
|
|
<span>走访核实</span>
|
|
<span style="color:#FF8822" v-if="data.status == 1">疑似风险</span>
|
|
<!-- <span style="color:#2EA222" v-if="data.status == 3">解除风险</span> -->
|
|
</div>
|
|
<div class="check-info">
|
|
<div class="item-info">
|
|
<label>业务员:</label>
|
|
<span>{{ data.visitUserName }}</span>
|
|
</div>
|
|
<div class="item-info">
|
|
<label>处理时间:</label>
|
|
<span>{{ data.visitTime }}</span>
|
|
</div>
|
|
<div class="item-info">
|
|
<label>联系方式:</label>
|
|
<span>{{ data.visitUserPhone }}</span>
|
|
</div>
|
|
<div class="item-info">
|
|
<label>备注说明:</label>
|
|
<span>{{ data.visitOpinion }}</span>
|
|
</div>
|
|
<div class="item-info">
|
|
<label>图片:</label>
|
|
<div v-if="data.visitFiles">
|
|
<img :src="e.url" v-for="(e,index) in data.visitFiles" :key="index" @click.stop="previewImage(data.visitFiles, e.url)" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 处理结果 -->
|
|
<div class="processingResults" v-if="data.auditUserName">
|
|
<div class="title">
|
|
<span>处理结果</span>
|
|
<span style="color:#2EA222" v-if="data.status == 3">解除风险</span>
|
|
<span style="color:#FF4466" v-if="data.status == 2">纳入监测</span>
|
|
</div>
|
|
<div class="check-info">
|
|
<div class="item-info">
|
|
<label>审核人:</label>
|
|
<span>{{ data.auditUserName }}</span>
|
|
</div>
|
|
<div class="item-info">
|
|
<label>操作时间:</label>
|
|
<span>{{ data.auditTime }}</span>
|
|
</div>
|
|
<div class="item-info">
|
|
<label>联系方式:</label>
|
|
<span>{{ data.auditUserPhone }}</span>
|
|
</div>
|
|
<div class="item-info">
|
|
<label>备注说明:</label>
|
|
<span>{{ data.auditOpinion }}</span>
|
|
</div>
|
|
<div class="item-info">
|
|
<label>图片:</label>
|
|
<div v-if="data.auditFiles">
|
|
<img :src="e.url" v-for="(e,index) in data.auditFiles" :key="index" @click.stop="previewImage(data.auditFiles, e.url)" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="height: 56px"></div>
|
|
|
|
<div class="btn" @click="toResult" v-if="checkType == 1 && tabIndex==0 && !data.visitUserName">
|
|
<span v-if="(data.status==0 || data.status==1)">走访核实</span>
|
|
</div>
|
|
|
|
<div class="btn" @click="toResult" v-if="checkType == 2 && tabIndex==0 && !data.auditUserName">
|
|
<span>处理结果</span>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex'
|
|
export default {
|
|
data() {
|
|
return {
|
|
id: '',
|
|
data: {},
|
|
checkType: '',
|
|
tabIndex: ''
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['user'])
|
|
},
|
|
onLoad(o) {
|
|
this.$dict.load('fpRiskPersonStatus','fpRiskType','fpRiskPersonOperation1','fpRiskPersonOperation2').then(()=>{
|
|
this.id = o.id;
|
|
this.tabIndex = o.tabIndex;
|
|
this.getDetail()
|
|
this.getCheckType()
|
|
uni.$on('update',()=>{
|
|
this.getDetail()
|
|
})
|
|
})
|
|
|
|
},
|
|
methods: {
|
|
previewImage(images, img) {
|
|
uni.previewImage({
|
|
urls: images.map(v => v.url),
|
|
current: img
|
|
})
|
|
},
|
|
getDetail() {
|
|
this.$http.post('/app/apppreventionreturntopovertyriskperson/queryDetailById',null,{
|
|
params:{
|
|
id: this.id
|
|
}
|
|
}).then(res => {
|
|
if(res.code == 0) {
|
|
this.data = res.data
|
|
}
|
|
})
|
|
},
|
|
getCheckType() {
|
|
this.$http.post('/app/appgirdmemberinfo/checkLogOnUser',null,{
|
|
params: {
|
|
girdId: this.user.id
|
|
}
|
|
}).then((res) => {
|
|
if(res.code == 0) {
|
|
this.checkType = res.data.checkType
|
|
}
|
|
})
|
|
},
|
|
toResult() {
|
|
uni.navigateTo({url: `./result?checkType=${this.checkType}&id=${this.id}`})
|
|
},
|
|
callPhone() {
|
|
uni.makePhoneCall({phoneNumber: this.data.phone})
|
|
},
|
|
},
|
|
onShow() {
|
|
document.title = "风险预警"
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.detail {
|
|
.userInfo {
|
|
.user-phone {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background: #FFF;
|
|
height: 136px;
|
|
box-sizing: border-box;
|
|
padding: 0 32px;
|
|
.user {
|
|
display: flex;
|
|
img {
|
|
width: 80px;
|
|
height: 80px;
|
|
align-self: center;
|
|
}
|
|
span {
|
|
align-self: center;
|
|
}
|
|
span:nth-child(2) {
|
|
padding-left: 16px;
|
|
color: #333333;
|
|
font-size: 36px;
|
|
font-weight: 500;
|
|
}
|
|
span:last-child {
|
|
padding-left: 48px;
|
|
color: #FFBB00;
|
|
}
|
|
}
|
|
.phone {
|
|
width: 120px;
|
|
height: 100%;
|
|
img {
|
|
display: block;
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-left: 40px;
|
|
margin-top: 30px;
|
|
}
|
|
span {
|
|
display: block;
|
|
color: #3D94FB;
|
|
}
|
|
}
|
|
}
|
|
.line {
|
|
width: 100%;
|
|
height: 4px;
|
|
background: 1px solid #DDDDDD;
|
|
}
|
|
}
|
|
|
|
.to-check,
|
|
.processingResults {
|
|
margin-top: 10px;
|
|
background: #FFF;
|
|
font-size: 30px;
|
|
.title {
|
|
height: 96px;
|
|
line-height: 96px;
|
|
border-bottom: 1px solid #DDDDDD;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 32px;
|
|
box-sizing: border-box;
|
|
|
|
span:first-child {
|
|
font-size: 32px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
|
|
.userInfo .user-info,
|
|
.to-check .check-info,
|
|
.processingResults .check-info {
|
|
padding: 10px 0;
|
|
box-sizing: border-box;
|
|
background: #FFF;
|
|
font-size: 30px;
|
|
.item-info {
|
|
display: flex;
|
|
padding: 14px 32px;
|
|
label {
|
|
width: 160px;
|
|
color: #999999;
|
|
}
|
|
span {
|
|
width: calc(100% - 160px);
|
|
color: #343D65;
|
|
}
|
|
div {
|
|
width: calc(100% - 160px);
|
|
img {
|
|
width: 160px;
|
|
height: 160px;
|
|
margin-right: 8px;
|
|
}
|
|
img:nth-child(3n + 0) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
height: 112px;
|
|
line-height: 112px;
|
|
text-align: center;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
background: #3192F4;
|
|
color: #FFF;
|
|
z-index: 9;
|
|
font-size: 32px;
|
|
}
|
|
}
|
|
</style> |