更新页面

src/api/status.js

@@ -0,0 +1,22 @@
+import { get, post } from '@/utils/request'
+
+const statusApi = {
+  statusPubApi: '/api/mblog/status',
+  statusRecommendApi: '/api/mblog/status',
+  userStatusApi: '/api/mblog/status/user'
+}
+
+// 状态发布接口
+export function pubStatus(statusPost) {
+  return post(statusApi.statusPubApi, statusPost)
+}
+
+// 状态获取接口
+export function statusRecommend(page) {
+  return get(statusApi.statusRecommendApi + '/' + page)
+}
+
+// 用户状态获取接口
+export function userStatus(userId, page) {
+  return get(statusApi.userStatusApi + '?userId=' + userId + '&page=' + page)
+}

src/components/VideoPlayer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="dplayer" ref="dplayer" style="width: 720px; height: 450px;" />
+  <div id="dplayer" ref="dplayer" style="height: 450px;" />
 <!--  <div id="dplayer" ref="dplayer" />-->
 </template>
 

src/components/card/AudioCard.vue

@@ -26,7 +26,7 @@
         </div>
         <div style="padding: 14px">
           <span style="left: 0;margin-bottom: 0px;color: black;">
-            <router-link target="_blank" :to="`/u/${video.userId}`"><i class="el-icon-user"> {{ video.username }} </i></router-link> · {{ video.pubDate }}
+            <router-link target="_blank" :to="`/user/${video.userId}`"><i class="el-icon-user"> {{ video.username }} </i></router-link> · {{ video.pubDate }}
           </span>
         </div>
       </el-card>

src/components/card/ImageCard.vue

@@ -30,7 +30,7 @@
         </div>
         <div style="padding: 14px">
           <span style="left: 0;margin-bottom: 0px;color: black;">
-            <router-link target="_blank" :to="`/u/${video.userId}`"><i class="el-icon-user"> {{ video.username }} </i></router-link> · {{ video.pubDate }}
+            <router-link target="_blank" :to="`/user/${video.userId}`"><i class="el-icon-user"> {{ video.username }} </i></router-link> · {{ video.pubDate }}
           </span>
         </div>
       </el-card>

src/components/card/PostCard.vue

@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :md="4">
+        <el-menu
+          default-active="1"
+          class="el-menu-vertical-demo"
+        >
+          <el-menu-item index="1">
+            <i class="el-icon-upload" />
+            <span slot="title">投稿</span>
+          </el-menu-item>
+          <el-menu-item index="2">
+            <i class="el-icon-files" />
+            <span slot="title">稿件</span>
+          </el-menu-item>
+          <el-menu-item index="3">
+            <i class="el-icon-data-analysis" />
+            <span slot="title">数据</span>
+          </el-menu-item>
+        </el-menu>
+      </el-col>
+      <el-col :md="20">
+        <el-tabs v-model="activeName" @tab-click="handleClick">
+          <el-tab-pane label="视频" name="first">
+            <publish-video v-if="activeName === 'first'" />
+          </el-tab-pane>
+          <el-tab-pane label="音频" name="second">
+            <publish-audio v-if="activeName === 'second'" />
+          </el-tab-pane>
+          <el-tab-pane label="图片" name="third">
+            <publish-image v-if="activeName === 'third'" />
+          </el-tab-pane>
+          <el-tab-pane label="文章" name="fourth">
+            <publish-article v-if="activeName === 'fourth'" />
+          </el-tab-pane>
+        </el-tabs>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import PublishVideo from '@/components/upload/PublishVideo'
+import PublishAudio from '@/components/upload/PublishAudio'
+import PublishImage from '@/components/upload/PublishImage'
+import PublishArticle from '@/components/upload/PublishArticle'
+
+export default {
+  name: 'Publish',
+  components: { PublishVideo, PublishAudio, PublishImage, PublishArticle },
+  data() {
+    return {
+      activeName: 'first',
+      coverUrl: null,
+      videoUrlId: null,
+      coverFile: null,
+      dialogImageUrl: '',
+      dialogVisible: false,
+      disabled: false,
+      imageList: [],
+      imageUrl: ''
+    }
+  },
+  created() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style>
+.uploader-example {
+  width: 500px;
+  padding: 15px;
+  margin: 40px auto 0;
+  font-size: 12px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, .4);
+}
+.uploader-example .uploader-btn {
+  margin-right: 4px;
+}
+.uploader-example .uploader-list {
+  max-height: 440px;
+  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409EFF;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 320px;
+  height: 240px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 320px;
+  height: 240px;
+  display: block;
+}
+</style>

