优化me页面

src/assets/data/resource.js

@@ -287,7 +287,7 @@ export default {
         "create_time": "1630423555",
         "status": 1,
         "desc": "108线网红，福州人在上海，没有更新就是在吃土",
-        "is_private":0
+        "is_private": 0
       }
     },
     {
@@ -377,7 +377,7 @@ export default {
         "create_time": "1630423555",
         "status": 1,
         "desc": "谢谢关注\n浅谈&合作v：a1231231234\n旅行&报名v: 1231231891242\n新疆 西藏 四川摄影旅拍路线规划与设计",
-        "is_private":0
+        "is_private": 0
       }
     },
     {
@@ -14441,5 +14441,187 @@ export default {
       "music": null
     },
   ],
-  users: []
+  users: [],
+  music: [
+    {
+      name: '龙卷风',
+      "mp3": "http://im5.tongbu.com/rings/singerring/zt_uunGo_1/5605.mp3",
+      cover: require('../../assets/img/music-cover/1.png'),
+      author: '周杰伦',
+      duration: 99,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false,
+    },
+    {
+      name: '爱在西元前',
+      mp3: 'https://m3.8js.net:99/1916/501204165042405.mp3',
+      cover: require('../../assets/img/music-cover/2.png'),
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false,
+    },
+    {
+      name: '蜗牛',
+      mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/3684.mp3',
+      cover: require('../../assets/img/music-cover/3.png'),
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false,
+    },
+    {
+      name: '半岛铁盒',
+      mp3: 'https://m3.8js.net:99/2016n/46/94745.mp3',
+      cover: require('../../assets/img/music-cover/4.png'),
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false,
+    },
+    {
+      name: '轨迹',
+      mp3: 'https://m3.8js.net:99/1832/411204324135934.mp3',
+      cover: require('../../assets/img/music-cover/5.png'),
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false,
+    },
+    {
+      name: '七里香',
+      mp3: 'https://m3.8js.net:99/2016n/14/53717.mp3',
+      cover: require('../../assets/img/music-cover/6.png'),
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false,
+    },
+    {
+      name: '发如雪',
+      mp3: 'https://m3.8js.net:99/2014/211204142150965.mp3',
+      cover: require('../../assets/img/music-cover/7.png'),
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false,
+    },
+    {
+      name: '霍元甲',
+      mp3: 'https://m3.8js.net:99/1921/261204212643140.mp3',
+      cover: require('../../assets/img/music-cover/8.png'),
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false,
+    },
+    {
+      name: '千里之外(周杰伦/费玉清)',
+      mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/121.mp3',
+      cover: require('../../assets/img/music-cover/9.png'),
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false,
+    },
+    {
+      name: '菊花台',
+      mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/2022.mp3',
+      cover: require('../../assets/img/music-cover/10.png'),
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false,
+    },
+    {
+      name: '不能说的秘密',
+      mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/165.mp3',
+      cover: require('../../assets/img/music-cover/11.png'),
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false,
+    },
+    {
+      name: '牛仔很忙',
+      mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/219.mp3',
+      cover: require('../../assets/img/music-cover/12.png'),
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false,
+    },
+    {
+      name: '给我一首歌的时间',
+      mp3: 'https://m3.8js.net:99/1938/041204380445445.mp3',
+      cover: require('../../assets/img/music-cover/13.jpg'),
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false,
+    },
+    {
+      name: '烟花易冷',
+      mp3: 'https://m3.8js.net:99/1828/051204280535192.mp3',
+      cover: require('../../assets/img/music-cover/14.jpg'),
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false,
+    },
+    {
+      name: '惊叹号',
+      mp3: 'https://m3.8js.net:99/20111103/150.mp3',
+      cover: require('../../assets/img/music-cover/15.jpg'),
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false,
+    },
+    {
+      name: '明明就',
+      mp3: 'https://m3.8js.net:99/2016n/27/96537.mp3',
+      cover: require('../../assets/img/music-cover/16.jpg'),
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false,
+    },
+    {
+      name: '算什么男人',
+      mp3: 'https://m3.8js.net:99/20150107/429.mp3',
+      cover: require('../../assets/img/music-cover/17.jpg'),
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false,
+    },
+    {
+      name: '告白气球',
+      mp3: 'https://m3.8js.net:99/20161016/481.mp3',
+      cover: require('../../assets/img/music-cover/18.jpg'),
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false,
+    },
+  ],
 } 

src/mock/index.js

@@ -111,17 +111,15 @@ Mock.mock(/private1/, options => {
 })
 
 Mock.mock(/collect/, options => {
-  let page = getPage(options)
   return Mock.mock({
     data: {
-      pageNo: page.pageNo,
       video: {
         total: 0,
-        list: [],
+        list: resource.videos,
       },
-      audio: {
+      music: {
         total: 0,
-        list: [],
+        list: resource.music,
       }
     }, code: 200, msg: '',
   })

src/pages/me/Me.less

@@ -96,9 +96,15 @@
           }
 
           .right {
+            font-size: 1.4rem;
             display: flex;
             align-items: center;
             color: @second-text-color;
+
+            img {
+              height: 1.5rem;
+              width: 1.5rem;
+            }
           }
         }
 
@@ -113,6 +119,7 @@
             position: relative;
 
             .poster {
+              object-fit: cover;
               border-radius: .4rem;
               width: 100%;
               height: 100%;
@@ -138,7 +145,7 @@
         }
       }
 
