初始上传
This commit is contained in:
129
addon/pc/source/os/pages/cms/article/detail.vue
Executable file
129
addon/pc/source/os/pages/cms/article/detail.vue
Executable file
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<div class="article-wrap">
|
||||
<el-breadcrumb separator="/" class="path">
|
||||
<el-breadcrumb-item :to="{ path: '/' }" class="path-home">首页</el-breadcrumb-item>
|
||||
<el-breadcrumb-item :to="{ path: '/cms/article/list' }">文章列表</el-breadcrumb-item>
|
||||
<el-breadcrumb-item class="path-help">文章详情</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
<div class="article-detil" v-loading="loading">
|
||||
<div class="article-info">
|
||||
<div class="title">{{ info.article_title }}</div>
|
||||
<div class="flex-wrap">
|
||||
<div class="time">{{ $util.timeStampTurnTime(info.create_time) }}</div>
|
||||
<div class="num-wrap" v-if="info.is_show_read_num == 1">
|
||||
<img :src="$img('public/static/img/read.png')" />
|
||||
{{ info.initial_read_num + info.read_num }}
|
||||
</div>
|
||||
<div class="num-wrap" v-if="info.is_show_dianzan_num == 1">
|
||||
<img :src="$img('public/static/img/dianzan.png')" />
|
||||
<span>{{ info.initial_dianzan_num + info.dianzan_num }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" v-html="info.article_content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters} from 'vuex';
|
||||
import {articleDetail} from '@/api/cms/article';
|
||||
|
||||
export default {
|
||||
name: 'article_detail',
|
||||
data: () => {
|
||||
return {
|
||||
info: {},
|
||||
loading: true
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.id = this.$route.query.id;
|
||||
this.getDetail();
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['siteInfo'])
|
||||
},
|
||||
watch: {
|
||||
$route(curr) {
|
||||
this.id = curr.query.id;
|
||||
this.getDetail();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDetail() {
|
||||
articleDetail({
|
||||
article_id: this.id
|
||||
}).then(res => {
|
||||
if (res.data) {
|
||||
this.info = res.data;
|
||||
this.loading = false;
|
||||
window.document.title = `${this.info.article_title} - ${this.siteInfo.site_name}`;
|
||||
} else {
|
||||
this.$router.push({
|
||||
path: '/cms/article/list'
|
||||
});
|
||||
}
|
||||
}).catch(err => {
|
||||
this.loading = false;
|
||||
this.$message.error(err.message);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.article-wrap {
|
||||
width: $width;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.article-detil {
|
||||
background-color: #ffffff;
|
||||
min-height: 300px;
|
||||
margin: 20px 0;
|
||||
padding: 10px;
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.flex-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.time {
|
||||
text-align: center;
|
||||
color: #838383;
|
||||
}
|
||||
|
||||
.num-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #999;
|
||||
|
||||
img {
|
||||
margin-left: 25px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 3px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.article-info {
|
||||
margin: 0 43px;
|
||||
border-bottom: 1px dotted #e9e9e9;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-top: 10px;
|
||||
margin: 0 65px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
275
addon/pc/source/os/pages/cms/article/list.vue
Executable file
275
addon/pc/source/os/pages/cms/article/list.vue
Executable file
@@ -0,0 +1,275 @@
|
||||
<template>
|
||||
<div class="article-wrap">
|
||||
<el-breadcrumb separator="/" class="path">
|
||||
<el-breadcrumb-item :to="{ path: '/' }" class="path-home">首页</el-breadcrumb-item>
|
||||
<el-breadcrumb-item class="path-help">文章</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
<div class="article" v-loading="loading">
|
||||
<div class="category-wrap">
|
||||
<div class="item" :class="{ 'ns-text-color': queryinfo.category_id == 0 }" @click="search(0)">全部</div>
|
||||
<div class="item" :class="{ 'ns-text-color': queryinfo.category_id == item.category_id }" v-for="item in categoryList" :key="item.category_id" @click="search(item.category_id)">{{ item.category_name }}</div>
|
||||
</div>
|
||||
<div class="list-wrap">
|
||||
<template v-if="articleList.length">
|
||||
<div class="item" v-for="(item, index) in articleList" :key="item.article_id" @click="toDetail(item.article_id)">
|
||||
<div class="info">
|
||||
<div class="title">{{ item.article_title }}</div>
|
||||
<div class="desc">{{ item.article_abstract }}</div>
|
||||
<div class="bottom-wrap">
|
||||
<div class="left" v-if="item.is_show_release_time == 1">
|
||||
<span>{{ $util.timeStampTurnTime(item.create_time) }}</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div v-if="item.is_show_read_num == 1">
|
||||
<img :src="$img('public/static/img/read.png')" />
|
||||
{{ item.initial_read_num + item.read_num }}
|
||||
</div>
|
||||
<div v-if="item.is_show_dianzan_num == 1">
|
||||
<img :src="$img('public/static/img/dianzan.png')" />
|
||||
<span>{{ item.initial_dianzan_num + item.dianzan_num }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="img-wrap" v-if="item.cover_img">
|
||||
<img :src="$img(item.cover_img)" @error="imageError(index)" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="empty">暂无文章</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page">
|
||||
<el-pagination
|
||||
background
|
||||
:pager-count="5"
|
||||
:total="total"
|
||||
prev-text="上一页"
|
||||
next-text="下一页"
|
||||
:current-page.sync="queryinfo.page"
|
||||
:page-size.sync="queryinfo.page_size"
|
||||
@size-change="handlePageSizeChange"
|
||||
@current-change="handleCurrentPageChange"
|
||||
hide-on-single-page
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters} from 'vuex';
|
||||
import {articleCategoryList, getArticleList} from '@/api/cms/article';
|
||||
|
||||
export default {
|
||||
name: 'article',
|
||||
components: {},
|
||||
data: () => {
|
||||
return {
|
||||
queryinfo: {
|
||||
page: 1,
|
||||
page_size: 10,
|
||||
category_id: 0
|
||||
},
|
||||
categoryList: [],
|
||||
articleList: [],
|
||||
total: 0,
|
||||
loading: true
|
||||
};
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: '文章列表-' + this.$store.state.site.siteInfo.site_name
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getCategoryList();
|
||||
this.getList();
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['defaultArticleImage'])
|
||||
},
|
||||
methods: {
|
||||
toDetail(id) {
|
||||
this.$router.push({
|
||||
path: '/cms/article/detail',
|
||||
query: {id: id}
|
||||
});
|
||||
},
|
||||
getCategoryList() {
|
||||
articleCategoryList().then(res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
this.categoryList = res.data;
|
||||
}
|
||||
});
|
||||
},
|
||||
search(category_id) {
|
||||
this.queryinfo.category_id = category_id;
|
||||
this.getList();
|
||||
},
|
||||
getList() {
|
||||
getArticleList(this.queryinfo).then(res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
this.articleList = res.data.list;
|
||||
this.total = res.data.count;
|
||||
}
|
||||
this.loading = false;
|
||||
}).catch(err => {
|
||||
this.loading = false;
|
||||
this.$message.error(err.message);
|
||||
});
|
||||
},
|
||||
handlePageSizeChange(newsize) {
|
||||
this.queryinfo.page_size = newsize;
|
||||
this.getList();
|
||||
},
|
||||
handleCurrentPageChange(newnum) {
|
||||
this.queryinfo.page = newnum;
|
||||
this.getList();
|
||||
},
|
||||
imageError(index) {
|
||||
this.articleList[index].cover_img = '';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.article-wrap {
|
||||
width: $width;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.article {
|
||||
padding: 20px 0;
|
||||
min-height: 300px;
|
||||
display: flex;
|
||||
|
||||
.category-wrap {
|
||||
width: 210px;
|
||||
min-height: 300px;
|
||||
background: #ffffff;
|
||||
flex-shrink: 0;
|
||||
padding-left: 25px;
|
||||
padding-right: 10px;
|
||||
|
||||
.item {
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
line-height: 40px;
|
||||
border-top: 1px solid #f1f1f1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
height: 40px;
|
||||
background: #ffffff;
|
||||
|
||||
&:hover {
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-wrap {
|
||||
padding: 0 20px;
|
||||
margin-left: 20px;
|
||||
background-color: #fff;
|
||||
flex: 1;
|
||||
|
||||
.item {
|
||||
background: #fff;
|
||||
padding: 20px 0;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.info {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
word-break: break-all;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
line-height: 29px;
|
||||
font-size: 16px;
|
||||
word-break: break-all;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
margin-top: 5px;
|
||||
color: #666;
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
.bottom-wrap {
|
||||
display: flex;
|
||||
margin-top: 15px;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #eee;
|
||||
margin-right: 10px;
|
||||
|
||||
span {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > div {
|
||||
margin-left: 25px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 3px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.img-wrap {
|
||||
display: flex;
|
||||
margin-left: 15px;
|
||||
|
||||
img {
|
||||
width: 256px;
|
||||
height: 160px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
line-height: 300px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
118
addon/pc/source/os/pages/cms/help/detail.vue
Executable file
118
addon/pc/source/os/pages/cms/help/detail.vue
Executable file
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div class="detail-wrap">
|
||||
<el-breadcrumb separator="/" class="path">
|
||||
<el-breadcrumb-item :to="{ path: '/' }" class="path-home">首页</el-breadcrumb-item>
|
||||
<el-breadcrumb-item :to="{ path: '/cms/help/list' }">帮助列表</el-breadcrumb-item>
|
||||
<el-breadcrumb-item class="path-help">帮助详情</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
<div class="help-detail" v-loading="loading">
|
||||
<div class="title" @click="toLink">{{ detail.title }}</div>
|
||||
<div class="info">
|
||||
<div class="time">{{ $util.timeStampTurnTime(detail.create_time) }}</div>
|
||||
</div>
|
||||
<div class="content" v-html="detail.content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapGetters
|
||||
} from 'vuex';
|
||||
import {
|
||||
helpDetail
|
||||
} from '@/api/cms/help';
|
||||
|
||||
export default {
|
||||
name: 'help_detail',
|
||||
components: {},
|
||||
data: () => {
|
||||
return {
|
||||
detail: [],
|
||||
loading: true
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.id = this.$route.query.id;
|
||||
this.getDetail();
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['siteInfo'])
|
||||
},
|
||||
watch: {
|
||||
$route(curr) {
|
||||
this.id = curr.query.id;
|
||||
this.getDetail();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDetail() {
|
||||
helpDetail({
|
||||
id: this.id
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
if (res.data) {
|
||||
this.loading = false;
|
||||
this.detail = res.data;
|
||||
|
||||
window.document.title = `${this.detail.title} - ${this.siteInfo.site_name}`;
|
||||
} else {
|
||||
this.$router.push({
|
||||
path: '/cms/help/list'
|
||||
});
|
||||
}
|
||||
}
|
||||
}).catch(err => {
|
||||
this.loading = false;
|
||||
this.$message.error(err.message);
|
||||
});
|
||||
},
|
||||
toLink() {
|
||||
if (this.detail.link_address) {
|
||||
window.open(this.detail.link_address);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.detail-wrap {
|
||||
width: 1210px;
|
||||
margin: 20px auto;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.path {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.help-detail {
|
||||
background-color: #ffffff;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
margin: 10px 0;
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
margin: 10px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.info {
|
||||
// margin: 0 43px;
|
||||
border-bottom: 1px dotted #e9e9e9;
|
||||
|
||||
.time {
|
||||
text-align: center;
|
||||
color: #838383;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-top: 10px;
|
||||
// margin: 0 65px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
195
addon/pc/source/os/pages/cms/help/list.vue
Executable file
195
addon/pc/source/os/pages/cms/help/list.vue
Executable file
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<div class="help-wrap">
|
||||
<el-breadcrumb separator="/" class="path">
|
||||
<el-breadcrumb-item :to="{ path: '/' }" class="path-home">首页</el-breadcrumb-item>
|
||||
<el-breadcrumb-item class="path-help">帮助</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
<div class="help" v-loading="loading">
|
||||
<div class="menu">
|
||||
<div class="title">帮助列表</div>
|
||||
<div class="item" v-for="(item, index) in helpList" :key="index">
|
||||
<div :class="currentId == item.class_id ? 'active item-name' : 'item-name'" @click="menuOther(item.class_id)">{{ item.class_name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-other">
|
||||
<div class="item-info">
|
||||
<div class="item" v-for="(item, index) in helpOther.list" :key="index" @click="detail(item.id)">
|
||||
<div class="item-title">{{ item.title }}</div>
|
||||
<div class="info">
|
||||
<div class="time">{{ $util.timeStampTurnTime(item.create_time) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
helpList,
|
||||
helpOther
|
||||
} from '@/api/cms/help';
|
||||
|
||||
export default {
|
||||
name: 'help',
|
||||
components: {},
|
||||
data: () => {
|
||||
return {
|
||||
helpList: [],
|
||||
helpOther: [],
|
||||
currentId: 0,
|
||||
loading: true
|
||||
};
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: '帮助列表-' + this.$store.state.site.siteInfo.site_name
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getInfo();
|
||||
},
|
||||
methods: {
|
||||
menuOther(id) {
|
||||
this.currentId = id;
|
||||
this.getHelpOtherInfo();
|
||||
},
|
||||
getInfo() {
|
||||
helpList().then(res => {
|
||||
if (res.code == 0 && res.data.length > 0) {
|
||||
this.currentId = res.data[0].class_id;
|
||||
this.helpList = res.data;
|
||||
this.getHelpOtherInfo();
|
||||
}
|
||||
this.loading = false;
|
||||
}).catch(err => {
|
||||
this.loading = false;
|
||||
this.$message.error(err.message);
|
||||
});
|
||||
},
|
||||
getHelpOtherInfo() {
|
||||
helpOther({
|
||||
class_id: this.currentId
|
||||
}).then(res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
this.helpOther = res.data;
|
||||
}
|
||||
}).catch(err => {
|
||||
this.$message.error(err.message);
|
||||
});
|
||||
},
|
||||
detail(id) {
|
||||
this.$router.push({
|
||||
path: '/cms/help/detail',
|
||||
query: {
|
||||
id: id
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.help-wrap {
|
||||
background: #ffffff;
|
||||
width: 1210px;
|
||||
margin: 20px auto;
|
||||
|
||||
.path {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.help {
|
||||
display: flex;
|
||||
padding-bottom: 20px;
|
||||
|
||||
.menu {
|
||||
width: 210px;
|
||||
min-height: 300px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #f1f1ff;
|
||||
flex-shrink: 0;
|
||||
|
||||
.title {
|
||||
padding-left: 16px;
|
||||
background: #f8f8f8;
|
||||
font-size: $ns-font-size-base;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
cursor: pointer;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-size: $ns-font-size-base;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 40px;
|
||||
border-top: 1px solid #f1f1f1;
|
||||
padding-left: 25px;
|
||||
padding-right: 10px;
|
||||
height: 40px;
|
||||
background: #ffffff;
|
||||
color: #666666;
|
||||
|
||||
&:hover {
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-other {
|
||||
margin-left: 20px;
|
||||
width: 80%;
|
||||
|
||||
.item-info {
|
||||
padding: 10px;
|
||||
background-color: #ffffff;
|
||||
height: 300px;
|
||||
// border: 1px solid #e9e9e9;
|
||||
|
||||
.item {
|
||||
border-bottom: 1px #f1f1f1 solid;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: $ns-font-size-base;
|
||||
color: #333333;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
padding-left: 5px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
104
addon/pc/source/os/pages/cms/notice/detail.vue
Executable file
104
addon/pc/source/os/pages/cms/notice/detail.vue
Executable file
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<div class="notice-wrap">
|
||||
<el-breadcrumb separator="/" class="path">
|
||||
<el-breadcrumb-item :to="{ path: '/' }" class="path-home">首页</el-breadcrumb-item>
|
||||
<el-breadcrumb-item :to="{ path: '/cms/notice/list' }">公告列表</el-breadcrumb-item>
|
||||
<el-breadcrumb-item class="path-help">公告详情</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
<div class="notice-detil" v-loading="loading">
|
||||
<div class="notice-info">
|
||||
<div class="title">{{ info.title }}</div>
|
||||
<div class="time">{{ $util.timeStampTurnTime(info.create_time) }}</div>
|
||||
</div>
|
||||
<div class="content" v-html="info.content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters} from 'vuex';
|
||||
import {noticeDetail} from '@/api/cms/notice';
|
||||
|
||||
export default {
|
||||
name: 'notice_detail',
|
||||
components: {},
|
||||
data: () => {
|
||||
return {
|
||||
info: {},
|
||||
loading: true
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.id = this.$route.query.id;
|
||||
this.getDetail();
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['siteInfo'])
|
||||
},
|
||||
watch: {
|
||||
$route(curr) {
|
||||
this.id = curr.query.id;
|
||||
this.getDetail();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDetail() {
|
||||
noticeDetail({
|
||||
id: this.id
|
||||
}).then(res => {
|
||||
if (res.data) {
|
||||
this.info = res.data;
|
||||
this.loading = false;
|
||||
window.document.title = `${this.info.title} - ${this.siteInfo.site_name}`;
|
||||
} else {
|
||||
this.$router.push({
|
||||
path: '/cms/notice/list'
|
||||
});
|
||||
}
|
||||
}).catch(err => {
|
||||
this.loading = false;
|
||||
this.$message.error(err.message);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.notice-wrap {
|
||||
width: $width;
|
||||
margin: 0 auto 45px;
|
||||
}
|
||||
|
||||
.notice-detil {
|
||||
background-color: #ffffff;
|
||||
min-height: 300px;
|
||||
margin: 10px 0;
|
||||
padding: 10px;
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.time {
|
||||
text-align: center;
|
||||
color: #838383;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
|
||||
.notice-info {
|
||||
margin: 0 43px;
|
||||
border-bottom: 1px dotted #e9e9e9;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-top: 10px;
|
||||
margin: 0 65px;
|
||||
}
|
||||
}
|
||||
|
||||
.path {
|
||||
padding: 15px 0;
|
||||
}
|
||||
</style>
|
||||
210
addon/pc/source/os/pages/cms/notice/list.vue
Executable file
210
addon/pc/source/os/pages/cms/notice/list.vue
Executable file
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<div class="notice-wrap">
|
||||
<el-breadcrumb separator="/" class="path">
|
||||
<el-breadcrumb-item :to="{ path: '/' }" class="path-home">首页</el-breadcrumb-item>
|
||||
<el-breadcrumb-item class="path-help">公告</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
<div class="notice" v-loading="loading">
|
||||
<div class="menu">
|
||||
<div class="title">最新公告</div>
|
||||
<div class="item" v-for="item in noticeList" :key="item.id" @click="toDetail(item.id)">
|
||||
<div class="item-name">{{ item.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-wrap">
|
||||
<div class="notice-title">商城公告</div>
|
||||
<div class="list" v-for="item in noticeList" :key="item.id" @click="toDetail(item.id)">
|
||||
<div class="item">{{ item.title }}</div>
|
||||
<div class="info">
|
||||
<div class="time">{{ $util.timeStampTurnTime(item.create_time) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pager">
|
||||
<el-pagination
|
||||
background
|
||||
:pager-count="5"
|
||||
:total="total"
|
||||
prev-text="上一页"
|
||||
next-text="下一页"
|
||||
:current-page.sync="queryInfo.page"
|
||||
:page-size.sync="queryInfo.page_size"
|
||||
@size-change="handlePageSizeChange"
|
||||
@current-change="handleCurrentPageChange"
|
||||
hide-on-single-page
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {noticesList} from '@/api/cms/notice';
|
||||
|
||||
export default {
|
||||
name: 'notice',
|
||||
components: {},
|
||||
data: () => {
|
||||
return {
|
||||
queryInfo: {
|
||||
page: 1,
|
||||
page_size: 10,
|
||||
receiving_type: 'web'
|
||||
},
|
||||
noticeList: [],
|
||||
total: 0,
|
||||
loading: true
|
||||
};
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: '公告列表-' + this.$store.state.site.siteInfo.site_name
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
toDetail(id) {
|
||||
this.$router.push({
|
||||
path: '/cms/notice/detail',
|
||||
query: {id: id}
|
||||
});
|
||||
},
|
||||
getList() {
|
||||
noticesList(this.queryInfo).then(res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
this.noticeList = res.data.list;
|
||||
this.total = res.data.count;
|
||||
}
|
||||
this.loading = false;
|
||||
}).catch(err => {
|
||||
this.loading = false;
|
||||
this.$message.error(err.message);
|
||||
});
|
||||
},
|
||||
handlePageSizeChange(newsize) {
|
||||
this.queryInfo.page_size = newsize;
|
||||
this.getList();
|
||||
},
|
||||
handleCurrentPageChange(newnum) {
|
||||
this.queryInfo.page = newnum;
|
||||
this.getList();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.notice-wrap {
|
||||
width: $width;
|
||||
margin: 20px auto;
|
||||
|
||||
.path {
|
||||
padding: 15px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.notice {
|
||||
padding: 20px 0 45px;
|
||||
min-height: 300px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
.menu {
|
||||
width: 210px;
|
||||
min-height: 300px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #f1f1ff;
|
||||
flex-shrink: 0;
|
||||
|
||||
.title {
|
||||
padding-left: 16px;
|
||||
background: #f8f8f8;
|
||||
font-size: $ns-font-size-base;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
color: #666666;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-size: $ns-font-size-base;
|
||||
cursor: pointer;
|
||||
line-height: 40px;
|
||||
border-top: 1px solid #f1f1f1;
|
||||
padding-left: 25px;
|
||||
padding-right: 10px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
height: 40px;
|
||||
background: #ffffff;
|
||||
color: #666666;
|
||||
|
||||
&:hover {
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
.list-wrap {
|
||||
padding: 0 40px;
|
||||
margin-left: 27px;
|
||||
border: 1px solid #f1f1f1;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
background-color: #fff;
|
||||
|
||||
.notice-title {
|
||||
padding: 37px 0 20px 0;
|
||||
font-size: 18px;
|
||||
border-bottom: 1px dotted #e9e9e9;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: initial;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.item {
|
||||
font-size: $ns-font-size-base;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
padding: 3px 0;
|
||||
|
||||
&:hover {
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
font-size: $ns-font-size-base;
|
||||
|
||||
.time {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user