From a8f746584eed582c422af7af12d7d8cd8604ce65 Mon Sep 17 00:00:00 2001
From: Zachary <zlj19971222@outlook.com>
Date: Sat, 20 Feb 2021 05:27:13 +0800
Subject: [PATCH] update

* add playlist detail page
* add DetailInfoCard component
---
 src/assets/css/base.css                   |   3 -
 src/assets/css/fakeqqmusic.css            |   2 +-
 src/components/common/DetailInfoCard.vue  | 191 ++++++++++++++
 src/components/common/Player.vue          |  28 +-
 src/components/content/RecommendedBar.vue |  15 +-
 src/router/index.js                       |   4 +-
 src/views/musicLibrary/AlbumDetail.vue    |  84 +-----
 src/views/musicLibrary/PlaylistDetail.vue | 304 ++++++++++++++++++++++
 src/views/musicLibrary/SongDetail.vue     |  92 +------
 src/views/musicLibrary/SongerDetail.vue   |  86 +-----
 10 files changed, 554 insertions(+), 255 deletions(-)
 create mode 100644 src/components/common/DetailInfoCard.vue
 create mode 100644 src/views/musicLibrary/PlaylistDetail.vue

diff --git a/src/assets/css/base.css b/src/assets/css/base.css
index ce17d70..a412ab5 100644
--- a/src/assets/css/base.css
+++ b/src/assets/css/base.css
@@ -14,9 +14,6 @@ a {
   color: #000;
   text-decoration: none;
 }
