update

src/api/video.js

@@ -10,6 +10,7 @@ const videoApi = {
   videoUrlApi: '/api/content/video/url',
   videoSubmitApi: '/api/content/video/submit',
   userVideoListApi: '/api/content/video/user',
+  userContentDataApi: '/api/content/video/userdata',
 
   playerRecordApi: '/api/media/video/play/record',
   userRecentlyVideoListApi: '/api/media/video/post/user/recently',
@@ -61,8 +62,8 @@ export function submitPlayRecord(playerRecord) {
 }
 
 // 用户视频列表
-export function userVideoList(page, userId) {
-  return get(videoApi.userVideoListApi + '?page=' + page + '&userId=' + userId)
+export function userVideoList(pageNumber, userId, lastId) {
+  return get(videoApi.userVideoListApi + '?pageNumber=' + pageNumber + '&userId=' + userId + '&lastId=' + lastId)
 }
 
 // 用户最近投稿的视频
@@ -73,3 +74,7 @@ export function userRecentlyVideoList(userId) {
 export function getDisplayedVideoList() {
   return get(videoApi.testVideoApi)
 }
+
+export function getUserContentData(userId) {
+  return get(videoApi.userContentDataApi + '?userId=' + userId)
+}

src/components/card/AudioCard.vue

@@ -1,42 +1,21 @@
 <template>
   <el-col style="padding-right: 7px; padding-left: 7px">
-    <div style="cursor: pointer" :title="video.title">
-      <el-card :body-style="{ padding: '0px' }" class="card">
-        <router-link target="_blank" :to="`/video/${video.videoId}`">
-          <div class="imgs">
-            <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="`/user/${video.userId}`"><i class="el-icon-user"> {{ video.username }} </i></router-link> · {{ video.pubDate }}
-          </span>
-        </div>
-      </el-card>
+    <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>
   </el-col>
 </template>
 
 <script>
-import { handleVisited } from 'assets/js/utils'
-
 export default {
   name: 'AudioCard',
   filters: {
@@ -50,19 +29,37 @@ export default {
     }
   },
   props: {
-    video: {
+    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: {
-    getVisited(visited) {
-      return handleVisited(visited)
+    // 播放前做的事
+    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
+      })
     }
   }
 }

src/components/card/StatusCard.vue

@@ -2,16 +2,16 @@
   <el-card :body-style="{ padding: '0px' }" class="card">
     <el-row>
       <el-col :md="3">
-        <router-link target="_blank" :to="`/user/` + status.userAvatar.userId">
+        <router-link target="_blank" :to="`/user/` + status.user.userId">
           <el-avatar>
-            <el-image :src="status.userAvatar.avatarUrl" />
+            <el-image :src="status.user.avatarUrl" />
           </el-avatar>
         </router-link>
       </el-col>
       <el-col :md="12">
         <el-row>
-          <router-link target="_blank" :to="`/user/` + status.userAvatar.userId">
-            <span>{{ status.userAvatar.screenName }}</span>
+          <router-link target="_blank" :to="`/user/` + status.user.userId">
+            <span>{{ status.user.screenName }}</span>
           </router-link>
         </el-row>
         <el-row>
@@ -34,15 +34,17 @@
       </el-col>
     </el-row>
     <el-row v-if="status.audioUrl !== undefined && status.audioUrl !== null">
-      <span>音频播放</span>
+      <audio-card :audio="ddd"></audio-card>
     </el-row>
   </el-card>
 </template>
 
 <script>
+import AudioCard from 'components/card/AudioCard'
 
 export default {
   name: 'StatusCard',
+  components: { AudioCard },
   props: {
     status: {
       type: Object,

src/router/index.js

@@ -2,6 +2,7 @@ import VueRouter from 'vue-router'
 import Vue from 'vue'
 
 // 懒加载引入页面组件，es6语法
+const Login = () => import('views/Login')
 const Home = () => import('views/home/Index')
 const StatusIndex = () => import('views/home/Status')
 const VideoIndex = () => import('views/home/Video')
@@ -25,6 +26,11 @@ const MessageIndex = () => import('views/message/Message')
 // 使用安装路由插件
 Vue.use(VueRouter)
 const routes = [
+  {
+    path: '/login',
+    name: 'login',
+    component: Login
+  },
   {
     path: '/',
     name: 'index',

src/store/modules/user.js

@@ -20,11 +20,7 @@ const User = {
     // 更新用户信息
     UPDATE_USER_INFO(state, userInfo) {
       // 保存用户信息到缓存
-      setUserInfo({
-        userId: userInfo.userId,
-        username: userInfo.username,
-        avatarUrl: userInfo.avatarUrl
-      })
+      setUserInfo(userInfo)
     },
     // 用户退出登录
     USER_LOGOUT(state) {

src/views/Login.vue

@@ -0,0 +1,78 @@
+<template>
+  <div style="text-align: center;">
+    <h1>用户登录</h1>
+    <el-row>
+      <el-input
+        v-model="userLogin.username"
+        placeholder="请输入手机号或邮箱"
+        style="width: 70%; padding-right: 2px"
+        clearable
+      />
+      <br>
+      <br>
+      <el-input
+        v-model="userLogin.password"
+        placeholder="请输入验证码"
+        style="width: 45%; padding-right: 2px"
+      />
+      <el-button :disabled="isBtn" @click="fetchVerifyCode">{{ code }}</el-button>
+      <br>
+      <br>
+      <el-image :src="captchaCode" @click="getCaptcha" />
+      <el-input
+        v-model="userLogin.captchaCode"
+        placeholder="请输入图形验证码"
+        style="width: 45%; padding-right: 2px"
+      />
+      <br>
+      <br>
+      <span
+        class="register"
+      >账号不存在会自动注册</span>
+      <span slot="footer" class="dialog-footer">
+        <el-button
+          type="primary"
+          :loading="isLoading"
+          @click.native="loginBtn"
+        >登 录</el-button>
+      </span>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { userMixin } from 'assets/js/mixin'
+import { getUserInfo } from '@/utils/auth'
+
+export default {
+  name: 'Login',
+  mixins: [userMixin],
+  data() {
+    return {
+      user: null,
+      drawer: false
+    }
+  },
+  created() {
+    this.user = getUserInfo()
+  },
+  methods: {
+    login() {
+      this.fetchPubkey()
+      this.dialogVisible2 = false
+      this.dialogVisible = true
+    },
+    register() {
+      this.fetchPubkey()
+      this.dialogVisible2 = false
+      this.dialogVisible = true
+    },
+    goToStatus() {
+      this.$router.push('/status')
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/views/home/Index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <!--电影列表，与推荐列表-->
-    <el-row id="movie-list"
+    <el-row v-if="videoList.length !== 0" id="movie-list"
             v-infinite-scroll="load"
             infinite-scroll-disabled="loading"
             infinite-scroll-distance="10">
@@ -16,6 +16,12 @@
         <hot-list />
       </el-col>-->
     </el-row>
+    <el-row v-else 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>
 

src/views/home/Video.vue

@@ -93,14 +93,7 @@ export default {
       videoCategory: [
         { cname: '全部', cid: 11010 },
         { cname: '电影', cid: 11011 },
-        { cname: '音乐', cid: 11012 },
-        { cname: '新闻', cid: 11013 },
-        { cname: '教育', cid: 11014 },
-        { cname: '科技', cid: 11015 },
-        { cname: '体育', cid: 11016 },
-        { cname: '军事', cid: 11017 },
-        { cname: '社会', cid: 11018 },
-        { cname: '生活', cid: 11019 }
+        { cname: '音乐', cid: 11012 }
       ]
     }
   },
@@ -129,7 +122,7 @@ export default {
             pageNumber: this.currentPage,
             lastId: this.lastId
           }
-        });
+        })
       }
     }
 
@@ -153,7 +146,7 @@ export default {
           pageNumber: this.currentPage,
           lastId: this.lastId
         }
-      });
+      })
 
       this.videoPageWrapper(this.currentPage, this.lastId)
       // 回到顶部
@@ -173,7 +166,7 @@ export default {
       this.currentIndex = index
       // 页码变为1
       console.log('选择分区')
-      /*this.$store.commit('updatePage', 1)
+      /* this.$store.commit('updatePage', 1)
       this.$store.commit('saveCid', cid)
       this.$store.dispatch('getPageBean')*/
     }

src/views/home/VideoPage.vue

@@ -16,15 +16,15 @@
       <el-col :md="9">
         <el-row>
           <el-col :md="3">
-            <router-link target="_blank" :to="`/user/` + video.userId">
+            <router-link target="_blank" :to="`/user/` + video.user.userId">
               <el-avatar>
-                <el-image :src="video.avatarUrl" />
+                <el-image :src="video.user.avatarUrl" />
               </el-avatar>
             </router-link>
           </el-col>
           <el-col :md="6">
-            <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>
+            <router-link target="_blank" :to="`/user/` + video.user.userId"><span>{{ video.user.screenName }}</span></router-link>
+            <router-link target="_blank" :to="`/message/` + video.user.userId"><span class="el-icon-message">发消息</span></router-link>
             <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'" />
             <el-button small outlined color="primary">
               <span>已关注</span>
@@ -268,7 +268,7 @@ export default {
         this.$message.info('该标签已存在！')
       } else {
         this.tags.push(inputValue)
-        // addTag(this.tags.join('，'), this.video.vid).then(res => console.log(res)) // 添加标签
+        this.$message.info('添加标签！')
       }
       this.inputVisible = false
       this.inputValue = ''

src/views/user/Home.vue

@@ -32,8 +32,8 @@
               </el-col>
             </el-row>
             <el-row>
-              <span v-if="user.intro !== null">{{user.intro}}</span>
-              <span v-if="user.intro === undefined || user.intro === null">此用户没有签名</span>
+              <span v-if="user.signature !== null">{{user.signature}}</span>
+              <span v-if="user.signature === undefined || user.signature === null">此用户没有签名</span>
             </el-row>
             <el-row>
               <span class="el-icon-user">关注数: {{ user.followingCount }}</span>
@@ -47,28 +47,40 @@
     <el-row>
       <el-col :md="24" class="movie-list">
         <el-tabs v-model="activeName" @tab-click='tabClick'>
-          <el-tab-pane label="视频" name="video">
+          <el-tab-pane name="video">
+            <span slot="label">
+              视频<el-badge :value="videoCount" :max="9999" class="item" type="warning"/>
+            </span>
             <div v-if="activeName === 'video'">
               <el-col v-for="(video, index) in videoList" :key="index" :md="6" :sm="12" :xs="12">
                 <video-card :video="video" />
               </el-col>
             </div>
           </el-tab-pane>
-          <el-tab-pane label="状态" name="status">
+          <el-tab-pane name="status">
+            <span slot="label">
+              状态<el-badge :value="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 label="Ta 的关注" name="following">
+          <el-tab-pane name="following">
+            <span slot="label">
+              Ta 的关注<el-badge :value="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>
             </div>
           </el-tab-pane>
-          <el-tab-pane label="Ta 的粉丝" name="follower">
+          <el-tab-pane name="follower">
+            <span slot="label">
+              Ta 的粉丝<el-badge :value="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>
@@ -105,7 +117,7 @@ import UserCard from '@/components/card/UserCard'
 import StatusCard from '@/components/card/StatusCard'
 import VideoCard from '@/components/card/VideoCard'
 import { getUserInfo, getUserFollowing, getUserFollower, checkRelation, followUser, unfollowUser } from "@/api/user";
-import { userVideoList } from "@/api/video";
+import { userVideoList, getUserContentData } from "@/api/video";
 import { userStatus } from "@/api/status";
 
 export default {
@@ -129,10 +141,17 @@ export default {
       statusList: [],
       followerList: [],
       followingList: [],
-      showEmpty: false
+      showEmpty: false,
+      videoCount: 0,
+      statusCount: 0,
+      followingCount: 0,
+      followerCount: 0
     }
   },
   created() {
+    const pageNumber = this.$route.params.pageNumber
+    const lastId = this.$route.params.lastId
+
     this.userId = this.$route.params.id
     getUserInfo(this.userId).then(res => {
       if (res.code === 0) {
@@ -151,7 +170,16 @@ export default {
       }
     })
 
-    this.userVideoListWrapper(1, this.userId)
+    getUserContentData(this.userId).then(res => {
+      if (res.code === 0) {
+        const resData = res.data
+        this.videoCount = resData.videoCount
+        this.statusCount = resData.statusCount
+        this.followingCount = resData.userFollowCount.followingCount
+        this.followerCount = resData.userFollowCount.followerCount
+      }
+    })
+    this.userVideoListWrapper(1, this.userId, 0)
   },
   mounted() {
     // 当窗口宽度改变时获取屏幕宽度
@@ -165,15 +193,14 @@ export default {
   methods: {
     handleCurrentChange(pageNumber) {
       this.currentPage = pageNumber
-      this.$router.push({
+      /*this.$router.push({
         path: '/user/' + this.userId + '?pageNumber=' + pageNumber + '&lastId=' + this.lastId,
         query: {
           pageNumber: this.currentPage,
           lastId: this.lastId
         }
-      });
-
-      // this.videoPageWrapper(this.currentPage, this.lastId)
+      });*/
+      this.userVideoListWrapper(this.currentPage, this.userId, this.lastId)
       // 回到顶部
       scrollTo(0, 0)
     },
@@ -226,8 +253,8 @@ export default {
     sendMessage(userId) {
       console.log('发送消息')
     },
-    userVideoListWrapper(pageNumber, userId) {
-      userVideoList(pageNumber, userId).then(res => {
+    userVideoListWrapper(pageNumber, userId, lastId) {
+      userVideoList(pageNumber, userId, lastId).then(res => {
         if (res.code === 0) {
           const resData = res.data
           this.videoList = resData.list
@@ -272,4 +299,9 @@ export default {
   padding-bottom: 100px;
   text-align: center;
 }
+
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
 </style>

src/views/user/Profile.vue

@@ -28,7 +28,7 @@
             <el-input v-model="form.signature" type="textarea" style="width: 30%; padding-right: 2px" />
           </el-form-item>
           <el-form-item label="性别">
-            <el-input v-model="form.gender" style="width: 30%; padding-right: 2px"/>
+            <el-input v-model="form.gender" style="width: 30%; padding-right: 2px" />
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="onSubmit">保存</el-button>
@@ -64,8 +64,10 @@ export default {
   created() {
     const userInfo = getUserInfo()
     if (userInfo != null) {
+      document.title = userInfo.screenName + '的个人资料'
       this.form.userId = userInfo.userId
-      document.title = userInfo.username + '的个人资料'
+      this.form.screenName = userInfo.screenName
+      this.form.signature = userInfo.signature
     }
   },
   methods: {