新增，处理结果
This commit is contained in:
shijingjing
@@ -1,36 +1,111 @@
|
||||
<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="picture" v-if="data.files.length">
|
||||
<img :src="item.url" v-for="(item,index) in data.files" :key="index" alt="" @click="preview(index)">
|
||||
</div>
|
||||
<div class="tags">
|
||||
<span v-for="(item,index) in list" :key="index">{{item}}</span>
|
||||
<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 :style="{color: item.status == 0? '#FF883C':item.status == 1? '#1AAAFF': item.status==2? '#FF4466': '#42D784'}">{{ $dict.getLabel('helpDeclarationStatus', data.status) }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<label>申报人姓名</label>
|
||||
<div>{{ data.name }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<label>申报时间</label>
|
||||
<div>{{ data.declareTime }}</div>
|
||||
<label>家庭人口数</label>
|
||||
<div>{{ data.householdNumber }}</div>
|
||||
</div>
|
||||
<div class="items">
|
||||
<label>详细地址</label>
|
||||
<div>{{ data.address }}</div>
|
||||
<div class="item">
|
||||
<label>联系方式</label>
|
||||
<div>{{ data.phone }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<label>申报方式</label>
|
||||
<div>自主申报</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<label>身份证号</label>
|
||||
<div>{{ data.idNumber }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<label>所在地区</label>
|
||||
<div>{{ data.areaName }}</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="progress"></div>
|
||||
<div class="header-bottom">
|
||||
|
||||
<div class="plan">
|
||||
<div class="nav">
|
||||
<span>办理进度</span>
|
||||
<span> ({{ $dict.getLabel('clapEventStatus', data.eventStatus) }})</span>
|
||||
</div>
|
||||
|
||||
<div class="cards" v-for="(item, index) in data.processList" :key="index">
|
||||
<div class="cardss">
|
||||
<div class="cardss-left">
|
||||
<span>
|
||||
{{ item.girdMemberName && item.girdMemberName.substring(item.girdMemberName.length, item.girdMemberName.length - 2) }}
|
||||
</span>
|
||||
|
||||
<img src="./components/1.png" class="avatarIcon" alt="" />
|
||||
</div>
|
||||
|
||||
<div class="cardss-right">
|
||||
<div class="cardsss-right-left">
|
||||
<div class="cardssss-right-left-top">
|
||||
<span>{{ item.systemExplain }}</span>
|
||||
<div style="color: #2ea222; font-size: 16px; margin-top: 5px">
|
||||
{{ $dict.getLabel('clapDoStatus', item.doStatus) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cardees-right-right">{{ item.doTime }}</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="previewImage(item.files, e.url)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixedBtn">
|
||||
<div class="status00">
|
||||
<div class="columns border-r" @click="toContent(1)">
|
||||
<span class="hint">转交事件</span>
|
||||
</div>
|
||||
|
||||
<!-- <div class="columns" @click="toContent(2)">
|
||||
<span class="hint">拒绝受理</span>
|
||||
</div> -->
|
||||
|
||||
<div class="doIt" @click="doItShow = true">审核处理</div>
|
||||
</div>
|
||||
|
||||
<div class="endDoIt" v-if="data.eventStatus == 1 && data.rightType == 0" @click="toContent(3)">前往办理</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
@@ -53,15 +128,18 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
getDetail() {
|
||||
this.$instance.post(`/app/apphelpdeclarationinfo/queryDetailById?id=${this.id}`).then(res => {
|
||||
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(index) {
|
||||
this.$previewImage(this.data.files, index, "url");
|
||||
preview(images, img) {
|
||||
uni.previewImage({
|
||||
urls: images.map(v => v.url),
|
||||
current: img
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -69,6 +147,37 @@ export default {
|
||||
|
||||
<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;
|
||||
@@ -90,35 +199,35 @@ export default {
|
||||
span {
|
||||
display: inline-block;
|
||||
margin-right: 16px;
|
||||
background: #EEEEEE;
|
||||
padding: 4px 16px;
|
||||
padding: 4px 8px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 24px;
|
||||
margin-bottom: 16px;
|
||||
color: #999999;
|
||||
border-radius: 8px;
|
||||
color: #FFF;
|
||||
// margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress_info {
|
||||
margin-top: 16px;
|
||||
background: #FFF;
|
||||
padding: 0 32px 20px 32px;
|
||||
box-sizing: border-box;
|
||||
.item {
|
||||
padding: 32px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #DDDDDD;
|
||||
border-top: 1px solid #DDDDDD;
|
||||
label {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
.item:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
.items {
|
||||
padding: 32px;
|
||||
box-sizing: border-box;
|
||||
label {
|
||||
border-top: 1px solid #DDDDDD;
|
||||
p {
|
||||
color: #999999;
|
||||
}
|
||||
div {
|
||||
@@ -138,5 +247,153 @@ export default {
|
||||
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);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.cardsss-right-left {
|
||||
.cardssss-right-left-top {
|
||||
width: 300px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 32px;
|
||||
}
|
||||
.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: 136px;
|
||||
height: 136px;
|
||||
border-radius: 4px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
img:nth-child(4n) {
|
||||
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;
|
||||
width: 50%;
|
||||
padding: 16px 0;
|
||||
border-top: 1px solid #ddd;
|
||||
.hint {
|
||||
margin-top: 16px;
|
||||
font-size: 32px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
.border-r {
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
.doIt {
|
||||
width: 56%;
|
||||
background: #3975c6;
|
||||
text-align: center;
|
||||
line-height: 112px;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.endDoIt {
|
||||
background: #3975c6;
|
||||
text-align: center;
|
||||
padding: 34px 0;
|
||||
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user