添加音频相关页面和接口

src/api/audio.js

@@ -0,0 +1,115 @@
+import { get, post } from '@/utils/request'
+
+const audioApi = {
+  videoSubmitApi: '/api/content/audio/submit',
+  userAudioApi: '/api/content/audio/user',
+  audioInfoApi: '/api/content/audio',
+
+  similarVideoApi: '/api/content/video/similar',
+  videoPageApi: '/api/content/video/page',
+  videoInfoApi: '/api/content/video/detail',
+  videoCategoryApi: '/api/content/video/category',
+  videoTagApi: '/api/content/video/tag',
+  videoUrlApi: '/api/content/video/url',
+  userVideoListApi: '/api/content/video/user',
+  hotVideoApi: '/api/content/video/hot',
+  userContentDataApi: '/api/content/userdata',
+  playerRecordApi: '/api/media/video/play/record',
+  userRecentlyVideoListApi: '/api/media/video/post/user/recently',
+  testVideoApi: '/api/media/video/post/display'
+}
+
+export function submitAudio(video) {
+  return post(audioApi.videoSubmitApi, video)
+}
+
+export function getUserAudio(userId) {
+  return get(audioApi.userAudioApi + '?userId=' + userId)
+}
+
+export function getAudio(audioId) {
+  return get(audioApi.audioInfoApi + '/' + audioId)
+}
+
+// 更新视频信息
+export function updateVideoInfo(data) {
+  return post(audioApi.videoSubmitApi, data)
+}
+
+// 更新视频可见范围
+export function updateVideoScope(data) {
+  return post(audioApi.videoSubmitApi, data)
+}
+
+// 更新视频封面
+export function updateVideoCover(data) {
+  return post(audioApi.videoSubmitApi, data)
+}
+
+// 更新视频文件
+export function updateVideoFile(data) {
+  return post(audioApi.videoSubmitApi, data)
+}
+
+// 视频推荐接口
+export function videoRecommend(page) {
+  return get(audioApi.videoRecommendApi + '/' + page)
+}
+
+// 视频标签接口
+export function videoTag(tag, page) {
+  return get(audioApi.videoTagApi + '?tag=' + tag + '&page=' + page)
+}
+
+// 相似视频接口
+export function similarVideo(videoId) {
+  return get(audioApi.similarVideoApi + '?videoId=' + videoId)
+}
+
+// 视频分页接口
+export function videoPage(pageNumber, prevId, nextId, categoryId) {
+  return get(audioApi.videoPageApi +
+    '?pageNumber=' + pageNumber + '&prevId=' + prevId + '&nextId=' + nextId + '&categoryId=' + categoryId)
+}
+
+// 视频详情接口
+export function videoInfo(videoId) {
+  return get(audioApi.videoInfoApi + '/' + videoId)
+}
+
+// 视频 URL 接口
+export function videoUrl(videoId) {
+  return get(audioApi.videoUrlApi + '/' + videoId)
+}
+
+// 视频分类接口
+export function videoCategory() {
+  return get(audioApi.videoCategoryApi)
+}
+
+// 播放记录
+export function submitPlayRecord(playerRecord) {
+  return post(audioApi.playerRecordApi, playerRecord)
+}
+
+// 用户视频列表
+export function userVideoList(pageNumber, userId, lastId) {
+  return get(audioApi.userVideoListApi + '?pageNumber=' + pageNumber + '&userId=' + userId + '&lastId=' + lastId)
+}
+
+// 用户最近投稿的视频
+export function userRecentlyVideoList(userId) {
+  return get(audioApi.userRecentlyVideoListApi + '?userId=' + userId)
+}
+
+export function getDisplayedVideoList() {
+  return get(audioApi.testVideoApi)
+}
+
+export function getUserContentData(userId) {
+  return get(audioApi.userContentDataApi + '?userId=' + userId)
+}
+
+export function getHotVideo() {
+  return get(audioApi.hotVideoApi)
+}

src/api/image.js

@@ -6,7 +6,6 @@ const imageApi = {
   albumSubmitApi: '/api/content/image/album/submit',
 }
 
-// 视频推荐接口
 export function getUserAlbums(userId) {
   return get(imageApi.userAlbumApi + '?userId=' + userId)
 }

src/components/card/AudioCard.vue

@@ -1,27 +1,48 @@
 <template>
   <el-col style="padding-right: 7px; padding-left: 7px">
-    <span v-html="item.title" />
-    <div>
-      <audio-player
-        ref="audioPlayer"
-        :show-prev-button="false"
-        :show-next-button="false"
-        :show-playback-rate="false"
-        :audio-list="audioList.map(elm => elm.url)"
-        :before-play="handleBeforePlay"
-        theme-color="#87CEFA"
-      />
+    <div style="cursor: pointer" :title="audio.title">
+      <el-card :body-style="{ padding: '0px' }" class="card">
+        <router-link target="_blank" :to="`/audio/${audio.audioId}`">
+          <div class="imgs">
+            <el-image
+              lazy
+              fit="cover"
+              :src="audio.coverUrl"
+              class="coverImg"
+            />
+            <span style="position: absolute; bottom: 0; left: 0; color:white">
+              <i class="el-icon-video-play">114</i>
+            </span>
+            <span style="position: absolute; bottom: 0; left: 30%; color:white">
+              <i class="el-icon-s-comment">112</i>
+            </span>
+            <span style="position: absolute; bottom: 0; right: 0; color:white"> {{ audio.duration }} </span>
+          </div>
+        </router-link>
+        <div style="padding: 14px">
+          <router-link target="_blank" :to="`/audio/${audio.videoId}`">
+            <span style="left: 0;margin-bottom: 0px;color: black;">{{ audio.title | ellipsis }}</span>
+          </router-link>
+        </div>
+        <div v-if="audio.user !== undefined && audio.user !== null" style="padding: 14px">
+          <span style="left: 0;margin-bottom: 0px;color: black;">
+            <router-link target="_blank" :to="`/user/${audio.user.userId}`"><i class="el-icon-user"> {{ audio.user.screenName }} </i></router-link> · {{ convertTimestamp(audio.pubDate) }}
+          </span>
+        </div>
+      </el-card>
     </div>
   </el-col>
 </template>
 
 <script>
