CarouselDetail.vue
2.82 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<template>
<el-dialog
title="详情"
:visible.sync="dialogVisible"
width="80%"
custom-class="carousel-detail"
:close-on-click-modal="false"
:before-close="handleClose"
top="4vh"
>
<div class="detail-container">
<h3 class="detail-title">{{ detailInfo.title }}</h3>
<div class="top-info__wrap">
<div class="top-item">
<span class="label">发布时间：</span>
<span class="value">{{ detailInfo.publishTime }}</span>
</div>
<div class="top-item">
<span class="label">发布人：</span>
<span class="value">{{ detailInfo.createByName }}</span>
</div>
</div>
<div v-if="detailInfo.file" class="file-wrap">
<ht-file v-model="files" type="list" permission="r" />
</div>
<section
v-if="detailInfo.isUrl == 'false' && detailInfo.content"
class="detail-content"
v-html="detailInfo.content"
></section>
<iframe
v-else
:src="detailInfo.url"
frameborder="0"
:style="{
width: '100%',
height:
Number(detailInfo.pageHeight) &&
`${Number(detailInfo.pageHeight)}px`,
}"
></iframe>
</div>
</el-dialog>
</template>
<script>
import { getNewsDetailById } from '@/api/portal'
export default {
name: 'CarouselDetail',
data() {
return {
dialogVisible: false,
detailInfo: {},
}
},
computed: {
files() {
const list = this.detailInfo.file && JSON.parse(this.detailInfo.file)
const result = list.map((item) => {
return {
...item,
response: {
success: item.status === 'success' ? true : false,
fileId: item.id,
fileName: item.name,
size: item.size,
},
}
})
return result && JSON.stringify(result)
},
},
methods: {
handleClose() {
this.dialogVisible = false
},
openDetailDialog(id) {
this.dialogVisible = true
this.$nextTick(() => {
this.getDetailInfoById(id)
})
},
getDetailInfoById(id) {
getNewsDetailById(id).then((res) => {
this.detailInfo = res
})
},
},
}
</script>
<style lang="scss" scoped>
.carousel-detail {
.detail-container {
.detail-title {
margin: 0;
font-size: $base-font-size-large;
color: $base-dark-title-color;
}
.top-info__wrap {
display: flex;
border-bottom: 1px solid $base-content-border-color;
padding: 30px 0;
.top-item {
padding-right: 40px;
span {
color: #b7b7b7;
}
}
}
.detail-content {
text-indent: 20px;
}
}
}
</style>