142 lines
3.0 KiB
Vue
142 lines
3.0 KiB
Vue
|
<template>
|
||
|
|
<div class="details">
|
||
|
|
|
||
|
|
<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>
|
||
|
|
</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>
|
||
|
|
</div>
|
||
|
|
<div class="items">
|
||
|
|
<label>详细地址</label>
|
||
|
|
<div>{{ data.address }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="progress"></div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
list: [],
|
||
|
|
data: {},
|
||
|
|
id: '',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(o) {
|
||
|
|
this.$dict.load('helpDeclarationStatus')
|
||
|
|
if (o.id) {
|
||
|
|
this.id = o.id
|
||
|
|
this.getDetail()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getDetail() {
|
||
|
|
this.$instance.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");
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.details {
|
||
|
|
|
||
|
|
.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;
|
||
|
|
background: #EEEEEE;
|
||
|
|
padding: 4px 16px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
border-radius: 24px;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
color: #999999;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.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;
|
||
|
|
label {
|
||
|
|
color: #999999;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.items {
|
||
|
|
padding: 32px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
label {
|
||
|
|
color: #999999;
|
||
|
|
}
|
||
|
|
div {
|
||
|
|
margin-top: 32px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.status0 {
|
||
|
|
color: #FF883C
|
||
|
|
}
|
||
|
|
.status1 {
|
||
|
|
color: #1AAAFF
|
||
|
|
}
|
||
|
|
.status2 {
|
||
|
|
color: #42D784
|
||
|
|
}
|
||
|
|
.status3 {
|
||
|
|
color: #FF4466
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|