+import { handleVisited } from 'assets/js/utils'
+
 export default {
-  name: 'AudioCard',
+  name: 'VideoCard',
   filters: {
     ellipsis(value) {
       if (!value) return ''
-      const max = 20
+      const max = 10
       if (value.length > max) {
         return value.slice(0, max) + '...'
       }
@@ -32,34 +53,33 @@ export default {
     audio: {
       type: Object,
       default: null
+    },
+    // 时间前的描述
+    dateTit: {
+      type: String,
+      default: ''
     }
   },
-  data() {
-    return {
-      currentAudioName: '',
-      audioList: []
-    }
-  },
-  created() {
-    this.audioList = [
-      { name: this.item.title, url: this.item.audioUrl }
-    ]
-  },
   methods: {
-    // 播放前做的事
-    handleBeforePlay(next) {
-      // 这里可以做一些事情...
-      this.currentAudioName = this.audioList[this.$refs.audioPlayer.currentPlayIndex].name
-      next() // 开始播放
+    getVisited(visited) {
+      return handleVisited(visited)
     },
-    handlePlaySpecify() {
-      this.$refs.audioPlayer.currentPlayIndex = 1
-      this.$nextTick(() => {
-        this.$refs.audioPlayer.play()
-        this.title = this.audioList[
-          this.$refs.audioPlayer.currentPlayIndex
-          ].name
-      })
+    convertTimestamp(value) {
+      const date = new Date(value*1000)
+      var month = date.getMonth()
+      if (month < 10) {
+        if (month === 0) {
+          month = '01'
+        } else {
+          month = '0' + month
+        }
+      }
+
+      var day = date.getDay()
+      if (day < 10) {
+        day = '0' + day
+      }
+      return month + '-' + day
     }
   }
 }

src/components/card/StatusCard.vue

@@ -36,17 +36,14 @@
       </el-col>
     </el-row>
     <el-row v-if="status.audioUrl !== undefined && status.audioUrl !== null">
-      <audio-card :audio="ddd"></audio-card>
     </el-row>
   </el-card>
 </template>
 
 <script>
-import AudioCard from 'components/card/AudioCard'
-
 export default {
   name: 'StatusCard',
-  components: { AudioCard },
+  components: {},
   props: {
     status: {
       type: Object,

src/components/card/UserAvatarCard.vue

@@ -0,0 +1,199 @@
+<template>
+  <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <el-row>
+          <el-col :md="4">
+            <router-link target="_blank" :to="`/user/` + userAvatar.userId">
+              <el-avatar>
+                <el-image :src="userAvatar.avatarUrl" />
+              </el-avatar>
+            </router-link>
+          </el-col>
+          <el-col :md="16">
+            <el-row>
+              <span v-html="userAvatar.screenName"></span>
+            </el-row>
+            <el-row>
+              <span>关注 {{userAvatar.following}}</span>
+              <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'" />
+              <span>粉丝 {{userAvatar.follower}}</span>
+            </el-row>
+          </el-col>
+        </el-row>
+      </div>
+      <div class="text item">
+        <el-row>
+          <el-col :md="18">
+            <el-button
+              type="danger"
+              size="mini"
+              :icon="followButton.icon"
+              @click="followUser(userAvatar.userId)"
+            >
+              <span>{{followButton.text}}</span>
+            </el-button>
+            <el-button
+              type="danger"
+              size="mini"
+              icon="el-icon-message"
+              @click="sendMessage(userAvatar.userId)"
+            >
+              <span>发消息</span>
+            </el-button>
+          </el-col>
+        </el-row>
+      </div>
+    </el-card>
+  </el-row>
+</template>
+
+<script>
+import { getUserInfo, getUserFollowing, getUserFollower, checkRelation, followUser, unfollowUser } from "@/api/user";
+
+export default {
+  name: 'UserAvatarCard',
+  filters: {
+    ellipsis(value) {
+      if (!value) return ''
+      const max = 20
+      if (value.length > max) {
+        return value.slice(0, max) + '...'
+      }
+      return value
+    }
+  },
+  props: {
+    userAvatar: {
+      type: Object,
+      default: null
+    },
+    // 时间前的描述
+    dateTit: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      followButton: {
+        icon: 'el-icon-plus',
+        text: '关注'
+      },
+    }
+  },
+  methods: {
+    followUser(userId) {
+      if (this.followButton.text === '关注') {
+        followUser(userId).then(res => {
+          if (res.code === 0) {
+            this.followButton.text = '已关注'
+            this.followButton.icon = 'el-icon-check'
+          }
+        })
+      } else {
+        unfollowUser(userId).then(res => {
+          if (res.code === 0) {
+            this.followButton.text = '关注'
+            this.followButton.icon = 'el-icon-plus'
+          }
+        })
+      }
+    },
+    sendMessage(userId) {
+      console.log('发送消息给 ' + userId)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.time {
+  font-size: 15px;
+  color: #999;
+}
+
+.bottom {
+  margin-top: 13px;
+  line-height: 12px;
+}
+
+.tit {
+  font-weight: 700;
+  font-size: 18px;
+
+  height: 50px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2; /*行数*/
+  -webkit-box-orient: vertical;
+}
+
+.num {
+  position: relative;
+  font-size: 15px;
+  padding-top: 9px;
+}
+
+/*处于手机屏幕时*/
+@media screen and (max-width: 768px) {
+  .tit {
+    font-weight: 600;
+    font-size: 12px;
+    height: 32px;
+  }
+  .time {
+    font-size: 10px;
+    color: #999;
+  }
+  .num {
+    font-size: 9px;
+    padding-top: 3px;
+  }
+  .bottom {
+    margin-top: 2px;
+    line-height: 7px;
+  }
+  .coverImg {
+    height: 120px !important;
+  }
+}
+
+.coverImg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+
+.clearfix:after {
+  clear: both;
+}
+
+.card {
+  margin-bottom: 20px;
+  transition: all 0.6s; /*所有属性变化在0.6秒内执行动画*/
+}
+
+/*.card:hover {
+  !*鼠标放上之后元素变成1.06倍大小*!
+  transform: scale(1.06);
+}*/
+.imgs {
+  position: relative;
+}
+.play-icon {
+  position: absolute;
+  /*top: -15px;*/
+  right: 2%;
+  bottom: 5px;
+  z-index: 7;
+  width: 40px;
+}
+</style>

src/components/upload/EditAudio.vue

@@ -0,0 +1,343 @@
+<template>
+  <el-row class="movie-list">
+    <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+      <el-col :md="20" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-card class="box-card">
+          <div class="text item">
+            <el-button style="float: left; padding: 3px 0" type="text" @click="onReturnAudio">返回音频列表</el-button>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+      <el-col :md="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>更新音频文件</span>
+            <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateVideoFile">更新</el-button>
+          </div>
+          <div class="text item">
+            <uploader
+              class="uploader-example"
+              :options="options"
+              :auto-start="true"
+              @file-added="onFileAdded"
+              @file-success="onFileSuccess"
+              @file-progress="onFileProgress"
+              @file-error="onFileError"
+            >
+              <uploader-unsupport />
+              <uploader-drop>
+                <p>拖动音频文件到此处或</p>
+                <uploader-btn :attrs="attrs">选择音频文件</uploader-btn>
+              </uploader-drop>
+              <uploader-list />
+            </uploader>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>更新音频封面</span>
+            <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateVideoCover">更新</el-button>
+          </div>
+          <div class="text item">
+            <el-upload
+              class="avatar-uploader"
+              action="//oss.reghao.cn/"
+              :headers="imgHeaders"
+              :data="imgData"
+              :show-file-list="false"
+              :before-upload="beforeAvatarUpload"
+              :on-success="handleAvatarSuccess"
+            >
+              <img v-if="imageUrl" :src="imageUrl" class="avatar">
+              <i v-else class="el-icon-plus avatar-uploader-icon" />
+            </el-upload>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+      <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>更新音频信息</span>
+            <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateVideoInfo">更新</el-button>
+          </div>
+          <div class="text item">
+            <el-form ref="form" :model="form" label-width="80px">
+              <el-form-item label="标题">
+                <el-input v-model="form.title" style="width: 70%; padding-right: 2px" placeholder="标题不能超过 50 个字符" />
+              </el-form-item>
+              <el-form-item label="描述">
+                <el-input v-model="form.description" type="textarea" style="width: 70%; padding-right: 2px" />
+              </el-form-item>
+              <el-form-item label="分区">
+                <el-select v-model="category" placeholder="请选择分区">
+                  <el-option label="新闻" value="shanghai" />
+                  <el-option label="教育" value="beijing" />
+                </el-select>
+                <el-select v-model="childCategory" placeholder="请选择子分区">
+                  <el-option label="历史" value="shanghai" />
+                  <el-option label="计算机" value="beijing" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="标签">
+                <el-input v-model="tagsStr" style="width: 70%; padding-right: 2px" placeholder="多个标签之间使用英文逗号分隔" />
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>更新音频可见范围</span>
+            <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateVideoScope">更新</el-button>
+          </div>
+          <div class="text item">
+            <el-form ref="form" :model="form" label-width="80px">
+              <el-form-item label="可见范围">
+                <el-select v-model="form.scope" placeholder="选择可见范围">
+                  <el-option label="所有人可见" value="1" />
+                  <el-option label="验证码可见" value="2" />
+                  <el-option label="VIP 可见" value="3" />
+                  <el-option label="仅自己可见" value="4" />
+                </el-select>
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </el-row>
+</template>
+
+<script>
+import { videoCategory, submitVideo, videoInfo, updateVideoInfo, updateVideoScope, updateVideoCover, updateVideoFile } from '@/api/video'
+
+export default {
+  name: 'EditAudio',
+  data() {
+    return {
+      /***********************************************************************/
+      options: {
+        target: '//oss.reghao.cn/',
+        chunkSize: 1024 * 1024 * 1024, // 1GiB
+        fileParameterName: 'file',
+        testChunks: false,
+        query: (file, chunk) => {
+          return {
+            channelId: 2
+          }
+        },
+        headers: {
+          Authorization: '1234567890'
+        }
+      },
+      attrs: {
+        accept: 'audio/*'
+      },
+      imgHeaders: {
+        Authorization: '1234567890'
+      },
+      imgData: {
+        channelId: 3
+      },
+      /***********************************************************************/
+      coverUrl: null,
+      coverFile: null,
+      imageList: [],
+      imageUrl: '',
+      // 提交给后端的数据
+      tagsStr: null,
+      form: {
+        videoFileId: null,
+        coverUrl: null,
+        title: null,
+        description: null,
+        categoryId: 0,
+        tags: [],
+        scope: null,
+        width: 0,
+        height: 0,
+        duration: 0
+      },
+      videoInfo: null
+    }
+  },
+  created() {
+    document.title = '编辑音频'
+
+    const videoId = this.$route.params.videoId
+    videoInfo(videoId).then(res => {
+      if (res.code === 0) {
+        const videoInfo = res.data
+        this.imageUrl = videoInfo.coverUrl
+        this.form.title = videoInfo.title
+        this.form.description = videoInfo.description
+        this.form.scope = videoInfo.scope
+      } else {
+
+      }
+    })
+  },
+  methods: {
+    /***********************************************************************/
+    onFileAdded(file) {
+      if (file.file.size > 1024*1024*1024*1) {
+        file.cancel()
+        this.$notify(
+          {
+            title: '提示',
+            message: '音频文件应小于 1GiB',
+            type: 'warning',
+            duration: 3000
+          }
+        )
+        return
+      }
+      this.setTitle(file.file.name)
+      this.processVideo(file.file)
+    },
+    onFileProgress(rootFile, file, chunk) {
+    },
+    onFileSuccess(rootFile, file, response, chunk) {
+      const res = JSON.parse(response)
+      if (res.code === 0) {
+        const resData = res.data
+        this.form.audioFileId = resData.uploadId
+
+        this.$notify(
+          {
+            title: '提示',
+            message: '音频已上传',
+            type: 'warning',
+            duration: 3000
+          }
+        )
+      }
+    },
+    onFileError(rootFile, file, response, chunk) {
+      this.$notify(
+        {
+          title: '提示',
+          message: '文件上传错误',
+          type: 'warning',
+          duration: 3000
+        }
+      )
+    },
+    /***********************************************************************/
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === 'image/jpeg'
+      const isLt2M = file.size / 1024 / 1024 < 2
+      if (!isJPG) {
+        this.$message.error('上传头像图片只能是 JPG 格式!')
+      }
+      if (!isLt2M) {
+        this.$message.error('上传头像图片大小不能超过 2MB!')
+      }
+      return isJPG && isLt2M
+    },
+    handleAvatarSuccess(res, file) {
+      this.imageList.push(file)
+      this.imageUrl = URL.createObjectURL(file.raw)
+      if (res.code === 0) {
+        const resData = res.data
+        const uploadId = resData.uploadId
+        const url = resData.url
+      } else {
+
+      }
+    },
+    setTitle(title) {
+      if (title.length > 50) {
+        this.form.title = title.substring(0, 50)
+        this.form.description = title
+      } else {
+        this.form.title = title
+      }
+    },
+    onReturnAudio() {
+      this.$router.push('/post/audio')
+    },
+    onUpdateVideoFile() {
+      console.log('更新音频文件')
+    },
+    onUpdateVideoCover() {
+      console.log('更新音频封面')
+    },
+    onUpdateVideoInfo() {
+      console.log('更新音频信息')
+    },
+    onUpdateVideoScope() {
+      console.log('更新音频作用域')
+    }
+  }
+}
+</script>
+
+<style>
+/*处于手机屏幕时*/
+@media screen and (max-width: 768px){
+  .movie-list {
+    padding-top: 8px;
+    padding-left: 0.5%;
+    padding-right: 0.5%;
+  }
+
+  .coverImg {
+    height: 120px !important;
+  }
+}
+
+.movie-list {
+  padding-top: 15px;
+  padding-left: 6%;
+  padding-right: 6%;
+}
+
+.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/upload/EditImage.vue

@@ -1,14 +1,16 @@
 <template>
-  <div>
-    <el-row class="movie-list">
-      <el-card class="box-card">
-        <div class="text item">
-          <el-button style="float: left; padding: 3px 0" type="text" @click="onReturnAlbum">返回相册列表</el-button>
-        </div>
-      </el-card>
+  <el-row class="movie-list">
+    <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+      <el-col :md="24" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-card class="box-card">
+          <div class="text item">
+            <el-button style="float: left; padding: 3px 0" type="text" @click="onReturnAlbum">返回相册列表</el-button>
+          </div>
+        </el-card>
+      </el-col>
     </el-row>
-    <el-row class="movie-list">
-      <el-col :md="8">
+    <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+      <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
             <span>添加图片</span>
@@ -39,7 +41,7 @@
           </div>
         </el-card>
       </el-col>
-      <el-col :md="8">
+      <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
             <span>修改相册名</span>
@@ -54,7 +56,7 @@
           </div>
         </el-card>
       </el-col>
-      <el-col :md="8">
+      <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
             <span>修改相册可见范围</span>
@@ -71,7 +73,7 @@
       </el-col>
     </el-row>
     <el-row>
-      <el-col :md="24" class="movie-list">
+      <el-col :md="24">
         <div>
           <el-col v-for="(image, index) in data.imageUrls"
                   :key="image.thumbnailUrl"
@@ -88,21 +90,27 @@
                 </el-image>
               </div>
               <div style="padding: 14px;">
-                <el-button
-                  size="mini"
-                  type="danger"
-                  class="el-icon-delete"
-                  @click="onDeleteImage"></el-button>
-<!--                <span>
-                  <i class="el-icon-delete" style="color: blue" @click="onDeleteImage(image.imageFileId)"/>
-                </span>-->
+                <el-tooltip class="item" effect="dark" content="删除图片" placement="top-end">
+                  <el-button
+                    size="mini"
+                    type="danger"
+                    class="el-icon-delete"
+                    @click="onDeleteImage"></el-button>
+                </el-tooltip>
+                <el-tooltip class="item" effect="dark" content="设为封面" placement="top-end">
+                  <el-button
+                    size="mini"
+                    type="warning"
+                    class="el-icon-picture-outline"
+                    @click="onSetCover"></el-button>
+                </el-tooltip>
               </div>
             </el-card>
           </el-col>
         </div>
       </el-col>
     </el-row>
-  </div>
+  </el-row>
 </template>
 
 <script>
@@ -254,6 +262,9 @@ export default {
     onDeleteImage(imageFileId) {
       console.log('删除图片 ' + imageFileId)
     },
+    onSetCover(imageFileId) {
+      console.log('设置封面 ' + imageFileId)
+    },
     onReturnAlbum() {
       this.$router.push('/post/image')
     },

src/components/upload/EditVideo.vue

@@ -1,14 +1,16 @@
 <template>
-  <div>
-    <el-row class="movie-list">
-      <el-card class="box-card">
-        <div class="text item">
-          <el-button style="float: left; padding: 3px 0" type="text" @click="onReturnVideo">返回视频列表</el-button>
-        </div>
-      </el-card>
+  <el-row class="movie-list">
+    <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+      <el-col :md="20" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-card class="box-card">
+          <div class="text item">
+            <el-button style="float: left; padding: 3px 0" type="text" @click="onReturnVideo">返回视频列表</el-button>
+          </div>
+        </el-card>
+      </el-col>
     </el-row>
-    <el-row class="movie-list">
-      <el-col :md="8">
+    <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+      <el-col :md="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
             <span>更新视频文件</span>
@@ -34,7 +36,7 @@
           </div>
         </el-card>
       </el-col>
-      <el-col :md="8">
+      <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
             <span>更新视频封面</span>
@@ -57,8 +59,8 @@
         </el-card>
       </el-col>
     </el-row>
-    <el-row class="movie-list">
-      <el-col :md="8">
+    <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+      <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
             <span>更新视频信息</span>
@@ -89,7 +91,7 @@
           </div>
         </el-card>
       </el-col>
-      <el-col :md="8">
+      <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
             <span>更新视频可见范围</span>
@@ -110,7 +112,7 @@
         </el-card>
       </el-col>
     </el-row>
-  </div>
+  </el-row>
 </template>
 
 <script>

src/components/upload/PublishAudio.vue

@@ -26,7 +26,7 @@
           <h2>上传封面</h2>
           <el-upload
             class="avatar-uploader"
-            action="//api.reghao.cn/api/file/upload/image"
+            action="//api.reghao.cn/"
             :show-file-list="false"
             :before-upload="beforeAvatarUpload"
             :on-success="handleAvatarSuccess"
@@ -41,10 +41,10 @@
         </el-row>
         <el-form ref="form" :model="form" label-width="80px">
           <el-form-item label="标题">
-            <el-input v-model="form.name" />
+            <el-input v-model="form.title" />
           </el-form-item>
           <el-form-item label="描述">
-            <el-input v-model="form.desc" type="textarea" />
+            <el-input v-model="form.description" type="textarea" />
           </el-form-item>
           <el-form-item label="发布时间">
             <el-col :span="11">
@@ -65,39 +65,36 @@
 </template>
 
 <script>
+import {submitAudio} from "@/api/audio";
 
 export default {
   name: 'PublishAudio',
   data() {
     return {
-      activeName: 'first',
       options: {
-        target: '//oss.reghao.cn',
-        chunkSize: 1024 * 1024 * 1024 * 5, // 5GiB
+        target: '//oss.reghao.cn/',
+        chunkSize: 1024 * 1024 * 1024, // 1GiB
         fileParameterName: 'file',
         testChunks: false,
         query: (file, chunk) => {
-          this.videoPost.urlObjectName = 'video/playback/' + this.videoUrlId
-          return { key: this.videoPost.urlObjectName }
+          return {
+            channelId: 6
+          }
         },
         headers: {
+          Authorization: '1234567890'
         }
       },
       attrs: {
-        accept: 'video/*'
+        accept: 'audio/*'
       },
       coverFile: null,
-      imageList: [],
       imageUrl: '',
       form: {
-        name: '',
-        region: '',
-        date1: '',
-        date2: '',
-        delivery: false,
-        type: [],
-        resource: '',
-        desc: ''
+        audioFileId: null,
+        audioUrl: null,
+        title: null,
+        description: null
       }
     }
   },
@@ -116,7 +113,6 @@ export default {
       return isJPG && isLt2M
     },
     handleAvatarSuccess(res, file) {
-      this.imageList.push(file)
       this.imageUrl = URL.createObjectURL(file.raw)
     },
     onFileAdded(file) {
@@ -157,8 +153,15 @@ export default {
     onFileSuccess(rootFile, file, response, chunk) {
       const res = JSON.parse(response)
       if (res.code === 0) {
-        this.message = '视频已上传'
-        this.showMessage = true
+        const resData = res.data
+        this.form.audioFileId = resData.uploadId
+        this.form.audioUrl = resData.url
+        this.$notify({
+          title: '提示',
+          message: '音频已上传',
+          type: 'warning',
+          duration: 3000
+        })
       }
     },
     onFileError(rootFile, file, response, chunk) {
@@ -181,6 +184,32 @@ export default {
         this.showMessage = true
         return
       }*/
+
+      submitAudio(this.form).then(res => {
+        if (res.code === 0) {
+          this.$notify({
+            title: '提示',
+            message: '投稿成功',
+            type: 'warning',
+            duration: 3000
+          })
+          this.$router.push('/post/audio')
+        } else {
+          this.$notify({
+            title: '提示',
+            message: res.msg,
+            type: 'warning',
+            duration: 3000
+          })
+        }
+      }).catch(error => {
+        this.$notify({
+          title: '提示',
+          message: error.message,
+          type: 'warning',
+          duration: 3000
+        })
+      })
     }
   }
 }

src/components/upload/PublishVideo.vue

@@ -87,7 +87,7 @@ export default {
       /***********************************************************************/
       options: {
         target: '//oss.reghao.cn/',
-        chunkSize: 1024 * 1024 * 1024 * 5, // 5GiB
+        chunkSize: 1024 * 1024 * 1024 * 10, // 10GiB
         fileParameterName: 'file',
         testChunks: false,
         query: (file, chunk) => {
@@ -165,15 +165,12 @@ export default {
       if (res.code === 0) {
         const resData = res.data
         this.form.videoFileId = resData.uploadId
-
-        this.$notify(
-          {
-            title: '提示',
-            message: '视频已上传',
-            type: 'warning',
-            duration: 3000
-          }
-        )
+        this.$notify({
+          title: '提示',
+          message: '视频已上传',
+          type: 'warning',
+          duration: 3000
+        })
       }
     },
     onFileError(rootFile, file, response, chunk) {
@@ -272,8 +269,7 @@ export default {
             method: 'POST',
             credentials: 'include',
             body: formData
-          }).then(response => response.json())
-            .then(json => {
+          }).then(response => response.json()).then(json => {
               if (json.code === 0) {
                 const resData = json.data
                 this.form.coverUrl = resData.url
@@ -426,7 +422,7 @@ export default {
             type: 'warning',
             duration: 3000
           })
-          this.$router.push('/post/list')
+          this.$router.push('/post/video')
         } else {
           this.$notify({
               title: '提示',

src/router/index.js

@@ -8,6 +8,7 @@ const StatusPage = () => import('views/home/Status')
 const VideoIndex = () => import('views/home/Video')
 const VideoPage = () => import('views/home/VideoPage')
 const AudioIndex = () => import('views/home/Audio')
+const AudioPage = () => import('views/home/AudioPage')
 const ImageIndex = () => import('views/home/Image')
 const ImagePage = () => import('views/home/ImagePage')
 const ArticleIndex = () => import('views/home/Article')
@@ -17,16 +18,16 @@ const UserVideo = () => import('views/user/Home')
 const UserImage = () => import('views/user/Home')
 const UserAudio = () => import('views/user/Home')
 const UserArticle = () => import('views/user/Home')
-const UserFollowing = () => import('views/user/Home')
-const UserFollower = () => import('views/user/Home')
+const UserRelation = () => import('views/user/UserRelation')
 const CollectionIndex = () => import('views/user/Collection')
 const HistoryIndex = () => import('views/user/History')
 const PostPublish = () => import('views/post/PostPublish')
 const PostPublishVideo = () => import('views/post/PostPublish')
 const PostEditVideo = () => import('components/upload/EditVideo')
-const PostEditAlbum = () => import('components/upload/EditImage')
 const PostPublishAudio = () => import('views/post/PostPublish')
-const PostPublishImage = () => import('views/post/PostPublish')
+const PostEditAudio = () => import('components/upload/EditAudio')
+const PostPublishAlbum = () => import('views/post/PostPublish')
+const PostEditAlbum = () => import('components/upload/EditImage')
 const PostPublishArticle = () => import('views/post/PostPublish')
 const PostList = () => import('views/post/PostList')
 const UserPostVideo = () => import('views/post/PostList')
@@ -110,6 +111,11 @@ const routes = [
     name: 'AudioIndex',
     component: AudioIndex
   },
+  {
+    path: '/audio/:audioId',
+    name: 'AudioPage',
+    component: AudioPage
+  },
   {
     path: '/image',
     name: 'ImageIndex',
@@ -167,13 +173,13 @@ const routes = [
   },
   {
     path: '/user/:id/following',
-    name: 'UserFollowing',
-    component: UserFollowing
+    name: 'UserRelation',
+    component: UserRelation
   },
   {
     path: '/user/:id/follower',
-    name: 'UserFollower',
-    component: UserFollower
+    name: 'UserRelation',
+    component: UserRelation
   },
   {
     path: '/u/collection',
@@ -200,20 +206,25 @@ const routes = [
     name: 'PostEditVideo',
     component: PostEditVideo
   },
-  {
-    path: '/post/edit/album/:albumId',
-    name: 'PostEditAlbum',
-    component: PostEditAlbum
-  },
   {
     path: '/post/publish/audio',
     name: 'PostPublishAudio',
     component: PostPublishAudio
   },
+  {
+    path: '/post/edit/audio/:audioId',
+    name: 'PostEditAudio',
+    component: PostEditAudio
+  },
   {
     path: '/post/publish/image',
-    name: 'PostPublishImage',
-    component: PostPublishImage
+    name: 'PostPublishAlbum',
+    component: PostPublishAlbum
+  },
+  {
+    path: '/post/edit/album/:albumId',
+    name: 'PostEditAlbum',
+    component: PostEditAlbum
   },
   {
     path: '/post/publish/article',

src/views/home/AudioPage.vue

@@ -0,0 +1,154 @@
+<template>
+  <el-row class="movie-list">
+    <el-col :md="12">
+      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <el-row>
+              <span v-html="audio.title" />
+            </el-row>
+          </div>
+          <div class="text item">
+            <el-row>
+              <audio-player
+                ref="audioPlayer"
+                :show-prev-button="false"
+                :show-next-button="false"
+                :show-playback-rate="false"
+                :audio-list="audioList.map(elm => elm.url)"
+                :before-play="handleBeforePlay"
+                theme-color="#87CEFA"
+              />
+            </el-row>
+            <el-divider v-if="audio.description !== undefined && audio.description !== null"/>
+            <el-row>
+              <span v-html="audio.description" />
+            </el-row>
+            <el-divider/>
+            <el-row>
+              发布于 <span v-html="audio.pubDate" />
+            </el-row>
+            <el-divider/>
+            <el-row>
+              <span>
+                <span>
+                  <i :class=collectedIcon @click="collectItem"/>
+                </span>
+              </span>
+            </el-row>
+          </div>
+        </el-card>
+      </el-row>
+    </el-col>
+    <el-col :md="6">
+      <user-avatar-card :userAvatar="user" />
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import UserAvatarCard from '@/components/card/UserAvatarCard'
+import { getAudio } from "@/api/audio";
+import {getUserInfo} from "@/api/user";
+
+export default {
+  name: 'AudioPage',
+  components: { UserAvatarCard },
+  filters: {
+    ellipsis(value) {
+      if (!value) return ''
+      const max = 20
+      if (value.length > max) {
+        return value.slice(0, max) + '...'
+      }
+      return value
+    }
+  },
+  data() {
+    return {
+      currentAudioName: '',
+      audio: null,
+      audioList: [],
+      user: null,
+      collected: false,
+      collectedIcon: 'el-icon-star-off'
+    }
+  },
+  created() {
+    const audioId = this.$route.params.audioId
+    getAudio(audioId).then(res => {
+      if (res.code === 0) {
+        this.audio = res.data
+        this.audioList = [
+          { name: this.audio.title, url: this.audio.audioUrl }
+        ]
+
+        document.title = '音频 - ' + this.audio.title
+      } else {
+      }
+
+      getUserInfo(10001).then(res => {
+        if (res.code === 0) {
+          this.user = res.data
+        }
+      })
+    })
+  },
+  methods: {
+    // 播放前做的事
+    handleBeforePlay(next) {
+      // 这里可以做一些事情...
+      this.currentAudioName = this.audioList[this.$refs.audioPlayer.currentPlayIndex].name
+      // 开始播放
+      next()
+    },
+    handlePlaySpecify() {
+      this.$refs.audioPlayer.currentPlayIndex = 1
+      this.$nextTick(() => {
+        this.$refs.audioPlayer.play()
+        this.title = this.audioList[
+          this.$refs.audioPlayer.currentPlayIndex
+          ].name
+      })
+    },
+    collectItem() {
+      if (this.collected) {
+        console.log('取消收藏音频')
+        this.collected = false
+        this.collectedIcon = 'el-icon-star-off'
+      } else {
+        console.log('收藏音频')
+        this.collected = true
+        this.collectedIcon = 'el-icon-star-on'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.movie-list {
+  padding-top: 15px;
+  padding-left: 6%;
+  padding-right: 6%;
+}
+
+/*处于手机屏幕时*/
+@media screen and (max-width: 768px) {
+  .movie-list {
+    padding-top: 8px;
+    padding-left: 0.5%;
+    padding-right: 0.5%;
+  }
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+
+.clearfix:after {
+  clear: both;
+}
+</style>

src/views/home/Discover.vue

@@ -5,44 +5,20 @@
       <!--电影列表-->
       <el-col :md="24">
         <el-col v-for="(user, index) in userList" :key="index" :md="6" :sm="12" :xs="12">
-          <user-card :user="user"></user-card>
-        </el-col>
-        <!--
-          分页按钮：
-          page-size：每页显示条数
-          total：总条数
-          hide-on-single-page： 页数为一时隐藏
-        -->
-        <el-col :span="24" class="pagination">
-          <el-pagination
-              background
-              :small="screenWidth <= 768"
-              hide-on-single-page
-              layout="prev, pager, next"
-              :current-page="$store.state.activePage"
-              :page-size="6"
-              :total="$store.state.pageBean.totalCount"
-              @current-change="handleCurrentChange"
-          />
+          <user-avatar-card :userAvatar="user"></user-avatar-card>
         </el-col>
       </el-col>
     </el-row>
-<!--    <el-row v-if="showEmpty" class="not-result">
-      <el-col :span="12" :offset="6">
-        <img src="@/assets/img/icon/not-result.png">
-        <div>没有发现用户呢</div>
-      </el-col>
-    </el-row>-->
   </div>
 </template>
 
 <script>
-import UserCard from '@/components/card/UserCard'
+import UserAvatarCard from '@/components/card/UserAvatarCard'
 import { getUsers } from "@/api/user";
 
 export default {
   name: 'Discover',
-  components: { UserCard },
+  components: { UserAvatarCard },
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小

src/views/home/ImagePage.vue

@@ -59,8 +59,7 @@
               </div>
               <div style="padding: 14px;">
                 <span>
-                  <i v-if="collected" class="el-icon-star-on"/>
-                  <i v-else class="el-icon-star-off" @click="collectImage"/>
+                  <i :class=collectedIcon @click="collectItem"/>
                 </span>
               </div>
             </el-card>
@@ -93,7 +92,8 @@ export default {
         icon: 'el-icon-plus',
         text: '关注'
       },
-      collected: false
+      collected: false,
+      collectedIcon: 'el-icon-star-off'
     }
   },
   created() {
@@ -159,9 +159,16 @@ export default {
     sendMessage(userId) {
       console.log('发送消息')
     },
-    collectImage() {
-      console.log('收藏图片')
-      this.collected = true
+    collectItem() {
+      if (this.collected) {
+        console.log('取消收藏图片')
+        this.collected = false
+        this.collectedIcon = 'el-icon-star-off'
+      } else {
+        console.log('收藏图片')
+        this.collected = true
+        this.collectedIcon = 'el-icon-star-on'
+      }
     }
   }
 }

src/views/post/PostList.vue

@@ -1,196 +1,249 @@
 <template>
-  <div>
-    <el-row>
-      <el-col :md="4">
-        <el-menu
-          :default-active="this.$route.path"
-          router
-          class="el-menu-vertical-demo"
-        >
-          <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.path">
-            <i :class="item.icon" />
-            <span slot="title">{{ item.name }}</span>
-          </el-menu-item>
-        </el-menu>
-      </el-col>
-      <el-col :md="20">
-        <el-tabs v-model="activeName" @tab-click='tabClick'>
-          <el-tab-pane label="视频" name="video">
-            <el-row :md="6" :sm="12" :xs="12">
-              <el-table
-                :data="dataList"
-                style="width: 100%"
-              >
-                <el-table-column
-                  type="index">
-                </el-table-column>
-                <el-table-column
-                  prop="coverUrl"
-                  label="视频封面"
-                  width="150">
-                  <template   slot-scope="scope">
-                    <el-image :src="scope.row.coverUrl" min-width="40" height="30" />
-                  </template>
-                </el-table-column>
-                <el-table-column
-                  prop="pubDate"
-                  label="发布时间">
-                </el-table-column>
-                <el-table-column
-                  prop="horizontal"
-                  label="横屏">
-                  <template slot-scope="scope">
-                    <el-tag v-if="scope.row.horizontal" :type="'success'" disable-transitions>
-                      横屏
-                    </el-tag>
-                    <el-tag v-else :type="'warning'" disable-transitions>
-                      竖屏
-                    </el-tag>
-                  </template>
-                </el-table-column>
-                <el-table-column
-                  prop="title"
-                  label="标题"
-                  width="180">
-                </el-table-column>
-                <el-table-column
-                  prop="description"
-                  label="描述">
-                </el-table-column>
-                <el-table-column
-                  prop="scope"
-                  label="审核状态">
-                  <template slot-scope="scope">
-                    <el-tag v-if="scope.row.viewCount === 1" :type="'success'" disable-transitions>
-                      {{scope.row.viewCount}}
-                    </el-tag>
-                    <el-tag v-else-if="scope.row.viewCount === 2" :type="'warning'" disable-transitions>
-                      {{scope.row.viewCount}}
-                    </el-tag>
-                    <el-tag v-else :type="'danger'" disable-transitions>
-                      {{scope.row.viewCount}}
-                    </el-tag>
-                  </template>
-                </el-table-column>
-                <el-table-column
-                  prop="scope"
-                  label="可见范围">
-                  <template slot-scope="scope">
-                    <el-tag v-if="scope.row.viewCount === 1" disable-transitions>
-                      全部可见
-                    </el-tag>
-                    <el-tag v-else-if="scope.row.viewCount === 2" :type="'success'" disable-transitions>
-                      VIP 可见
-                    </el-tag>
-                    <el-tag v-else-if="scope.row.viewCount === 3" :type="'warning'" disable-transitions>
-                      验证码可见
-                    </el-tag>
-                    <el-tag v-else :type="'danger'" disable-transitions>
-                      本人可见
-                    </el-tag>
-                  </template>
-                </el-table-column>
-                <el-table-column label="操作">
-                  <template slot-scope="scope">
-                    <el-button
-                      size="mini"
-                      @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
-                    <el-button
-                      size="mini"
-                      type="danger"
-                      @click="handleDelete(scope.$index, scope.row)">删除</el-button>
-                  </template>
-                </el-table-column>
-              </el-table>
-            </el-row>
-          </el-tab-pane>
-          <el-tab-pane label="图片" name="image">
-            <el-row :md="6" :sm="12" :xs="12">
-              <el-table
-                :data="dataList"
-                style="width: 100%"
-              >
-                <el-table-column
-                  type="index">
-                </el-table-column>
-                <el-table-column
-                  prop="coverUrl"
-                  label="相册封面"
-                  width="150">
-                  <template   slot-scope="scope">
-                    <el-image :src="scope.row.coverUrl" min-width="40" height="30" />
-                  </template>
-                </el-table-column>
-                <el-table-column
-                  prop="pubDate"
-                  label="发布时间">
-                </el-table-column>
-                <el-table-column
-                  prop="albumName"
-                  label="相册名字"
-                  width="180">
-                </el-table-column>
-                <el-table-column
-                  prop="total"
-                  label="图片数量">
-                </el-table-column>
-                <el-table-column
-                  prop="scope"
-                  label="可见范围">
-                  <template slot-scope="scope">
-                    <el-tag v-if="scope.row.viewCount === 1" disable-transitions>
-                      全部可见
-                    </el-tag>
-                    <el-tag v-else-if="scope.row.viewCount === 2" :type="'success'" disable-transitions>
-                      VIP 可见
-                    </el-tag>
-                    <el-tag v-else-if="scope.row.viewCount === 3" :type="'warning'" disable-transitions>
-                      验证码可见
-                    </el-tag>
-                    <el-tag v-else :type="'danger'" disable-transitions>
-                      本人可见
-                    </el-tag>
-                  </template>
-                </el-table-column>
-                <el-table-column label="操作">
-                  <template slot-scope="scope">
-                    <el-button
-                      size="mini"
-                      @click="handleEditImage(scope.$index, scope.row)">编辑</el-button>
-                    <el-button
-                      size="mini"
-                      type="danger"
-                      @click="handleDeleteImage(scope.$index, scope.row)">删除</el-button>
-                  </template>
-                </el-table-column>
-              </el-table>
-            </el-row>
-          </el-tab-pane>
-          <el-tab-pane label="音频" name="audio">
-            <span>
-              <h4>音频稿件</h4>
-            </span>
-          </el-tab-pane>
-          <el-tab-pane label="文章" name="article">
+  <el-row>
+    <el-col :md="2">
+      <el-menu
+        :default-active="this.$route.path"
+        router
+        class="el-menu-vertical-demo"
+      >
+        <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.path">
+          <i :class="item.icon" />
+          <span slot="title">{{ item.name }}</span>
+        </el-menu-item>
+      </el-menu>
+    </el-col>
+    <el-col :md="22">
+      <el-tabs v-model="activeName" @tab-click='tabClick'>
+        <el-tab-pane label="视频" name="video">
+          <el-row :md="6" :sm="12" :xs="12">
+            <el-table
+              :data="dataList"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index">
+              </el-table-column>
+              <el-table-column
+                prop="coverUrl"
+                label="视频封面"
+                width="150">
+                <template   slot-scope="scope">
+                  <el-image :src="scope.row.coverUrl" min-width="40" height="30" />
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="pubDate"
+                label="发布时间">
+              </el-table-column>
+              <el-table-column
+                prop="horizontal"
+                label="横屏">
+                <template slot-scope="scope">
+                  <el-tag v-if="scope.row.horizontal" :type="'success'" disable-transitions>
+                    横屏
+                  </el-tag>
+                  <el-tag v-else :type="'warning'" disable-transitions>
+                    竖屏
+                  </el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="title"
+                label="标题"
+                width="180">
+              </el-table-column>
+              <el-table-column
+                prop="description"
+                label="描述">
+              </el-table-column>
+              <el-table-column
+                prop="scope"
+                label="审核状态">
+                <template slot-scope="scope">
+                  <el-tag v-if="scope.row.viewCount === 1" :type="'success'" disable-transitions>
+                    {{scope.row.viewCount}}
+                  </el-tag>
+                  <el-tag v-else-if="scope.row.viewCount === 2" :type="'warning'" disable-transitions>
+                    {{scope.row.viewCount}}
+                  </el-tag>
+                  <el-tag v-else :type="'danger'" disable-transitions>
+                    {{scope.row.viewCount}}
+                  </el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="scope"
+                label="可见范围">
+                <template slot-scope="scope">
+                  <el-tag v-if="scope.row.viewCount === 1" disable-transitions>
+                    全部可见
+                  </el-tag>
+                  <el-tag v-else-if="scope.row.viewCount === 2" :type="'success'" disable-transitions>
+                    VIP 可见
+                  </el-tag>
+                  <el-tag v-else-if="scope.row.viewCount === 3" :type="'warning'" disable-transitions>
+                    验证码可见
+                  </el-tag>
+                  <el-tag v-else :type="'danger'" disable-transitions>
+                    本人可见
+                  </el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作">
+                <template slot-scope="scope">
+                  <el-button
+                    size="mini"
+                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+                  <el-button
+                    size="mini"
+                    type="danger"
+                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-row>
+        </el-tab-pane>
+        <el-tab-pane label="相册" name="image">
+          <el-row :md="6" :sm="12" :xs="12">
+            <el-table
+              :data="dataList"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index">
+              </el-table-column>
+              <el-table-column
+                prop="coverUrl"
+                label="相册封面"
+                width="150">
+                <template   slot-scope="scope">
+                  <el-image :src="scope.row.coverUrl" min-width="40" height="30" />
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="pubDate"
+                label="发布时间">
+              </el-table-column>
+              <el-table-column
+                prop="albumName"
+                label="相册名字"
+                width="180">
+              </el-table-column>
+              <el-table-column
+                prop="total"
+                label="图片数量">
+              </el-table-column>
+              <el-table-column
+                prop="scope"
+                label="可见范围">
+                <template slot-scope="scope">
+                  <el-tag v-if="scope.row.viewCount === 1" disable-transitions>
+                    全部可见
+                  </el-tag>
+                  <el-tag v-else-if="scope.row.viewCount === 2" :type="'success'" disable-transitions>
+                    VIP 可见
+                  </el-tag>
+                  <el-tag v-else-if="scope.row.viewCount === 3" :type="'warning'" disable-transitions>
+                    验证码可见
+                  </el-tag>
+                  <el-tag v-else :type="'danger'" disable-transitions>
+                    本人可见
+                  </el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作">
+                <template slot-scope="scope">
+                  <el-button
+                    size="mini"
+                    @click="handleEditImage(scope.$index, scope.row)">编辑</el-button>
+                  <el-button
+                    size="mini"
+                    type="danger"
+                    @click="handleDeleteImage(scope.$index, scope.row)">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-row>
+        </el-tab-pane>
+        <el-tab-pane label="音频" name="audio">
+          <el-row :md="6" :sm="12" :xs="12">
+            <el-table
+              :data="dataList"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index">
+              </el-table-column>
+              <el-table-column
+                prop="coverUrl"
+                label="音频封面"
+                width="150">
+                <template   slot-scope="scope">
+                  <el-image :src="scope.row.coverUrl" min-width="40" height="30" />
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="pubDate"
+                label="发布时间">
+              </el-table-column>
+              <el-table-column
+                prop="title"
+                label="音频名字">
+              </el-table-column>
+              <!--                <el-table-column
+                                prop="description"
+                                label="音频简介">
+                              </el-table-column>-->
+              <el-table-column
+                prop="scope"
+                label="可见范围">
+                <template slot-scope="scope">
+                  <el-tag v-if="scope.row.viewCount === 1" disable-transitions>
+                    全部可见
+                  </el-tag>
+                  <el-tag v-else-if="scope.row.viewCount === 2" :type="'success'" disable-transitions>
+                    VIP 可见
+                  </el-tag>
+                  <el-tag v-else-if="scope.row.viewCount === 3" :type="'warning'" disable-transitions>
+                    验证码可见
+                  </el-tag>
+                  <el-tag v-else :type="'danger'" disable-transitions>
+                    本人可见
+                  </el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作">
+                <template slot-scope="scope">
+                  <el-button
+                    size="mini"
+                    @click="handleEditAudio(scope.$index, scope.row)">编辑</el-button>
+                  <el-button
+                    size="mini"
+                    type="danger"
+                    @click="handleDeleteAudio(scope.$index, scope.row)">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-row>
+        </el-tab-pane>
+        <el-tab-pane label="文章" name="article">
             <span>
               <h4>文章稿件</h4>
             </span>
-          </el-tab-pane>
-        </el-tabs>
-      </el-col>
-    </el-row>
-  </div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
-import ImageAlbumCard from '@/components/card/ImageAlbumCard'
-
 import {getUserAlbums} from "@/api/image";
 import { userVideoList } from "@/api/video";
+import { getUserAudio } from "@/api/audio";
 
 export default {
   name: 'PostList',
-  components: { ImageAlbumCard },
+  components: {},
   data() {
     return {
       navList: [
@@ -245,17 +298,17 @@ export default {
     handleDeleteImage(index, row) {
       console.log(row.videoId);
     },
+    handleEditAudio(index, row) {
+      console.log(row.videoId);
+      const path = '/post/edit/audio/' + row.audioId
+      this.$router.push(path)
+    },
+    handleDeleteAudio(index, row) {
+      console.log(row.videoId);
+    },
     tabClick(tab) {
       this.activeName = tab.name
-      if (this.activeName === 'video') {
-        this.goToTab(this.activeName)
-      } else if (this.activeName === 'image') {
-        this.goToTab(this.activeName)
-      } else if (this.activeName === 'audio') {
-        this.goToTab(this.activeName)
-      } else if (this.activeName === 'article') {
-        this.goToTab(this.activeName)
-      }
+      this.goToTab(this.activeName)
     },
     goToTab(activeName) {
       const path = '/post/' + activeName
@@ -297,6 +350,19 @@ export default {
       } else if (this.activeName === 'audio') {
         this.currentPage = 1
         this.lastId = 0
+        getUserAudio(this.userId).then(res => {
+          if (res.code === 0) {
+            const resData = res.data.list
+            if (resData.length !== 0) {
+              this.showEmpty = false
+              for (const item of resData) {
+                this.dataList.push(item)
+              }
+            } else {
+              this.showEmpty = true
+            }
+          }
+        })
       } else if (this.activeName === 'article') {
         this.currentPage = 1
         this.lastId = 0

src/views/post/PostPublish.vue

@@ -18,12 +18,12 @@
           <el-tab-pane label="视频" name="video">
             <publish-video v-if="activeName === 'video'" />
           </el-tab-pane>
+          <el-tab-pane label="相册" name="image">
+            <publish-image v-if="activeName === 'image'" />
+          </el-tab-pane>
           <el-tab-pane label="音频" name="audio">
             <publish-audio v-if="activeName === 'audio'" />
           </el-tab-pane>
-          <el-tab-pane label="图片" name="image">
-            <publish-image v-if="activeName === 'image'" />
-          </el-tab-pane>
           <el-tab-pane label="文章" name="article">
             <publish-article v-if="activeName === 'article'" />
           </el-tab-pane>
@@ -88,15 +88,7 @@ export default {
   methods: {
     tabClick(tab) {
       this.activeName = tab.name
-      if (this.activeName === 'video') {
-        this.goToTab(this.activeName)
-      } else if (this.activeName === 'image') {
-        this.goToTab(this.activeName)
-      } else if (this.activeName === 'audio') {
-        this.goToTab(this.activeName)
-      } else if (this.activeName === 'article') {
-        this.goToTab(this.activeName)
-      }
+      this.goToTab(this.activeName)
     },
     goToTab(activeName) {
       const path = '/post/publish/' + activeName

src/views/user/Home.vue

@@ -33,12 +33,16 @@
             </el-row>
             <el-row>
               <span v-if="user.signature !== null">{{user.signature}}</span>
-              <span v-if="user.signature === undefined || user.signature === null">此用户没有签名</span>
+              <span v-if="user.signature === undefined || user.signature === null">没有签名</span>
             </el-row>
             <el-row>
-              <span class="el-icon-user">关注数: {{ user.followingCount }}</span>
+              <router-link target="_blank" :to="`/user/${user.userId}/following`">
+                <span class="el-icon-user">关注数: {{ user.following }}</span>
+              </router-link>
               <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'" />
-              <span class="el-icon-user">粉丝数: {{ user.followerCount }}</span>
+              <router-link target="_blank" :to="`/user/${user.userId}/follower`">
+                <span class="el-icon-user">粉丝数: {{ user.follower }}</span>
+              </router-link>
             </el-row>
           </div>
         </el-card>
@@ -72,52 +76,31 @@
               音频<el-badge :value="userContentData.audioCount" :max="9999" class="item" type="warning"/>
             </span>
             <div v-if="activeName === 'audio'">
-              <el-col v-for="(video, index) in videoList" :key="index" :md="6" :sm="12" :xs="12">
-                <video-card :video="video" />
+              <el-col v-for="(audio, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
+                <audio-card :audio="audio"></audio-card>
               </el-col>
             </div>
           </el-tab-pane>
-          <!--
           <el-tab-pane name="article">
             <span slot="label">
               文章<el-badge :value="userContentData.articleCount" :max="9999" class="item" type="warning"/>
             </span>
             <div v-if="activeName === 'article'">
-              <el-col v-for="(video, index) in videoList" :key="index" :md="6" :sm="12" :xs="12">
-                <video-card :video="video" />
+              <el-col v-for="(article, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
+                <span>发布的文章</span>
               </el-col>
             </div>
           </el-tab-pane>
-          <el-tab-pane name="status">
+<!--          <el-tab-pane name="status">
             <span slot="label">
               状态<el-badge :value="userContentData.statusCount" :max="9999" class="item" type="warning"/>
             </span>
             <div v-if="activeName === 'status'">
-              <el-row v-for="(status, index) in statusList" :key="index" :md="16" :sm="12" :xs="12">
-                <status-card :status="status" />
-              </el-row>
-            </div>
-          </el-tab-pane>-->
-          <el-tab-pane name="following">
-            <span slot="label">
-              Ta 的关注<el-badge :value="userContentData.userFollowCount.followingCount" :max="9999" class="item" type="warning"/>
-            </span>
-            <div v-if="activeName === 'following'">
-              <el-col v-for="(user, index) in followingList" :key="index" :md="6" :sm="12" :xs="12">
-                <user-card :user="user"></user-card>
+              <el-col v-for="(status, index) in dataList" :key="index" :md="16" :sm="12" :xs="12">
+                <span>发布的状态</span>
               </el-col>
             </div>
-          </el-tab-pane>
-          <el-tab-pane name="follower">
-            <span slot="label">
-              Ta 的粉丝<el-badge :value="userContentData.userFollowCount.followerCount" :max="9999" class="item" type="warning"/>
-            </span>
-            <div v-if="activeName === 'follower'">
-              <el-col v-for="(user, index) in followerList" :key="index" :md="6" :sm="12" :xs="12">
-                <user-card :user="user"></user-card>
-              </el-col>
-            </div>
-          </el-tab-pane>
+          </el-tab-pane>-->
         </el-tabs>
       </el-col>
       <el-col :span="24" class="pagination">
@@ -150,15 +133,17 @@ import UserCard from '@/components/card/UserCard'
 import StatusCard from '@/components/card/StatusCard'
 import VideoCard from '@/components/card/VideoCard'
 import ImageAlbumCard from '@/components/card/ImageAlbumCard'
+import AudioCard from '@/components/card/AudioCard'
 
 import { getUserInfo, getUserFollowing, getUserFollower, checkRelation, followUser, unfollowUser } from "@/api/user";
 import { userVideoList, getUserContentData } from "@/api/video";
 import { getUserAlbums } from "@/api/image";
+import { getUserAudio } from "@/api/audio";
 import { userStatus } from "@/api/status";
 
 export default {
   name: 'Home',
-  components: { UserCard, StatusCard, VideoCard, ImageAlbumCard },
+  components: { UserCard, StatusCard, VideoCard, ImageAlbumCard, AudioCard },
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小
@@ -200,19 +185,15 @@ export default {
         } else if (path.endsWith("article")) {
           this.activeName = 'article'
           document.title = this.user.screenName + '的文章'
-        } else if (path.endsWith("following")) {
-          this.activeName = 'following'
-          document.title = this.user.screenName + '的关注'
-        } else if (path.endsWith("follower")) {
-          this.activeName = 'follower'
-          document.title = this.user.screenName + '的粉丝'
+        } else if (path.endsWith("status")) {
+          this.activeName = 'status'
+          document.title = this.user.screenName + '的状态'
         } else {
           document.title = this.user.screenName + '的个人主页'
         }
         this.getData()
       }
     })
-
     checkRelation(this.userId).then(res => {
       if (res.code === 0) {
         if (res.data) {
@@ -221,7 +202,6 @@ export default {
         }
       }
     })
-
     getUserContentData(this.userId).then(res => {
       if (res.code === 0) {
         this.userContentData = res.data
@@ -273,26 +253,7 @@ export default {
     },
     tabClick(tab) {
       this.activeName = tab.name
-      if (this.activeName === 'status') {
-        const path = '/user/' + this.userId
-        if (this.$route.path === path) {
-          this.$router.go(0)
-          return
-        }
-        this.$router.push(path)
-      } else if (this.activeName === 'video') {
-        this.goToTab(this.activeName)
-      } else if (this.activeName === 'image') {
-        this.goToTab(this.activeName)
-      } else if (this.activeName === 'audio') {
-        this.goToTab(this.activeName)
-      } else if (this.activeName === 'article') {
-        this.goToTab(this.activeName)
-      } else if (this.activeName === 'following') {
-        this.goToTab(this.activeName)
-      } else if (this.activeName === 'follower') {
-        this.goToTab(this.activeName)
-      }
+      this.goToTab(this.activeName)
     },
     goToTab(activeName) {
       const path = '/user/' + this.userId + '/' + activeName
@@ -303,11 +264,7 @@ export default {
       this.$router.push(path)
     },
     getData() {
-      if (this.activeName === 'status') {
-        this.currentPage = 1
-        this.lastId = 0
-        this.userStatusListWrapper(this.currentPage, this.userId, this.lastId)
-      } else if (this.activeName === 'video') {
+      if (this.activeName === 'video') {
         this.currentPage = 1
         this.lastId = 0
         this.userVideoListWrapper(this.currentPage, this.userId, this.lastId)
@@ -328,21 +285,26 @@ export default {
       } else if (this.activeName === 'audio') {
         this.currentPage = 1
         this.lastId = 0
-      } else if (this.activeName === 'article') {
-        this.currentPage = 1
-        this.lastId = 0
-      } else if (this.activeName === 'following') {
-        getUserFollowing(this.userId).then(res => {
-          if (res.code === 0) {
-            this.followingList = res.data
-          }
-        })
-      } else if (this.activeName === 'follower') {
-        getUserFollower(this.userId).then(res => {
+        getUserAudio(this.userId).then(res => {
           if (res.code === 0) {
-            this.followerList = res.data
+            const resData = res.data.list
+            if (resData.length !== 0) {
+              this.showEmpty = false
+              for (const item of resData) {
+                this.dataList.push(item)
+              }
+            } else {
+              this.showEmpty = true
+            }
           }
         })
+      } else if (this.activeName === 'article') {
+        this.currentPage = 1
+        this.lastId = 0
+      } else if (this.activeName === 'status') {
+        this.currentPage = 1
+        this.lastId = 0
+        this.userStatusListWrapper(this.currentPage, this.userId, this.lastId)
       }
     },
     followUser(userId) {

src/views/user/UserRelation.vue

@@ -0,0 +1,263 @@
+<template>
+  <div>
+    <el-row class="movie-list">
+      <el-col :md="24">
+        <el-card :body-style="{ padding: '0px' }" class="card">
+          <div slot="header" class="clearfix">
+            <el-row>
+              <el-col :md="1">
+                <el-avatar>
+                  <el-image :src="user.avatarUrl"/>
+                </el-avatar>
+              </el-col>
+              <el-col :md="23">
+                <router-link target="_blank" :to="`/user/${user.userId}`">
+                  <span>{{ user.screenName }}</span>
+                </router-link>
+                <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'" />
+                <el-button
+                  type="danger"
+                  size="mini"
+                  :icon="followButton.icon"
+                  @click="followUser(user.userId)"
+                >
+                  <span>{{followButton.text}}</span>
+                </el-button>
+                <el-button
+                  type="danger"
+                  size="mini"
+                  icon="el-icon-message"
+                  @click="sendMessage(user.userId)"
+                >
+                  <span>发消息</span>
+                </el-button>
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :md="24" class="movie-list">
+        <el-tabs v-model="activeName" @tab-click='tabClick'>
+          <el-tab-pane name="following">
+            <span slot="label">
+              Ta 的关注<el-badge :value="this.user.following" :max="9999" class="item" type="warning"/>
+            </span>
+            <div v-if="activeName === 'following'">
+              <el-col v-for="(user, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
+                <user-card :user="user"></user-card>
+              </el-col>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane name="follower">
+            <span slot="label">
+              Ta 的粉丝<el-badge :value="this.user.follower" :max="9999" class="item" type="warning"/>
+            </span>
+            <div v-if="activeName === 'follower'">
+              <el-col v-for="(user, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
+                <user-card :user="user"></user-card>
+              </el-col>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+      </el-col>
+      <el-col :span="24" class="pagination">
+        <el-pagination
+          background
+          :small="screenWidth <= 768"
+          hide-on-single-page
+          layout="prev, pager, next"
+          :page-size="pageSize"
+          :current-page="currentPage"
+          :total="totalSize"
+          @current-change="handleCurrentChange"
+          @prev-click="handleCurrentChange"
+          @next-click="handleCurrentChange"
+        />
+      </el-col>
+    </el-row>
+    <el-row v-if="showEmpty" class="not-result">
+      <el-col :span="12" :offset="6">
+        <img src="@/assets/img/icon/not-collection.png">
+        <div>该用户还没关注任何人呢</div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import UserCard from '@/components/card/UserCard'
+
+import { getUserInfo, getUserFollowing, getUserFollower, checkRelation, followUser, unfollowUser } from "@/api/user";
+
+export default {
+  name: 'Home',
+  components: { UserCard},
+  data() {
+    return {
+      // 屏幕宽度, 为了控制分页条的大小
+      screenWidth: document.body.clientWidth,
+      user: null,
+      userId: null,
+      followButton: {
+        icon: 'el-icon-plus',
+        text: '关注'
+      },
+      activeName: 'following',
+      currentPage: 1,
+      pageSize: 12,
+      totalSize: 0,
+      dataList: [],
+      showEmpty: true,
+    }
+  },
+  created() {
+    this.userId = this.$route.params.id
+    getUserInfo(this.userId).then(res => {
+      if (res.code === 0) {
+        this.user = res.data
+        const path = this.$route.path
+        if (path.endsWith("following")) {
+          this.activeName = 'following'
+          document.title = this.user.screenName + '的关注'
+        } else if (path.endsWith("follower")) {
+          this.activeName = 'follower'
+          document.title = this.user.screenName + '的粉丝'
+        } else {
+          document.title = this.user.screenName + '的个人主页'
+        }
+        this.getData()
+      }
+    })
+    checkRelation(this.userId).then(res => {
+      if (res.code === 0) {
+        if (res.data) {
+          this.followButton.text = '已关注'
+          this.followButton.icon = 'el-icon-check'
+        }
+      }
+    })
+  },
+  mounted() {
+    // 当窗口宽度改变时获取屏幕宽度
+    window.onresize = () => {
+      return () => {
+        window.screenWidth = document.body.clientWidth
+        this.screenWidth = window.screenWidth
+      }
+    }
+  },
+  watch: {
+    $route(){
+      this.$router.go()
+    }
+  },
+  methods: {
+    initPagination() {
+      this.pageSize = 12
+      this.currentPage = 1
+      this.totalSize = 0
+    },
+    handleCurrentChange(pageNumber) {
+      this.currentPage = pageNumber
+      if (this.activeName === 'following') {
+        getUserFollowing(this.userId).then(res => {
+          if (res.code === 0) {
+            this.dataList = res.data
+          }
+        })
+      } else if (this.activeName === 'follower') {
+        getUserFollower(this.userId).then(res => {
+          if (res.code === 0) {
+            this.dataList = res.data
+          }
+        })
+      }
+
+      // 回到顶部
+      scrollTo(0, 0)
+    },
+    tabClick(tab) {
+      this.activeName = tab.name
+      this.goToTab(this.activeName)
+    },
+    goToTab(activeName) {
+      const path = '/user/' + this.userId + '/' + activeName
+      if (this.$route.path === path) {
+        this.$router.go(0)
+        return
+      }
+      this.$router.push(path)
+    },
+    getData() {
+      if (this.activeName === 'following') {
+        getUserFollowing(this.userId).then(res => {
+          if (res.code === 0) {
+            this.dataList = res.data
+          }
+        })
+      } else if (this.activeName === 'follower') {
+        getUserFollower(this.userId).then(res => {
+          if (res.code === 0) {
+            this.dataList = res.data
+          }
+        })
+      }
+    },
+    followUser(userId) {
+      if (this.followButton.text === '关注') {
+        followUser(userId).then(res => {
+          if (res.code === 0) {
+            this.followButton.text = '已关注'
+            this.followButton.icon = 'el-icon-check'
+          }
+        })
+      } else {
+        unfollowUser(userId).then(res => {
+          if (res.code === 0) {
+            this.followButton.text = '关注'
+            this.followButton.icon = 'el-icon-plus'
+          }
+        })
+      }
+    },
+    sendMessage(userId) {
+      console.log('发送消息')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.movie-list {
+  padding-top: 15px;
+  padding-left: 6%;
+  padding-right: 6%;
+}
+
+.pagination {
+  text-align: center;
+  padding: 10px;
+}
+
+/*处于手机屏幕时*/
+@media screen and (max-width: 768px){
+  .movie-list {
+    padding-top: 8px;
+    padding-left: 0.5%;
+    padding-right: 0.5%;
+  }
+}
+
+.not-result {
+  padding-top: 100px;
+  padding-bottom: 100px;
+  text-align: center;
+}
+
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+</style>