调整导航栏显示的模块和路由

src/layout/index.vue

@@ -10,15 +10,17 @@
           class="hidden-sm-and-down ml-0 pl-4"
           style="width: 60px"
         >
-          <span style="cursor:pointer" @click="goToHome()">{{ this.$store.state.webInfo.name }}</span>
+          <p style="font-size: 20px; margin-bottom: 0;">
+            <router-link :to="`/`" style="color: white;"> {{ this.$store.state.webInfo.name }} </router-link>
+          </p>
         </v-toolbar-title>
         <router-link v-for="item in items" :key="item.text" :to="item.link">
           <v-list-item
             link
           >
-            <v-list-item-action>
+<!--            <v-list-item-action>
               <v-icon>{{ item.icon }}</v-icon>
-            </v-list-item-action>
+            </v-list-item-action>-->
             <v-list-item-content>
               <v-list-item-title>
                 {{ item.text }}
@@ -98,12 +100,12 @@ export default {
     drawer: true,
     keyword: '',
     items: [
-      /* { icon: 'mdi-trending-up', text: '视频', link: '/video' },
-      { icon: 'mdi-trending-up', text: '图片', link: '/picture' },
-      { icon: 'mdi-trending-up', text: '音频', link: '/audio' },
-      { icon: 'mdi-trending-up', text: '文章', link: '/article' },*/
-      { icon: 'mdi-youtube-subscription', text: '直播', link: '/live' },
-      { icon: 'mdi-trending-up', text: '状态', link: '/mblog' }
+      /* { icon: 'mdi-trending-up', text: '状态', link: '/mblog' },*/
+      { text: '状态', link: '/mblog' },
+      { text: '视频', link: '/video' },
+      { text: '音频', link: '/audio' },
+      { text: '图片', link: '/image' },
+      { text: '文章', link: '/article' }
     ],
     links: [
       '直播',

src/router/index.js

@@ -16,6 +16,7 @@ const routes = [
         component: () => import('@/views/home/index.vue'),
         meta: { title: 'bili' }
       },
+      /* 用户稿件模块 */
       {
         path: '/studio',
         name: 'Studio',
@@ -105,6 +106,7 @@ const routes = [
           }
         ]
       },
+      /* 用户状态模块 */
       {
         path: '/u/:userId',
         name: 'UserHome',
@@ -153,6 +155,7 @@ const routes = [
           title: '用户状态'
         }
       },
+      /* 用户帐号模块 */
       {
         path: '/user',
         name: 'UserCenter',
@@ -217,6 +220,7 @@ const routes = [
           }
         ]
       },
+      /* VIP 用户模块 */
       {
         path: '/vip',
         name: 'VipCenter',
@@ -252,6 +256,7 @@ const routes = [
           }
         ]
       },
+      /* 消息模块 */
       {
         path: '/message',
         name: 'Message',
@@ -272,18 +277,7 @@ const routes = [
           }
         ]
       },
-      {
-        path: '/live',
-        name: 'Live',
-        component: () => import('@/views/home/live.vue'),
-        meta: { title: 'bili 直播' }
-      },
-      {
-        path: '/channel',
-        name: 'Channel',
-        component: () => import('@/views/home/channel.vue'),
-        meta: { title: 'bili 分区' }
-      },
+      /* 状态模块 */
       {
         path: '/mblog',
         name: 'Mblog',
@@ -320,23 +314,78 @@ const routes = [
         component: () => import('@/views/home/tag-result.vue'),
         meta: { title: 'bili 视频标签' }
       },
+      /* 视频模块 */
       {
-        path: '/video/:id',
+        path: '/video',
         name: 'Video',
+        component: () => import('@/views/video/index.vue'),
+        meta: { title: '视频' },
+        children: [
+        ]
+      },
+      {
+        path: '/video/:id',
+        name: 'VideoPage',
         component: () => import('@/views/video/video.vue'),
-        meta: { title: '视频播放' }
+        meta: { title: '视频页面' }
       },
+      /* 音频模块 */
       {
-        path: '/audio/:id',
+        path: '/audio',
         name: 'Audio',
-        component: () => import('@/views/video/audio.vue'),
-        meta: { title: '音频播放' }
+        component: () => import('@/views/audio/index.vue'),
+        meta: { title: '音频' },
+        children: [
+        ]
+      },
+      {
+        path: '/audio/:id',
+        name: 'AudioPage',
+        component: () => import('@/views/audio/audio.vue'),
+        meta: { title: '音频页面' }
       },
+      /* 图片模块 */
+      {
+        path: '/image',
+        name: 'Image',
+        component: () => import('@/views/image/index.vue'),
+        meta: { title: '图片' },
+        children: [
+          {
+            path: '/article/:id',
+            name: 'ArticlePage',
+            component: () => import('@/views/message/home.vue'),
+            meta: { title: '文章主页' }
+          }
+        ]
+      },
+      /* 文章模块 */
+      {
+        path: '/article',
+        name: 'Article',
+        component: () => import('@/views/article/index.vue'),
+        meta: { title: '文章' },
+        children: [
+          {
+            path: '/article/:id',
+            name: 'ArticlePage',
+            component: () => import('@/views/message/home.vue'),
+            meta: { title: '文章主页' }
+          }
+        ]
+      },
+      /* 直播模块 */
       {
         path: '/live',
         name: 'live',
         component: () => import('@/views/live/index.vue'),
         meta: { title: '直播1' }
+      },
+      {
+        path: '/live',
+        name: 'Live',
+        component: () => import('@/views/home/live.vue'),
+        meta: { title: 'bili 直播' }
       }
     ]
   },

