✨ 1.文章点赞功能2.文章赞赏功能

components/layouts/pc/header.vue

@@ -37,9 +37,9 @@
               <span>{{ item.label }}</span>
             </el-col>
           </template>
-<!--          <template slot="append">-->
+          <!--          <template slot="append">-->
-<!--            <el-button size="small" icon="el-icon-search" @click="search"></el-button>-->
+          <!--            <el-button size="small" icon="el-icon-search" @click="search"></el-button>-->
-<!--          </template>-->
+          <!--          </template>-->
         </el-autocomplete>
       </el-col>
       <el-col :xs="6" :sm="6" :md="6" :xl="3" style="padding-top: 1rem;">

package.json

@@ -13,6 +13,7 @@
     "@chenfengyuan/vue-qrcode": "^1.0.2",
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
     "@fortawesome/free-brands-svg-icons": "^5.15.1",
+    "@fortawesome/free-regular-svg-icons": "^5.15.1",
     "@fortawesome/free-solid-svg-icons": "^5.15.1",
     "@fortawesome/vue-fontawesome": "^2.0.0",
     "@nuxtjs/axios": "^5.12.2",

pages/article/_article_id.vue

@@ -51,7 +51,6 @@
                     <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>
@@ -70,6 +69,46 @@
             <div class="pt-7 pipe-content__reset vditor-reset" id="articleContent" v-html="article.articleContent"
                  style="overflow: hidden;"></div>
           </div>
+          <el-row>
+            <el-col v-if="article.portfolios && article.portfolios.length > 0">
+              <portfolios-widget :portfolios="article.portfolios"></portfolios-widget>
+            </el-col>
+            <el-col v-if="user">
+              <el-tooltip class="item" effect="dark" content="点赞" placement="top-start">
+                <el-button type="text" style="font-size: 1.2rem;" @click="thumbsUp">
+                  <font-awesome-icon :icon="['far', 'thumbs-up']"></font-awesome-icon>
+                  {{ article.articleThumbsUpCount }}
+                </el-button>
+              </el-tooltip>
+              <el-tooltip class="item" effect="dark" content="赞赏" placement="top-start">
+                <el-button v-if="user.idUser === article.articleAuthorId" type="text" icon="el-icon-coffee" style="font-size: 1.2rem;">
+                  {{ article.articleSponsorCount }}
+                </el-button>
+                <el-popconfirm
+                  v-else
+                  title="赞赏本文作者 20 巴旦木？"
+                  @confirm="sponsor"
+                >
+                  <el-button slot="reference" type="text" icon="el-icon-coffee" style="font-size: 1.2rem;">
+                    {{ article.articleSponsorCount }}
+                  </el-button>
+                </el-popconfirm>
+              </el-tooltip>
+            </el-col>
+            <el-col v-else>
+              <el-tooltip class="item" effect="dark" content="点赞" placement="top-start">
+                <el-button type="text" style="font-size: 1.2rem;">
+                  <font-awesome-icon :icon="['far', 'thumbs-up']"></font-awesome-icon>
+                  {{ article.articleThumbsUpCount }}
+                </el-button>
+              </el-tooltip>
+              <el-tooltip class="item" effect="dark" content="赞赏" placement="top-start">
+                <el-button type="text" icon="el-icon-coffee" style="font-size: 1.2rem;">
+                  {{ article.articleSponsorCount }}
+                </el-button>
+              </el-tooltip>
+            </el-col>
+          </el-row>
         </div>
       </el-card>
     </el-col>
@@ -91,7 +130,7 @@
 
 <script>
 import Vue from 'vue';
-import { mapState } from 'vuex';
+import {mapState} from 'vuex';
 import ShareBox from '~/components/widget/share';
 import PortfoliosWidget from '~/components/widget/portfolios';
 import EditTags from '~/components/widget/tags';
@@ -231,7 +270,7 @@ export default {
     },
     closeTagsDialog() {
       this.$set(this, 'dialogVisible', false);
-      this.$store.dispatch('article/fetchDetail', this.$route.params)
+      this.$store.dispatch('article/fetchDetail', this.$route.params);
     },
     followUser(idUser) {
       let _ts = this;
@@ -243,7 +282,7 @@ export default {
           _ts.$set(_ts, 'isFollow', res);
         })
       } else {
-        _ts.gotoLogin()
+        _ts.gotoLogin();
       }
     },
     cancelFollowUser(idUser) {
@@ -256,7 +295,7 @@ export default {
           _ts.$set(_ts, 'isFollow', res);
         })
       } else {
-        _ts.gotoLogin()
+        _ts.gotoLogin();
       }
     },
     setPreference() {
@@ -290,6 +329,37 @@ export default {
           }
         }
       })
+    },
+    thumbsUp() {
+      let _ts = this;
+      _ts.$axios.$post('/api/article/thumbs-up', {
+        idArticle: _ts.article.idArticle
+      }).then(function (res) {
+        if (res) {
+          if (res.success) {
+            _ts.$message.success(res.message);
+            _ts.$store.dispatch('article/updateThumbsUpCount', {thumbsUpNumber: res.thumbsUpNumber})
+          } else {
+            _ts.$message.error(_ts.message);
+          }
+        }
+      })
+    },
+    sponsor() {
+      let _ts = this;
+      _ts.$axios.$post('/api/article/sponsor', {
+        dataType: '0',
+        dataId: _ts.article.idArticle
+      }).then(function (res) {
+        if (res) {
+          if (res.success) {
+            _ts.$message.success(res.message);
+            _ts.$store.dispatch('article/updateSponsorCount', {sponsorNumber: 1})
+          } else {
+            _ts.$message.error(_ts.message);
+          }
+        }
+      })
     }
   },
   mounted() {

plugins/fontawesome.js

@@ -3,6 +3,7 @@ import { library, config } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { fas } from '@fortawesome/free-solid-svg-icons'
 import { fab } from '@fortawesome/free-brands-svg-icons'
+import { far } from '@fortawesome/free-regular-svg-icons'
 
 // This is important, we are going to let Nuxt.js worry about the CSS
 config.autoAddCss = false
@@ -11,6 +12,7 @@ config.autoAddCss = false
 // can add other styles or just individual icons.
 library.add(fas)
 library.add(fab)
+library.add(far)
 
 // Register the component globally
 Vue.component('font-awesome-icon', FontAwesomeIcon)

store/article.js

@@ -53,6 +53,12 @@ export const mutations = {
       'isRenderedFullContent',
       action == null ? true : action
     )
+  },
+  updateArticleThumbsUpCount(state, action) {
+    state.detail.data.articleThumbsUpCount += action.thumbsUpNumber
+  },
+  updateArticleSponsorCount(state, action) {
+    state.detail.data.articleSponsorCount += action.sponsorNumber
   }
 }
 
@@ -143,5 +149,11 @@ export const actions = {
         commit('updateDetailFetching', false)
         return Promise.reject(error)
       })
+  },
+  updateThumbsUpCount({ commit }, params = {}) {
+    commit('updateArticleThumbsUpCount', params)
+  },
+  updateSponsorCount({ commit }, params = {}) {
+    commit('updateArticleSponsorCount', params)
   }
 }