144 lines
2.9 KiB
Vue
144 lines
2.9 KiB
Vue
<template>
|
||
<ai-detail class="news-detail">
|
||
<template slot="title">
|
||
<ai-title title="新闻文章详情" isShowBack isShowBottomBorder @onBackClick="$emit('goBack')"></ai-title>
|
||
</template>
|
||
<template slot="content">
|
||
<ai-card titlePosition="center">
|
||
<template #title>
|
||
<h2>{{ detail.title }}</h2>
|
||
<p class="subTitle">类型：{{ dict.getLabel('appNewsCategory', +detail.category) }}</p>
|
||
</template>
|
||
<template slot="right">
|
||
<el-button type="text" size="small" icon="iconfont iconEdit" @click="handleEdit">修改</el-button>
|
||
</template>
|
||
<template #content>
|
||
<ai-article :value="detail.content"></ai-article>
|
||
</template>
|
||
</ai-card>
|
||
<ai-card title="封面信息">
|
||
<template #content>
|
||
<div class="content">
|
||
<div class="img">
|
||
<span>封面：</span>
|
||
<img v-if="detail.thumbUrl" :src="detail.thumbUrl" alt="" v-viewer>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</ai-card>
|
||
</template>
|
||
</ai-detail>
|
||
</template>
|
||
|
||
<script>
|
||
import Viewer from 'v-viewer';
|
||
import Vue from 'vue';
|
||
|
||
Vue.use(Viewer);
|
||
export default {
|
||
name: "newsDetail",
|
||
props: {
|
||
instance: Function,
|
||
dict: Object,
|
||
},
|
||
data() {
|
||
return {
|
||
detail: {},
|
||
}
|
||
},
|
||
methods: {
|
||
/**
|
||
* 修改
|
||
* */
|
||
handleEdit() {
|
||
this.$emit("goPage", {key: "addArticle", row: this.detail});
|
||
},
|
||
/**
|
||
* 根据id查询详情
|
||
*/
|
||
getDetail() {
|
||
let {id} = this.$route.query
|
||
id && this.instance.post(`/app/appnews/getById`, null, {
|
||
params: {id}
|
||
}).then(res => {
|
||
if (res?.data) {
|
||
this.detail = res.data;
|
||
}
|
||
})
|
||
}
|
||
},
|
||
created() {
|
||
this.getDetail();
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.news-detail {
|
||
height: 100%;
|
||
overflow: auto;
|
||
|
||
::v-deep .ai-detail__content {
|
||
background: #F3F6F9 !important;
|
||
}
|
||
|
||
.content {
|
||
height: 100%;
|
||
width: 100%;
|
||
position: relative;
|
||
|
||
label {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-bottom: 1px solid #eee;
|
||
margin-bottom: 24px;
|
||
|
||
p {
|
||
font-size: 16px;
|
||
color: #333333;
|
||
line-height: 21px;
|
||
box-sizing: border-box;
|
||
padding-bottom: 24px;
|
||
text-align: center;
|
||
}
|
||
|
||
.iconfont {
|
||
font-size: 14px;
|
||
color: #5088FF;
|
||
line-height: 16px;
|
||
text-align: right;
|
||
position: absolute;
|
||
right: 16px;
|
||
top: 16px;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
font-size: 16px;
|
||
color: #333333;
|
||
line-height: 21px;
|
||
border-bottom: 1px solid #eee;
|
||
padding-bottom: 24px;
|
||
margin-bottom: 17px;
|
||
}
|
||
|
||
.img {
|
||
display: flex;
|
||
|
||
span {
|
||
font-size: 14px;
|
||
color: #999999;
|
||
line-height: 19px;
|
||
}
|
||
|
||
img {
|
||
width: 319px;
|
||
height: 179px;
|
||
border-radius: 1px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|