src/components/card/StatusCard.vue

@@ -1,50 +1,24 @@
 <template>
   <el-card :body-style="{ padding: '0px' }" class="card">
-    <router-link target="_blank" :to="`/video/${video.videoId}`">
-      <div class="imgs">
+    <span v-html="video.text" />
+    <el-row v-if="video.imageUrls.length !== 0">
+      <el-col :md="6" v-for="imageUrl in video.imageUrls" :key="imageUrl.thumbnailUrl">
         <el-image
           lazy
           fit="cover"
-          :src="video.coverUrl"
           class="coverImg"
-        />
-        <span style="position: absolute; bottom: 0; left: 0; color:red">
-          <i class="el-icon-video-play">{{ getVisited(video.viewCount) }}</i>
-        </span>
-        <span style="position: absolute; bottom: 0; left: 15%; color:red">
-          <i class="el-icon-s-comment">{{ getVisited(video.commentCount) }}</i>
-        </span>
-        <span style="position: absolute; bottom: 0; right: 0; color:red"> 12:11 </span>
-      </div>
-    </router-link>
-    <div style="padding: 14px">
-      <router-link target="_blank" :to="`/video/${video.videoId}`">
-        <span style="left: 0;margin-bottom: 0px;color: black;">{{ video.title | ellipsis }}</span>
-      </router-link>
-    </div>
-    <div style="padding: 14px">
-      <span style="left: 0;margin-bottom: 0px;color: black;">
-        <router-link target="_blank" :to="`/u/${video.userId}`"><i class="el-icon-user"> {{ video.username }} </i></router-link> · {{ video.pubDate }}
-      </span>
-    </div>
+          :src="imageUrl.thumbnailUrl"
+          @click="showImage(video.imageUrls)">
+        </el-image>
+      </el-col>
+    </el-row>
   </el-card>
 </template>
 
 <script>
