优化me页面

.gitignore

@@ -21,3 +21,4 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+/php_backend

src/api/videos.js

@@ -2,18 +2,19 @@ import request from "../utils/request";
 
 export default {
   me(params, data) {
-    return request({url: '/me', method: 'post', params, data})
+    return request({url: '/me', method: 'get', params, data})
   },
   my(params, data) {
-    return request({url: '/my', method: 'post', params, data})
+    // console.log('api - params',params)
+    return request({url: '/me/my', method: 'get', params, data})
   },
   private(params, data) {
-    return request({url: '/private', method: 'post', params, data})
+    return request({url: '/me/private1', method: 'get', params, data})
   },
   like(params, data) {
-    return request({url: '/like', method: 'post', params, data})
+    return request({url: '/me/like', method: 'get', params, data})
   },
   collect(params, data) {
-    return request({url: '/collect', method: 'post', params, data})
+    return request({url: '/me/collect', method: 'get', params, data})
   },
 }

src/components/Posters.vue

@@ -1,10 +1,14 @@
 <template>
   <div class="posters">
     <div class="poster-item" v-for="i in list">
-      <img class="poster" :src="i.src" alt="">
+      <img class="poster" :src="$imgPreview(i.poster)" alt="">
-      <div class="num">
+      <div class="num" v-if="mode === 'normal'">
         <img class="love" src="../assets/img/icon/love.svg" alt="">
-        <span>{{ likeNum(i.like) }}</span>
+        <span>{{ $likeNum(i.likeNum) }}</span>
+      </div>
+      <div v-else class="date">
+        <div class="day">{{ getDay(i.createTime) }}</div>
+        <div class="month">{{ getMonth(i.createTime) }}</div>
       </div>
     </div>
   </div>
