更新readme

README.md

@@ -6,13 +6,41 @@
 
 ## 开发进度
 
+☑
+
 页面|进度
 ---|---
-首页| ☑
-首页|<input type="checkbox" checked>
+首页|50%
+-- 音乐|&#9745;
+-- 抖音音乐榜|&#9745;
+-- 搜索|50%;
+-- 直播|50%;
+朋友|0%
+消息|80%
+我|90%
+-- 关注|0
+-- 粉丝|0
+-- 编辑资料|&#9745;
+-- 添加朋友|&#9745;
+-- 我的音乐|30%
+-- 抖音商城|0
+-- 我的订单|0
+-- 钱包|0
+-- 我的二维码|&#9745;
+-- 我的二维码|&#9745;
+-- 设置|30%
+首页|
+首页|
+首页|
+首页|
+首页|
+首页|
+首页|
+首页|
+首页|
 
 ## 目标功能
- 
+
 - [x] 首页
 - [x] 直播
 - [x] 登录、注册

src/api/videos.js

@@ -20,4 +20,10 @@ export default {
   recommended(params, data) {
     return request({url: '/video/recommended', method: 'get', params, data})
   },
+  historyVideo(params, data) {
+    return request({url: '/video/historyVideo', method: 'get', params, data})
+  },
+  historyOther(params, data) {
+    return request({url: '/video/historyOther', method: 'get', params, data})
+  },
 }

src/assets/less/variables.less

@@ -1,4 +1,5 @@
 @footer-height: 6rem;
-@header-height: 6rem;
+@header-height: 6.1rem;
+@indicator-height: 5rem;
 
 @padding-page: 1.5rem;

src/components/slide/Indicator.vue

