145 lines
2.8 KiB
Vue
145 lines
2.8 KiB
Vue
<template>
|
||
<div class="detail">
|
||
<div class="header-top">
|
||
<div class="hint">{{ data.title }}</div>
|
||
|
||
<div class="walk-item">
|
||
<span>走访对象：</span>
|
||
<span>
|
||
{{ data.name }}
|
||
<span class="tags" v-if="data.menuLevel3Name">{{ data.menuLevel3Name }}</span>
|
||
</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.visitTime }}</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" @click.stop="previewImage(data.images, item.url)" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'detail',
|
||
components: {},
|
||
props: {
|
||
params: {},
|
||
},
|
||
data() {
|
||
return {
|
||
data: {},
|
||
id: '',
|
||
}
|
||
},
|
||
computed: {},
|
||
onLoad(o) {
|
||
this.id = o.id
|
||
this.$dict.load('realityStatus').then(() => {
|
||
this.getDetail()
|
||
})
|
||
},
|
||
onShow() {
|
||
document.title = '走访详情'
|
||
},
|
||
mounted() {},
|
||
methods: {
|
||
getDetail() {
|
||
this.$http.post(`/app/appvisitvondolence/queryDetailById?id=${this.id}`).then((res) => {
|
||
if (res?.data) {
|
||
this.data = res.data
|
||
if (this.data.images) {
|
||
this.data.images = JSON.parse(this.data.images || '[]')
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
previewImage(images, img) {
|
||
uni.previewImage({
|
||
urls: images.map((v) => v.url),
|
||
current: img,
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
uni-page-body {
|
||
height: 100%;
|
||
}
|
||
.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;
|
||
.tags {
|
||
display: inline-block;
|
||
padding: 0 12px;
|
||
height: 40px;
|
||
border-radius: 4px;
|
||
border: 1px solid #ffffff;
|
||
margin-left: 16px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.header-middle {
|
||
background: #fff;
|
||
padding: 32px 32px 32px 32px;
|
||
|
||
.hint-con {
|
||
font-size: 32px;
|
||
color: #666666;
|
||
line-height: 56px;
|
||
}
|
||
|
||
.imgs {
|
||
margin: 32px 0 48px 0;
|
||
|
||
img {
|
||
width: 218px;
|
||
height: 218px;
|
||
margin-right: 16px;
|
||
}
|
||
|
||
img:nth-child(3n + 0) {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|