✨ 专题模块功能

components/layouts/pc/header.vue

@@ -32,8 +32,8 @@
             @select="handleSelect"
           />
         </el-col>
-        <!--<el-col v-if="isLogin" :xs="0" :sm="8" :xl="6">-->
+        <!--<el-col v-if="user" :xs="0" :sm="8" :xl="6">-->
-        <el-col v-if="isLogin">
+        <el-col v-if="user">
           <el-link :underline="false" style="padding-left: 10px;padding-right: 10px;" href="/post-portfolio">创建作品集
           </el-link>
           <el-link :underline="false" style="padding-left: 10px;padding-right: 10px;" href="/post-article">发帖</el-link>
@@ -91,7 +91,7 @@
       getActiveMenu() {
         return this.$store.state.activeMenu;
       },
-      isLogin() {
+      user() {
         return this.$store.state.oauth;
       },
       avatarURL() {
@@ -115,7 +115,7 @@
       };
     },
     watch: {
-      isLogin: function () {
+      user: function () {
         this.getUnreadNotifications();
       }
     },
@@ -145,25 +145,23 @@
         let _ts = this;
         let activeMenu = _ts.$store.state.activeMenu;
         if (activeMenu !== item) {
-          if (item === 'topic') {
+          switch (item) {
-            _ts.$router.push(
+            case 'topic':
-              {
+              _ts.$router.push({
-                name: item,
+                path: '/topic/news'
-                params: {
+              })
-                  name: '51mcu'
+              break;
+            case 'github':
+              window.open("https://github.com/Hugh-rymcu");
+              return false;
+              break;
+            default:
+              _ts.$router.push(
+                {
+                  name: item
                 }
-              }
+              )
-            )
           }
-          if (item === 'github') {
-            window.open("https://github.com/Hugh-rymcu");
-            return false;
-          }
-          _ts.$router.push(
-            {
-              name: item
-            }
-          )
         }
       },
       handleSelect(item) {
@@ -171,31 +169,34 @@
       },
       handleCommand(item) {
         let _ts = this;
-        if (item === 'user') {
+        switch (item) {
-          _ts.$router.push({
+          case 'user':
-            path: '/user/' + _ts.$store.state.nickname
+            _ts.$router.push({
-          })
+              path: '/user/' + _ts.nickname
+            })
+            break;
+          case 'user-info':
+            _ts.$router.push({
+              name: 'account',
+              params: {
+                id: _ts.user.idUser
+              }
+            })
+            break;
+          case 'logout':
+            Cookie.remove('auth')
+            _ts.$store.commit('setAuth', null)
+            item = 'login';
+            break;
+          default:
+            _ts.$router.push({
+              name: item
+            })
         }
-        if (item === 'user-info') {
-          _ts.$router.push({
-            name: 'account',
-            params: {
-              id: _ts.$store.state.idUser
-            }
-          })
-        }
-        if (item === 'logout') {
-          Cookie.remove('auth')
-          _ts.$store.commit('setAuth', null)
-          item = 'login';
-        }
-        _ts.$router.push({
-          name: item
-        })
       },
       getUnreadNotifications() {
         let _ts = this;
-        if (_ts.isLogin) {
+        if (_ts.user) {
           _ts.$axios.$get('/api/notification/unread').then(function (res) {
             if (res) {
               _ts.$set(_ts, 'notifications', res.notifications);
@@ -207,8 +208,8 @@
     },
     mounted() {
       this.restaurants = this.loadAll();
-      let isLogin = this.isLogin;
+      let user = this.user;
-      if (isLogin) {
+      if (user) {
         this.getUnreadNotifications();
       }
     }

nuxt.config.js

@@ -74,7 +74,7 @@ export default {
   },
   proxy: [  //proxy配置
     ['/api', {
-      target:'https://rymcu.com/vertical-console/',  //api请求路径
+      target: apiConfig.BASE,  //api请求路径
       pathRewrite: { '^/api' : '/api/v1' }  //重定向请求路径，防止路由、api路径的冲突
     }]
   ],

pages/topic/_topic_uri.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="topic-archive-page">
+    <article-list :articles="articles" @currentChange="currentChangeArticle"/>
+  </div>
+</template>
+
+<script>
+  import ArticleList from '~/components/archive/list'
+
+  export default {
+    name: "topicArticleList",
+    components: {
+      ArticleList
+    },
+    validate({ params, store }) {
+      return params.topic_uri && store.state.topic.data.some(
+        topic => topic.topicUri === params.topic_uri
+      )
+    },
+    fetch({ store, params }) {
+      return store.dispatch('article/fetchList', params)
+    },
+    computed: {
+      articles() {
+        return this.$store.state.article.list.data
+      },
+      currentTopic() {
+        return this.$store.state.topic.data.find(
+          topic => topic.topicUri === this.$route.params.topic_uri
+        )
+      },
+      defaultParams() {
+        return {
+          topic_uri: this.$route.params.topic_uri
+        }
+      }
+    },
+    methods: {
+      currentChangeArticle(page) {
+        this.$store.dispatch('article/fetchList', {page: page,topic: this.currentTopic})
+      }
+    },
+    mounted() {
+      this.$store.commit('setActiveMenu', 'topic');
+    },
+    created() {
+      if (!this.currentTopic) {
+        this.$router.back()
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

store/index.js

@@ -32,6 +32,7 @@ export const actions = {
     }
     const initFetchAppData = [
       // 内容数据
+      store.dispatch('topic/fetchList'),
       store.dispatch('article/fetchList')
     ]
     return Promise.all(initFetchAppData)

store/topic.js

@@ -0,0 +1,39 @@
+/**
+ * @file 分类数据状态 / ES module
+ * @module store/category
+ * @author Surmon <https://github.com/surmon-china>
+ */
+
+export const TOPIC_API_PATH = '/api/topic'
+
+export const state = () => {
+  return {
+    fetching: false,
+    data: []
+  }
+}
+
+export const mutations = {
+  updateFetching(state, action) {
+    state.fetching = action
+  },
+  updateListData(state, action) {
+    state.data = action
+  }
+}
+
+export const actions = {
+  fetchList({ commit }, params) {
+    commit('updateFetching', true)
+    console.log(params)
+    return this.$axios
+      .$get(`${TOPIC_API_PATH}/topic-nav`)
+      .then(response => {
+        commit('updateListData', response)
+        commit('updateFetching', false)
+      })
+      .catch(error => {
+        commit('updateFetching', false)
+      })
+  }
+}