From d45a583afa05303d1676f8184a3b93f1bd634f24 Mon Sep 17 00:00:00 2001
From: x ronger <ronger-x@outlook.com>
Date: Wed, 9 Sep 2020 22:58:18 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E5=85=B3=E6=B3=A8=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/user/_nickname.vue | 327 ++++++++++++++++++++++-----------------
 1 file changed, 189 insertions(+), 138 deletions(-)

diff --git a/pages/user/_nickname.vue b/pages/user/_nickname.vue
index 13e35f3..6d2e21b 100644
--- a/pages/user/_nickname.vue
+++ b/pages/user/_nickname.vue
@@ -9,11 +9,17 @@
         <div class="card-body text-center">
           <img v-if="user.avatarUrl" class="card-profile-img" :src="user.avatarUrl">
           <img v-else class="card-profile-img" src="https://static.rymcu.com/article/1578475481946.png">
-          <h3 class="mb-3">{{user.nickname}}</h3>
+          <h3 class="mb-3">{{ user.nickname }}</h3>
           <p class="mb-4" v-html="user.signature"></p>
           <div v-if="oauth && oauth.idUser !== user.idUser">
+            <el-button type="primary" v-if="isFollow" @click="cancelFollowUser(user.idUser)">取消关注</el-button>
+            <el-button type="primary" v-else @click="followUser(user.idUser)">关注</el-button>
             <el-button @click="gotoChats">聊天</el-button>
           </div>
+          <div v-else>
+            <el-button type="primary" @click="login">关注</el-button>
+            <el-button @click="login">聊天</el-button>
+          </div>
         </div>
       </div>
     </el-col>
@@ -38,172 +44,217 @@
 </template>
 
 <script>
-  import {mapState} from 'vuex';
-  import ArticleList from "~/components/archive/list";
-  import PortfolioList from "~/components/common/portfolio/list";
+import {mapState} from 'vuex';
+import ArticleList from "~/components/archive/list";
+import PortfolioList from "~/components/common/portfolio/list";
 
