feat: add video detail and play page.

Plan.md

@@ -26,12 +26,12 @@
    - [x] 标题展示
 7. mv 列表页
    - [x] 无限滚动
-8. mv 详情播放页
-9. 功能条
+   - [x] mv 详情播放页
+8. 功能条
    - 收藏
    - 分享
    - 添加
-10. [x] 懒加载
+9. [x] 懒加载
 
 - [ ] 样式调整
 - [ ] 组件抽离

src/api/mv.js

@@ -37,5 +37,7 @@ export const getAllMV = (limit, page, order, area, type) => {
 
 export const getMvDetail = id => requset.get(`/mv/detail?mvid=${id}`);
 
+export const getMvPlayUrl = id => requset.get(`/mv/url?id=${id}`);
+
 /* 登陆后使用 */
 export const getCollectedMvs = () => requset.get("/mv/sublist");

src/common/apiHelper.js

@@ -110,7 +110,8 @@ export function createMv(mv) {
     coverUrl,
     creator,
     durationms,
-    playTime
+    playTime,
+    desc
   } = mv;
   let dt = duration ? duration : durationms;
   let times = playCount ? playCount : playTime;
@@ -126,7 +127,8 @@ export function createMv(mv) {
     durationSecond: dt / 1000,
     durationText: formatTime(dt / 1000),
     publishTime,
-    playCount: processCount(times)
+    playCount: processCount(times),
+    desc: desc
   };
 }
 export function createMvs(mvs) {

src/common/routerHelper.js

@@ -31,3 +31,11 @@ export function gotoAlbumDetail(id) {
       query: { id: id }
     });
 }
+
+export function gotoMvDetail(id) {
+  if (id && id != 0)
+    Router.push({
+      path: "/musicLibrary/mvDetail",
+      query: { id: id }
+    });
+}

src/components/common/ShowMvs.vue

@@ -8,7 +8,11 @@
       <ul class="mv_list__list">
         <li class="mv_list__item" v-for="mv in mvs" :key="mv.id">
           <div class="mv_list__item_box" style="visibility: visible">
-            <a class="mv_list__cover mod_cover js_mv" hidefocus="true">
+            <a
+              class="mv_list__cover mod_cover js_mv"
+              hidefocus="true"
+              @click="gotoMvDetail(mv.id)"
+            >
               <img
                 class="mv_list__pic"
                 style="display: block; visibility: visible"
@@ -20,7 +24,9 @@
               <!--div class="mv_list__time">04:10</div-->
             </a>
             <h3 class="mv_list__title">
