更新 user 相关页面和接口

src/api/user.js

@@ -0,0 +1,50 @@
+import { get, post } from '@/utils/request'
+
+const userApi = {
+  myInfoApi: '/api/user/info/my',
+  userInfoApi: '/api/user/info',
+  followUserApi: '/api/user/relation/follow',
+  unfollowUserApi: '/api/user/relation/unfollow',
+  checkRelationApi: '/api/user/relation/check',
+  vipPlanApi: '/api/user/vip/plan',
+  vipOrderApi: '/api/user/vip/order',
+  vipPayApi: '/api/user/vip/pay'
+}
+
+export function getMyInfo() {
+  return get(userApi.myInfoApi)
+}
+
+export function getUserInfo(userId) {
+  return get(userApi.userInfoApi + '?userId=' + userId)
+}
+
+// 关注用户
+export function followUser(followingId) {
+  return post(userApi.followUserApi + '/' + followingId)
+}
+
+// 取消关注用户
+export function unfollowUser(followingId) {
+  return post(userApi.unfollowUserApi + '/' + followingId)
+}
+
+export function checkRelation(userId) {
+  return get(userApi.checkRelationApi + '/' + userId)
+}
+
+export function getVipPlan() {
+  return get(userApi.vipPlanApi)
+}
+
+export function getVipOrder() {
+  return get(userApi.vipOrderApi)
+}
+
+export function createVipOrder(planId) {
+  return post(userApi.vipOrderApi + '/' + planId)
+}
+
+export function payVip(orderId) {
+  return post(userApi.vipPayApi + '/' + orderId)
+}

src/components/card/VideoCard.vue

@@ -30,7 +30,7 @@
         </div>
         <div style="padding: 14px">
           <span style="left: 0;margin-bottom: 0px;color: black;">
-            <router-link target="_blank" :to="`/u/${video.userId}`"><i class="el-icon-user"> {{ video.username }} </i></router-link> · {{ video.pubDate }}
+            <router-link target="_blank" :to="`/user/${video.user.userId}`"><i class="el-icon-user"> {{ video.user.screenName }} </i></router-link> · {{ video.updateTime }}
           </span>
         </div>
       </el-card>
@@ -46,7 +46,7 @@ export default {
   filters: {
     ellipsis(value) {
       if (!value) return ''
-      const max = 20
+      const max = 15
       if (value.length > max) {
         return value.slice(0, max) + '...'
       }

src/router/index.js

@@ -67,7 +67,7 @@ const routes = [
     component: Search
   },
   {
-    path: '/user/profile',
+    path: '/user/:id',
     name: 'ProfileIndex',
     component: ProfileIndex
   },

src/views/home/Index.vue

@@ -1,42 +1,22 @@
 <template>
   <div>
-    <el-row>
+<!--    <el-row>
       <el-col :md="12">
-        <!--影片分类按钮-->
         <category-btn />
       </el-col>
       <el-col :md="12">
-        <!--猜您喜欢-->
         <recommend />
       </el-col>
-    </el-row>
+    </el-row>-->
     <!--电影列表，与推荐列表-->
-    <el-row id="movie-list">
+    <el-row id="movie-list"
+            v-infinite-scroll="load">
       <!--电影列表-->
       <el-col :md="24">
         <el-col v-for="(video, index) in videoList" :key="index" :md="6" :sm="12" :xs="12">
           <video-card :video="video" />
         </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"
-          />
-        </el-col>
       </el-col>
-
       <!--热播列表-->
       <!--      <el-col :md="6">
         <hot-list />
@@ -59,20 +39,15 @@ export default {
       // 屏幕宽度, 为了控制分页条的大小
       screenWidth: document.body.clientWidth,
       currentPage: 1,
-      videoList: []
+      videoList: [],
+      loading: true
     }
   },
   created() {
-    this.currentPage = 1
-    videoRecommend(this.currentPage).then(res => {
-      if (res.code === 0) {
-        const resData = res.data
-        this.videoList = resData.list
-      }
-    })
+    this.videoRecommendWrapper(this.currentPage)
     // console.log(this.$store.state.videos);
     // 当页面挂载时，页码变为1
-    this.$store.commit('updatePage', 1)
+    // this.$store.commit('updatePage', 1)
   },
   mounted() {
     // 当窗口宽度改变时获取屏幕宽度
@@ -84,12 +59,40 @@ export default {
     }
   },
   methods: {
-    handleCurrentChange(currentPage) {
-      this.currentPage = currentPage
-      this.$store.commit('updatePage', currentPage)
-      this.$store.dispatch('getPageBean')
-      // 回到顶部
-      scrollTo(0, 0)
+    videoRecommendWrapper(pageNumber) {
+      videoRecommend(pageNumber).then(res => {
+        if (res.code === 0) {
+          const resList = res.data.list
+          if (resList.length === 0) {
+            this.loading = false
+            return
+          }
+
+          for (const item of res.data.list) {
+            this.videoList.push(item)
+          }
+          this.currentPage +=1
+        } else {
+          this.$notify(
+            {
+              title: '提示',
+              message: '获取数据失败, 请重新刷新页面',
+              type: 'warning',
+              duration: 3000
+            }
+          )
+        }
+      })
+    },
+    load() {
+      if (!this.loading || this.currentPage > 20) {
+        return
+      }
+
+      console.log('滚动加载第 ' + this.currentPage + ' 页')
+      setTimeout(() => {
+        this.videoRecommendWrapper(this.currentPage)
+      }, 1000)
     }
   }
 }

src/views/user/Profile.vue

@@ -39,7 +39,7 @@
 <script>
 import ArticleCard from 'components/card/ArticleCard'
 import HotList from 'components/hotlist/HotList'
-import {videoRecommend} from "@/api/video";
+import { getUserInfo } from "@/api/user";
 
 export default {
   name: 'Profile',
@@ -54,17 +54,11 @@ export default {
     }
   },
   created() {
-    this.currentPage = 1
-    videoRecommend(this.currentPage).then(res => {
-      if (res.code === 0) {
-        const resData = res.data
-        this.videoList = resData.list
-        this.video = resData.list[0]
-      }
+    const userId = this.$route.params.id
+    getUserInfo(userId).then(res => {
+      console.log(res)
     })
-    // console.log(this.$store.state.videos);
-    // 当页面挂载时，页码变为1
-    this.$store.commit('updatePage', 1)
+    console.log(userId)
   },
   mounted() {
     // 当窗口宽度改变时获取屏幕宽度