-a:hover {
-  color: #31c27c;
-}
 
 li {
   list-style: none;
diff --git a/src/assets/css/fakeqqmusic.css b/src/assets/css/fakeqqmusic.css
index ed49f38..81a0b31 100644
--- a/src/assets/css/fakeqqmusic.css
+++ b/src/assets/css/fakeqqmusic.css
@@ -852,7 +852,7 @@ img .playlist__pic {
 .data_info__item {
   float: left;
   line-height: 27px;
-  width: 166px;
+  width: 200px;
   margin-right: 10px;
   white-space: nowrap;
   overflow: hidden;
diff --git a/src/components/common/DetailInfoCard.vue b/src/components/common/DetailInfoCard.vue
new file mode 100644
index 0000000..47538cb
--- /dev/null
+++ b/src/components/common/DetailInfoCard.vue
@@ -0,0 +1,191 @@
+<template>
+  <div class="mod_data">
+    <span class="data__cover" id="logo">
+      <!-- 头像 S-->
+      <img
+        class="data__photo"
+        onerror="this.src='//y.gtimg.cn/mediastyle/global/img/playlist_300.png?max_age=31536000';this.onerror=null;"
+        :src="obj.img"
+        :alt="obj.name"
+        :class="isSonger ? 'songer__photo' : ''"
+      />
+      <i class="data__cover_mask" v-if="cardType == 'album'"></i>
+    </span>
+    <div class="data__cont">
+      <div class="data__name js_box">
+        <h1 id="p_name_show" class="data__name_txt" :title="obj.name">
+          {{ obj.name }}
+        </h1>
+      </div>
+      <!-- 名字 -->
+      <div class="data__singer" v-if="cardType != 'songer'">
+        <i class="icon_singer sprite"></i>
+        <a class="data__singer_txt" v-if="obj.creator" :title="obj.creator">{{
+          obj.creator
+        }}</a>
+        <a
+          class="data__singer_txt"
+          v-if="obj.artistsText"
+          :title="obj.artistsText"
+          >{{ obj.artistsText }}</a
+        >
+      </div>
+      <!-- 描述信息 -->
+      <div class="data__desc" id="singer_desc" v-if="cardType == 'songer'">
+        <div class="data__desc_txt" id="short_desc">
+          {{ obj.desc }}
+        </div>
+        <a href="javascript:;" class="js_desc" @click="moreClick">[更多]</a>
+      </div>
+      <!-- Info -->
+      <ul class="data__info" v-if="cardType != 'songer'">
+        <li class="data_info__item js_box" style="display: ">
+          <div class="data_tag_box" v-if="obj.tags">
+            标签：<span id="choosebox1">
+              <a
+                class="data_info__tags js_jump"
+                v-for="tag in obj.tags"
+                :key="tag"
+                >{{ tag }}
+              </a>
+            </span>
+          </div>
+        </li>
+        <li class="data_info__item" v-if="obj.albumName">
+          专辑：<a class="js_album" :title="obj.albumName">{{
+            obj.albumName
+          }}</a>
+        </li>
+        <li class="data_info__item" v-if="obj.type">分类：{{ obj.type }}</li>
+        <li class="data_info__item" v-if="obj.version">
+          类型：{{ obj.version }}
+        </li>
+        <li class="data_info__item" v-if="obj.durationText">
+          时长：{{ obj.durationText }}
+        </li>
+        <!--li class="data_info__item">创建时间：2018-03-29</li-->
+        <li class="data_info__item" v-if="obj.playCount">
+          播放量：{{ obj.playCount }}
+        </li>
+        <li class="data_info__item" v-if="obj.shareCount">
+          收藏量：{{ obj.subscribedCount }}
+        </li>
+        <li class="data_info__item" v-if="obj.shareCount">
+          分享量：{{ obj.shareCount }}
+        </li>
+        <li class="data_info__item" v-if="obj.company">
+          唱片公司：<span>{{ obj.company }}</span>
+        </li>
+        <li class="data_info__item" v-if="obj.publishTime">
+          发行时间：{{ obj.publishTime }}
+        </li>
+      </ul>
+
+      <ul class="mod_data_statistic" v-if="cardType == 'songer'">
+        <li class="data_statistic__item">
+          <a class="js_goto_tab">
+            <span class="data_statistic__tit">单曲</span>
+            <strong class="data_statistic__number">{{ obj.musicSize }}</strong>
+          </a>
+        </li>
+
+        <li class="data_statistic__item">
+          <a class="js_goto_tab">
+            <span class="data_statistic__tit">专辑</span>
+            <strong class="data_statistic__number">{{ obj.albumSize }}</strong>
+          </a>
+        </li>
+
+        <li class="data_statistic__item data_statistic__item--last">
+          <a class="js_goto_tab">
+            <span class="data_statistic__tit">MV</span>
+            <strong class="data_statistic__number">{{ obj.mvSize }}</strong>
+          </a>
+        </li>
+      </ul>
+
+      <div class="data__actions" v-if="cardType != 'songer'">
+        <a class="mod_btn_green js_all_play" @click="btnClick('all')">
+          <i class="mod_btn_green__icon_play"></i>
+          {{ cardType == "song" ? "播放" : "播放全部" }}
+        </a>
+        <a class="mod_btn js_fav_taoge" @click="btnClick('collection')">
+          <i class="mod_btn__icon_like"></i>收藏
+        </a>
+        <a
+          class="mod_btn js_into_comment"
+          href="#comment_box"
+          @click="btnClick('comment')"
+        >
+          <i class="mod_btn__icon_comment"></i>评论()
+        </a>
+        <a
+          href="javascript:;"
+          class="mod_btn js_more"
+          @click="btnClick('more')"
+        >
+          <i class="mod_btn__icon_menu"></i>更多
+        </a>
+      </div>
+      <div class="data__actions" v-if="cardType == 'songer'">
+        <a class="mod_btn_green js_singer_radio" @click="btnClick('hot')">
+          <i class="mod_btn_green__icon_play"></i>播放歌手热门歌曲
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    obj: {
+      type: Object,
+      default: {},
+    },
+    cardType: {
+      type: String,
+      default: "song",
+    },
+  },
+  methods: {
+    btnClick(v) {
+      this.$emit("btnClick", v);
+    },
+    moreClick() {
+      this.$emit("moreClick", true);
+    },
+  },
+};
+</script>
+
+<style scoped>
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+li,
+ul {
+  margin: 0;
+  margin-right: 0px;
+  padding: 0;
+}
+
+.songer__photo {
+  border-radius: 999px;
+}
+
+.data_statistic__item {
+  display: inline-block;
+  border-right: solid 1px #c9c9c9;
+  text-align: center;
+  padding-right: 20px;
+  margin-right: 20px;
+  font-size: 18px;
+}
+.data_statistic__item--last {
+  border-right: 0 none;
+}
+</style>
diff --git a/src/components/common/Player.vue b/src/components/common/Player.vue
index c9f1360..4c41127 100644
--- a/src/components/common/Player.vue
+++ b/src/components/common/Player.vue
@@ -51,10 +51,11 @@
               hidefocus="true"
               class="f-thide name fc1 f-fl"
               :title="currentSong.name"
+              @click="gotoSongDetail(currentSong.id)"
               >{{ currentSong.name }}</a
             >
             <span class="by f-thide f-fl">
-              <span title="Santa_SA/马也_Crabbit">
+              <span :title="currentSong.artistsText">
                 <a v-if="hasCurrentSong" class="" hidefocus="true">
                   {{ currentSong.artistsText }}
                 </a>
@@ -110,17 +111,9 @@
               ></span>
             </div>
           </div>
+          <a hidefocus="true" class="icn icn-vol" @click="clickVolBtn"></a>
           <a
-            href="javascript:;"
-            hidefocus="true"
-            data-action="volume"
-            class="icn icn-vol"
-            @click="clickVolBtn"
-          ></a>
-          <a
-            href="javascript:;"
             hidefocus="true"
-            data-action="mode"
             class="icn"
             :class="currentMode.icon"
             :title="currentMode.name"
@@ -128,12 +121,7 @@
           ></a>
           <span class="add f-pr">
             <span class="tip" style="display: none">已添加到播放列表</span>
-            <a
-              href="javascript:;"
-              title="播放列表"
-              hidefocus="true"
-              data-action="panel"
-              class="icn icn-list s-fc3"
+            <a title="播放列表" hidefocus="true" class="icn icn-list s-fc3"
               >{{ playlist.length }}
             </a>
           </span>
@@ -294,6 +282,14 @@ export default {
         this.$store.commit("music/setPlayingState", true);
       }
     },
