205 lines
4.0 KiB
Vue
205 lines
4.0 KiB
Vue
<template>
|
|
<div class="topic-detail" v-if="pageShow">
|
|
<div class="topic-header">
|
|
<h2>{{ info.title }}</h2>
|
|
<p>{{ info.publishTime }}</p>
|
|
<div class="topic-tags">
|
|
<span v-for="(item, index) in info.keyWords" :key="index">{{ item }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="topic-list">
|
|
<div class="topic-item" v-for="(item, index) in info.contents" :key="index">
|
|
<div class="topic-item__top">
|
|
<image src="/static/img/rmht.png"/>
|
|
<div class="topic-item__top--right">
|
|
<h2>{{ item.question }}</h2>
|
|
<p>{{ item.questionSource }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="topic-item__bottom">
|
|
<h2 v-if="item.answerSource">
|
|
<span style="color:#000;"> {{ item.answerSource }} </span>
|
|
回复
|
|
</h2>
|
|
<h2 v-else>话题回复</h2>
|
|
<p>{{ item.answer }}</p>
|
|
<div class="topic-item__img">
|
|
<image v-for="(img, i) in item.files" :key="i" :src="img.url" mode="aspectFill" hover-class="text-hover"
|
|
@click="preview(img.url, item.files)"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
info: {},
|
|
id: '',
|
|
pageShow: false
|
|
}
|
|
},
|
|
|
|
onLoad(query) {
|
|
this.$loading()
|
|
this.id = query.id
|
|
this.getInfo()
|
|
},
|
|
|
|
methods: {
|
|
getInfo() {
|
|
this.$instance.post(`/app/apphotsubject/detailForWx?id=${this.id}`).then(res => {
|
|
if (res.code === 0) {
|
|
this.info = res.data
|
|
if (res.data.keyWords) {
|
|
this.info.keyWords = res.data.keyWords.split(',')
|
|
}
|
|
|
|
this.$nextTick(() => {
|
|
this.pageShow = true
|
|
})
|
|
this.$hideLoading()
|
|
}
|
|
})
|
|
},
|
|
|
|
preview(img, imgs) {
|
|
uni.previewImage({
|
|
current: img,
|
|
urls: imgs.map(v => v.url)
|
|
})
|
|
}
|
|
},
|
|
|
|
onShareAppMessage() {
|
|
return {
|
|
title: this.info.title,
|
|
path: `/mods/AppTopic/detail?id=${this.id}`
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.topic-detail {
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.topic-list {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.topic-item__bottom {
|
|
margin-top: 22px;
|
|
padding: 24px 24px;
|
|
background: #FFFFFF;
|
|
border-radius: 16px;
|
|
border: 1px solid #D8DDE6;
|
|
|
|
.topic-item__img {
|
|
margin-top: 16px;
|
|
font-size: 0;
|
|
|
|
image {
|
|
width: 206px;
|
|
height: 206px;
|
|
margin: 0 10px 10px 0;
|
|
border-radius: 8px;
|
|
|
|
&:nth-of-type(3n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
p {
|
|
color: #333333;
|
|
font-size: 32px;
|
|
text-align: justify;
|
|
}
|
|
|
|
h2 {
|
|
margin-bottom: 16px;
|
|
color: #1365DD;
|
|
font-size: 26px;
|
|
}
|
|
}
|
|
|
|
.topic-item {
|
|
margin-bottom: 16px;
|
|
padding: 32px;
|
|
background: #fff;
|
|
|
|
.topic-item__top--right {
|
|
flex: 1;
|
|
|
|
h2 {
|
|
line-height: 1.3;
|
|
margin-bottom: 16px;
|
|
font-size: 32px;
|
|
color: #333;
|
|
text-align: justify;
|
|
white-space: pre-line;
|
|
}
|
|
|
|
p {
|
|
color: #343D65;
|
|
font-size: 28px;
|
|
}
|
|
}
|
|
|
|
.topic-item__top {
|
|
display: flex;
|
|
|
|
image {
|
|
position: relative;
|
|
top: 6px;
|
|
width: 32px;
|
|
height: 32px;
|
|
margin-right: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.topic-header {
|
|
padding: 32px 32px 16px;
|
|
background: #FFFFFF;
|
|
border-bottom: 1px solid #D8DDE6;
|
|
|
|
.topic-tags {
|
|
font-size: 0;
|
|
|
|
span {
|
|
display: inline-block;
|
|
height: 48px;
|
|
line-height: 48px;
|
|
margin: 0 16px 16px 0;
|
|
padding: 016px;
|
|
color: #6179A7;
|
|
font-size: 28px;
|
|
background: #F4F5FA;
|
|
border-radius: 24px;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
line-height: 1.3;
|
|
margin-bottom: 16px;
|
|
font-size: 40px;
|
|
color: #333333;
|
|
text-align: justify;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 16px;
|
|
color: #999999;
|
|
font-size: 28px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|