-import { handleVisited } from 'assets/js/utils'
 
 export default {
   name: 'StatusCard',
-  filters: {
-    ellipsis(value) {
-      if (!value) return ''
-      const max = 20
-      if (value.length > max) {
-        return value.slice(0, max) + '...'
-      }
-      return value
-    }
-  },
   props: {
     video: {
       type: Object,
@@ -57,9 +31,20 @@ export default {
     }
   },
   methods: {
-    getVisited(visited) {
-      return handleVisited(visited)
-    }
+    showImage(imageUrls) {
+      const imgs = []
+      for (const i of imageUrls) {
+        imgs.push(i.originalUrl)
+      }
+      this.$viewerApi({
+        images: imgs,
+        options: {
+          movable: true,
+          fullscreen: false,
+          keyboard: true
+        }
+      })
+    },
   }
 }
 </script>

src/components/card/VideoCard.vue

@@ -46,7 +46,7 @@ export default {
   filters: {
     ellipsis(value) {
       if (!value) return ''
-      const max = 15
+      const max = 10
       if (value.length > max) {
         return value.slice(0, max) + '...'
       }

src/views/home/Article.vue

@@ -4,7 +4,7 @@
       <el-col :md="18">
         <el-card :if="!video" :body-style="{ padding: '0px' }" class="card">
           <div slot="header" class="clearfix">
-            <span>卡片名称</span>
+            <span>文章列表</span>
             <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
           </div>
           <div v-for="(video, index) in videoList" :key="index" :md="6" :sm="12" :xs="12">

src/views/home/ArticlePage.vue

@@ -16,14 +16,14 @@
       <el-col :md="9">
         <el-row>
           <el-col :md="3">
-            <router-link target="_blank" :to="`/u/` + video.userId">
+            <router-link target="_blank" :to="`/user/` + video.userId">
               <el-avatar>
                 <el-image :src="video.avatarUrl" />
               </el-avatar>
             </router-link>
           </el-col>
           <el-col :md="6">
-            <router-link target="_blank" :to="`/u/` + video.userId"><span>{{ video.username }}</span></router-link>
+            <router-link target="_blank" :to="`/user/` + video.userId"><span>{{ video.username }}</span></router-link>
             <router-link target="_blank" :to="`/message/` + video.userId"><span class="el-icon-message">发消息</span></router-link>
             <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'" />
             <el-button small outlined color="primary">

src/views/home/ImagePage.vue

@@ -36,7 +36,7 @@
                 </div>
                 <div style="padding: 14px">
           <span style="left: 0;margin-bottom: 0px;color: black;">
-            <router-link target="_blank" :to="`/u/${video.userId}`"><i class="el-icon-user"> {{ video.username }} </i></router-link> · {{ video.pubDate }}
+            <router-link target="_blank" :to="`/user/${video.userId}`"><i class="el-icon-user"> {{ video.username }} </i></router-link> · {{ video.pubDate }}
           </span>
                 </div>
               </el-card>

src/views/home/Status.vue

@@ -19,10 +19,10 @@
 </template>
 
 <script>
-import TextCard from 'components/card/TextCard'
-import StatusCard from 'components/card/StatusCard'
-import HotList from 'components/hotlist/HotList'
-import { videoRecommend } from '@/api/video'
+import TextCard from '@/components/card/TextCard'
+import StatusCard from '@/components/card/StatusCard'
+import HotList from '@/components/hotlist/HotList'
+import { statusRecommend } from '@/api/status'
 
 export default {
   name: 'Status',
@@ -38,17 +38,12 @@ export default {
   },
   created() {
     this.currentPage = 1
-    videoRecommend(this.currentPage).then(res => {
+    statusRecommend(this.currentPage).then(res => {
       if (res.code === 0) {
         const resData = res.data
         this.videoList = resData.list
-        this.videoInfo = resData.list[0]
-        console.log(this.videoInfo)
       }
     })
-    // console.log(this.$store.state.videos);
-    // 当页面挂载时，页码变为1
-    this.$store.commit('updatePage', 1)
   },
   mounted() {
     // 当窗口宽度改变时获取屏幕宽度

src/views/home/Video.vue

@@ -23,7 +23,7 @@
     <!--电影列表，与推荐列表-->
     <el-row id="movie-list">
       <!--电影列表-->
-      <el-col :md="24">
+      <el-col :md="18">
         <el-col v-for="(video, index) in videoList" :key="index" :md="6" :sm="12" :xs="12">
           <video-card :video="video" />
         </el-col>
@@ -40,17 +40,17 @@
             hide-on-single-page
             layout="prev, pager, next"
             :page-size="pageSize"
-            :current-page="$store.state.activePage"
-            :total="$store.state.pageBean.totalCount"
+            :current-page="currentPage"
+            :total="totalPages"
             @current-change="handleCurrentChange"
           />
         </el-col>
       </el-col>
 
       <!--热播列表-->
-      <!--      <el-col :md="6">
+      <el-col :md="6">
         <hot-list />
-      </el-col>-->
+      </el-col>
     </el-row>
   </div>
 </template>
@@ -58,24 +58,32 @@
 <script>
 import VideoCard from 'components/card/VideoCard'
 import Recommend from 'components/recommend/Recommend'
+import HotList from 'components/hotlist/HotList'
 import { videoCategory, videoRecommend} from '@/api/video'
 
 export default {
   name: 'Video',
-  components: { VideoCard, Recommend },
+  components: { VideoCard, Recommend, HotList },
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小
       screenWidth: document.body.clientWidth,
       currentPage: 1,
       pageSize: 12,
+      totalPages: 0,
       videoList: [],
       currentIndex: 0,
       videoCategory: [
         { cname: '全部', cid: 11010 },
         { cname: '电影', cid: 11011 },
         { cname: '音乐', cid: 11012 },
-        { cname: '新闻', cid: 11013 }
+        { cname: '新闻', cid: 11013 },
+        { cname: '教育', cid: 11014 },
+        { cname: '科技', cid: 11015 },
+        { cname: '体育', cid: 11016 },
+        { cname: '军事', cid: 11017 },
+        { cname: '社会', cid: 11018 },
+        { cname: '生活', cid: 11019 }
       ]
     }
   },
@@ -84,16 +92,7 @@ export default {
     videoCategory().then(res => {
       console.log(res.data)
     })
-
-    videoRecommend(this.currentPage).then(res => {
-      if (res.code === 0) {
-        const resData = res.data
-        this.videoList = resData.list
-      }
-    })
-    // console.log(this.$store.state.videos);
-    // 当页面挂载时，页码变为1
-    // this.$store.commit('updatePage', 1)
+    this.videoRecommendWrapper(this.currentPage)
   },
   mounted() {
     // 当窗口宽度改变时获取屏幕宽度
@@ -108,9 +107,23 @@ export default {
     handleCurrentChange(pageNumber) {
       this.currentPage = pageNumber
       console.log('选择分页')
+
+      this.$router.push({
+        path: path
+      });
+
       // 回到顶部
       scrollTo(0, 0)
     },
+    videoRecommendWrapper(pageNumber) {
+      videoRecommend(pageNumber).then(res => {
+        if (res.code === 0) {
+          const resData = res.data
+          this.videoList = resData.list
+          this.totalPages = resData.totalPages
+        }
+      })
+    },
     btnClick(cid, index) {
       this.currentIndex = index
       // 页码变为1

src/views/home/VideoPage.vue

@@ -16,14 +16,14 @@
       <el-col :md="9">
         <el-row>
           <el-col :md="3">
-            <router-link target="_blank" :to="`/u/` + video.userId">
+            <router-link target="_blank" :to="`/user/` + video.userId">
               <el-avatar>
                 <el-image :src="video.avatarUrl" />
               </el-avatar>
             </router-link>
           </el-col>
           <el-col :md="6">
-            <router-link target="_blank" :to="`/u/` + video.userId"><span>{{ video.username }}</span></router-link>
+            <router-link target="_blank" :to="`/user/` + video.userId"><span>{{ video.username }}</span></router-link>
             <router-link target="_blank" :to="`/message/` + video.userId"><span class="el-icon-message">发消息</span></router-link>
             <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'" />
             <el-button small outlined color="primary">
@@ -83,7 +83,7 @@
       </el-col>
       <!--推荐列-->
       <el-col :md="9">
-        <el-card class="box-card" style="height: 450px">
+        <el-card class="box-card">
           <div slot="header" class="clearfix">
             <span>弹幕列表</span><i class="el-icon-more" />
             <span style="float: right; padding: 3px 0" type="text"><i class="el-icon-arrow-down" /></span>

src/views/user/Profile.vue

@@ -23,8 +23,8 @@
               <status-card />
             </div>
           </el-tab-pane>
-          <el-tab-pane label="投稿" name="video">
-            <video-card v-if="activeName === 'video'" />
+          <el-tab-pane label="投稿" name="post">
+            <post-card v-if="activeName === 'post'" />
           </el-tab-pane>
         </el-tabs>
       </el-col>
@@ -34,15 +34,12 @@
 
 <script>
 import StatusCard from '@/components/card/StatusCard'
-import VideoCard from '@/components/card/VideoCard'
-import AudioCard from '@/components/card/AudioCard'
-import ImageCard from '@/components/card/ImageCard'
-import ArticleCard from '@/components/card/ArticleCard'
+import PostCard from '@/components/card/PostCard'
 import { getUserInfo } from "@/api/user";
 
 export default {
   name: 'Profile',
-  components: { StatusCard, VideoCard, AudioCard, ImageCard, ArticleCard },
+  components: { StatusCard, PostCard },
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小