387 lines
9.1 KiB
Vue
387 lines
9.1 KiB
Vue
<template>
|
||
<div class="details">
|
||
<div class="user">
|
||
<div class="avatar">{{ data.name && data.name.substring(data.name.length, data.name.length - 2) }}</div>
|
||
<div class="right">
|
||
<p><span>{{ data.name }}</span>的帮扶申请</p>
|
||
<div>{{ data.declareTime }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="event_info">
|
||
<div class="content">{{ data.riskDescription }}</div>
|
||
<div class="tags">
|
||
<span :style="{background: data.status == 0? '#FF883C':data.status == 1? '#1AAAFF': data.status==2? '#FF4466': '#42D784'}">{{ $dict.getLabel('helpDeclarationStatus', data.status) }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="progress_info">
|
||
<div class="item">
|
||
<label>申报人姓名</label>
|
||
<div>{{ data.name }}</div>
|
||
</div>
|
||
<div class="item">
|
||
<label>家庭人口数</label>
|
||
<div>{{ data.householdNumber }}</div>
|
||
</div>
|
||
<div class="item">
|
||
<label>联系方式</label>
|
||
<div>{{ data.phone }}</div>
|
||
</div>
|
||
<div class="item">
|
||
<label>申报方式</label>
|
||
<div>{{ $dict.getLabel('helpDeclarationType',data.declareType) }}</div>
|
||
</div>
|
||
<div class="item">
|
||
<label>身份证号</label>
|
||
<div>{{ data.idNumber }}</div>
|
||
</div>
|
||
<div class="item">
|
||
<label>所在地区</label>
|
||
<div>{{ data.areaName }}{{ data.address }}</div>
|
||
</div>
|
||
<div class="items" v-if="data.files && data.files.length">
|
||
<p>照片</p>
|
||
<div class="picture">
|
||
<img :src="item.url" v-for="(item,index) in data.files" :key="index" alt="" @click="preview(data.files, item.url)">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="header-bottom">
|
||
|
||
<div class="plan">
|
||
<div class="nav">
|
||
<span>办理进度</span>
|
||
<span style="color: #999;"> ({{ $dict.getLabel('helpDeclarationStatus', data.status) }})</span>
|
||
</div>
|
||
|
||
<div class="cards" v-for="(item, index) in data.processList" :key="index">
|
||
<div class="cardss">
|
||
<div class="cardss-left">
|
||
<span>
|
||
{{ item.doUsername && item.doUsername.substring(item.doUsername.length, item.doUsername.length - 2) }}
|
||
</span>
|
||
|
||
<img src="./components/1.png" class="avatarIcon" alt="" />
|
||
</div>
|
||
|
||
<div class="cardss-right">
|
||
<div class="cardsss-right-top">
|
||
<div class="cardssss-right-left">
|
||
<div :style="{color: item.declarationStatus == 0? '#FF883C':item.declarationStatus == 1? '#1AAAFF': item.declarationStatus==2? '#FF4466': '#42D784'}" style="font-size: 16px;">
|
||
{{ $dict.getLabel('helpDeclarationStatus', item.declarationStatus) }}
|
||
</div>
|
||
<span>{{ item.doTime }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cardees-right-bottom">{{ item.description }}</div>
|
||
</div>
|
||
|
||
<div class="lines"></div>
|
||
</div>
|
||
|
||
<div class="cardes-msg-top" v-if="item.doExplain">{{ item.doExplain }}</div>
|
||
|
||
<div class="imgs">
|
||
<img :src="e.url" alt="" v-for="(e, index) in item.files" :key="index" @click="preview(item.files, e.url)" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fixedBtn" v-if="data.status == 0 || data.status == 1">
|
||
<div class="status00">
|
||
<div class="columns" @click="toContent(1)">
|
||
<span class="hint">转交事件</span>
|
||
</div>
|
||
|
||
<div class="columns" @click="toContent(2)">
|
||
<span class="hint">审核处理</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
list: [],
|
||
data: {},
|
||
id: '',
|
||
}
|
||
},
|
||
onLoad(o) {
|
||
this.$dict.load('helpDeclarationStatus','helpDeclarationType')
|
||
if (o.id) {
|
||
this.id = o.id
|
||
this.getDetail()
|
||
}
|
||
},
|
||
methods: {
|
||
getDetail() {
|
||
this.$http.post(`/app/apphelpdeclarationinfo/queryDetailById?id=${this.id}`).then(res => {
|
||
if(res.code == 0) {
|
||
this.data = res.data
|
||
this.list = res.data.reason.split(',')
|
||
}
|
||
})
|
||
},
|
||
preview(images, img) {
|
||
uni.previewImage({
|
||
urls: images.map(v => v.url),
|
||
current: img
|
||
})
|
||
},
|
||
// 转交 1 ， 审核处理 2
|
||
toContent(status) {
|
||
uni.navigateTo({ url: `./result?status=${status}&id=${this.id}` })
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.details {
|
||
.user {
|
||
height: 120px;
|
||
padding: 26px 30px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
background: #FFF;
|
||
.avatar {
|
||
width: 80px;
|
||
height: 80px;
|
||
line-height: 80px;
|
||
border-radius: 50%;
|
||
background: #4E8EEE;
|
||
text-align: center;
|
||
color: #FFFFFF;
|
||
font-size: 28px;
|
||
margin-right: 16px;
|
||
}
|
||
|
||
.right {
|
||
p {
|
||
font-weight: 600;
|
||
font-size: 32px;
|
||
color: #333333;
|
||
}
|
||
div {
|
||
color: #999999;
|
||
font-size: 28px;
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.event_info {
|
||
background: #FFFFFF;
|
||
padding: 32px;
|
||
box-sizing: border-box;
|
||
.content {
|
||
background: #FFFFFF;
|
||
}
|
||
.picture {
|
||
margin-top: 32px;
|
||
img {
|
||
width: 220px;
|
||
height: 220px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
.tags {
|
||
margin-top: 20px;
|
||
span {
|
||
display: inline-block;
|
||
margin-right: 16px;
|
||
padding: 4px 8px;
|
||
box-sizing: border-box;
|
||
border-radius: 8px;
|
||
color: #FFF;
|
||
// margin-bottom: 16px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.progress_info {
|
||
background: #FFF;
|
||
.item {
|
||
padding: 32px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border-top: 1px solid #DDDDDD;
|
||
label {
|
||
color: #999999;
|
||
}
|
||
}
|
||
.item:first-child {
|
||
border-top: none;
|
||
}
|
||
.items {
|
||
padding: 32px;
|
||
box-sizing: border-box;
|
||
border-top: 1px solid #DDDDDD;
|
||
p {
|
||
color: #999999;
|
||
}
|
||
div {
|
||
margin-top: 32px;
|
||
}
|
||
.picture {
|
||
img {
|
||
width: 200px;
|
||
height: 200px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
}
|
||
.status0 {
|
||
color: #FF883C
|
||
}
|
||
.status1 {
|
||
color: #1AAAFF
|
||
}
|
||
.status2 {
|
||
color: #42D784
|
||
}
|
||
.status3 {
|
||
color: #FF4466
|
||
}
|
||
}
|
||
|
||
.header-bottom {
|
||
padding-bottom: 80px;
|
||
background: #FFF;
|
||
margin-top: 16px;
|
||
|
||
.plan {
|
||
padding: 0 32px;
|
||
.nav {
|
||
padding: 26px 0;
|
||
}
|
||
|
||
.cards {
|
||
position: relative;
|
||
padding-bottom: 80px;
|
||
.cardss {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.cardss-left {
|
||
position: relative;
|
||
width: 80px;
|
||
height: 80px;
|
||
text-align: center;
|
||
line-height: 80px;
|
||
color: #fff;
|
||
background: #197df0;
|
||
border: 1px solid #dddddd;
|
||
border-radius: 50%;
|
||
font-size: 28px;
|
||
z-index: 9;
|
||
|
||
.avatarIcon {
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
width: 38px;
|
||
height: 38px;
|
||
}
|
||
}
|
||
.cardss-right {
|
||
width: calc(100% - 110px);
|
||
.cardsss-right-top {
|
||
.cardssss-right-left {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.cardssss-right-left-bottom {
|
||
margin-top: 10px;
|
||
font-size: 28px;
|
||
color: #666666;
|
||
}
|
||
}
|
||
.cardees-right-right {
|
||
font-size: 28px;
|
||
color: #999999;
|
||
}
|
||
}
|
||
.lines {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 40px;
|
||
width: 4px;
|
||
height: 100%;
|
||
background: #eeeeee;
|
||
}
|
||
}
|
||
.cardes-msg-top {
|
||
font-size: 28px;
|
||
color: #343d65;
|
||
margin-top: 10px;
|
||
margin-left: 110px;
|
||
}
|
||
|
||
.imgs {
|
||
margin-top: 10px;
|
||
margin-left: 110px;
|
||
img {
|
||
width: 180px;
|
||
height: 180px;
|
||
border-radius: 4px;
|
||
margin-right: 10px;
|
||
}
|
||
img:nth-child(3n) {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|
||
.cards:last-child {
|
||
.lines {
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.fixedBtn {
|
||
background: #fff;
|
||
position: fixed;
|
||
bottom: 0;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
z-index: 999;
|
||
.status00 {
|
||
display: flex;
|
||
|
||
.columns {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
flex: 1;
|
||
padding: 28px 0;
|
||
border-top: 1px solid #ddd;
|
||
.hint {
|
||
|
||
font-size: 32px;
|
||
color: #333;
|
||
}
|
||
}
|
||
.columns:last-child {
|
||
border-left: 1px solid #ddd;
|
||
background: #3975c6;
|
||
.hint {
|
||
font-size: 32px;
|
||
color: #FFF;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |