feat: add follows and followeds page

* add new api method.
* add new component.
* import user info popup display.

Plan.md

@@ -7,7 +7,7 @@
    - [x] 复制歌词
    - [x] 可以播放
    - [x] 可以转跳
-   - 搜索结果分页
+   - 搜索结果分页显示更多
 3. 分类歌单
    - [x] 更多功能
    - [x] 分页功能
@@ -16,29 +16,33 @@
    - 可评论
    - 可喜爱
    - 可回复评论
-5. 我的音乐
+5. 登陆
+   - [x] 登陆步骤条
+   - [x] 二维码过期提示
+6. 我的音乐
    - 未登陆时登陆按钮
-   - 关注页面
-   - 粉丝页面
-   - 个人信息显示
-6. 排行榜页面
+   - [x] 关注页面
+   - [x] 粉丝页面
+   - [x] 个人信息显示
+7. 排行榜页面
    - 按钮功能
    - [x] 转跳
    - [x] 标题展示
    - [x] 榜单规则显示
    - [x] 能去到 MV 页面
-7. mv 列表页
+   - [x] 展示更新时间
+8. mv 列表页
    - [x] 无限滚动
    - [x] mv 详情播放页
-8. 大功能条
+9. 大功能条
    - [x] 播放
    - [x] 收藏
-9. 小功能条
-   - [x] 播放
-   - [x] 下载
-   - [x] 分享
-   - [x] 添加
-10. [x] 懒加载
+10. 小功能条
+    - [x] 播放
+    - [x] 下载
+    - [x] 分享
+    - [x] 添加
+11. [x] 懒加载
 
 - [ ] 样式调整
 - [ ] 组件抽离

README.md

