peihaoyu/nebula
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ 文章优选功能

Browse Source
This commit is contained in:
ronger 2020-12-18 14:13:03 +08:00
parent 2b3d6861e9
commit b79977863c
2 changed files with 88 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
components/archive/list.vue
View File

@ -4,8 +4,14 @@
<el-col v-for="article in articles.articles" :key="article.idArticle" style="padding-bottom: 1rem;">
<el-card>
<div class="card-body d-flex flex-column">
<el-link rel="nofollow" @click="onRouter('article',article.articleLink)" :underline="false" style="margin-bottom: .5rem;">
<h4 v-html="article.articleTitle"></h4>
<el-link rel="nofollow" @click="onRouter('article',article.articleLink)" :underline="false"
style="margin-bottom: .5rem;">
<h4>
<span v-if="isPerfect(article.articlePerfect)" style="color: gold;" title="优选">
<font-awesome-icon :icon="['fas', 'medal']"></font-awesome-icon>
</span>
{{ article.articleTitle }}
</h4>
</el-link>
<el-tag
style="margin-left: 0.5rem;"
@ -25,14 +31,16 @@
</el-col>
<el-col :xs="16" :sm="16" :xl="16">
<div>
<el-link rel="nofollow" @click="onRouter('user', article.articleAuthorName)" :underline="false" class="text-default">
<el-link rel="nofollow" @click="onRouter('user', article.articleAuthorName)" :underline="false"
class="text-default">
{{ article.articleAuthorName }}
</el-link>
<small class="d-block text-muted">{{ article.timeAgo }}</small>
</div>
</el-col>
<el-col class="text-right">
<el-link rel="nofollow" :underline="false" title="总浏览数"><i class="el-icon-s-data"></i><span style="color: red;">{{ article.articleViewCount }}</span>
<el-link rel="nofollow" :underline="false" title="总浏览数"><i class="el-icon-s-data"></i><span
style="color: red;">{{ article.articleViewCount }}</span>
</el-link>
</el-col>
</el-row>
@ -57,32 +65,35 @@
</template>
<script>
export default {
name: "ArticleList",
props: {
articles: {
type: Object
export default {
name: "ArticleList",
props: {
articles: {
type: Object
}
},
methods: {
currentChange(page) {
this.$emit('currentChange', page);
},
onRouter(name, data) {
if ("article" === name) {
this.$router.push({
path: data
})
} else {
this.$router.push(
{
path: '/user/' + data
}
)
}
},
methods: {
currentChange(page) {
this.$emit('currentChange', page);
},
onRouter(name, data) {
if ("article" === name) {
this.$router.push({
path: data
})
} else {
this.$router.push(
{
path: '/user/' + data
}
)
}
}
isPerfect(articlePerfect) {
return articlePerfect === '1';
}
}
}
</script>
<style scoped>

55
pages/article/_article_id.vue
View File

@ -4,7 +4,12 @@
<el-card>
<div class="card-body d-flex flex-column article">
<div class="article__item">
<h1 class="list__title" v-html="article.articleTitle"></h1>
<h1 class="list__title">
<span v-if="isPerfect" style="color: gold;" title="优选">
<font-awesome-icon :icon="['fas', 'medal']"></font-awesome-icon>
</span>
{{ article.articleTitle }}
</h1>
<el-row class="pt-5">
<el-col :xs="3" :sm="1" :xl="1">
<el-avatar v-if="article.articleAuthorAvatarUrl" :src="article.articleAuthorAvatarUrl"></el-avatar>
@ -42,7 +47,12 @@
<el-button size="mini" v-else @click="followUser(article.articleAuthorId)" plain>关注</el-button>
</template>
<el-button size="mini" v-if="hasPermissions" @click="handleCommand('edit')" plain>编辑文章</el-button>
<el-button size="mini" v-if="isAdmin" @click="handleCommand('editTag')" plain>编辑标签</el-button>
<template v-if="isAdmin">
<el-button size="mini" @click="handleCommand('editTag')" plain>编辑标签</el-button>
<el-button v-if="isPerfect" size="mini" @click="cancelPreference" plain>取消优选</el-button>
<el-button v-else size="mini" @click="setPreference" plain>设为优选</el-button>
</template>
<el-button size="mini" @click="handleCommand('share')" plain>分享</el-button>
</el-col>
<el-col v-else :span="12" style="text-align: right;">
@ -125,7 +135,7 @@ export default {
return this.$store.getters.hasPermissions('blog_admin');
},
routeArticleId() {
return Number(this.$route.params.article_id)
return Number(this.$route.params.article_id);
}
},
head() {
@ -173,6 +183,7 @@ export default {
isShare: false,
dialogVisible: false,
isFollow: false,
isPerfect: false,
shareData: {}
}
},
@ -212,7 +223,10 @@ export default {
},
gotoLogin() {
this.$router.push({
name: 'login'
name: 'login',
query: {
historyUrl: window.location.href
}
})
},
closeTagsDialog() {
@ -244,6 +258,38 @@ export default {
} else {
_ts.gotoLogin()
}
},
setPreference() {
let _ts = this;
_ts.$axios.$patch("/api/article/update-perfect", {
idArticle: _ts.article.idArticle,
articlePerfect: '1',
}).then(function (res) {
if (res) {
if (res.success) {
_ts.$set(_ts, 'isPerfect', false);
_ts.$message.success("设置成功!");
} else {
_ts.$message.error(_ts.message);
}
}
})
},
cancelPreference() {
let _ts = this;
_ts.$axios.$patch("/api/article/update-perfect", {
idArticle: _ts.article.idArticle,
articlePerfect: '0',
}).then(function (res) {
if (res) {
if (res.success) {
_ts.$set(_ts, 'isPerfect', true);
_ts.$message.success("取消成功!");
} else {
_ts.$message.error(_ts.message);
}
}
})
}
},
mounted() {
@ -267,6 +313,7 @@ export default {
Vue.VditorPreview.lazyLoadImageRender(previewElement);
//VditorPreview.outlineRender(previewElement, outLineElement);
window.scrollTo(0, 0);
_ts.$set(_ts, 'isPerfect', _ts.article.articlePerfect === '1')
})
if (_ts.user) {