-  export default {
-    name: "User",
-    components: {ArticleList, PortfolioList},
-    validate({params, store}) {
-      return params.nickname
+export default {
+  name: "User",
+  components: {ArticleList, PortfolioList},
+  validate({params, store}) {
+    return params.nickname
+  },
+  fetch({store, params, error}) {
+    return Promise.all([
+      store
+        .dispatch('user/fetchDetail', params)
+        .catch(err => error({statusCode: 404})),
+      store.dispatch('user/fetchArticleList', params),
+      store.dispatch('user/fetchPortfolioList', params)
+    ])
+  },
+  computed: {
+    ...mapState({
+      user: state => state.user.data,
+      articles: state => state.user.articles,
+      portfolios: state => state.user.portfolios,
+      oauth: state => state.oauth
+    })
+  },
+  data() {
+    return {
+      activeTab: '0',
+      isFollow: false
+    }
+  },
+  methods: {
+    currentChangeArticle(page) {
+      this.$store.dispatch('user/fetchArticleList', {page: page, nickname: this.$route.params.nickname})
     },
-    fetch({store, params, error}) {
-      return Promise.all([
-        store
-          .dispatch('user/fetchDetail', params)
-          .catch(err => error({statusCode: 404})),
-        store.dispatch('user/fetchArticleList', params),
-        store.dispatch('user/fetchPortfolioList', params)
-      ])
+    currentChangePortfolio(page) {
+      this.$store.dispatch('user/fetchPortfolioList', {page: page, nickname: this.$route.params.nickname})
     },
-    computed: {
-      ...mapState({
-        user: state => state.user.data,
-        articles: state => state.user.articles,
-        portfolios: state => state.user.portfolios,
-        oauth: state => state.oauth
+    handleToggleTab(key) {
+      this.$set(this, 'activeTab', key);
+    },
+    gotoChats() {
+      let _ts = this;
+      _ts.$router.push({
+        path: `/chats/${_ts.user.nickname}`
       })
     },
-    data() {
-      return {
-        activeTab: '0'
+    followUser(idUser) {
+      let _ts = this;
+      if (_ts.oauth) {
+        _ts.$axios.$post('/api/follow', {
+          followingId: idUser,
+          followingType: 0
+        }).then(function (res) {
+          _ts.$set(_ts, 'isFollow', res);
+        })
+      } else {
+        _ts.login()
       }
     },
-    methods: {
-      currentChangeArticle(page) {
-        this.$store.dispatch('user/fetchArticleList', {page: page, nickname: this.$route.params.nickname})
-      },
-      currentChangePortfolio(page) {
-        this.$store.dispatch('user/fetchPortfolioList', {page: page, nickname: this.$route.params.nickname})
-      },
-      handleToggleTab(key) {
-        this.$set(this, 'activeTab', key);
-      },
-      gotoChats() {
-        let _ts = this;
-        _ts.$router.push({
-          path: `/chats/${_ts.user.nickname}`
+    cancelFollowUser(idUser) {
+      let _ts = this;
+      if (_ts.oauth) {
+        _ts.$axios.$post('/api/follow/cancel-follow', {
+          followingId: idUser,
+          followingType: 0
+        }).then(function (res) {
+          _ts.$set(_ts, 'isFollow', res);
         })
+      } else {
+        _ts.login()
       }
+    },
+    login() {
+      this.$router.push({
+        path: '/login'
+      })
+    }
+  },
+  mounted() {
+    let _ts = this;
+    if (_ts.oauth) {
+      _ts.$axios.$get('/api/follow/is-follow', {
+        params: {
+          followingId: _ts.user.idUser,
+          followingType: 0
+        }
+      }).then(function (res) {
+        _ts.$set(_ts, 'isFollow', res);
+      })
     }
   }
+}
 </script>
 
 <style scoped>
-  body {
-    overflow-x: hidden;
-  }
+body {
+  overflow-x: hidden;
+}
 
-  .card {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    position: relative;
-    margin-bottom: 1.5rem;
-    width: 100%;
-  }
+.card {
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  position: relative;
+  margin-bottom: 1.5rem;
+  width: 100%;
+}
 
-  .card {
-    position: relative;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-direction: column;
-    flex-direction: column;
-    min-width: 0;
-    word-wrap: break-word;
-    background-color: #fff;
-    background-clip: border-box;
-    border: 1px solid rgba(0, 40, 100, 0.12);
-    border-radius: 3px;
-  }
+.card {
+  position: relative;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: border-box;
+  border: 1px solid rgba(0, 40, 100, 0.12);
+  border-radius: 3px;
+}
 
-  .card-profile .card-header {
-    height: 20rem;
-    background-size: cover;
-  }
+.card-profile .card-header {
+  height: 20rem;
+  background-size: cover;
+}
 
-  .card-header:first-child {
-    border-radius: calc(3px - 1px) calc(3px - 1px) 0 0;
-  }
+.card-header:first-child {
+  border-radius: calc(3px - 1px) calc(3px - 1px) 0 0;
+}
 
-  .card-header {
-    background: none;
-    padding: 0.5rem 1.5rem;
-    display: -ms-flexbox;
-    display: flex;
-    min-height: 3.5rem;
-    -ms-flex-align: center;
-    align-items: center;
-  }
+.card-header {
+  background: none;
+  padding: 0.5rem 1.5rem;
+  display: -ms-flexbox;
+  display: flex;
+  min-height: 3.5rem;
+  -ms-flex-align: center;
+  align-items: center;
+}
 
-  .card-header {
-    padding: 1.5rem 1.5rem;
-    margin-bottom: 0;
-    background-color: rgba(0, 0, 0, 0.03);
-    border-bottom: 1px solid rgba(0, 40, 100, 0.12);
-  }
+.card-header {
+  padding: 1.5rem 1.5rem;
+  margin-bottom: 0;
+  background-color: rgba(0, 0, 0, 0.03);
+  border-bottom: 1px solid rgba(0, 40, 100, 0.12);
+}
 
-  .card-body {
-    -ms-flex: 1;
-    flex: 1;
-    margin: 0;
-    padding: 1.5rem 1.5rem;
-    position: relative;
-  }
+.card-body {
+  -ms-flex: 1;
+  flex: 1;
+  margin: 0;
+  padding: 1.5rem 1.5rem;
+  position: relative;
+}
 
-  .card-profile-img {
-    max-width: 6rem;
-    margin-top: -5rem;
-    margin-bottom: 1rem;
-    border: 3px solid #fff;
-    border-radius: 100%;
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-    background-color: #ffffff;
-  }
+.card-profile-img {
+  max-width: 6rem;
+  margin-top: -5rem;
+  margin-bottom: 1rem;
+  border: 3px solid #fff;
+  border-radius: 100%;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+  background-color: #ffffff;
+}
 
-  .card-img-top {
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
-  }
+.card-img-top {
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+}
 
-  .card-img-top {
-    width: 100%;
-    border-top-left-radius: calc(3px - 1px);
-    border-top-right-radius: calc(3px - 1px);
-  }
+.card-img-top {
+  width: 100%;
+  border-top-left-radius: calc(3px - 1px);
+  border-top-right-radius: calc(3px - 1px);
+}
 
-  .mb-3, .my-3 {
-    margin-bottom: 0.75rem !important;
-  }
+.mb-3, .my-3 {
+  margin-bottom: 0.75rem !important;
+}
 
-  h3, .h3 {
-    font-size: 1.5rem;
-  }
+h3, .h3 {
+  font-size: 1.5rem;
+}
 
-  .mb-4, .my-4 {
-    margin-bottom: 1rem !important;
-  }
+.mb-4, .my-4 {
+  margin-bottom: 1rem !important;
+}
 
-  .article-header-md {
-    position: relative;
-    line-height: 1.4em;
-    height: 1.4em;
-    overflow: hidden;
-  }
+.article-header-md {
+  position: relative;
+  line-height: 1.4em;
+  height: 1.4em;
+  overflow: hidden;
+}
 
-  .article-header-md a {
-    font-weight: bold;
-    font-size: 1em;
-  }
+.article-header-md a {
+  font-weight: bold;
+  font-size: 1em;
+}
 
-  .article-summary-md {
-    position: relative;
-    line-height: 1.4em;
-    height: 4.2em;
-    overflow: hidden;
-  }
+.article-summary-md {
+  position: relative;
+  line-height: 1.4em;
+  height: 4.2em;
+  overflow: hidden;
+}
 
-  .el-col-6 {
-    padding-right: 0.75rem;
-    padding-left: 0.75rem;
-  }
+.el-col-6 {
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
+}
 </style>