-              <a class="js_mv" :title="mv.name">{{ mv.name }}</a>
+              <a class="js_mv" :title="mv.name" @click="gotoMvDetail(mv.id)">{{
+                mv.name
+              }}</a>
             </h3>
             <p class="mv_list__singer">
               <a class="js_singer" :title="mv.artistsText">{{
@@ -35,15 +41,19 @@
 </template>
 
 <script>
+import { gotoMvDetail } from "common/utils";
+
 export default {
   props: {
     mvs: { type: Array, default: [] },
   },
+  methods: {
+    gotoMvDetail,
+  },
 };
 </script>
 
 <style scoped>
-h3,
 hr,
 li,
 ol,

src/router/index.js

@@ -12,6 +12,7 @@ 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 MvDetail = () => import("views/musicLibrary/MvDetail");
 const SearchResultDetail = () =>
   import("views/musicLibrary/SearchResultDetail");
 
@@ -93,6 +94,11 @@ const routes = [
         component: PlaylistDetail,
         meta: { name: "playlistDetail" }
       },
+      {
+        path: "mvDetail",
+        component: MvDetail,
+        meta: { name: "mvDetail" }
+      },
       {
         path: "searchResultDetail",
         component: SearchResultDetail,

src/views/musicLibrary/MV.vue

@@ -49,6 +49,7 @@
                   class="mv_list__cover mod_cover js_mv"
                   :title="item.name"
                   hidefocus="true"
+                  @click="gotoMvDetail(item.id)"
                 >
                   <img
                     style="display: block; visibility: visible"
@@ -60,9 +61,12 @@
                   <i class="mod_cover__icon_play"></i>
                 </a>
                 <h3 class="mv_list__title">
-                  <a href="javascript:;" class="js_mv" :title="item.name">{{
-                    item.name
-                  }}</a>
+                  <a
+                    class="js_mv"
+                    :title="item.name"
+                    @click="gotoMvDetail(item.id)"
+                    >{{ item.name }}</a
+                  >
                 </h3>
                 <div class="mv_list__singer" title="5AM">
                   <a class="js_singer" :title="item.artistName">{{
@@ -94,7 +98,7 @@
 import TypeSelectBar from "components/common/TypeSelectBar";
 import TypeSelectSubBar from "components/common/TypeSelectSubBar";
 import { getAllMV, mvArea, mvOrder, mvType } from "api";
-import { processCount } from "common/utils";
+import { processCount, gotoMvDetail } from "common/utils";
 
 export default {
   data() {
@@ -114,41 +118,50 @@ export default {
     };
   },
   mounted() {
-    this.updateMv();
+    this.initMv();
     this.$refs.mvList.addEventListener("scroll", this.loadMore);
   },
   methods: {
-    updateMv() {
-      getAllMV(
-        this.limit,
-        this.page,
-        this.order,
-        this.selectArea,
-        this.selectType
-      )
-        .then((res) => {
-          //console.log(res);
-          this.mvs.push(...res.data.data);
-          this.mvLoading = false;
-          this.allLength = res.data.count;
-          this.more = res.data.hasMore;
-        })
-        .catch((err) => console.log(err));
+    async getMv() {
+      let res;
+      try {
+        res = await getAllMV(
+          this.limit,
+          this.page,
+          this.order,
+          this.selectArea,
+          this.selectType
+        );
+      } catch (e) {
+        console.log(e);
+      }
+      this.mvLoading = false;
+      this.allLength = res.data.count;
+      this.more = res.data.hasMore;
+      return res.data.data;
+    },
+    async initMv() {
+      let mvs = await this.getMv();
+      this.mvs = mvs;
+    },
+    async updateMv() {
+      let mvs = await this.getMv();
+      this.mvs.push(...mvs);
     },
     areaSelect(id) {
       this.selectArea = id;
       this.page = 1;
-      this.updateMv();
+      this.initMv();
     },
     typeSelect(id) {
       this.selectType = id;
       this.page = 1;
-      this.updateMv();
+      this.initMv();
     },
     switchOrder(id) {
       this.order = id;
       this.page = 1;
-      this.updateMv();
+      this.initMv();
     },
     loadMore() {
       const scrollDom = document.getElementById("mv_list_div");
@@ -163,6 +176,7 @@ export default {
       }
     },
     processCount,
+    gotoMvDetail,
   },
   components: {
     TypeSelectBar,

src/views/musicLibrary/MvDetail.vue

+<template>
+  <div class="" style="background-color: #333">
+    <div class="main">
+      <div class="video_player_box">
+        <video
+          id="video_player__source"
+          class="video_player__source"
+          controls="true"
+          webkit-playsinline="true"
+          isiphoneshowplaysinline="true"
+          playsinline="true"
+          preload="metadata"
+          :src="url"
+          width="1000"
+          height="674"
+        ></video>
+      </div>
+      <div class="mv__info" id="mv_control" style="">
+        <h1 class="mv__title">
+          <span class="mv__name" title="Falsetto">{{ mv.name }}</span>
+          <span class="mv__line">-</span>
+          <a class="mv__singer js_singer">{{ mv.artistsText }}</a>
+        </h1>
+        <span class="mv__listen">播放量：{{ mv.playCount }}</span>
+      </div>
+    </div>
+  </div>
+  <div class="main">
+    <div class="detail_layout">
+      <div class="detail_layout__main">
+        <!-- comment -->
+        <commont-box
+          :comments="comments"
+          :limit="pageSize"
+          :currentPage="commentPage"
+          :total="commentCount"
+          @current-change="currentChange"
+        />
+      </div>
+
+      <div class="detail_layout__other">
+        <div
+          class="mod_about js_box"
+          id="album_desc"
+          style="margin-top: 10px; display: "
+        >
+          <h3 class="about__tit" style="height-line: 54px; font-size: 24px">
+            简介
+          </h3>
+          <div class="about__cont">
+            <p v-if="mv.desc">{{ mv.desc }}</p>
+            <p style="color: #999" v-else>还没有简介哦~</p>
+          </div>
+          <a class="btn_edit js_edit" style="display: none">
+            <i class="icon_txt">编辑</i>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CommontBox from "components/common/CommontBox";
+import { getMvDetail, getMvPlayUrl, getCommentsNew } from "api";
+import { createMv } from "common/utils";
+
+export default {
+  data() {
+    return {
+      id: null,
+      url: "",
+      mv: {},
+      pageSize: 20,
+      commentPage: 1,
+      commentCount: 0,
+      comments: [],
+    };
+  },
+  mounted() {
+    this.id = this.$route.query.id;
+    getMvDetail(this.id).then((res) => {
+      this.mv = createMv(res.data.data);
+      console.log(this.mv);
+    });
+    this.updateMv();
+    this.getComment();
+  },
+  methods: {
+    updateMv() {
+      getMvPlayUrl(this.id).then((res) => {
+        this.url = res.data.data.url;
+      });
+    },
+    getComment() {
+      let params = {
+        type: 1,
+        pageSize: this.pageSize,
+        pageNo: this.commentPage,
+        id: this.id,
+        sortType: 2,
+      };
+      getCommentsNew(params).then((res) => {
+        this.commentCount =
+          res.data.data.totalCount > 5000 ? 5000 : res.data.data.totalCount;
+        this.comments = res.data.data.comments;
+      });
+    },
+    currentChange(v) {
+      this.commentPage = v;
+    },
+  },
+  watch: {
+    commentPage() {
+      this.getComment();
+    },
+  },
+  components: {
+    CommontBox,
+  },
+};
+</script>
+
+<style scoped>
+.video_player_box {
+  position: relative;
+  z-index: 3;
+  width: 1200px;
+  height: 674px;
+  padding: 15px 0 10px 0;
+  background-color: #000;
+}
+.video_player__source {
+  /*position: absolute;*/
+  /*top: 0;*/
+  /*left: 0;*/
+  width: 100%;
+  height: 100%;
+}
+
+.mod_mv {
+  background-color: #333;
+  position: relative;
+  z-index: 3;
+}
+.mv__info {
+  height: 78px;
+  line-height: 78px;
+  position: relative;
+}
+.mv__name,
+.mv__singer,
+.mv__title {
+  color: #fff;
+  font-size: 22px;
+}
+.mv__title {
+  font-weight: 400;
+  float: left;
+  margin-right: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 650px;
+}
+.mv__name {
+  float: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 350px;
+}
+.mv__line {
+  margin: 0 8px;
+}
+.mv__listen {
+  font-size: 14px;
+  color: #999;
+}
+</style>