@@ -20,14 +24,45 @@ export default {
       default: () => {
         return []
       }
+    },
+    mode: {
+      type: String,
+      default: 'normal'
     }
   },
   methods: {
-    likeNum(num) {
+    getDay(time) {
-      if (num < 1000) {
+      let date = new Date(time * 1000)
-        return num
+      return date.getDate()
-      } else {
+    },
-        return parseInt(num / 10000) + 'w'
+    getMonth(time) {
+      let date = new Date(time * 1000)
+      let month = date.getMonth() + 1
+      switch (month) {
+        case 1:
+          return '一月'
+        case 2:
+          return '二月'
+        case 3:
+          return '三月'
+        case 4:
+          return '四月'
+        case 5:
+          return '五月'
+        case 6:
+          return '六月'
+        case 7:
+          return '七月'
+        case 8:
+          return '八月'
+        case 9:
+          return '九月'
+        case 10:
+          return '十月'
+        case 11:
+          return '十一月'
+        case 12:
+          return '十二月'
       }
     }
   }
@@ -55,16 +90,37 @@ export default {
   .num {
     color: white;
     position: absolute;
-    bottom: 5px;
+    bottom: .5rem;
-    left: 5px;
+    left: .5rem;
     display: flex;
     align-items: center;
     font-size: 1.4rem;
 
     .love {
-      width: 14px;
+      width: 1.4rem;
-      height: 14px;
+      height: 1.4rem;
-      margin-right: 5px;
+      margin-right: .5rem;
+    }
+  }
+
+  .date {
+    position: absolute;
+    top: .5rem;
+    left: .5rem;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    font-size: 1.4rem;
+    color: black;
+    background: white;
+    padding: .6rem;
+    border-radius: .6rem;
+
+    .day{
+      font-weight: bold;
+    }
+    .month{
+      font-size: 1rem;
     }
   }
 }

src/config/index.js

@@ -1,3 +1,4 @@
 export default {
-  baseUrl: 'http://test.test.com'
+  baseUrl: 'http://192.168.0.105//index.php/v1',
+  filePreview:'http://192.168.0.105//static/uploads/'
 }

src/main.js

@@ -2,7 +2,7 @@ import * as Vue from 'vue'
 import App from './App.vue'
 import mitt from 'mitt'
 import './assets/scss/index.scss'
-import './mock'// 导入 mock 数据处理
+// import './mock'// 导入 mock 数据处理
 import api from './api'
 import router from "./router";
 import store from "./store";

src/mock/index.js

@@ -1,4 +1,6 @@
 import Mock from 'mockjs'
+import globalMethods from '../utils/global-methods'
+import {da} from "pinyin/data/dict-zi-web";
 
 Mock.setup({
   timeout: '500-1000'
@@ -48,13 +50,33 @@ Mock.Random.extend({
 }())
 
 let pageSize = 15
-!(function my() {
+Mock.mock(/my/, options => {
+  let params = globalMethods.$parseURL(options.url).params
+  params.pageNo = ~~params.pageNo
+  params.pageSize = ~~params.pageSize
+  params.total = ~~params.total
+  // console.log(params)
   // let data = {total: Mock.Random.natural(1, 20)}
   // data[`list|${data.total > pageSize ? pageSize : data.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}]
-  let data = {total: 14}
+  // data[`list|${data.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}]
-  data[`list|${data.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}]
+  let data = {
+    total: params.total === -1 ? 20 : params.total,
+    pageNo: params.pageNo,
+    pageSize: params.pageSize
+  }
+  let listLength = 0
+  if (params.pageNo !== 0) {
+    let remainder = data.total - (params.pageNo * params.pageSize)
+    listLength = remainder > params.pageSize ? params.pageSize : remainder
+  } else {
+    listLength = data.total > params.pageSize ? params.pageSize : data.total
+  }
+  data[`list|${listLength}`] = [{'like|10000-990000': 1000000, src: '@imgs'}]
+  // console.log(data)
   Mock.mock(/my/, Mock.mock({data, code: 200, msg: '',}))
-}())
+  return Mock.mock({data, code: 200, msg: '',})
+})
+
 
 !(function private1() {
   // let data = {total: Mock.Random.natural(1, 20)}

src/pages/me/Me2.vue

@@ -78,31 +78,89 @@
               v-model:active-index="contentIndex">
             <SlideItem class="SlideItem"
                        @touchmove="move"
+                       @scroll="scroll"
                        :style="isScroll?'overflow: auto;':''">
               <Posters v-if="videos.my.total !== -1" :list="videos.my.list"></Posters>
-              <Loading v-else :is-full-screen="false"></Loading>
+              <Loading v-if="loadings.loading0" :is-full-screen="false"></Loading>
-              <no-more/>
+              <no-more v-else/>
-            </SlideItem>
+            </SlideItem>
-            <SlideItem class="SlideItem"
+            <SlideItem class="SlideItem"
-                       @touchmove="move"
+                       @touchmove="'move'"
-                       :style="isScroll?'overflow: auto;':''">
+                       :style="isScroll?'overflow: auto;':''">
-              <Posters v-if="videos.private.total !== -1" :list="videos.private.list"></Posters>
+              <div class="notice">
-              <Loading v-else :is-full-screen="false"></Loading>
+                <img src="../../assets/img/icon/me/lock-gray.png" alt="">
-              <no-more/>
+                <span>只有你能看到设为私密的作品和日常</span>
+              </div>
+              <Posters v-if="videos.private.total !== -1" mode="private" :list="videos.private.list"></Posters>
+              <Loading v-if="loadings.loading1" :is-full-screen="false"></Loading>
+              <no-more v-else/>
             </SlideItem>
             <SlideItem class="SlideItem"
                        @touchmove="move"
                        :style="isScroll?'overflow: auto;':''">
+              <div class="notice">
+                <img src="../../assets/img/icon/me/lock-gray.png" alt="">
+                <span>只有你能看到自己的喜欢列表</span>
+              </div>
               <Posters v-if="videos.like.total !== -1" :list="videos.like.list"></Posters>
-              <Loading v-else :is-full-screen="false"></Loading>
+              <Loading v-if="loadings.loading2" :is-full-screen="false"></Loading>
-              <no-more/>
+              <no-more v-else/>
             </SlideItem>
             <SlideItem class="SlideItem"
                        @touchmove="move"
                        :style="isScroll?'overflow: auto;':''">
-              <Posters v-if="videos.collect.total !== -1" :list="videos.collect.list"></Posters>
+              <div class="notice">
-              <Loading v-else :is-full-screen="false"></Loading>
+                <img src="../../assets/img/icon/me/lock-gray.png" alt="">
-              <no-more/>
+                <span>只有你能看到自己的收藏列表</span>
+              </div>
+              <div class="collect" ref="collect">
+                <div class="video" v-if=" videos.collect.video.list.length">
+                  <div class="top">
+                    <div class="left">
+                      <img src="../../assets/img/icon/me/video-whitegray.png" alt="">
+                      <span>视频</span>
+                    </div>
+                    <div class="right">
+                      <span>全部</span>
+                      <back direction="right"></back>
+                    </div>
+                  </div>
+                  <div class="list">
+                    <div class="item"
+                         v-for="i in videos.collect.video.list.length>3?videos.collect.video.list.slice(0,3):videos.collect.video.list">
+                      <img class="poster" :src="$imgPreview(i.poster)" alt="">
+                      <div class="num">
+                        <img class="love" src="../../assets/img/icon/love.svg" alt="">
+                        <span>{{ $likeNum(i.likeNum) }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="audio" v-if=" videos.collect.video.list.length">
+                  <div class="top">
+                    <div class="left">
+                      <img src="../../assets/img/icon/me/music-whitegray.png" alt="">
+                      <span>音乐</span>
+                    </div>
+                    <div class="right">
+                      <span>全部</span>
+                      <back direction="right"></back>
+                    </div>
+                  </div>
+                  <div class="list">
+                    <div class="item"
+                         v-for="i in videos.collect.video.list.length>3?videos.collect.video.list.slice(0,3):videos.collect.video.list">
+                      <img class="poster" :src="$imgPreview(i.poster)" alt="">
+                      <div class="title">用户创作的原声用户创作的原声用户创作的原声
+                      </div>
+                    </div>
+                  </div>
+
+                </div>
+              </div>
+              <Loading v-if="loadings.loading3" :is-full-screen="false"></Loading>
+              <no-more v-else/>
             </SlideItem>
           </SlideRowList>
         </div>
@@ -215,6 +273,7 @@
 import Posters from '../../components/Posters'
 import Footer from "../../components/Footer";
 import Indicator from '../../components/Indicator'
+import {nextTick} from 'vue'
 
 export default {
   name: "Me",
@@ -246,7 +305,8 @@ export default {
       videos: {
         my: {
           list: [],
-          total: -1
+          total: -1,
+          pageNo: 0
         },
         private: {
           list: [],
@@ -257,11 +317,24 @@ export default {
           total: -1
         },
         collect: {
-          list: [],
+          video: {
-          total: -1
+            list: [],
+            total: -1,
+          },
+          audio: {
+            list: [],
+            total: -1,
+          }
         },
       },
-      slideRowListHeight: 0
+      pageSize: 15,
+      slideRowListHeight: 0,
+      loadings: {
+        loading0: false,
+        loading1: false,
+        loading2: false,
+        loading3: false,
+      },
     }
   },
   computed: {
@@ -287,42 +360,66 @@ export default {
       this.refs.headerHeight = this.$refs.header.offsetHeight
       this.refs.descHeight = this.$refs.desc.offsetHeight
       this.refs.defaultVideoSlideRowListHeight = this.$refs.videoSlideRowList.wrapperHeight
-      // this.refs.videoSlideRowListHeight = this.$refs.videoSlideRowList.wrapperHeight
       this.changeIndex(0, null)
     })
     this.videoItemHeight = this.bodyWidth / 3 * 1.2 + 2
     // console.log('videoItemHeight',this.videoItemHeight)
   },
   methods: {
-    async changeIndex(newVal, oldVal) {
+    async getScrollAreaHeight(index = this.contentIndex) {
-      // console.log('oldVal',oldVal)
+      let scrollAreaHeight = 0
-      if (this.videos[Object.keys(this.videos)[newVal]].total === -1) {
+      if (index === 3) {
-        let res
+        await nextTick(async () => {
-        switch (newVal) {
+          scrollAreaHeight = this.$refs.collect.clientHeight + 60 + 40
+        })
+      } else {
+        scrollAreaHeight = Math.ceil(this.videos[Object.keys(this.videos)[index]].list.length / 3) * this.videoItemHeight
+        switch (index) {
           case 0:
-            res = await this.$api.videos.my()
+            scrollAreaHeight += 60
-            if (res.code === this.SUCCESS_CODE) this.videos.my = res.data
-            this.$console(this.videos)
             break
           case 1:
-            res = await this.$api.videos.private()
+            scrollAreaHeight += 60 + 40
-            if (res.code === this.SUCCESS_CODE) this.videos.private = res.data
-            this.$console(this.videos)
             break
           case 2:
-            res = await this.$api.videos.like()
+            scrollAreaHeight += 60 + 40
-            if (res.code === this.SUCCESS_CODE) this.videos.like = res.data
-            this.$console(this.videos)
-            break
-          case 3:
-            res = await this.$api.videos.collect()
-            if (res.code === this.SUCCESS_CODE) this.videos.collect = res.data
-            this.$console(this.videos)
             break
         }
       }
-      let posterHeight = Math.ceil(this.videos[Object.keys(this.videos)[newVal]].total / 3) * this.videoItemHeight
+      return scrollAreaHeight
-      // console.log('posterHeight', posterHeight)
+    },
+    async changeIndex(newVal, oldVal) {
+      if (this.loadings['loading' + newVal]) return
+      let videoOb = this.videos[Object.keys(this.videos)[newVal]]
+      if (newVal === 3) {
+        if (videoOb.video.total === -1) {
+          this.loadings['loading' + newVal] = true
+          let res = await this.$api.videos.collect({pageNo: this.videos.my.pageNo, pageSize: this.pageSize,})
+          this.loadings['loading' + newVal] = false
+          if (res.code === this.SUCCESS_CODE) this.videos.collect = res.data
+        }
+      } else {
+        if (videoOb.total === -1) {
+          this.loadings['loading' + newVal] = true
+          let res
+          switch (newVal) {
+            case 0:
+              res = await this.$api.videos.my({pageNo: this.videos.my.pageNo, pageSize: this.pageSize,})
+              if (res.code === this.SUCCESS_CODE) this.videos.my = res.data
+              break
+            case 1:
+              res = await this.$api.videos.private({pageNo: this.videos.my.pageNo, pageSize: this.pageSize,})
+              if (res.code === this.SUCCESS_CODE) this.videos.private = res.data
+              break
+            case 2:
+              res = await this.$api.videos.like({pageNo: this.videos.my.pageNo, pageSize: this.pageSize,})
+              if (res.code === this.SUCCESS_CODE) this.videos.like = res.data
+              break
+          }
+          this.loadings['loading' + newVal] = false
+        }
+      }
+      let scrollAreaHeight = await this.getScrollAreaHeight(newVal)
 
       // debugger
 
@@ -332,24 +429,50 @@ export default {
         let screenSlideRowListHeight = this.slideRowListHeight + Math.abs(transformY)
         // console.log('slideRowListHeight', slideRowListHeight)
 // debugger
-        if (posterHeight + 60 < screenSlideRowListHeight) {
+        if (scrollAreaHeight < screenSlideRowListHeight) {
           this.refs.videoSlideRowListHeight = screenSlideRowListHeight
         }
-        if (posterHeight + 60 > screenSlideRowListHeight) {
+        if (scrollAreaHeight > screenSlideRowListHeight) {
-          this.refs.videoSlideRowListHeight = posterHeight + 60
+          this.refs.videoSlideRowListHeight = scrollAreaHeight
         }
-        if (posterHeight + 60 > this.refs.defaultVideoSlideRowListHeight) {
+        if (scrollAreaHeight > this.refs.defaultVideoSlideRowListHeight) {
           this.refs.videoSlideRowListHeight = this.refs.defaultVideoSlideRowListHeight
         }
       } else {
-        if (posterHeight + 60 < this.refs.defaultVideoSlideRowListHeight) {
+        if (scrollAreaHeight < this.refs.defaultVideoSlideRowListHeight) {
-          // this.$setCss(this.$refs.videoSlideRowList, 'height', posterHeight + 'px')
+          this.refs.videoSlideRowListHeight = scrollAreaHeight
-          this.refs.videoSlideRowListHeight = posterHeight + 60
         } else {
           this.refs.videoSlideRowListHeight = this.refs.defaultVideoSlideRowListHeight
         }
       }
     },
+    async loadMoreData() {
+      if (this.loadings['loading' + this.contentIndex]) return
+      let videoOb = this.videos[Object.keys(this.videos)[this.contentIndex]]
+      if (videoOb.total > videoOb.list.length) {
+        videoOb.pageNo++
+        this.loadings['loading' + this.contentIndex] = true
+        let res
+        switch (this.contentIndex) {
+          case 0:
+            res = await this.$api.videos.my({pageNo: videoOb.pageNo, pageSize: this.pageSize,})
+            break
+          case 1:
+            res = await this.$api.videos.private({pageNo: videoOb.pageNo, pageSize: this.pageSize,})
+            break
+          case 2:
+            res = await this.$api.videos.like({pageNo: videoOb.pageNo, pageSize: this.pageSize,})
+            break
+          case 3:
+            res = await this.$api.videos.collect({pageNo: videoOb.pageNo, pageSize: this.pageSize,})
+            break
+        }
+        this.loadings['loading' + this.contentIndex] = false
+        if (res.code === this.SUCCESS_CODE) {
+          videoOb.list = videoOb.list.concat(res.data.list)
+        }
+      }
+    },
     touchStart(e) {
       this.$refs.scroll.style.transition = 'none'
       this.fixedLocationY = this.startLocationY = e.touches[0].pageY
@@ -358,14 +481,24 @@ export default {
     move(e) {
       (!this.isScroll) && e.preventDefault();
     },
-    touchMove(e) {
+    async scroll() {
+      if (this.indicatorFixed) {
+        let scrollAreaHeight = await this.getScrollAreaHeight()
+        let SlideItems = document.querySelectorAll('.SlideItem')
+        let SlideItem = SlideItems[this.contentIndex]
+        if (scrollAreaHeight - this.refs.videoSlideRowListHeight < SlideItem.scrollTop + 60) {
+          this.loadMoreData()
+        }
+      }
+    },
+    async touchMove(e) {
       let canTransformY = this.refs.descHeight - this.floatHeight
       let touchMoveDistance = e.touches[0].pageY - this.startLocationY
       let pageMoveDistance = this.moveYDistance + touchMoveDistance * 1.2
-
       // console.log('move-pageMoveDistance', pageMoveDistance)
+      // console.log('move-touchMoveDistance', touchMoveDistance)
 
-
+      //页面已经滚动到头了，往下划动，要把header图放大
       if (pageMoveDistance > 0) {
         this.$refs.scroll.style.transform = `translate3d(0,0,0)`
         if (pageMoveDistance < 400) {
@@ -376,23 +509,40 @@ export default {
           this.moveYDistance = 400
         }
       } else {
-        let posterHeight = Math.ceil(this.videos[Object.keys(this.videos)[this.contentIndex]].total / 3) * this.videoItemHeight
+        let scrollAreaHeight = await this.getScrollAreaHeight()
-        if (this.refs.videoSlideRowListHeight > posterHeight + 60 && Math.abs(touchMoveDistance) > 30) {
+        //往下划动
-          this.$refs.scroll.style.transition = 'all .2s'
+        if (touchMoveDistance > 0) {
-          this.$refs.scroll.style.transform = `translate3d(0,0,0)`
+          //如果可滚动区的高度大于posterHeight，并且移动超过30，就直接滚到顶
-          this.indicatorFixed = this.floatShowName = this.floatFixed = this.isScroll = false
+          if (this.refs.videoSlideRowListHeight > scrollAreaHeight && Math.abs(touchMoveDistance) > 20) {
-          return;
+            this.$refs.scroll.style.transition = 'all .2s'
+            this.$refs.scroll.style.transform = `translate3d(0,0,0)`
+            this.indicatorFixed = this.floatShowName = this.floatFixed = this.isScroll = false
+            this.moveYDistance = 0
+            this.startLocationY = e.touches[0].pageY
+            this.changeIndex(this.contentIndex, this.contentIndex)
+            let SlideItems = document.querySelectorAll('.SlideItem')
+            SlideItems.forEach(SlideItem => {
+              SlideItem.style.overflow = 'auto'
+              SlideItem.scrollTop = 0
+            })
+            SlideItems.forEach(SlideItem => {
+              SlideItem.style.overflow = 'hidden'
+            })
+            return;
+          }
         }
-
-
         if (this.indicatorFixed) {
           let SlideItems = document.querySelectorAll('.SlideItem')
           let SlideItem = SlideItems[this.contentIndex]
-
           if (!this.isScroll) {
             SlideItem.style.overflow = 'auto'
             SlideItem.scrollTop = Math.abs(pageMoveDistance) - this.refs.descHeight + this.floatHeight
           }
+
+          if (scrollAreaHeight - this.refs.videoSlideRowListHeight < SlideItem.scrollTop + 60) {
+            this.loadMoreData()
+          }
+
           if (SlideItem.scrollTop === 0 && (e.touches[0].pageY - this.fixedLocationY) > 0) {
             this.isScroll = this.indicatorFixed = false
             SlideItem.style.overflow = 'hidden'
@@ -403,6 +553,7 @@ export default {
           if (this.slideRowListHeight > this.refs.videoSlideRowListHeight) return
           if (this.refs.defaultVideoSlideRowListHeight > this.refs.videoSlideRowListHeight) {
             let endTransformY = Math.abs(canTransformY) - (this.refs.defaultVideoSlideRowListHeight - this.refs.videoSlideRowListHeight)
+            console.log('endTransformY',endTransformY)
             let moveTransformY = Math.abs(pageMoveDistance) < Math.abs(endTransformY) ? pageMoveDistance : -endTransformY
             this.$refs.scroll.style.transform = `translate3d(0,${moveTransformY}px,0)`
             this.floatFixed = Math.abs(moveTransformY) > 100
@@ -424,7 +575,7 @@ export default {
       let canTransformY = this.refs.descHeight - this.floatHeight
       let touchMoveDistance = e.changedTouches[0].pageY - this.startLocationY
       let pageMoveDistance = this.moveYDistance + touchMoveDistance * 1.2
-      console.log('end-pageMoveDistance', pageMoveDistance)
+      // console.log('end-pageMoveDistance', pageMoveDistance)
 
       let endTransformY = Math.abs(canTransformY) - (this.refs.defaultVideoSlideRowListHeight - this.refs.videoSlideRowListHeight)
       if (this.indicatorFixed) {
@@ -438,6 +589,7 @@ export default {
           this.moveYDistance = 0
           this.floatShowName = this.floatFixed = this.isScroll = false
         } else {
+
           if (this.slideRowListHeight > this.refs.videoSlideRowListHeight) {
             return this.moveYDistance = 0
           }
@@ -497,7 +649,6 @@ export default {
               this.moveYDistance = 0
               this.indicatorFixed = this.floatShowName = this.floatFixed = this.isScroll = false
               let SlideItems = document.querySelectorAll('.SlideItem')
-              // let SlideItem = SlideItems[this.contentIndex]
               SlideItems.forEach(SlideItem => {
                 SlideItem.style.overflow = 'auto'
                 SlideItem.scrollTop = 0
@@ -566,13 +717,147 @@ export default {
   height: 100%;
   width: 100%;
 
-  .no-more {
+  .scroll {
-    font-size: 1.4rem;
+
-    padding: 10px;
+    .notice {
-    color: gray;
+      font-size: 1.2rem;
-    text-align: center;
+      height: 4rem;
+      color: $second-text-color;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      img {
+        height: 1.2rem;
+        margin-right: .5rem;
+      }
+    }
+
+    .collect {
+      .video {
+        background: $active-main-bg;
+        border-radius: .5rem;
+        margin: .7rem;
+        padding: 1rem;
+
+        .top {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 1rem;
+
+          .left {
+            display: flex;
+            align-items: center;
+            color: gainsboro;
+
+            img {
+              height: 2rem;
+              margin-right: .5rem;
+            }
+          }
+
+          .right {
+            display: flex;
+            align-items: center;
+            color: $second-text-color;
+          }
+        }
+
+        .list {
+          display: grid;
+          grid-template-columns: 33.33% 33.33% 33.33%;
+
+          .item {
+            height: calc(33.33vw * 1.3);
+            padding: .2rem;
+            overflow: hidden;
+            position: relative;
+
+            .poster {
+              border-radius: .4rem;
+              width: 100%;
+              height: 100%;
+              display: block;
+            }
+
+            .num {
+              color: white;
+              position: absolute;
+              bottom: .5rem;
+              left: .5rem;
+              display: flex;
+              align-items: center;
+              font-size: 1.4rem;
+
+              .love {
+                width: 1.4rem;
+                height: 1.4rem;
+                margin-right: .5rem;
+              }
+            }
+          }
+        }
+      }
+
+      .audio {
+        background: $active-main-bg;
+        border-radius: .5rem;
+        margin: .7rem;
+        padding: 1rem;
+
+        .top {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 1rem;
+
+          .left {
+            display: flex;
+            align-items: center;
+            color: gainsboro;
+
+            img {
+              height: 1.5rem;
+              margin-right: .5rem;
+            }
+          }
+
+          .right {
+            display: flex;
+            align-items: center;
+            color: $second-text-color;
+          }
+        }
+
+        .list {
+          display: grid;
+          grid-template-columns: 33.33% 33.33% 33.33%;
+
+          .item {
+            padding: .2rem;
+            overflow: hidden;
+            position: relative;
+
+            .poster {
+              border-radius: .4rem;
+              width: 100%;
+              height: calc((100vw - 3.4rem) / 3);
+              display: block;
+            }
+
+            .title {
+              margin-top: .5rem;
+              color: $second-text-color;
+            }
+          }
+        }
+      }
+    }
+
   }
 
+
   .float {
     position: fixed;
     top: 0;

src/utils/global-methods.js

@@ -3,6 +3,7 @@ import SelectDialog from "../components/dialog/SelectDialog";
 import SimpleConfirmDialog from "../components/dialog/SimpleConfirmDialog";
 import ConfirmDialog from "../components/dialog/ConfirmDialog";
 import Loading from "../components/Loading";
+import Config from '../config'
 
 export default {
   $showLoading() {
@@ -152,13 +153,13 @@ export default {
     return
     return console.log(JSON.stringify(v, null, 4))
   },
-  $randomNum(minNum,maxNum){
+  $randomNum(minNum, maxNum) {
-    switch(arguments.length){
+    switch (arguments.length) {
       case 1:
-        return parseInt(Math.random()*minNum+1,10);
+        return parseInt(Math.random() * minNum + 1, 10);
         break;
       case 2:
-        return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
+        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
         break;
       default:
         return 0;
@@ -191,5 +192,41 @@ export default {
     return new Promise((resolve, reject) => {
       setTimeout(resolve, duration)
     })
-  }
+  },
+  $parseURL(url) {
+    const a = document.createElement('a')
+    a.href = url
+    return {
+      host: a.hostname,
+      port: a.port,
+      query: a.search,
+      params: (function () {
+        const ret = {}
+        const seg = a.search.replace(/^\?/, '')
+          .split('&')
+        const len = seg.length
+        let i = 0
+        let s
+        for (; i < len; i++) {
+          if (!seg[i]) {
+            continue
+          }
+          s = seg[i].split('=')
+          ret[s[0]] = s[1]
+        }
+        return ret
+      }()),
+      hash: a.hash.replace('#', ''),
+    }
+  },
+  $imgPreview(url) {
+    return Config.filePreview + url
+  },
+  $likeNum(num) {
+    if (num < 1000) {
+      return num
+    } else {
+      return parseInt(num / 10000) + 'w'
+    }
+  },
 }

src/utils/request.js

@@ -8,7 +8,6 @@ import globalMethods from './global-methods'
 const instance = axios.create({
   baseURL: config.baseUrl,
   timeout: 60000,
-  withCredentials: true
 })
 // request拦截器
 instance.interceptors.request.use((config) => {