@@ -6,7 +6,7 @@ Some components use [element plus](https://github.com/element-plus/element-plus)
 
 API using [NeteaseCloudMusicApi](https://github.com/Binaryify/NeteaseCloudMusicApi)
 
-Deploying with docker + nginx, [Preview address](http://47.100.89.214:8080/MusicLibrary)
+Deploying with docker + nginx, [Project address](https://github.com/zlj-zz/yz-music) / [Preview address](http://47.100.89.214:8080/MusicLibrary)
 
 ![home](./demo/demo.gif)
 

src/api/user.js

@@ -10,3 +10,23 @@ export const getUserSubcount = () => requset.get("/user/subcount");
 
 /* 登陆后使用， 获取用户喜爱歌曲 ID 列表 */
 export const getUserLikeSongs = id => requset.get(`/likelist?uid=${id}`);
+
+/* 登陆后使用， 关注/取消关注用户
+ * id : 用户 id
+ * t : 1为关注,其他为取消关注
+ **/
+export const followUser = params => requset.get("follow", { params: params });
+
+/* 登陆后使用， 获取用户关注列表
+ * 必选参数 : uid : 用户 id
+ * limit : 返回数量 , 默认为 30
+ * offset : 偏移数量，用于分页 ,如 :( 页数 -1)*30, 其中 30 为 limit 的值 , 默认为 0 */
+export const followsList = params =>
+  requset.get("user/follows", { params: params });
+
+/*
+ * 必选参数 : uid : 用户 id
+ * limit : 返回数量 , 默认为 30
+ * lasttime : 返回数据的 lasttime ,默认-1,传入上一次返回结果的 lasttime,将会返回下一页的数据 */
+export const followedsList = params =>
+  requset.get("/user/followeds", { params: params });

src/components/common/InfoList.vue

+<template>
+  <div class="mod_part" id="similar" style="">
+    <div class="part__hd">
+      <h2 class="part__tit">{{ title }}</h2>
+    </div>
+    <div class="mod_singer_list">
+      <ul class="singer_list__list">
+        <li class="singer_list__item" v-for="songer in items" :key="songer.id">
+          <div class="singer_list__item_box">
+            <a
+              class="singer_list__cover js_singer"
+              hidefocus="true"
+              :title="songer.name"
+              @click="btnClick(songer)"
+            >
+              <img
+                class="singer_list__pic"
+                src="//y.gtimg.cn/mediastyle/global/img/singer_300.png?max_age=31536000"
+                v-lazy="songer.img"
+                :alt="songer.name"
+              />
+            </a>
+            <h3 class="singer_list__title">
+              <a
+                class="js_singer"
+                :title="songer.name"
+                @click="btnClick(songer)"
+                >{{ songer.name }}</a
+              >
+            </h3>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      default: "",
+    },
+    items: {
+      type: Array,
+      default: [],
+    },
+  },
+  methods: {
+    btnClick(item) {
+      this.$emit("btnClick", item);
+    },
+  },
+};
+</script>
+
+<style scoped>
+a:hover {
+  color: #31c27c;
+}
+ul,
+li {
+  margin: 0;
+  padding: 0;
+}
+.mod_singer_list {
+  overflow: hidden;
+  text-align: center;
+}
+.singer_list__list {
+  margin-right: -20px;
+  overflow: hidden;
+  zoom: 1;
+  margin-bottom: -24px;
+}
+
+.singer_list__item {
+  float: left;
+  width: 20%;
+  margin-bottom: 20px;
+  overflow: hidden;
+}
+.singer_list__cover,
+.singer_list__pic {
+  float: none;
+  display: block;
+  width: 140px;
+  height: 140px;
+  border-radius: 126px;
+}
+</style>

src/components/common/LoginOpt.vue

@@ -23,7 +23,7 @@
         登录
       </a>
     </span>
-    <!-- 用户信息 -->
+    <!-- popup 用户信息 -->
     <div
       class="popup_user"
       :class="isShowPopup ? 'drop' : ''"
@@ -44,10 +44,10 @@
           <div class="popup_user_data__name">
             <a class="">{{ $store.state.user.user.nickname }}</a>
           </div>
-          <div class="popup_user_data__lv" style="overflow: hidden">
-            <a class="js_vip_jump" rel="noopener" target="_blank"
-              >签名：{{ $store.state.user.user.signature }}
-            </a>
+          <div class="popup_user_data__lv">
+            <span rel="noopener">
+              签名：{{ $store.state.user.user.signature }}
+            </span>
           </div>
         </div>
       </div>
@@ -322,8 +322,14 @@ export default {
   text-overflow: ellipsis;
 }
 .popup_user_data__lv {
-  white-space: nowrap;
+  /*white-space: nowrap;*/
   margin-bottom: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: box;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
 }
 .popup_user_toolbar {
   padding: 13px 20px 6px;

src/components/common/ModListMenu.vue

@@ -8,6 +8,7 @@
       class="list_menu__item list_menu__add"
       title="添加到歌单"
       aria-haspopup="true"
+      v-if="kind == 0"
     >
       <el-dropdown trigger="click">
         <span class="el-dropdown-link">

src/views/musicLibrary/SongerDetail.vue

@@ -51,7 +51,7 @@
                   </span>
                 </h4>
                 <div class="playlist__other">{{ album.publishTime }}</div>
-                <a class="btn_operate_menu js_albumlist_more">
+                <a class="btn_operate_menu">
                   <span class="icon_txt">更多</span>
                 </a>
               </div>
@@ -79,7 +79,7 @@
                   <i class="mod_cover__icon_play"></i>
                 </a>
                 <h3 class="mv_list__title">
-                  <a class="js_mv" :title="mv.name">{{ mv.name }}</a>
+                  <a :title="mv.name">{{ mv.name }}</a>
                 </h3>
 
                 <div class="mv_list__info">
@@ -94,44 +94,12 @@
         </div>
       </div>
 
-      <div class="mod_part" id="similar" style="" v-if="simiSongers.length > 0">
-        <div class="part__hd">
-          <h2 class="part__tit">相似歌手</h2>
-        </div>
-        <div class="mod_singer_list">
-          <ul class="singer_list__list">
-            <li
-              class="singer_list__item"
-              v-for="songer in simiSongers"
-              :key="songer.id"
-            >
-              <div class="singer_list__item_box">
-                <a
-                  class="singer_list__cover js_singer"
-                  hidefocus="true"
-                  :title="songer.name"
-                  @click="gotoSongerDetail(songer.id)"
-                >
-                  <img
-                    class="singer_list__pic"
-                    src="//y.gtimg.cn/mediastyle/global/img/singer_300.png?max_age=31536000"
-                    v-lazy="songer.img"
-                    :alt="songer.name"
-                  />
-                </a>
-                <h3 class="singer_list__title">
-                  <a
-                    class="js_singer"
-                    :title="songer.name"
-                    @click="gotoSongerDetail(songer.id)"
-                    >{{ songer.name }}</a
-                  >
-                </h3>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </div>
+      <info-list
+        :title="'相似歌手'"
+        :items="simiSongers"
+        @btnClick="songerClick"
+        v-if="simiSongers.length > 0"
+      />
     </div>
 
     <div
@@ -157,6 +125,7 @@
 <script>
 import DetailInfoCard from "components/common/DetailInfoCard";
 import DetailSonglist from "components/common/DetailSonglist";
+import InfoList from "components/common/InfoList";
 import {
   getUserDetail,
   getSongerDetail,
@@ -255,12 +224,16 @@ export default {
         playSonglist(songs);
       });
     },
+    songerClick(songer) {
+      gotoSongerDetail(songer.id);
+    },
     gotoAlbumDetail,
     gotoSongerDetail,
   },
   components: {
     DetailInfoCard,
     DetailSonglist,
+    InfoList,
   },
 };
 </script>