+    gotoSongDetail(id) {
+      console.log(id);
+      this.$router.push({
+        path: "/musicLibrary/songDetail",
+        query: { id: id },
+      });
+    },
+    gotoSongerDetail(id) {},
   },
   computed: {
     audio() {
diff --git a/src/components/content/RecommendedBar.vue b/src/components/content/RecommendedBar.vue
index db49c9f..dfb51f7 100644
--- a/src/components/content/RecommendedBar.vue
+++ b/src/components/content/RecommendedBar.vue
@@ -25,9 +25,9 @@
             />
           </a>
           <h4 class="">
-            <span class=""
-              ><a href="">{{ item.name }}</a></span
-            >
+            <span class="">
+              <a @click="gotoPlaylistDetail(item.id)">{{ item.name }}</a>
+            </span>
           </h4>
           <div class="">播放量：{{ processCount(item.playCount) }}</div>
         </li>
@@ -126,6 +126,12 @@ export default {
         });
       });
     },
+    gotoPlaylistDetail(id) {
+      this.$router.push({
+        path: "/musicLibrary/playlistDetail",
+        query: { id: id },
+      });
+    },
   },
 };
 </script>
@@ -201,4 +207,7 @@ export default {
   filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#4C000000', endColorstr='#4C000000');
   background-color: rgba(0, 0, 0, 0.3);
 }
+a:hover {
+  color: #31c27c;
+}
 </style>
diff --git a/src/router/index.js b/src/router/index.js
index 0a24f26..e535dd1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -11,6 +11,7 @@ const MV = () => import("views/musicLibrary/MV");
 const SongerDetail = () => import("views/musicLibrary/SongerDetail");
 const SongDetail = () => import("views/musicLibrary/SongDetail");
 const AlbumDetail = () => import("views/musicLibrary/AlbumDetail");
