From b79977863c7ff92eea1519fa2e49e4acbec91aa1 Mon Sep 17 00:00:00 2001
From: ronger <ronger-x@outlook.com>
Date: Fri, 18 Dec 2020 14:13:03 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E6=96=87=E7=AB=A0=E4=BC=98?=
 =?UTF-8?q?=E9=80=89=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/archive/list.vue   | 63 ++++++++++++++++++++---------------
 pages/article/_article_id.vue | 55 +++++++++++++++++++++++++++---
 2 files changed, 88 insertions(+), 30 deletions(-)

diff --git a/components/archive/list.vue b/components/archive/list.vue
index 174530a..36256cb 100644
--- a/components/archive/list.vue
+++ b/components/archive/list.vue
@@ -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>
diff --git a/pages/article/_article_id.vue b/pages/article/_article_id.vue
index 1bbc732..19e59e1 100644
--- a/pages/article/_article_id.vue
+++ b/pages/article/_article_id.vue
@@ -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) {