src/views/article/article.vue

@@ -0,0 +1,148 @@
+<template>
+  <v-container class="grey lighten-5">
+    <v-row justify="space-between">
+      <v-col>
+        <v-row dense justify="center">
+          <question-card :question="question" />
+        </v-row>
+        <v-row dense>
+          <div v-infinite-scroll="loadMore" infinite-scroll-disabled="true" infinite-scroll-distance="10">
+            <v-col cols="12">
+              <v-row
+                v-for="item in cardList"
+                :key="item.answerId"
+                justify="center"
+              >
+                <answer-card :answer="item" />
+              </v-row>
+            </v-col>
+          </div>
+        </v-row>
+      </v-col>
+      <v-col md="4">
+        <v-row dense>
+          <v-col cols="12">
+            <v-card
+              color="#385F73"
+              light
+            >
+              <v-card-title class="text-h5">
+                热门问题
+              </v-card-title>
+              <v-card-text>
+                <p class="text-body-1 text--primary">
+                  1.第1条
+                </p>
+                <p class="text-body-1 text--primary">
+                  2.第2条
+                </p>
+              </v-card-text>
+            </v-card>
+          </v-col>
+          <v-col cols="12">
+            <v-card
+              color="#385F73"
+              light
+            >
+              <v-card-title class="text-h5">
+                热门回答
+              </v-card-title>
+              <v-card-text>
+                <p class="text-body-1 text--primary">
+                  1.第1条
+                </p>
+                <p class="text-body-1 text--primary">
+                  2.第2条
+                </p>
+              </v-card-text>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-col>
+    </v-row>
+
+    <v-snackbar
+      v-model="showMessage"
+      :top="true"
+      :timeout="3000"
+    >
+      {{ message }}
+      <template v-slot:action="{ attrs }">
+        <v-btn
+          color="pink"
+          text
+          v-bind="attrs"
+          @click="showMessage = false"
+        >
+          关闭
+        </v-btn>
+      </template>
+    </v-snackbar>
+  </v-container>
+</template>
+
+<script>
+import { answerRecommend } from '@/api/mblog/status'
+import AnswerCard from '@/components/card/answer-card'
+import QuestionCard from '@/components/card/question-card'
+
+export default {
+  name: 'Home',
+  components: {
+    QuestionCard,
+    AnswerCard
+  },
+  data() {
+    return {
+      question: {
+        title: '你最照骗的一张照片是什么样子？',
+        detail: ''
+      },
+      cardList: [],
+      busy: false,
+      page: 1,
+      showMessage: false,
+      message: ''
+    }
+  },
+  created() {
+    this.getFollowingStatus(this.page)
+  },
+  mounted() {
+  },
+  methods: {
+    loadMore: function() {
+      this.busy = true
+      setTimeout(() => {
+        console.log('加载更多数据')
+      }, 1000)
+    },
+    getFollowingStatus(page) {
+      answerRecommend(page)
+        .then(res => {
+          if (res.code === 0) {
+            if (page === 1) {
+              this.cardList = []
+            }
+
+            for (const item of res.data.list) {
+              this.cardList.push(item)
+            }
+            this.page += 1
+            this.busy = false
+          } else {
+            this.message = res.msg
+            this.showMessage = true
+          }
+        })
+        .catch(error => {
+          this.message = error.message
+          this.showMessage = true
+        })
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/views/article/index.vue

@@ -0,0 +1,119 @@
+<template>
+  <v-container>
+    <v-tabs>
+      <v-tab @click="selectTab(0)">视频</v-tab>
+      <v-tab @click="selectTab(1)">图片</v-tab>
+    </v-tabs>
+    <v-simple-table>
+      <template v-slot:default>
+        <thead>
+          <tr>
+            <th class="text-left">
+              author
+            </th>
+            <th class="text-left">
+              pub date
+            </th>
+            <th class="text-left">
+              title
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="item in pageList"
+            :key="item.pageUrl"
+            @click="jumpPage(item.pageUrl)"
+          >
+            <td>{{ item.author }}</td>
+            <td>{{ item.pubDate }}</td>
+            <td>{{ item.title }}</td>
+          </tr>
+        </tbody>
+      </template>
+    </v-simple-table>
+    <v-pagination
+      v-model="page"
+      :length="length"
+      :total-visible="7"
+      @input="pageChange"
+    />
+  </v-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      type: 0,
+      page: 1,
+      length: 0,
+      pageList: []
+    }
+  },
+  created() {
+    this.getPageList('video', 1)
+  },
+  methods: {
+    selectTab(type) {
+      console.log(type)
+      if (type === this.type) {
+        return
+      }
+
+      this.type = type
+      this.page = 1
+      if (type === 0) {
+        this.$vuetify.goTo(type)
+        this.getPageList('video', 1)
+      } else if (type === 1) {
+        this.$vuetify.goTo(type)
+        this.getPageList('image', 1)
+      }
+    },
+    pageChange(page) {
+      this.page = page
+      if (page !== this.currentPage) {
+        if (this.type === 0) {
+          this.getPageList('video', page)
+        } else if (this.type === 1) {
+          this.getPageList('image', page)
+        }
+      }
+    },
+    getPageList(pageType, page) {
+      const url = 'http://localhost:9988/api/t66y/page/list/' + pageType + '?page=' + page
+      fetch(url, {
+        method: 'GET'
+      }).then(response => response.json())
+        .then(json => {
+          if (json.code === 0) {
+            const dataList = json.data
+            this.pageList.splice(0, this.pageList.length)
+            for (const item of dataList.list) {
+              this.pageList.push(item)
+            }
+            this.currentPage = dataList.currentPage
+            this.length = dataList.totalPages
+          }
+        })
+        .catch(e => {
+          return null
+        })
+    },
+    jumpPage(pageUrl) {
+      console.log('跳转页面 + ' + pageUrl)
+      const routeUrl = this.$router.resolve({
+        path: '/t66y/page',
+        query: {
+          pageUrl: pageUrl
+        }
+      })
+      window.open(routeUrl.href, '_blank')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+</style>

src/views/audio/index.vue

@@ -0,0 +1,90 @@
+<template>
+  <v-container>
+    <p>
+      音频主页
+    </p>
+    <v-pagination
+      v-model="page"
+      :length="length"
+      :total-visible="7"
+      @input="pageChange"
+    />
+  </v-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      type: 0,
+      page: 1,
+      length: 0,
+      pageList: []
+    }
+  },
+  created() {
+    this.getPageList('video', 1)
+  },
+  methods: {
+    selectTab(type) {
+      console.log(type)
+      if (type === this.type) {
+        return
+      }
+
+      this.type = type
+      this.page = 1
+      if (type === 0) {
+        this.$vuetify.goTo(type)
+        this.getPageList('video', 1)
+      } else if (type === 1) {
+        this.$vuetify.goTo(type)
+        this.getPageList('image', 1)
+      }
+    },
+    pageChange(page) {
+      this.page = page
+      if (page !== this.currentPage) {
+        if (this.type === 0) {
+          this.getPageList('video', page)
+        } else if (this.type === 1) {
+          this.getPageList('image', page)
+        }
+      }
+    },
+    getPageList(pageType, page) {
+      const url = 'http://localhost:9988/api/t66y/page/list/' + pageType + '?page=' + page
+      fetch(url, {
+        method: 'GET'
+      }).then(response => response.json())
+        .then(json => {
+          if (json.code === 0) {
+            const dataList = json.data
+            this.pageList.splice(0, this.pageList.length)
+            for (const item of dataList.list) {
+              this.pageList.push(item)
+            }
+            this.currentPage = dataList.currentPage
+            this.length = dataList.totalPages
+          }
+        })
+        .catch(e => {
+          return null
+        })
+    },
+    jumpPage(pageUrl) {
+      console.log('跳转页面 + ' + pageUrl)
+      const routeUrl = this.$router.resolve({
+        path: '/t66y/page',
+        query: {
+          pageUrl: pageUrl
+        }
+      })
+      window.open(routeUrl.href, '_blank')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+</style>

src/views/image/index.vue

@@ -0,0 +1,90 @@
+<template>
+  <v-container>
+    <p>
+      图片主页
+    </p>
+    <v-pagination
+      v-model="page"
+      :length="length"
+      :total-visible="7"
+      @input="pageChange"
+    />
+  </v-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      type: 0,
+      page: 1,
+      length: 0,
+      pageList: []
+    }
+  },
+  created() {
+    this.getPageList('video', 1)
+  },
+  methods: {
+    selectTab(type) {
+      console.log(type)
+      if (type === this.type) {
+        return
+      }
+
+      this.type = type
+      this.page = 1
+      if (type === 0) {
+        this.$vuetify.goTo(type)
+        this.getPageList('video', 1)
+      } else if (type === 1) {
+        this.$vuetify.goTo(type)
+        this.getPageList('image', 1)
+      }
+    },
+    pageChange(page) {
+      this.page = page
+      if (page !== this.currentPage) {
+        if (this.type === 0) {
+          this.getPageList('video', page)
+        } else if (this.type === 1) {
+          this.getPageList('image', page)
+        }
+      }
+    },
+    getPageList(pageType, page) {
+      const url = 'http://localhost:9988/api/t66y/page/list/' + pageType + '?page=' + page
+      fetch(url, {
+        method: 'GET'
+      }).then(response => response.json())
+        .then(json => {
+          if (json.code === 0) {
+            const dataList = json.data
+            this.pageList.splice(0, this.pageList.length)
+            for (const item of dataList.list) {
+              this.pageList.push(item)
+            }
+            this.currentPage = dataList.currentPage
+            this.length = dataList.totalPages
+          }
+        })
+        .catch(e => {
+          return null
+        })
+    },
+    jumpPage(pageUrl) {
+      console.log('跳转页面 + ' + pageUrl)
+      const routeUrl = this.$router.resolve({
+        path: '/t66y/page',
+        query: {
+          pageUrl: pageUrl
+        }
+      })
+      window.open(routeUrl.href, '_blank')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+</style>

src/views/video/index.vue

@@ -0,0 +1,90 @@
+<template>
+  <v-container>
+    <p>
+      视频主页
+    </p>
+    <v-pagination
+      v-model="page"
+      :length="length"
+      :total-visible="7"
+      @input="pageChange"
+    />
+  </v-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      type: 0,
+      page: 1,
+      length: 0,
+      pageList: []
+    }
+  },
+  created() {
+    this.getPageList('video', 1)
+  },
+  methods: {
+    selectTab(type) {
+      console.log(type)
+      if (type === this.type) {
+        return
+      }
+
+      this.type = type
+      this.page = 1
+      if (type === 0) {
+        this.$vuetify.goTo(type)
+        this.getPageList('video', 1)
+      } else if (type === 1) {
+        this.$vuetify.goTo(type)
+        this.getPageList('image', 1)
+      }
+    },
+    pageChange(page) {
+      this.page = page
+      if (page !== this.currentPage) {
+        if (this.type === 0) {
+          this.getPageList('video', page)
+        } else if (this.type === 1) {
+          this.getPageList('image', page)
+        }
+      }
+    },
+    getPageList(pageType, page) {
+      const url = 'http://localhost:9988/api/t66y/page/list/' + pageType + '?page=' + page
+      fetch(url, {
+        method: 'GET'
+      }).then(response => response.json())
+        .then(json => {
+          if (json.code === 0) {
+            const dataList = json.data
+            this.pageList.splice(0, this.pageList.length)
+            for (const item of dataList.list) {
+              this.pageList.push(item)
+            }
+            this.currentPage = dataList.currentPage
+            this.length = dataList.totalPages
+          }
+        })
+        .catch(e => {
+          return null
+        })
+    },
+    jumpPage(pageUrl) {
+      console.log('跳转页面 + ' + pageUrl)
+      const routeUrl = this.$router.resolve({
+        path: '/t66y/page',
+        query: {
+          pageUrl: pageUrl
+        }
+      })
+      window.open(routeUrl.href, '_blank')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+</style>