历史页面,改进进度展示

src/components/Detail.vue

@@ -128,19 +128,6 @@ export default {
     close () {
       this.detail.show = false
     },
-    m3u8Parse (e) {
-      const dd = e.dl.dd
-      const type = Object.prototype.toString.call(dd)
-      if (type === '[object Array]') {
-        for (const i of dd) {
-          if (i._flag.indexOf('m3u8') >= 0) {
-            this.m3u8List = i._t.split('#')
-          }
-        }
-      } else {
-        this.m3u8List = dd._t.split('#')
-      }
-    },
     async playEvent (n) {
       if (!this.playOnline) {
         console.log(this.detail)
@@ -278,7 +265,7 @@ export default {
         if (res) {
           this.info = res
           this.$set(this.info, 'rate', '')
-          this.m3u8Parse(res)
+          this.m3u8List = res.m3u8List
           this.getDoubanRate()
           this.loading = false
         }

src/components/History.vue

@@ -23,20 +23,24 @@
           </el-table-column>
           <el-table-column
             prop="index"
-            width="120"
-            label="观看至">
+            width="180"
+            label="集数进度">
             <template slot-scope="scope">
-              <span>第{{ scope.row.index + 1 }}集</span>
+              <span v-if="scope.row.detail.m3u8List !== undefined && scope.row.detail.m3u8List.length > 1">
+                第{{ scope.row.index + 1 }}集(共{{scope.row.detail.m3u8List.length}}集)
+              </span>
             </template>
           </el-table-column>
           <el-table-column
-            label="进度(分钟)">
+            width="150"
+            label="时间进度">
             <template slot-scope="scope">
-               <span v-if="scope.row.time && scope.row.duration">{{(scope.row.time/60).toFixed(1)}}/{{ (scope.row.duration/60).toFixed(1)}}</span>
+               <span v-if="scope.row.time && scope.row.duration">{{fmtMSS(scope.row.time.toFixed(0))}}/{{fmtMSS(scope.row.duration.toFixed(0))}}</span>
             </template>
           </el-table-column>
           <el-table-column
             label="操作"
+            width="200"
             header-align="right"
             align="right">
             <template slot-scope="scope">
@@ -66,9 +70,6 @@
             <template slot="item" slot-scope="props">
               <div class="card">
                 <div class="img">
-                  <div class="rate" v-if="props.data.time && props.data.duration">
-                    <span>{{(props.data.time/props.data.duration*100).toFixed(0)}}%</span>
-                  </div>
                   <img style="width: 100%" :src="props.data.detail.pic" alt="" @load="$refs.historyWaterfall.refresh()" @click="detailEvent(props.data)">
                   <div class="operate">
                     <div class="operate-wrap">
@@ -81,10 +82,15 @@
                 </div>
                 <div class="name" @click="detailEvent(props.data)">{{props.data.name}}</div>
                 <div class="info">
-                  <span>{{props.data.detail.area}}</span>
-                  <span>{{props.data.detail.year}}</span>
-                  <span>{{props.data.detail.note}}</span>
-                  <span>{{props.data.detail.type}}</span>
+                  <span v-if="props.data.time && props.data.duration">
+                    进度：
+                  </span>
+                  <span v-if="props.data.detail.m3u8List !== undefined && props.data.detail.m3u8List.length > 1">
+                    第{{ props.data.index + 1 }}集(共{{props.data.detail.m3u8List.length}}集)
+                  </span>
+                  <span v-if="props.data.time && props.data.duration">
+                    {{fmtMSS(props.data.time.toFixed(0))}}/{{fmtMSS(props.data.duration.toFixed(0))}}
+                  </span>
                 </div>
               </div>
             </template>
@@ -157,6 +163,9 @@ export default {
   },
   methods: {
     ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE']),
+    fmtMSS (s) {
+      return (s - (s %= 60)) / 60 + (s > 9 ? ':' : ':0') + s
+    },
     detailEvent (e) {
       this.detail = {
         show: true,

src/lib/site/tools.js

@@ -217,6 +217,20 @@ const zy = {
           const data = res.data
           const json = parser.parse(data, this.xmlConfig)
           const videoList = json.rss.list.video
+          // Parse m3u8List
+          var m3u8List = []
+          const dd = videoList.dl.dd
+          const type = Object.prototype.toString.call(dd)
+          if (type === '[object Array]') {
+            for (const i of dd) {
+              if (i._flag.indexOf('m3u8') >= 0) {
+                m3u8List = i._t.split('#')
+              }
+            }
+          } else {
+            m3u8List = dd._t.split('#')
+          }
+          videoList.m3u8List = m3u8List
           resolve(videoList)
         }).catch(err => {
           reject(err)