目录代码整合
This commit is contained in:
143
packages/publicity/AppPressCenter/components/newsDetail.vue
Normal file
143
packages/publicity/AppPressCenter/components/newsDetail.vue
Normal file
@@ -0,0 +1,143 @@
|
||||
<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('newsCenterPolicyType', +detail.policyType) }}</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.coverFile" :src="detail.coverFile.url" 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/appnewscenterinfo/queryDetailById`, 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>
|
||||
Reference in New Issue
Block a user