115 lines
3.2 KiB
Vue
115 lines
3.2 KiB
Vue
<template>
|
|
<BasePage :title="article.name || '文章详情'">
|
|
<div class="column-detail" v-if="article && article.name">
|
|
<div class="b_l_w overview">
|
|
<span class="title">{{ article.name }}</span>
|
|
<div class="desc">
|
|
<span v-if="article.addtime">
|
|
{{ $formatGMT(article.addtime, 'yyyy-MM-dd') }}
|
|
</span>
|
|
<span>
|
|
阅读 {{ article.click }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div v-if="article.contents" class="b_l_w content" v-html="article.contents" ref="contentRef" />
|
|
<van-empty class="b_l_w" v-else description="暂无内容" />
|
|
</div>
|
|
<van-empty v-else class="b_l_w" description="文章不存在" />
|
|
</BasePage>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ColumnDetail',
|
|
emits: ['updateShare'],
|
|
computed: {
|
|
},
|
|
data() {
|
|
return {
|
|
id: this.$route.query.id,
|
|
article: {},
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getDetail(this.id);
|
|
this.$nextTick(() => {
|
|
this.setupImagePreview();
|
|
});
|
|
},
|
|
methods: {
|
|
getDetail(id) {
|
|
if (id === '1') {
|
|
this.$get('/v1/client/CNewscatesClient/1').then(res => {
|
|
this.article = res.data;
|
|
this.$emit('updateShare', this.article.name, this.article.description, this.article.img);
|
|
}).catch(err => {
|
|
this.$showFailToast(err.message);
|
|
});
|
|
return;
|
|
}
|
|
this.$get(`/v1/client/CNewsClient/${id}`).then(data => {
|
|
this.article = data.data;
|
|
this.$emit('updateShare', this.article.name, this.article.description, this.article.img);
|
|
}).catch(err => {
|
|
this.$showFailToast(err.message);
|
|
});
|
|
},
|
|
setupImagePreview() {
|
|
const contentEl = this.$refs.contentRef;
|
|
if (!contentEl) return;
|
|
|
|
const images = contentEl.querySelectorAll('img');
|
|
this.imageUrls = Array.from(images).map(img => img.src);
|
|
|
|
images.forEach((img, index) => {
|
|
img.addEventListener('click', () => {
|
|
this.previewImages(index);
|
|
});
|
|
});
|
|
},
|
|
previewImages(startPosition) {
|
|
this.$showImagePreview({
|
|
images: this.imageUrls,
|
|
startPosition,
|
|
closeable: true,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.column-detail {
|
|
.overview {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 3.333vw;
|
|
border-bottom: 1px solid #eee;
|
|
|
|
.title {
|
|
font-size: 6.333vw;
|
|
}
|
|
|
|
.desc {
|
|
margin-top: 3.333vw;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
max-width: 100%;
|
|
padding: 3.333vw;
|
|
overflow: hidden;
|
|
|
|
img {
|
|
max-width: 100%;
|
|
display: block;
|
|
margin: 10px auto;
|
|
}
|
|
}
|
|
}
|
|
</style>
|