update

src/api/status.js

@@ -2,7 +2,7 @@ import { get, post } from '@/utils/request'
 
 const statusApi = {
   statusPubApi: '/api/mblog/status',
-  statusRecommendApi: '/api/mblog/status',
+  statusApi: '/api/mblog/status',
   userStatusApi: '/api/mblog/status/user'
 }
 
@@ -12,8 +12,8 @@ export function pubStatus(statusPost) {
 }
 
 // 状态获取接口
-export function statusRecommend(page) {
-  return get(statusApi.statusRecommendApi + '/' + page)
+export function getUserStatus(statusId) {
+  return get(statusApi.statusApi + '/' + statusId)
 }
 
 // 用户状态获取接口

src/api/timeline.js

@@ -6,11 +6,11 @@ const timelineApi = {
 }
 
 // 用户视频时间线
-export function videoTimeline(lastId, page) {
-  return get(timelineApi.videoTimelineApi + '?lastId=' + lastId + '&page=' + page)
+export function videoTimeline(nextId) {
+  return get(timelineApi.videoTimelineApi + '?nextId=' + nextId)
 }
 
 // 用户状态时间线
-export function statusTimeline(lastId, page) {
-  return get(timelineApi.statusTimelineApi + '?lastId=' + lastId + '&page=' + page)
+export function statusTimeline(nextId) {
+  return get(timelineApi.statusTimelineApi + '?nextId=' + nextId)
 }

src/components/card/HotSearch.vue

@@ -0,0 +1,223 @@
+<template>
+  <el-card class="box-card" :body-style="{ paddingTop: '0px' }">
+    <div slot="header" class="clearfix">
+      <img src="@/assets/img/icon/like.png" alt="" class="recommand-icon">
+      <span>热搜排行</span>
+    </div>
+    <div
+      v-for="(video, index) in videos"
+      :key="index"
+      :title="video.vname"
+      class="item"
+    >
+      <div :class="rank(index + 1)">{{ index + 1 }}</div>
+      <router-link target="_blank" :to="`/video/vlrQvVnAlJ`">
+        {{ video.vname }}
+      </router-link>
+    </div>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: 'HotSearch',
+  data() {
+    return {
+      videos: []
+    }
+  },
+  computed: {
+    rank() {
+      return (index) => {
+        // index是使用时的参数
+        // console.log(index)
+        if (index === 1) {
+          return 'first'
+        }
+        if (index === 2) {
+          return 'second'
+        }
+        if (index === 3) {
+          return 'third'
+        }
+        if (index > 3) {
+          return 'other'
+        }
+      }
+    }
+  },
+  created() {
+    this.videos = [
+      {
+        vname: '大奶',
+        coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
+        releasetime: '2023-04-24 16:47:00',
+        visited: 10
+      },
+      {
+        vname: '少妇',
+        coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
+        releasetime: '2023-04-24 16:47:00',
+        visited: 10
+      },
+      {
+        vname: 'c罩杯',
+        coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
+        releasetime: '2023-04-24 16:47:00',
+        visited: 10
+      },
+      {
+        vname: '骚货',
+        coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
+        releasetime: '2023-04-24 16:47:00',
+        visited: 10
+      },
+      {
+        vname: '白虎',
+        coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
+        releasetime: '2023-04-24 16:47:00',
+        visited: 10
+      },
+      {
+        vname: '学生',
+        coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
+        releasetime: '2023-04-24 16:47:00',
+        visited: 10
+      },
+      {
+        vname: '偷拍',
+        coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
+        releasetime: '2023-04-24 16:47:00',
+        visited: 10
+      },
+      {
+        vname: '洗澡',
+        coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
+        releasetime: '2023-04-24 16:47:00',
+        visited: 10
+      },
+      {
+        vname: '约炮',
+        coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
+        releasetime: '2023-04-24 16:47:00',
+        visited: 10
+      },
+      {
+        vname: '做爱',
+        coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
+        releasetime: '2023-04-24 16:47:00',
+        visited: 10
+      }
+    ]
+    /* getHotTen().then((res) => {
+      this.videos = res
+    })*/
+  },
+  methods: {}
+}
+</script>
+
+<style scoped>
+.item {
+  height: 25px;
+  margin-top: 4px;
+  margin-bottom: 16px;
+  cursor: pointer;
+  transition: all 0.6s; /*所有属性变化在0.6秒内执行动画*/
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1; /*行数*/
+  -webkit-box-orient: vertical;
+}
+.item:hover {
+  transform: scale(1.1); /*鼠标放上之后元素变成1.1倍大小*/
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+.clearfix:after {
+  clear: both;
+}
+
+.clearfix {
+  position: relative;
+}
+.clearfix span {
+  font-size: 20px;
+  position: absolute;
+  bottom: 8px;
+  left: 35px;
+}
+.box-card {
+  width: 100%;
+}
+
+.recommand-icon {
+  width: 30px;
+}
+
+@media screen and (max-width: 768px) {
+  .clearfix span {
+    font-size: 15px;
+    position: absolute;
+    bottom: 8px;
+    left: 35px;
+  }
+  .text {
+    font-size: 13px;
+  }
+}
+
+.other {
+  display: inline-block;
+  background-color: rgb(176, 183, 194);
+  width: 22px;
+  height: 22px;
+  line-height: 20px;
+  text-align: center;
+  color: #ffffff;
+  font-size: 15px;
+  border-radius: 5px;
+}
+.first {
+  display: inline-block;
+  background-color: rgb(255, 74, 74);
+  width: 22px;
+  height: 22px;
+  line-height: 20px;
+  text-align: center;
+  color: #ffffff;
+  font-size: 15px;
+  border-radius: 5px;
+}
+.second {
+  display: inline-block;
+  background-color: rgb(255, 119, 1);
+  width: 22px;
+  height: 22px;
+  line-height: 20px;
+  text-align: center;
+  color: #ffffff;
+  font-size: 15px;
+  border-radius: 5px;
+}
+.third {
+  display: inline-block;
+  background-color: rgb(255, 180, 0);
+  width: 22px;
+  height: 22px;
+  line-height: 20px;
+  text-align: center;
+  color: #ffffff;
+  font-size: 15px;
+  border-radius: 5px;
+}
+.el-card__body {
+  padding-top: 0px;
+}
+</style>

src/components/card/HotVideo.vue

@@ -0,0 +1,223 @@
+<template>
+  <el-card class="box-card" :body-style="{ paddingTop: '0px' }">
+    <div slot="header" class="clearfix">
+      <img src="@/assets/img/icon/like.png" alt="" class="recommand-icon">
+      <span>热播排行</span>
+    </div>
+    <div
+      v-for="(video, index) in videos"
+      :key="index"
+      :title="video.vname"
+      class="item"
+    >
+      <div :class="rank(index + 1)">{{ index + 1 }}</div>
+      <router-link target="_blank" :to="`/video/vlrQvVnAlJ`">
+        {{ video.vname }}
+      </router-link>
+    </div>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: 'HotVideo',
+  data() {
+    return {
+      videos: []
+    }
+  },
+  computed: {
+    rank() {
+      return (index) => {
+        // index是使用时的参数
+        // console.log(index)
+        if (index === 1) {
+          return 'first'
+        }
+        if (index === 2) {
+          return 'second'
+        }
+        if (index === 3) {
+          return 'third'
+        }
+        if (index > 3) {
+          return 'other'
+        }
+      }
+    }
+  },
+  created() {
+    this.videos = [
+      {
+        vname: '哈1',
+        coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
+        releasetime: '2023-04-24 16:47:00',
+        visited: 10
+      },
+      {
+        vname: '哈2',
+        coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
+        releasetime: '2023-04-24 16:47:00',
+        visited: 10
+      },
+      {
+        vname: '哈3',
+        coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
+        releasetime: '2023-04-24 16:47:00',
+        visited: 10
+      },
+      {
+        vname: '哈4',
+        coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
+        releasetime: '2023-04-24 16:47:00',
+        visited: 10
+      },
+      {
+        vname: '哈5',
+        coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
+        releasetime: '2023-04-24 16:47:00',
+        visited: 10
+      },
+      {
+        vname: '哈1',
+        coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
+        releasetime: '2023-04-24 16:47:00',
+        visited: 10
+      },
+      {
+        vname: '哈2',
+        coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
+        releasetime: '2023-04-24 16:47:00',
+        visited: 10
+      },
+      {
+        vname: '哈3',
+        coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
+        releasetime: '2023-04-24 16:47:00',
+        visited: 10
+      },
+      {
+        vname: '哈4',
+        coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
+        releasetime: '2023-04-24 16:47:00',
+        visited: 10
+      },
+      {
+        vname: '哈5',
+        coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
+        releasetime: '2023-04-24 16:47:00',
+        visited: 10
+      }
+    ]
+    /* getHotTen().then((res) => {
+      this.videos = res
+    })*/
+  },
+  methods: {}
+}
+</script>
+
+<style scoped>
+.item {
+  height: 25px;
+  margin-top: 4px;
+  margin-bottom: 16px;
+  cursor: pointer;
+  transition: all 0.6s; /*所有属性变化在0.6秒内执行动画*/
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1; /*行数*/
+  -webkit-box-orient: vertical;
+}
+.item:hover {
+  transform: scale(1.1); /*鼠标放上之后元素变成1.1倍大小*/
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+.clearfix:after {
+  clear: both;
+}
+
+.clearfix {
+  position: relative;
+}
+.clearfix span {
+  font-size: 20px;
+  position: absolute;
+  bottom: 8px;
+  left: 35px;
+}
+.box-card {
+  width: 100%;
+}
+
+.recommand-icon {
+  width: 30px;
+}
+
+@media screen and (max-width: 768px) {
+  .clearfix span {
+    font-size: 15px;
+    position: absolute;
+    bottom: 8px;
+    left: 35px;
+  }
+  .text {
+    font-size: 13px;
+  }
+}
+
+.other {
+  display: inline-block;
+  background-color: rgb(176, 183, 194);
+  width: 22px;
+  height: 22px;
+  line-height: 20px;
+  text-align: center;
+  color: #ffffff;
+  font-size: 15px;
+  border-radius: 5px;
+}
+.first {
+  display: inline-block;
+  background-color: rgb(255, 74, 74);
+  width: 22px;
+  height: 22px;
+  line-height: 20px;
+  text-align: center;
+  color: #ffffff;
+  font-size: 15px;
+  border-radius: 5px;
+}
+.second {
+  display: inline-block;
+  background-color: rgb(255, 119, 1);
+  width: 22px;
+  height: 22px;
+  line-height: 20px;
+  text-align: center;
+  color: #ffffff;
+  font-size: 15px;
+  border-radius: 5px;
+}
+.third {
+  display: inline-block;
+  background-color: rgb(255, 180, 0);
+  width: 22px;
+  height: 22px;
+  line-height: 20px;
+  text-align: center;
+  color: #ffffff;
+  font-size: 15px;
+  border-radius: 5px;
+}
+.el-card__body {
+  padding-top: 0px;
+}
+</style>

src/components/card/StatusCard.vue

@@ -15,7 +15,9 @@
           </router-link>
         </el-row>
         <el-row>
-          <span>{{ status.createdAt }} 来自 微博网页版</span>
+          <router-link target="_blank" :to="`/status/` + status.user.userId + '/' + status.statusId">
+            <span>{{ status.createdAt }} 来自 微博网页版</span>
+          </router-link>
         </el-row>
       </el-col>
     </el-row>

src/components/hotlist/HotList.vue

@@ -11,7 +11,9 @@
       class="item"
     >
       <div :class="rank(index + 1)">{{ index + 1 }}</div>
-      {{ video.vname }}
+      <router-link target="_blank" :to="`/video/vlrQvVnAlJ`">
+        {{ video.vname }}
+      </router-link>
     </div>
   </el-card>
 </template>

src/router/index.js

@@ -4,14 +4,15 @@ import Vue from 'vue'
 // 懒加载引入页面组件，es6语法
 const Login = () => import('views/Login')
 const Home = () => import('views/home/Index')
-const StatusIndex = () => import('views/home/Status')
+const TimelineIndex = () => import('views/home/Timeline')
+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 ImageIndex = () => import('views/home/Image')
 const ImagePage = () => import('views/home/ImagePage')
 const ArticleIndex = () => import('views/home/Article')
 const Search = () => import('views/home/Search')
-const VideoPage = () => import('views/home/VideoPage')
 const HomeIndex = () => import('views/user/Home')
 const ProfileIndex = () => import('views/user/Profile')
 const AvatarIndex = () => import('views/user/Avatar')
@@ -38,8 +39,13 @@ const routes = [
   },
   {
     path: '/status/:id',
-    name: 'StatusIndex',
-    component: StatusIndex
+    name: 'TimelineIndex',
+    component: TimelineIndex
+  },
+  {
+    path: '/status/:userId/:statusId',
+    name: 'StatusPage',
+    component: StatusPage
   },
   {
     path: '/video',

src/store/modules/user.js

@@ -10,7 +10,7 @@ const state = {
 if (getAccessToken()) {
   const userInfo = getUserInfo()
   state.userId = userInfo.uid
-  state.username = userInfo.username
+  state.username = userInfo.screenName
   state.avatarUrl = userInfo.avatarUrl ? userInfo.avatarUrl : state.avatarUrl
 }
 

src/views/home/Status.vue

@@ -1,79 +1,46 @@
 <template>
   <div>
     <el-row>
-      <el-col :md="3">
-        <hot-list />
-      </el-col>
       <el-col :md="18">
-        <el-row class="movie-list">
-          <text-card />
-        </el-row>
-        <el-row class="movie-list">
-          <el-tabs v-model="activeName" @tab-click='tabClick'>
-            <el-tab-pane label="视频" name="video">
-              <div v-if="activeName === 'video'">
-                <el-col :md="8">
-                  <el-row v-for="(video, index) in videoList" :key="index" :md="6" :sm="12" :xs="12">
-                    <video-card :video="video" />
-                  </el-row>
-                </el-col>
-              </div>
-            </el-tab-pane>
-            <el-tab-pane label="状态" name="status">
-              <div v-if="activeName === 'status'">
-                <el-col :md="15">
-                  <el-row v-for="(status, index) in statusList" :key="index" :md="15" :sm="12" :xs="12">
-                    <status-card :status="status" />
-                  </el-row>
-                </el-col>
-              </div>
-            </el-tab-pane>
-          </el-tabs>
+        <el-row v-if="status !== null" class="movie-list">
+          <status-card :status="status" />
         </el-row>
       </el-col>
-      <el-col :md="3">
-        <hot-list />
-      </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
-import TextCard from '@/components/card/TextCard'
 import StatusCard from '@/components/card/StatusCard'
-import VideoCard from '@/components/card/VideoCard'
-import HotList from '@/components/hotlist/HotList'
 import { getUserInfo } from '@/utils/auth'
-import { statusTimeline, videoTimeline } from '@/api/timeline'
+import { getUserStatus } from '@/api/status'
 
 export default {
   name: 'Status',
-  components: { TextCard, StatusCard, VideoCard, HotList },
+  components: { StatusCard },
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小
       screenWidth: document.body.clientWidth,
-      currentPage: 1,
-      videoInfo: null,
-      statusList: [],
-      videoList: [],
-      activeName: 'video'
+      nextId: 0,
+      status: null
     }
   },
   created() {
+    const path = this.$route.path
+    const arr = path.split('/')
+    const statusId = parseInt(arr[3])
+
     const userInfo = getUserInfo()
     if (userInfo != null) {
-      document.title = userInfo.username + '的时间线'
+      document.title = userInfo.screenName + '的状态'
     }
 
-    this.currentPage = 1
-    this.videoTimelineWrapper(this.currentPage)
-    /*statusTimeline(0, this.currentPage).then(res => {
+    getUserStatus(statusId).then(res => {
       if (res.code === 0) {
-        const resData = res.data
-        this.statusList = resData.list
+        this.status = res.data
       }
-    })*/
+    })
   },
   mounted() {
     // 当窗口宽度改变时获取屏幕宽度
@@ -85,36 +52,11 @@ export default {
     }
   },
   methods: {
-    handleCurrentChange(currentPage) {
-      this.currentPage = currentPage
-      this.$store.commit('updatePage', currentPage)
-      this.$store.dispatch('getPageBean')
-      // 回到顶部
-      scrollTo(0, 0)
-    },
-    statusTimelineWrapper(pageNumber) {
-      statusTimeline(0, this.currentPage).then(res => {
+    statusTimelineWrapper(nextId) {
+      statusTimeline(nextId).then(res => {
         if (res.code === 0) {
-          const resData = res.data
-          this.statusList = resData.list
         }
       })
-    },
-    videoTimelineWrapper(pageNumber) {
-      videoTimeline(0, this.currentPage).then(res => {
-        if (res.code === 0) {
-          const resData = res.data
-          this.videoList = resData.list
-        }
-      })
-    },
-    tabClick(tab) {
-      const  tabName = tab.name
-      if (tabName === 'video') {
-        this.videoTimelineWrapper(this.currentPage)
-      } else if (tabName === 'status') {
-        this.statusTimelineWrapper(this.currentPage)
-      }
     }
   }
 }

src/views/home/Timeline.vue

@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :md="3">
+        <hot-search />
+      </el-col>
+      <el-col :md="18">
+        <el-row class="movie-list">
+          <text-card />
+        </el-row>
+        <el-row class="movie-list">
+          <el-tabs v-model="activeName" @tab-click='tabClick'>
+            <el-tab-pane label="视频" name="video">
+              <div v-if="activeName === 'video'">
+                <el-col :md="8">
+                  <el-row v-for="(video, index) in videoList" :key="index" :md="6" :sm="12" :xs="12">
+                    <video-card :video="video" />
+                  </el-row>
+                </el-col>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="状态" name="status">
+              <div v-if="activeName === 'status'">
+                <el-col :md="15">
+                  <el-row v-for="(status, index) in statusList" :key="index" :md="15" :sm="12" :xs="12">
+                    <status-card :status="status" />
+                  </el-row>
+                </el-col>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </el-row>
+      </el-col>
+      <el-col :md="3">
+        <hot-video />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import TextCard from '@/components/card/TextCard'
+import StatusCard from '@/components/card/StatusCard'
+import VideoCard from '@/components/card/VideoCard'
+import HotVideo from '@/components/card/HotVideo'
+import HotSearch from '@/components/card/HotSearch'
+import { getUserInfo } from '@/utils/auth'
+import { statusTimeline, videoTimeline } from '@/api/timeline'
+
+export default {
+  name: 'Timeline',
+  components: { TextCard, StatusCard, VideoCard, HotVideo, HotSearch },
+  data() {
+    return {
+      // 屏幕宽度, 为了控制分页条的大小
+      screenWidth: document.body.clientWidth,
+      nextId: 0,
+      videoInfo: null,
+      statusList: [],
+      videoList: [],
+      activeName: 'video'
+    }
+  },
+  created() {
+    const userInfo = getUserInfo()
+    if (userInfo != null) {
+      document.title = userInfo.screenName + '的时间线'
+    }
+
+    this.videoTimelineWrapper(this.nextId)
+  },
+  mounted() {
+    // 当窗口宽度改变时获取屏幕宽度
+    window.onresize = () => {
+      return () => {
+        window.screenWidth = document.body.clientWidth
+        this.screenWidth = window.screenWidth
+      }
+    }
+  },
+  methods: {
+    statusTimelineWrapper(nextId) {
+      statusTimeline(nextId).then(res => {
+        if (res.code === 0) {
+          const resData = res.data
+          this.statusList = resData.list
+          this.nextId = resData.nextId
+        }
+      })
+    },
+    videoTimelineWrapper(nextId) {
+      videoTimeline(nextId).then(res => {
+        if (res.code === 0) {
+          const resData = res.data
+          this.videoList = resData.list
+          this.nextId = resData.nextId
+        }
+      })
+    },
+    tabClick(tab) {
+      this.nextId = 0
+      const tabName = tab.name
+      if (tabName === 'video') {
+        this.videoTimelineWrapper(this.nextId)
+      } else if (tabName === 'status') {
+        this.statusTimelineWrapper(this.nextId)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.movie-list {
+  padding-top: 15px;
+  padding-left: 3%;
+  padding-right: 3%;
+}
+
+/*处于手机屏幕时*/
+@media screen and (max-width: 768px){
+  .movie-list {
+    padding-top: 8px;
+    padding-left: 0.5%;
+    padding-right: 0.5%;
+  }
+}
+</style>

src/views/message/Message.vue

@@ -52,7 +52,7 @@ export default {
   created() {
     const userInfo = getUserInfo()
     if (userInfo != null) {
-      document.title = userInfo.username + '的个人资料'
+      document.title = userInfo.screenName + '的个人资料'
     }
   },
   methods: {

src/views/user/Avatar.vue

@@ -68,7 +68,7 @@ export default {
   created() {
     this.userInfo = getUserInfo()
     if (this.userInfo != null) {
-      document.title =this.userInfo.username + '的头像'
+      document.title =this.userInfo.screenName + '的头像'
     }
   },
   methods: {

src/views/user/Vip.vue

@@ -38,7 +38,7 @@ export default {
   created() {
     const userInfo = getUserInfo()
     if (userInfo != null) {
-      document.title = userInfo.username + '的头像'
+      document.title = userInfo.screenName + '的头像'
     }
   },
   methods: {