120 lines
2.2 KiB
Vue
120 lines
2.2 KiB
Vue
<template>
|
||
<div class="detail">
|
||
<div class="header-top">
|
||
<div class="hint">{{ data.title }}</div>
|
||
|
||
<div class="walk-item">
|
||
<span>走访对象：</span>
|
||
<span>{{ data.createUserName }}</span>
|
||
</div>
|
||
|
||
<div class="walk-item" v-if="data.reality">
|
||
<span>现实状态：</span>
|
||
<span>{{ $dict.getLabel('realityStatus', data.reality) }} </span>
|
||
</div>
|
||
|
||
<div class="walk-item">
|
||
<span>走访人员：</span>
|
||
<span>{{ data.createUserName }}</span>
|
||
</div>
|
||
|
||
<div class="walk-item">
|
||
<span>走访时间：</span>
|
||
<span>{{ data.createTime }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="header-middle">
|
||
<div class="hint-con" v-if="data.description">{{ data.description }}</div>
|
||
|
||
<div class="imgs">
|
||
<img :src="item.url" alt="" v-for="(item, index) in data.images" :key="index" />
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'detail',
|
||
components: {},
|
||
props: {
|
||
params: {},
|
||
},
|
||
data() {
|
||
return {
|
||
data: {},
|
||
}
|
||
},
|
||
computed: {},
|
||
created() {
|
||
this.$dict.load('realityStatus').then(() => {
|
||
this.getDetail()
|
||
})
|
||
},
|
||
mounted() {},
|
||
methods: {
|
||
getDetail() {
|
||
this.$http.post(`/app/appvisitvondolence/queryDetailById?id=${this.params.id}`).then((res) => {
|
||
if (res?.data) {
|
||
this.data = res.data
|
||
if (this.data.images) {
|
||
this.data.images = JSON.parse(this.data.images || '[]')
|
||
}
|
||
}
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.detail {
|
||
height: 100%;
|
||
background: #fff;
|
||
|
||
.header-top {
|
||
background: #3975c6;
|
||
padding: 24px 32px 32px;
|
||
|
||
.hint {
|
||
font-size: 40px;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.walk-item {
|
||
font-size: 28px;
|
||
color: #d7e3f3;
|
||
margin-top: 16px;
|
||
}
|
||
}
|
||
|
||
.header-middle {
|
||
background: #fff;
|
||
padding: 32px 32px 32px 32px;
|
||
|
||
.hint-con {
|
||
font-size: 32px;
|
||
color: #666666;
|
||
}
|
||
|
||
.imgs {
|
||
margin: 32px 0 48px 0;
|
||
|
||
img {
|
||
width: 218px;
|
||
height: 218px;
|
||
margin-right: 16px;
|
||
}
|
||
|
||
img:nth-child(3n + 0) {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|