@@ -318,32 +291,6 @@ ul {
   padding-bottom: 0;
 }
 
-.mod_singer_list {
-  overflow: hidden;
-  text-align: center;
-}
-.singer_list__list {
-  margin-right: -20px;
-  overflow: hidden;
-  zoom: 1;
-  margin-bottom: -24px;
-}
-
-.singer_list__item {
-  float: left;
-  width: 20%;
-  margin-bottom: 20px;
-  overflow: hidden;
-}
-.singer_list__cover,
-.singer_list__pic {
-  float: none;
-  display: block;
-  width: 140px;
-  height: 140px;
-  border-radius: 126px;
-}
-
 .mod_mv {
   height: 183px;
 }

src/views/my/Followeds.vue

-<template>followeds</template>
+<template>
+  <div class="main">
+    <info-list
+      :title="关注列表"
+      :items="followeds"
+      v-if="followeds.length > 0"
+    />
+    <el-empty description="还没有粉丝..." v-else></el-empty>
+  </div>
+</template>
+
+<script>
+import InfoList from "components/common/InfoList";
+import { followedsList } from "api";
+import { createUsers } from "common/utils";
+
+export default {
+  data() {
+    return {
+      lasttime: -1,
+      followeds: [],
+    };
+  },
+  created() {
+    this.getFans();
+  },
+  methods: {
+    getFans() {
+      let params = {
+        uid: this.id,
+        lasttime: this.lasttime,
+      };
+      followedsList(params).then((res) => {
+        //console.log(res);
+        this.followeds = createUsers(res.data.followeds);
+      });
+    },
+  },
+  computed: {
+    id() {
+      return this.$store.state.user.user.userId;
+    },
+  },
+  components: {
+    InfoList,
+  },
+};
+</script>

src/views/my/Follows.vue

-<template>follows</template>
+<template>
+  <div class="main">
+    <info-list :title="关注列表" :items="follows" v-if="follows.length > 0" />
+    <el-empty description="你还没有关注的人" v-else></el-empty>
+  </div>
+</template>
+
+<script>
+import InfoList from "components/common/InfoList";
+import { followsList } from "api";
+import { createUsers } from "common/utils";
+
+export default {
+  data() {
+    return {
+      lasttime: -1,
+      follows: [],
+    };
+  },
+  created() {
+    this.getFollows();
+  },
+  methods: {
+    getFollows() {
+      let params = { uid: this.id, lasttime: this.lasttime };
+      followsList(params).then((res) => {
+        //console.log(res);
+        let u = createUsers(res.data.follow);
+        this.follows = u;
+      });
+    },
+  },
+  computed: {
+    id() {
+      return this.$store.state.user.user.userId;
+    },
+  },
+  components: {
+    InfoList,
+  },
+};
+</script>