更新readme

2021-10-05 17:59:39 +08:00 · 2021-10-05 17:59:39 +08:00 · abc5b15ff5
commit abc5b15ff5
parent 5c9d1fc435
7 changed files with 219 additions and 78 deletions
--- a/README.md
+++ b/README.md
@ -6,13 +6,41 @@

 ## 开发进度

+&#9745;
+
 页面|进度
 ---|---
-首页| &#9745;
-首页|<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] 登录、注册
--- a/src/api/videos.js
+++ b/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})
+  },
 }
--- a/src/assets/less/variables.less
+++ b/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;
--- a/src/components/slide/Indicator.vue
+++ b/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;
--- a/src/mock/index.js
+++ b/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: '',
+  })
+})
--- a/src/pages/home/Music.vue
+++ b/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
--- a/src/pages/me/rightMenu/LookHistory.vue
+++ b/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;