@@ -123,7 +123,7 @@ export default {
 .indicator-ctn {
   font-size: 1.4rem;
   width: 100%;
-  height: 5rem;
+  height: @indicator-height;
   top: 0;
   left: 0;
   right: 0;

src/mock/index.js

@@ -35,52 +35,53 @@ Mock.mock(/recommended/, options => {
   }
 )
 
-Mock.Random.extend({
-  imgs: function (date) {
-    return this.pick([
-      require('../assets/img/poster/1.jpg'),
-      require('../assets/img/poster/2.jpg'),
-      require('../assets/img/poster/3.jpg'),
-      require('../assets/img/poster/4.jpg'),
-      require('../assets/img/poster/5.jpg'),
-      require('../assets/img/poster/6.jpg'),
-      require('../assets/img/poster/7.jpg'),
-      require('../assets/img/poster/8.jpg'),
-      require('../assets/img/poster/9.jpg'),
-      require('../assets/img/poster/10.jpg'),
-      require('../assets/img/poster/11.jpg'),
-    ])
-  }
-})
-!(function me() {
-  let my = {total: Mock.Random.natural(1, 20)}
-  my[`list|${my.total > 10 ? 10 : my.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}]
-
-  let private1 = {total: Mock.Random.natural(1, 20)}
-  private1[`list|${private1.total > 10 ? 10 : private1.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}]
-
-  let like = {total: Mock.Random.natural(1, 20)}
-  like[`list|${like.total > 10 ? 10 : like.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}]
-
-  let collect = {total: Mock.Random.natural(1, 20)}
-  collect[`list|${collect.total > 10 ? 10 : collect.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}]
-
-  const data = Mock.mock({
-    'data': {
-      my,
-      private: private1,
-      like,
-      collect
-    },
-    code: 200,
-    msg: '',
-  })
-  Mock.mock('me', data)
-}())
+// Mock.Random.extend({
+//   imgs: function (date) {
+//     return this.pick([
+//       require('../assets/img/poster/1.jpg'),
+//       require('../assets/img/poster/2.jpg'),
+//       require('../assets/img/poster/3.jpg'),
+//       require('../assets/img/poster/4.jpg'),
+//       require('../assets/img/poster/5.jpg'),
+//       require('../assets/img/poster/6.jpg'),
+//       require('../assets/img/poster/7.jpg'),
+//       require('../assets/img/poster/8.jpg'),
+//       require('../assets/img/poster/9.jpg'),
+//       require('../assets/img/poster/10.jpg'),
+//       require('../assets/img/poster/11.jpg'),
+//     ])
+//   }
+// })
+// !(function me() {
+//   let my = {total: Mock.Random.natural(1, 20)}
+//   my[`list|${my.total > 10 ? 10 : my.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}]
+//
+//   let private1 = {total: Mock.Random.natural(1, 20)}
+//   private1[`list|${private1.total > 10 ? 10 : private1.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}]
+//
+//   let like = {total: Mock.Random.natural(1, 20)}
+//   like[`list|${like.total > 10 ? 10 : like.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}]
+//
+//   let collect = {total: Mock.Random.natural(1, 20)}
+//   collect[`list|${collect.total > 10 ? 10 : collect.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}]
+//
+//   const data = Mock.mock({
+//     'data': {
+//       my,
+//       private: private1,
+//       like,
+//       collect
+//     },
+//     code: 200,
+//     msg: '',
+//   })
+//   Mock.mock('me', data)
+// }())
 
 
 Mock.mock(/my/, options => {
   let page = getPage(options)
+  console.log('mock', page)
   return Mock.mock({
     data: {
       pageNo: page.pageNo,
@@ -94,7 +95,7 @@ Mock.mock(/like/, options => {
   return Mock.mock({
     data: {
       pageNo: page.pageNo,
-      total: resource.my.length,
+      total: resource.like.length,
       list: resource.like.slice(page.offset, page.limit),
     }, code: 200, msg: '',
   })
@@ -104,7 +105,7 @@ Mock.mock(/private1/, options => {
   return Mock.mock({
     data: {
       pageNo: page.pageNo,
-      total: resource.my.length,
+      total: resource.private1.length,
       list: resource.private1.slice(page.offset, page.limit),
     }, code: 200, msg: '',
   })
@@ -125,3 +126,24 @@ Mock.mock(/collect/, options => {
   })
 })
 
+Mock.mock(/historyVideo/, options => {
+  let page = getPage(options)
+  return Mock.mock({
+    data: {
+      pageNo: page.pageNo,
+      // total: resource.my.length,
+      total: 50,
+      list: resource.my.slice(page.offset, page.limit),
+    }, code: 200, msg: '',
+  })
+})
+Mock.mock(/historyOther/, options => {
+  let page = getPage(options)
+  return Mock.mock({
+    data: {
+      pageNo: page.pageNo,
+      total: 0,
+      list: [],
+    }, code: 200, msg: '',
+  })
+})

src/pages/home/Music.vue

@@ -43,6 +43,7 @@
         </div>
         <Posters mode="music" :list="videos"/>
         <Loading :is-full-screen="false" v-if="loading"/>
+        <NoMore v-else/>
       </Scroll>
     </div>
     <div class="options">
@@ -124,8 +125,10 @@ export default {
 
       showDouyinCode: false,
       audio: new Audio(),
-
-      videos: resource.my,
+      total: 0,
+      pageNo: 0,
+      pageSize: 15,
+      videos: [],
 
       music: {
         name: '发如雪',
@@ -159,17 +162,28 @@ export default {
     if (this.$route.query.name) {
       this.music = this.$route.query
     }
+    this.loadData(true)
   },
   computed: {},
   methods: {
     toggleCollect() {
       this.isCollect = !this.isCollect
     },
-    async loadData() {
+    async loadData(init = false) {
+      if (this.loading) return
+      if (!init) {
+        if (this.total <= this.videos.length) {
+          return this.$notice('暂时没有更多了')
+        }
+        this.pageNo++
+      }
       this.loading = true
-      await this.$sleep(1500)
-      this.videos = this.videos.concat(this.videos2)
+      let res = await this.$api.videos.my({pageNo: this.pageNo, pageSize: this.pageSize,})
       this.loading = false
+      if (res.code === this.SUCCESS) {
+        this.videos = this.videos.concat(res.data.list)
+        this.total = res.data.total
+      }
     },
     togglePlay() {
       this.isPlay = !this.isPlay

src/pages/me/rightMenu/LookHistory.vue

@@ -4,7 +4,7 @@
       <template v-slot:center>
         <span class="f16">观看历史</span>
       </template>
-      <template v-slot:right v-if="list">
+      <template v-slot:right v-if="isClear">
         <span class="second-text-color f13" @click="clear">清空</span>
       </template>
     </BaseHeader>
@@ -12,23 +12,28 @@
       <Indicator
           style="width: calc(100vw - 2rem); margin-left: 1rem;"
           tabStyleWidth="50%"
-          :tabTexts="['熟人列表','发现熟人']"
+          :tabTexts="['视频','影视综']"
           v-model:active-index="currentSlideItemIndex">
       </Indicator>
-      <SlideRowList v-model:active-index="currentSlideItemIndex" style="height: calc(100vh - 12rem);">
-        <SlideItem class="tab1"  style="overflow:auto;">
-          <Posters :list="list" v-if="list"></Posters>
-          <div class="empty" v-else>
-            <img src="../../../assets/img/icon/head-image.jpeg" alt="">
-            <div class="title">暂无内容</div>
-            <div class="subtitle">暂无观看历史记录</div>
-          </div>
+      <SlideRowList v-model:active-index="currentSlideItemIndex" class="SlideRowList">
+        <SlideItem class="tab1" style="overflow:auto;">
+          <Scroll class="Scroll"
+                  @pulldown="getHistoryVideo">
+            <Posters :list="historyVideo.list" v-if="historyVideo.total"></Posters>
+            <Loading :is-full-screen="false" v-if="loadingVideo"/>
+            <template v-else>
+              <NoMore v-if="historyVideo.list.length"/>
+              <div class="empty" v-else>
+                <img src="../../../assets/img/icon/none-bg1.webp" alt="">
+                <div class="title">暂无观看历史记录</div>
+              </div>
+            </template>
+          </Scroll>
         </SlideItem>
         <SlideItem class="tab2">
           <div class="empty">
-            <img src="../../../assets/img/icon/head-image.jpeg" alt="">
-            <div class="title">暂无内容</div>
-            <div class="subtitle">暂无观影历史记录</div>
+            <img src="../../../assets/img/icon/none-bg1.webp" alt="">
+            <div class="title">暂无观影历史记录</div>
           </div>
         </SlideItem>
       </SlideRowList>
@@ -37,26 +42,88 @@
 </template>
 <script>
 import Posters from "../../../components/Posters";
+import Scroll from "../../../components/Scroll";
+import NoMore from "../../../components/NoMore";
 
 export default {
   name: "lookHistory",
   components: {
-    Posters
+    NoMore,
+    Posters,
+    Scroll
   },
   data() {
     return {
+      loadingVideo: false,
+      loadingOther: false,
+      isClearHistoryVideo: false,
+      isClearHistoryOther: false,
       currentSlideItemIndex: 0,
-      list: 2,
+      pageSize: 15,
+      historyVideo: {
+        total: 0,
+        pageNo: 0,
+        list: []
+      },
+      historyOther: {
+        total: 0,
+        pageNo: 0,
+        list: []
+      }
+    }
+  },
+  computed: {
+    isClear() {
+      if (this.currentSlideItemIndex === 0) {
+        return this.historyVideo.list = []
+      }
+      return this.historyOther.list = []
     }
   },
-  computed: {},
   created() {
+    this.getHistoryVideo(true)
+    this.getHistoryOther(true)
   },
   methods: {
+    async getHistoryVideo(init = false) {
+      if (this.loadingVideo) return
+      if (this.isClearHistoryVideo) return
+      if (!init) {
+        if (this.historyVideo.total <= this.historyVideo.list.length) return
+        this.historyVideo.pageNo++
+      }
+      this.loadingVideo = true
+      let res = await this.$api.videos.historyVideo({pageNo: this.historyVideo.pageNo, pageSize: this.pageSize,})
+      console.log(res)
+      this.loadingVideo = false
+      if (res.code === this.SUCCESS) {
+        this.historyVideo.list = this.historyVideo.list.concat(res.data.list)
+        this.historyVideo.total = res.data.total
+      }
+    },
+    async getHistoryOther(init = false) {
+      if (this.loadingOther) return
+      if (this.isClearHistoryOther) return
+      this.loadingOther = true
+      if (!init) {
+        this.historyOther.pageNo++
+      }
+      let res = await this.$api.videos.historyOther({pageNo: this.historyOther.pageNo, pageSize: this.pageSize,})
+      this.loadingOther = false
+      if (res.code === this.SUCCESS) {
+        this.historyOther.list = this.historyOther.list.concat(res.data.list)
+        this.historyOther.total = res.data.total
+      }
+    },
     clear() {
-      this.$showConfirmDialog('确定清空？', '清空后，以往观看记录不再展示', 'gray',() => {
-        this.list = 0
-        console.log(this.list)
+      this.$showConfirmDialog('确定清空？', '清空后，以往观看记录不再展示', 'gray', () => {
+        if (this.currentSlideItemIndex === 0) {
+          this.historyVideo.list = []
+          this.isClearHistoryVideo = true
+          return
+        }
+        this.historyOther.list = []
+        this.isClearHistoryVideo = true
       })
     }
   }
@@ -79,19 +146,22 @@ export default {
   .content {
     padding-top: 6rem;
 
+    .SlideRowList, .Scroll {
+      height: calc(100vh - @indicator-height - @header-height) !important;
+    }
+
     .empty {
-      height: 100%;
+      height: 70vh;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-direction: column;
 
-      .title {
-        margin-top: 1rem;
-        font-size: 1.5rem;
+      img {
+        height: 12rem;
       }
 
-      .subtitle {
+      .title {
         font-size: 1.3rem;
         margin-top: 1rem;
         color: @second-text-color;