debug

README.md

@@ -13,30 +13,24 @@
 首页|50%
 -- 音乐|☑
 -- 抖音音乐榜|☑
--- 搜索|50%;
+-- 搜索|50%
--- 直播|50%;
+-- 直播|50%
 朋友|0%
 消息|80%
+-- 私聊|☑
 我|90%
+-- 求更新|☑
 -- 关注|0
 -- 粉丝|0
 -- 编辑资料|☑
 -- 添加朋友|☑
--- 我的音乐|30%
+-- 我的音乐|50%
+-- 收藏视频\音乐|50%
 -- 抖音商城|0
--- 我的订单|0
+-- 右侧菜单子页面|10%
--- 钱包|0
+-- 设置|☑
--- 我的二维码|☑
+-- -- 子页面|☑
--- 我的二维码|☑
+登录\注册|☑
--- 设置|30%
-首页|
-首页|
-首页|
-首页|
-首页|
-首页|
-首页|
-首页|
 首页|
 
 ## 目标功能

src/assets/less/custom.less

@@ -60,6 +60,7 @@
   }
 
   .right {
+    max-width: 80%;
     display: flex;
     justify-content: space-between;
     align-items: center;

src/pages/me/Me.vue

@@ -225,26 +225,30 @@
             </div>
             <div class="line"></div>
 
-            <div class="li" @click="$nav('/me/right-menu/look-history')">
-              <img src="../../assets/img/icon/newicon/left_menu/clock.png" alt="">
-              <span>观看历史</span>
-            </div>
             <div class="li" @click="$nav('/my-card')">
               <img src="../../assets/img/icon/newicon/left_menu/qrcode.png" alt="">
               <span>我的二维码</span>
             </div>
-            <div class="li" @click="$nav('')">
+            <div class="li" @click="$nav('/me/right-menu/look-history')">
+              <img src="../../assets/img/icon/newicon/left_menu/time.png" alt="">
+              <span>观看历史</span>
+            </div>
+            <div class="li" @click="$no">
+              <img src="../../assets/img/icon/newicon/left_menu/clock.png" alt="">
+              <span>时间管理</span>
+            </div>
+            <div class="li" @click="$no">
               <img src="../../assets/img/icon/newicon/left_menu/workbench.png" alt="">
               <span>创作者服务中心</span>
             </div>
 
             <div class="line"></div>
 
-            <div class="li" @click="$nav('MyCard')">
+            <div class="li" @click="$no">
               <img src="../../assets/img/icon/newicon/left_menu/bytedance-mini-app.png" alt="">
               <span>小程序</span>
             </div>
-            <div class="li" @click="$nav('MyCard')">
+            <div class="li" @click="$no">
               <img src="../../assets/img/icon/newicon/left_menu/gongyi.png" alt="">
               <span>抖音公益</span>
             </div>
@@ -252,7 +256,7 @@
               <img src="../../assets/img/icon/newicon/left_menu/umbrella.png" alt="">
               <span>未成年保护工具</span>
             </div>
-            <div class="li" @click="$nav('MyCard')">
+            <div class="li" @click="$no">
               <img src="../../assets/img/icon/newicon/left_menu/headset.png" alt="">
               <span>我的客服</span>
             </div>
@@ -264,38 +268,38 @@
           <div v-else class="more-function">
             <div class="title">生活服务</div>
             <div class="functions">
-              <div class="function">
+              <div class="function" @click="$no">
                 <img src="../../assets/img/icon/newicon/left_menu/quan.png" alt="">
                 <span>卡券</span>
               </div>
-              <div class="function">
+              <div class="function" @click="$no">
                 <img src="../../assets/img/icon/newicon/left_menu/sd-card.png" alt="">
                 <span>免流量</span>
               </div>
-              <div class="function" @click="$nav('MyCollect')">
+              <div class="function" @click="$no">
                 <img src="../../assets/img/icon/newicon/left_menu/alarmmmmmmmmmmmm.png" alt="">
                 <span>视频彩铃</span>
               </div>
             </div>
             <div class="title">拓展功能</div>
             <div class="functions">
-              <div class="function" @click="$nav('MyCard')">
+              <div class="function" @click="$no">
                 <img src="../../assets/img/icon/newicon/left_menu/sun-one.png" alt="">
                 <span>我的动态</span>
               </div>
-              <div class="function">
+              <div class="function" @click="$no">
                 <img src="../../assets/img/icon/newicon/left_menu/download.png" alt="">
                 <span>我的缓存</span>
               </div>
-              <div class="function" @click="$nav('MyCard')">
+              <div class="function" @click="$no">
                 <img src="../../assets/img/icon/newicon/left_menu/hot.png" alt="">
                 <span>上热门</span>
               </div>
-              <div class="function" @click="$nav('MyCollect')">
+              <div class="function" @click="$no">
                 <img src="../../assets/img/icon/newicon/left_menu/shop.png" alt="">
                 <span>小店随心推</span>
               </div>
-              <div class="function" @click="$nav('MyCollect')">
+              <div class="function" @click="$no">
                 <img src="../../assets/img/icon/newicon/left_menu/yuandi.png" alt="">
                 <span>投教园地</span>
               </div>

src/pages/me/MyMusic.vue

@@ -16,15 +16,15 @@
             <div class="cover">
               <img v-lazy="$imgPreview(music.cover)" alt="">
             </div>
-            <div class="lyrics-wrapper" ref="lyrics-wrapper">
+            <div class="lyrics-wrapper" ref="lyrics-wrapper" @click="isFullLyrics = true">
               <div class="container">
-                <div class="lyrics" v-for="item in lyricsTexts">{{ item.c }}</div>
+                <div class="lyrics" v-for="item in lyricsFullTexts">{{ item.c }}</div>
               </div>
             </div>
-            <div class="lyrics-mask" @click="isFullLyrics = true"></div>
+            <!--            <div class="lyrics-mask" @click="isFullLyrics = true"></div>-->
           </div>
           <div class="lyrics-full" v-show="isFullLyrics" @click="isFullLyrics = false">
-            <div class="list">
+            <div class="list" style="overflow:auto;">
               <div class="item" v-for="item in lyricsFullTexts">{{ item.c }}</div>
             </div>
           </div>
@@ -36,7 +36,8 @@
               </div>
               <div class="right">
                 <div class="btn">
-                  <img src="../../assets/img/icon/star-white.png" alt="">
+                  <img src="../../assets/img/icon/star-white.png" v-show="!isCollect" @click="isCollect = !isCollect">
+                  <img src="../../assets/img/icon/star-yellow.png" v-show="isCollect" @click="isCollect = !isCollect">
                   <span>收藏</span>
                 </div>
                 <div class="btn">
@@ -72,7 +73,46 @@
           </div>
         </div>
       </SlideItem>
-      <SlideItem>
+      <SlideItem style="overflow: auto;">
+        <div class="my-collect">
+          <div class="play-all">
+            <div class="left">
+              <img src="../../assets/img/icon/me/play-all.webp" alt="">
+              <span>播放全部</span>
+              <span class="num">(2)</span>
+            </div>
+            <img class="menu" src="../../assets/img/icon/menu-white.png" alt="">
+          </div>
+          <div class="collect-list">
+            <div class="item" v-for="item in collectMusic">
+              <div class="left">
+                <div class="cover-wrapper">
+                  <img v-lazy="$imgPreview(item.cover)" alt="" class="cover">
+                </div>
+                <div class="desc">
+                  <span class="name">{{ item.name }}</span>
+                  <div class="author">{{ item.author }}</div>
+                  <div class="desc-bottom">
+                    <div class="tag">完整版</div>
+                    <div class="duration">{{ $duration(item.duration) }}</div>
+                  </div>
+                </div>
+              </div>
+              <div class="right">
+                <div class="collect-icon">
+                  <img src="../../assets/img/icon/star-white.png" v-show="!isCollect" @click="isCollect = !isCollect">
+                  <img src="../../assets/img/icon/star-yellow.png" v-show="isCollect" @click="isCollect = !isCollect">
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="recommend">
+            <span>推荐收藏</span>
+            <div class="right">
+              <span>自动播放</span>
+            </div>
+          </div>
+        </div>
       </SlideItem>
     </SlideRowList>
   </div>
@@ -81,19 +121,14 @@
 import {mapState} from "vuex";
 import globalMethods from "../../utils/global-methods";
 import {nextTick} from "vue";
-// import lyricsFaruxue from '../../assets/data/lyrics/faruxue.txt'
 import gaobaiqiqiu from '../../assets/data/lyrics/gaobaiqiqiu.lrc'
 
-
 export default {
   name: "MyMusic",
   components: {},
-  props: {
-    modelValue: false
-  },
   data() {
     return {
-      slideIndex: 0,
+      slideIndex: 1,
       music: {
         name: '告白气球',
         mp3: 'https://mp32.9ku.com/upload/128/2017/02/05/858423.mp3',
@@ -104,11 +139,14 @@ export default {
         is_collect: false,
         is_play: false,
       },
+      collectMusic: [],
+      recommendMusic: [],
       lyricsTexts: [],
       lyricsFullTexts: [],
       isPlay: false,
       isLoop: false,
       isMove: false,
+      isCollect: false,
       isFullLyrics: false,
       lastPageX: 0,
       pageX: 0,
@@ -124,6 +162,7 @@ export default {
     ...mapState(['bodyWidth'])
   },
   created() {
+    this.getCollectMusic()
   },
   mounted() {
     this.audio.src = this.music.mp3
@@ -178,6 +217,15 @@ export default {
     })
   },
   methods: {
+    async getCollectMusic() {
+      this.loading = true
+      let res = await this.$api.videos.collect()
+      this.loading = false
+      if (res.code === this.SUCCESS) {
+        this.collectMusic = res.data.music.list.slice(0, 2)
+        this.recommendMusic = res.data.music.list.slice(2, -1)
+      }
+    },
     createLrcObj(lrc) {
       let oLRC = {
         ti: "", //歌曲名
@@ -290,6 +338,12 @@ export default {
   color: white;
   font-size: 1.4rem;
 
+  .base-slide-item {
+    &:nth-child(1) {
+      background: rgb(136, 132, 133);
+    }
+  }
+
   .music-play {
     display: flex;
     flex-direction: column;
@@ -480,6 +534,110 @@ export default {
     }
   }
 
+  .my-collect {
+    padding: @padding-page;
+
+    .play-all {
+      margin-bottom: 2rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .left {
+        display: flex;
+        align-items: center;
+
+        img {
+          width: 3rem;
+          margin-right: 1rem;
+        }
+
+        .num {
+          color: gray;
+          margin-left: .5rem;
+        }
+      }
+
+      .menu {
+        height: 2rem;
+      }
+    }
+
+    .collect-list {
+      .item {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 1.5rem;
+
+        .left {
+          display: flex;
+
+          .cover-wrapper {
+            margin-right: 1rem;
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .cover {
+              border-radius: .2rem;
+              @width: 6rem;
+              width: @width;
+              object-fit: cover;
+              height: @width;
+            }
+          }
+
+          .desc {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+
+            .name {
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              overflow: hidden;
+              max-width: 40vw;
+            }
+
+            .author, .desc-bottom {
+              font-size: 1.2rem;
+              color: @second-text-color;
+            }
+
+            .desc-bottom {
+              display: flex;
+              align-items: center;
+
+              .tag {
+                font-size: 1rem;
+                background: @second-btn-color-tran;
+                padding: .2rem .5rem;
+                margin-right: .5rem;
+              }
+
+              .duration {
+                margin-right: 1.4rem;
+                position: relative;
+              }
+            }
+          }
+        }
+
+        .right {
+          display: flex;
+          align-items: center;
+
+          .collect-icon {
+            img {
+              width: 2.4rem;
+            }
+          }
+        }
+
+      }
+    }
+  }
 
 }
 </style>

src/pages/me/collect/VideoCollect.vue

@@ -6,33 +6,57 @@
       </template>
     </BaseHeader>
     <div class="content">
-      <Posters mode="normal" :list="videos"/>
+      <Scroll class="Scroll"
-      <NoMore/>
+              @pulldown="loadData">
+        <Posters mode="music" :list="videos"/>
+        <Loading :is-full-screen="false" v-if="loading"/>
+        <NoMore v-else/>
+      </Scroll>
     </div>
   </div>
 </template>
 <script>
 import resource from "../../../assets/data/resource";
 import Posters from "../../../components/Posters";
+import Scroll from "../../../components/Scroll";
 
 export default {
   name: "VideoCollect",
   components: {
-    Posters
+    Posters,
-  },
+    Scroll
-  props: {
-    modelValue: false
   },
   data() {
     return {
       loading: false,
-      videos: resource.my,
+      total: 0,
+      pageNo: 0,
+      pageSize: 15,
+      videos: [],
     }
   },
   computed: {},
   created() {
+    this.loadData(true)
   },
-  methods: {}
+  methods: {
+    async loadData(init = false) {
+      if (this.loading) return
+      if (!init) {
+        if (this.total <= this.videos.length) {
+          return
+        }
+        this.pageNo++
+      }
+      this.loading = true
+      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
+      }
+    },
+  }
 }
 </script>
 
@@ -50,7 +74,11 @@ export default {
   font-size: 1.4rem;
 
   .content {
-    padding-top: 6rem;
+    padding-top: @header-height;
+
+    .Scroll {
+      height: calc(100vh - @header-height)!important;
+    }
   }
 }
 </style>

src/pages/me/rightMenu/LookHistory.vue

@@ -75,10 +75,10 @@ export default {
   computed: {
     isClear() {
       if (this.currentSlideItemIndex === 0) {
-        return this.historyVideo.list = []
+        return this.historyVideo.list.length
       }
-      return this.historyOther.list = []
+      return this.historyOther.list.length
-    }
+    },
   },
   created() {
     this.getHistoryVideo(true)

src/pages/me/userinfo/EditUserInfo.vue

@@ -19,14 +19,14 @@
       <div class="row" @click="$nav('/edit-userinfo-item',{type:1})">
         <div class="left">名字</div>
         <div class="right">
-          <span>{{ isEmpty(userinfo.name) }}</span>
+          <span>{{ isEmpty(userinfo.nickname) }}</span>
           <back scale=".8" direction="right"></back>
         </div>
       </div>
       <div class="row" @click="$nav('/edit-userinfo-item',{type:2})">
         <div class="left">抖音号</div>
         <div class="right">
-          <span>{{ isEmpty(userinfo.account) }}</span>
+          <span>{{ isEmpty(userinfo.unique_id) }}</span>
           <back scale=".8" direction="right"></back>
         </div>
       </div>

src/pages/me/userinfo/EditUserInfoItem.vue

@@ -17,22 +17,22 @@
       <div v-if="type === 1">
         <div class="notice">我的名字</div>
         <div class="input-ctn" style="margin-bottom: 1rem;">
-          <input type="text" v-model="localUserinfo.name" placeholder="记得填写名字哦">
+          <input type="text" v-model="localUserinfo.nickname" placeholder="记得填写名字哦">
-            <img v-if="localUserinfo.name"
+            <img v-if="localUserinfo.nickname"
                style="transform: scale(2)"
                class="close" src="../../../assets/img/icon/newicon/close-and-bg.png" alt=""
-               @click="localUserinfo.name = ''">
+               @click="localUserinfo.nickname = ''">
         </div>
-        <div class="num">{{ localUserinfo.name.length }}/20</div>
+        <div class="num">{{ localUserinfo.nickname.length }}/20</div>
       </div>
       <div class="l-row" v-if="type === 2">
         <div class="notice">我的抖音号</div>
         <div class="input-ctn" style="margin-bottom: 1rem;">
-          <input type="text" v-model="localUserinfo.account">
+          <input type="text" v-model="localUserinfo.unique_id">
           <img
-              v-if="localUserinfo.account" style="transform: scale(2)"
+              v-if="localUserinfo.unique_id" style="transform: scale(2)"
               class="close" src="../../../assets/img/icon/newicon/close-and-bg.png" alt=""
-              @click="localUserinfo.account = ''">
+              @click="localUserinfo.unique_id = ''">
         </div>
         <div class="num">最多16个字，只允许包含字母、数字、下划线和点，30天内仅能修改一次</div>
       </div>
@@ -65,11 +65,11 @@ export default {
   },
   computed: {
     isChanged() {
-      if (this.type === 1) if (!this.localUserinfo.name) return false
+      if (this.type === 1) if (!this.localUserinfo.nickname) return false
       if (this.type === 2) if (!this.localUserinfo.desc) return false
-      if (this.userinfo.name !== this.localUserinfo.name) return true
+      if (this.userinfo.nickname !== this.localUserinfo.nickname) return true
       if (this.userinfo.desc !== this.localUserinfo.desc) return true
-      return this.userinfo.account !== this.localUserinfo.account;
+      return this.userinfo.unique_id !== this.localUserinfo.unique_id;
     },
     ...mapState({
       userinfo: 'userinfo',
@@ -89,7 +89,7 @@ export default {
     async save() {
       if (!this.isChanged) return
       if (this.type === 1) {
-        if (!this.localUserinfo.name) return this.$notice('名字不能为空')
+        if (!this.localUserinfo.nickname) return this.$notice('名字不能为空')
       }
       this.$showLoading()
       this.$store.commit('setUserinfo', this.localUserinfo)

src/store/index.js

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