-      .audio {
+      .music {
         background: @active-main-bg;
         border-radius: .5rem;
         padding: 1rem;
@@ -164,6 +171,11 @@
             display: flex;
             align-items: center;
             color: @second-text-color;
+
+            img {
+              height: 1.5rem;
+              width: 1.5rem;
+            }
           }
         }
 
@@ -263,7 +275,7 @@
       transform: translateY(-1rem);
       background: @main-bg;
       padding: 0 2rem 0 2rem;
-      border-radius: 1rem 1rem 0 0 ;
+      border-radius: 1rem 1rem 0 0;
 
       .head {
         width: 100%;
@@ -340,7 +352,7 @@
           margin-left: .6rem;
         }
 
-        .text{
+        .text {
           white-space: pre-wrap;
         }
       }

src/pages/me/Me.vue

@@ -35,18 +35,17 @@
                 <div class="heat">
                   <div class="text">
                     <span>获赞</span>
-                    <span class="num">18</span>
+                    <span class="num">{{ $likeNum(localAuthor.aweme_count) }}</span>
                   </div>
                   <div class="text">
                     <span>关注</span>
-                    <span class="num">8</span>
+                    <span class="num">{{ $likeNum(localAuthor.following_count) }}</span>
                   </div>
                   <div class="text">
                     <span>粉丝</span>
-                    <span class="num">62</span>
+                    <span class="num">{{ $likeNum(localAuthor.follower_count) }}</span>
                   </div>
                 </div>
-
               </div>
               <div class="description">
                 <p class="name f22 mt1r mb1r">{{ userinfo.nickname }}</p>
@@ -160,20 +159,20 @@
               </div>
               <div class="collect" ref="collect">
                 <div class="video" v-if=" videos.collect.video.list.length">
-                  <div class="top">
+                  <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>
+                      <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="">
+                      <img class="poster" :src="$imgPreview(i.video+videoPoster)" alt="">
                       <div class="num">
                         <img class="love" src="../../assets/img/icon/love.svg" alt="">
                         <span>{{ $likeNum(i.likeNum) }}</span>
@@ -182,7 +181,7 @@
                   </div>
                 </div>
 
-                <div class="audio" v-if=" videos.collect.video.list.length">
+                <div class="music" v-if=" videos.collect.music.list.length">
                   <div class="top">
                     <div class="left">
                       <img src="../../assets/img/icon/me/music-whitegray.png" alt="">
@@ -190,15 +189,14 @@
                     </div>
                     <div class="right">
                       <span>全部</span>
-                      <back direction="right"></back>
+                      <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">
+                         v-for="i in videos.collect.music.list.length>3?videos.collect.music.list.slice(0,3):videos.collect.music.list">
-                      <img class="poster" :src="$imgPreview(i.poster)" alt="">
+                      <img class="poster" :src="$imgPreview(i.cover)" alt="">
-                      <div class="title">用户创作的原声用户创作的原声用户创作的原声
+                      <div class="title">{{ i.name }}</div>
-                      </div>
                     </div>
                   </div>
                 </div>
@@ -376,7 +374,7 @@ export default {
             list: [],
             total: -1,
           },
-          audio: {
+          music: {
             list: [],
             total: -1,
           }
@@ -395,16 +393,21 @@ export default {
       sprint: 15,
       canScroll: true,
       localAuthor: {
+        school: {
+          name: '中央戏剧学院',
+          department: null,
+          joinTime: null,
+          education: null,
+          displayType: 1,
+        },
         "id": "93864497380",
         "unique_id_modify_time": "1630393144",
         "unique_id": "10040050",
         "favoriting_count": 143,
         "avatar": require('../../assets/img/icon/avatar/1.png'),
-        "city": "北京",
+        "city": "成都",
-        "school": "中央戏剧学院",
+        "province": '四川',
-        "province": null,
+        "country": "中国",
-        "country": "",
-        "location": "",
         "birthday": "2002-01-01",
         "cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
         "following_count": 66,
@@ -416,11 +419,10 @@ export default {
         "last_login_time": "1630423555",
         "create_time": "1630423555",
         "status": 1,
-        "desc": `一个普普通通学表演的
+        "desc": `一个普普通通学表演的\n看到的人都能开开心心`,
-        看到的人都能开开心心
+        "is_private": 1
-        `,
+      },
-        "is_private": 0
+      videoPoster: `?vframe/jpg/offset/0/w/${document.body.clientWidth}`
-      }
     }
   },
   computed: {
@@ -554,7 +556,8 @@ export default {
       if (this.loadings['loading' + this.contentIndex]) return
       console.log('到底了')
       let videoOb = this.videos[Object.keys(this.videos)[this.contentIndex]]
-      if (videoOb.total > videoOb.list.length) {
+
+      if (this.contentIndex !== 3 && videoOb.total > videoOb.list.length) {
         videoOb.pageNo++
         this.loadings['loading' + this.contentIndex] = true
         let res

src/store/index.js

@@ -38,7 +38,7 @@ const store = Vuex.createStore({
       "create_time": "1630423555",
       "status": 1,
       "desc": `一个普普通通学表演的\n看到的人都能开开心心`,
-      "is_private": 0
+      "is_private": 1
     },
     friends: {
       "all": [