+const PlaylistDetail = () => import("views/musicLibrary/PlaylistDetail");
 
 const My = () => import("views/My");
 
@@ -33,7 +34,8 @@ const routes = [
       { path: "mv", component: MV },
       { path: "songerDetail", name: "songerDetail", component: SongerDetail },
       { path: "songDetail", component: SongDetail },
-      { path: "albumDetail", component: AlbumDetail }
+      { path: "albumDetail", component: AlbumDetail },
+      { path: "playlistDetail", component: PlaylistDetail }
     ]
   },
   {
diff --git a/src/views/musicLibrary/AlbumDetail.vue b/src/views/musicLibrary/AlbumDetail.vue
index 1e05d56..8c52756 100644
--- a/src/views/musicLibrary/AlbumDetail.vue
+++ b/src/views/musicLibrary/AlbumDetail.vue
@@ -1,76 +1,7 @@
 <template>
   <div class="main">
-    <div
-      class="mod_data"
-      itemscope=""
-      itemtype="http://schema.org/MusicRecording"
-    >
-      <span class="data__cover">
-        <img
-          id="albumImg"
-          onerror="this.src='//y.gtimg.cn/mediastyle/global/img/album_300.png?max_age=31536000';this.onerror=null;"
-          :src="album.img"
-          :alt="album.name"
-          class="data__photo"
-        />
-        <i class="data__cover_mask"></i>
-      </span>
-      <div class="data__cont">
-        <div class="data__name">
-          <h1 class="data__name_txt" :title="album.name">{{ album.name }}</h1>
-        </div>
-
-        <div class="data__singer">
-          <i class="icon_singer sprite"></i
-          ><a
-            class="js_singer data__singer_txt"
-            itemprop="byArtist"
-            :title="album.artists"
-            >{{ album.artists }}</a
-          >
-        </div>
-
-        <ul class="data__info">
-          <li class="data_info__item">类型：{{ album.type }}</li>
-
-          <li class="data_info__item data_info__item--even">语种：国语</li>
-
-          <li class="data_info__item">发行时间：2021-02-13</li>
-
-          <li class="data_info__item data_info__item--even">
-            唱片公司：<span>{{ album.company }}</span>
-          </li>
-        </ul>
+    <detail-info-card :obj="album" :cardType="'album'" @btnClick="cardClick" />
 
-        <div class="data__actions" role="toolbar">
-          <a class="mod_btn_green js_all_play" @click="playAll">
-            <i class="mod_btn_green__icon_play"></i>播放全部
-          </a>
-
-          <a
-            href="javascript:;"
-            class="mod_btn js_fav_album"
-            data-stat="y_new.album.header.love"
-            data-status="0"
-            ><i class="mod_btn__icon_like"></i>收藏</a
-          >
-          <a
-            class="mod_btn js_into_comment"
-            data-stat="y_new.album.gotocomment"
-            href="#comment_box"
-            ><i class="mod_btn__icon_comment"></i>评论(15)</a
-          >
-          <a
-            href="javascript:;"
-            class="mod_btn js_more"
-            data-mid="000QQkw74FD8iE"
-            data-id="17519496"
-            data-stat="y_new.album.header.more"
-            ><i class="mod_btn__icon_menu"></i>更多</a
-          >
-        </div>
-      </div>
-    </div>
     <div class="detail_layout">
       <div class="detail_layout__main">
         <div class="mod_songlist">
@@ -269,9 +200,10 @@
 </template>
 
 <script>
+import DetailInfoCard from "components/common/DetailInfoCard";
 import ModListMenu from "components/common/ModListMenu";
 import { getAlbum } from "api";
-import { createSong, playSonglist } from "common/utils";
+import { createSong, playSonglist, formatDate } from "common/utils";
 
 export default {
   data() {
@@ -294,11 +226,11 @@ export default {
           name: ds.album.name,
           img: ds.album.picUrl,
           desc: ds.album.description,
-          artists: ds.album.artist.name,
+          artistsText: ds.album.artist.name,
           type: ds.album.type,
           version: ds.album.subType,
           company: ds.album.company,
-          publishTime: ds.album.publishTime,
+          publishTime: formatDate(ds.album.publishTime, "yy-MM-dd"),
         };
         this.album = album;
         console.log(album);
@@ -321,8 +253,14 @@ export default {
     playAll() {
       playSonglist(this.songs);
     },
+    cardClick(v) {
+      if (v == "all") {
+        this.playAll();
+      }
+    },
   },
   components: {
+    DetailInfoCard,
     ModListMenu,
   },
 };
diff --git a/src/views/musicLibrary/PlaylistDetail.vue b/src/views/musicLibrary/PlaylistDetail.vue
new file mode 100644
index 0000000..8df56de
--- /dev/null
+++ b/src/views/musicLibrary/PlaylistDetail.vue
@@ -0,0 +1,304 @@
+<template>
+  <div class="playlist-main">
+    <detail-info-card
+      :obj="playlist"
+      :cardType="'playlist'"
+      @btnClick="cardClick"
+    />
+
+    <div class="detail_layout">
+      <div class="detail_layout__main js_main">
+        <div class="mod_songlist">
+          <ul class="songlist__header">
+            <li class="songlist__edit songlist__edit--check sprite">
+              <input type="checkbox" class="songlist__checkbox js_check_all" />
+            </li>
+            <li class="songlist__header_name">歌曲</li>
+            <li class="songlist__header_author">歌手</li>
+            <li class="songlist__header_album">专辑</li>
+            <li class="songlist__header_time">时长</li>
+          </ul>
+
+          <ul class="songlist__list">
+            <li v-for="(song, idx) in songs" :key="song.id">
+              <div
+                onmouseover="this.className=(this.className+' songlist__item--hover')"
+                onmouseout="this.className=this.className.replace(/ songlist__item--hover/, '')"
+                class="songlist__item"
+                :claa="(idx + 1) % 2 == 0 ? 'songlist__item--even' : ''"
+              >
+                <div class="songlist__edit songlist__edit--check sprite">
+                  <input type="checkbox" class="songlist__checkbox" />
+                </div>
+                <div class="songlist__number">{{ idx + 1 }}</div>
+                <div class="songlist__songname">
+                  <span class="songlist__songname_txt"
+                    ><a class="js_song" :title="song.name"
+                      >{{ song.name
+                      }}<span class="songlist__song_txt"></span></a
+                  ></span>
+
+                  <!-- mod list menu -->
+                  <mod-list-menu :song="song" />
+                </div>
+
+                <div class="songlist__artist" title="Dan Gibson's Solitudes">
+                  <a class="singer_name" :title="song.artistsText">{{
+                    song.artistsText
+                  }}</a>
+                </div>
+                <div class="songlist__album">
+                  <a class="album_name" :title="song.albumName">{{
+                    song.albumName
+                  }}</a>
+                </div>
+                <div class="songlist__time">{{ song.durationText }}</div>
+                <div class="songlist__other"></div>
+                <a
+                  href="javascript:;"
+                  class="songlist__delete js_delete"
+                  data-confirm="1"
+                  title="删除"
+                  ><span class="icon_txt">删除</span></a
+                >
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="detail_layout__other">
+        <div class="mod_about js_box" id="album_desc" style="display: ">
+          <h3 class="about__tit">简介</h3>
+          <div class="about__cont">
+            <p>
+              {{ playlist.desc }}
+            </p>
+          </div>
+          <!-- <a
+            href="javascript:;"
+            class="about__more"
+            data-stat="y_new.gedan.moreinfo"
+            data-left="0"
+            data-top="-187"
+            data-target="popup_data_detail"
+            style="display: "
+            >[更多]</a
+          > -->
+          <a href="javascript:;" class="btn_edit js_edit" style="display: none"
+            ><i class="icon_txt">编辑</i></a
+          >
+        </div>
+
+        <div class="other_part" id="similaralbum" style="display: none">
+          <h3 class="other_part__tit">相似歌单</h3>
+          <div class="mod_playlist">
+            <ul class="playlist__list"></ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import DetailInfoCard from "components/common/DetailInfoCard";
+import ModListMenu from "components/common/ModListMenu";
+import { getPlayList, getPlaylistDetial, getSongDetail } from "api";
+import { processCount, createSong, playSonglist } from "common/utils";
+
+export default {
+  data() {
+    return {
+      id: this.$route.query.id,
+      playlist: {},
+      songs: [],
+    };
+  },
+  created() {
+    this.init();
+  },
+  methods: {
+    init() {
+      getPlaylistDetial(this.id).then((res) => {
+        console.log(res);
+        let d = res.data.playlist;
+        this.playlist = {
+          id: d.id,
+          name: d.name,
+          img: d.coverImgUrl,
+          desc: d.description,
+          creator: d.creator.nickname,
+          creatorId: d.creator.userId,
+          tags: d.creator.expertTags,
+          playCount: processCount(d.playCount),
+          subscribedCount: processCount(d.subscribedCount),
+          shareCount: processCount(d.shareCount),
+        };
+        console.log(this.playlist);
+
+        let trackIds = res.data.playlist.trackIds.map(({ id }) => id);
+        let songDetails = getSongDetail(trackIds.slice(0, 500)).then((res) => {
+          let songs = res.data.songs.map(({ id, name, al, ar, mv, dt }) => {
+            return createSong({
+              id,
+              name,
+              artists: ar,
+              duration: dt,
+              mvId: mv,
+              albumName: al.name,
+              img: al.picUrl,
+            });
+          });
+          this.songs = songs;
+          console.log(songs);
+        });
+      });
+    },
+    playAll() {
+      playSonglist(this.songs);
+    },
+    cardClick(v) {
+      if (v == "all") this.playAll();
+    },
+  },
+  components: {
+    DetailInfoCard,
+    ModListMenu,
+  },
+};
+</script>
+
+<style scoped>
+.playlist-main,
+.section_inner {
+  z-index: 2;
+  max-width: 1200px;
+  margin: 0 auto;
+  position: relative;
+}
+
+.mod_songlist {
+  font-size: 14px;
+  overflow: hidden;
+}
+.mod_songlist {
+  padding-bottom: 60px;
+}
+.songlist__header,
+.songlist__item {
+  position: relative;
+  padding-left: 46px;
+  padding-right: 95px;
+}
+.songlist__header {
+  height: 50px;
+  line-height: 50px;
+  background-color: rgba(0, 0, 0, 0.01);
+  color: #999;
+}
+.songlist__header {
+  background-color: #fbfbfd;
+}
+
+.songlist__header_name,
+.songlist__songname {
+  float: left;
+  width: 47.685185%;
+  position: relative;
+  white-space: normal;
+}
+.songlist__header_name,
+.songlist__songname {
+  width: 54%;
+}
+.songlist__album,
+.songlist__artist,
+.songlist__header_album,
+.songlist__header_author {
+  float: left;
+  padding-left: 15px;
+  width: 25.5%;
+  box-sizing: border-box;
+}
+.songlist__album,
+.songlist__artist,
+.songlist__header_album,
+.songlist__header_author {
+  width: 20%;
+}
+.songlist__album,
+.songlist__artist,
+.songlist__header_album,
+.songlist__header_author {
+  float: left;
+  padding-left: 15px;
+  width: 25.5%;
+  box-sizing: border-box;
+}
+.songlist__album,
+.songlist__artist,
+.songlist__header_album,
+.songlist__header_author {
+  width: 20%;
+}
+.songlist__header_time,
+.songlist__time {
+  position: absolute;
+  top: 0;
+  right: 38px;
+  width: 50px;
+}
+
+.songlist__list {
+  overflow: hidden;
+  clear: both;
+}
+.songlist__header,
+.songlist__item {
+  position: relative;
+  padding-left: 46px;
+  padding-right: 95px;
+}
+.songlist__item {
+  clear: both;
+  font-size: 0;
+  overflow: hidden;
+}
+.songlist__album,
+.songlist__artist,
+.songlist__number,
+.songlist__other,
+.songlist__time {
+  line-height: 50px;
+  height: 50px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+}
+.songlist__number {
+  position: absolute;
+  top: 0;
+  left: 10px;
+  color: #999;
+  width: 36px;
+}
+.songlist__songname {
+  line-height: 50px;
+  height: 50px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.songlist__header_name,
+.songlist__songname {
+  float: left;
+  width: 47.685185%;
+  position: relative;
+  white-space: normal;
+}
+.songlist__header_name,
+.songlist__songname {
+  width: 54%;
+}
+</style>
diff --git a/src/views/musicLibrary/SongDetail.vue b/src/views/musicLibrary/SongDetail.vue
index 0352fad..2e0342c 100644
--- a/src/views/musicLibrary/SongDetail.vue
+++ b/src/views/musicLibrary/SongDetail.vue
@@ -1,84 +1,6 @@
 <template>
   <div class="main">
-    <div
-      class="mod_data"
-      itemscope=""
-      itemtype="http://schema.org/MusicRecording"
-      style="display: "
-      v-if="song"
-    >
-      <span class="data__cover">
-        <img
-          :src="song.img"
-          :alt="song.name"
-          onerror="this.src='//y.gtimg.cn/mediastyle/music_v11/extra/default_300x300.jpg?max_age=31536000';this.onerror=null;"
-          class="data__photo"
-        />
-      </span>
-      <div class="data__cont">
-        <div class="data__name">
-          <h1 class="data__name_txt" :title="song.name">{{ song.name }}</h1>
-        </div>
-        <div class="data__singer" :title="song.artistsText">
-          <i class="icon_singer sprite"></i>
-          <a
-            href="//y.qq.com/n/yqq/singer/001JDzPT3JdvqK.html"
-            :title="song.artistsText"
-            class="data__singer_txt js_singer"
-            data-stat="y_new.song.header.singername"
-            itemprop="byArtist"
-          >
-            {{ song.artistsText }}
-          </a>
-        </div>
-        <ul class="data__info">
-          <li class="data_info__item data_info__item--even">
-            专辑：<a
-              href="//y.qq.com/n/yqq/album/002Zwh5p4HgecI.html"
-              itemprop="inAlbum"
-              class="js_album"
-              :title="song.albumName"
-              >{{ song.albumName }}</a
-            >
-          </li>
-          <li class="data_info__item js_lan" style="">语种：未知</li>
-          <li class="data_info__item js_genre data_info__item--even" style="">
-            时长：{{ song.durationText }}
-          </li>
-          <li class="data_info__item js_company" style="">
-            唱片公司：<span>未知</span>
-          </li>
-          <li
-            class="data_info__item js_public_time data_info__item--even"
-            style=""
-          >
-            发行时间：{{ song.publishTime }}
-          </li>
-        </ul>
-
-        <div class="data__actions" role="toolbar">
-          <a class="mod_btn_green js_all_play"
-            ><i class="mod_btn_green__icon_play"></i>播放</a
-          >
-          <a href="javascript:;" class="mod_btn js_all_like"
-            ><i class="mod_btn__icon_like"></i>收藏</a
-          >
-          <a
-            class="mod_btn js_into_comment"
-            data-stat="y_new.song.gotocomment"
-            href="#comment_box"
-            ><i class="mod_btn__icon_comment"></i>评论(5182)</a
-          >
-          <a
-            href="javascript:;"
-            class="mod_btn js_more"
-            data-id="102193483"
-            data-songtype="0"
-            ><i class="mod_btn__icon_menu"></i>更多</a
-          >
-        </div>
-      </div>
-    </div>
+    <detail-info-card :obj="song" @btnClick="cardClick" />
 
     <div class="detail_layout">
       <div class="detail_layout__main">
@@ -195,8 +117,9 @@
 </template>
 
 <script>
+import DetailInfoCard from "components/common/DetailInfoCard";
 import { getSongDetail, getSongLiyric, getSimiSong, getMvDetail } from "api";
-import { createSong, formatDate } from "common/utils";
+import { createSong, formatDate, playTheSong } from "common/utils";
 
 export default {
   data() {
@@ -297,6 +220,15 @@ export default {
         query: { id: id },
       });
     },
+    play() {
+      playTheSong(this.song);
+    },
+    cardClick(v) {
+      if (v == "all") this.play();
+    },
+  },
+  components: {
+    DetailInfoCard,
   },
 };
 </script>
diff --git a/src/views/musicLibrary/SongerDetail.vue b/src/views/musicLibrary/SongerDetail.vue
index bd52d86..66c57e1 100644
--- a/src/views/musicLibrary/SongerDetail.vue
+++ b/src/views/musicLibrary/SongerDetail.vue
@@ -1,79 +1,11 @@
 <template>
   <div class="songer-main">
-    <div class="mod_data">
-      <span class="data__cover">
-        <a
-          class="js_goto_tab js_none_index"
-          data-stat="y_new.singer.thistab.singer_pic"
-          data-tab="index"
-          style=""
-          ><img
-            class="data__photo"
-            :src="songer.img"
-            onerror="this.src='//y.gtimg.cn/mediastyle/global/img/singer_300.png?max_age=31536000';this.onerror=null;"
-            :alt="songer.name"
-        /></a>
-      </span>
-      <div class="data__cont">
-        <div class="data__name">
-          <h1 class="data__name_txt js_none_index" style="">
-            <a class="js_goto_tab" :title="songer.name">{{ songer.name }}</a>
-          </h1>
-          <h1
-            class="data__name_txt js_index"
-            style="display: none"
-            :title="songer.name"
-          >
-            {{ songer.name }}
-          </h1>
-        </div>
-
-        <div class="data__desc" id="singer_desc">
-          <div class="data__desc_txt" id="short_desc">
-            {{ songer.desc }}
-          </div>
-
-          <a href="javascript:;" class="js_desc" @click="toggleShowMoreInfo"
-            >[更多]</a
-          >
-        </div>
-
-        <ul class="mod_data_statistic">
-          <li class="data_statistic__item">
-            <a class="js_goto_tab">
-              <span class="data_statistic__tit">单曲</span>
-              <strong class="data_statistic__number">{{
-                songer.musicSize
-              }}</strong>
-            </a>
-          </li>
-
-          <li class="data_statistic__item">
-            <a class="js_goto_tab">
-              <span class="data_statistic__tit">专辑</span>
-              <strong class="data_statistic__number">{{
-                songer.albumSize
-              }}</strong>
-            </a>
-          </li>
-
-          <li class="data_statistic__item data_statistic__item--last">
-            <a class="js_goto_tab">
-              <span class="data_statistic__tit">MV</span>
-              <strong class="data_statistic__number">{{
-                songer.mvSize
-              }}</strong>
-            </a>
-          </li>
-        </ul>
-
-        <div class="data__actions" role="toolbar">
-          <a class="mod_btn_green js_singer_radio" @click="playHotSongs">
-            <i class="mod_btn_green__icon_play"></i>播放歌手热门歌曲
-          </a>
-        </div>
-      </div>
-    </div>
+    <detail-info-card
+      :obj="songer"
+      :cardType="'songer'"
+      @btnClick="playHotSongs"
+      @moreClick="toggleShowMoreInfo"
+    />
 
     <div id="index_tab" class="js_tab">
       <div class="mod_part">
@@ -284,6 +216,7 @@
 </template>
 
 <script>
+import DetailInfoCard from "components/common/DetailInfoCard";
 import ModListMenu from "components/common/ModListMenu";
 import {
   getUserDetail,
@@ -414,6 +347,7 @@ export default {
     },
   },
   components: {
+    DetailInfoCard,
     ModListMenu,
   },
 };
@@ -460,10 +394,6 @@ ul {
   position: relative;
 }
 
-/* add extra */
-.data__photo {
-  border-radius: 999px;
-}
 /*overwrite*/
 .data__cont {
   padding-top: 31px;
-- 
GitLab