detail done

src/App.vue

@@ -51,6 +51,7 @@ export default {
 </script>
 
 <style lang="scss">
+@import './assets/global/global.scss';
 @import './assets/theme/dark.scss';
 @import './assets/theme/light.scss';
 html, body, #app, .box{

src/assets/global/global.scss

@@ -0,0 +1,50 @@
+.detail{
+  padding: 10px;
+  .detail-box{
+    border: 1px solid #ddd;
+    padding: 10px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    margin-bottom: 10px;
+    flex-wrap: wrap;
+    .vodImg{
+      width: 200px;
+      img{
+        width: 100%;
+        height: auto;
+      }
+    }
+    .vodInfo{
+      flex: 1;
+      overflow: hidden;
+      margin-left: 20px;
+      .vodh{
+        h2{
+          display: inline-block;
+        }
+        span{
+          font-size: 12px;
+          color: #999;
+          margin-left: 10px;
+        }
+        label{
+          font-size: 20px;
+          font-weight: bold;
+          color: #f90;
+          margin-left: 20px;
+        }
+      }
+      li{
+        list-style: none;
+        font-size: 12px;
+        color: #666;
+        height: 20px;
+        overflow: hidden;
+        a{
+          pointer-events: none;
+        }
+      }
+    }
+  }
+}

src/components/detail.vue

@@ -1,24 +0,0 @@
-<template>
-  <div class="detail">{{ video }}</div>
-</template>
-<script>
-export default {
-  name: 'detail',
-  computed: {
-    video () {
-      return this.$store.getters.getVideo
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.detail{
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 10;
-  background-color: #fff;
-}
-</style>

src/components/zy_sider.vue

@@ -1,8 +1,8 @@
 <template>
   <Row class="sider-box">
     <div class="top">
-      <Icon :class="iconActive === 'list' ? 'active': ''" type="md-list" @click="iconClickEvent('list')"/>
       <Icon :class="iconActive === 'search' ? 'active': ''" type="md-search" @click="iconClickEvent('search')"/>
+      <Icon :class="iconActive === 'detail' ? 'active': ''" type="md-list" @click="iconClickEvent('detail')"/>
       <Icon :class="iconActive === 'play' ? 'active': ''" type="md-play" @click="iconClickEvent('play')"/>
       <Icon :class="iconActive === 'collection' ? 'active': ''" type="md-star" @click="iconClickEvent('collection')"/>
     </div>

src/router.js

@@ -1,22 +1,22 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import List from './views/List.vue'
+import Search from './views/Search.vue'
 
 Vue.use(Router)
 
 export default new Router({
-  mode: 'history',
-  base: process.env.BASE_URL,
+  // mode: 'history',
+  // base: process.env.BASE_URL,
   routes: [
     {
       path: '/',
-      name: 'list',
-      component: List
+      name: 'search',
+      component: Search
     },
     {
-      path: '/search',
-      name: 'search',
-      component: () => import(/* webpackChunkName: "about" */ './views/Search.vue')
+      path: '/detail',
+      name: 'detail',
+      component: () => import(/* webpackChunkName: "about" */ './views/Detail.vue')
     },
     {
       path: '/settings',

src/store.js

@@ -11,7 +11,8 @@ export default new Vuex.Store({
       color: 'light'
     },
     iconActive: 'search',
-    video: {}
+    video: {},
+    videoList: []
   },
   getters: {
     getTheme: state => {
@@ -22,6 +23,9 @@ export default new Vuex.Store({
     },
     getVideo: state => {
       return state.video
+    },
+    getVideoList: state => {
+      return state.videoList
     }
   },
   mutations: {
@@ -33,12 +37,12 @@ export default new Vuex.Store({
     },
     SET_VIDEO: (state, payload) => {
       state.video = payload
+    },
+    SET_VIDEO_LIST: (state, payload) => {
+      state.videoList = payload
     }
   },
   actions: {
-    addCollection: (payload) => {
-      // localStorage.collection = payload
-    },
     changeTheme: ({ commit }, payload) => {
       setting.update(payload.id, { theme: payload.color }).then(res => {
         commit('SET_THEME', payload)

src/util/util.detail.js

@@ -0,0 +1,41 @@
+// import Axios from "axios"
+import axios from 'axios'
+const detail = {
+  getList (url) {
+    return new Promise((resolve, reject) => {
+      axios({
+        url: url,
+        method: 'get'
+      }).then(res => {
+        resolve(this.parser(res.data))
+      }).catch(err => {
+        reject(err)
+      })
+    })
+  },
+  parser (txt) {
+    return new Promise((resolve, reject) => {
+      const parser = new DOMParser()
+      let html = parser.parseFromString(txt, 'text/html')
+      let data = {
+        box: null,
+        info: null,
+        m3u8: null
+      }
+      data.box = html.querySelector('.vodBox').innerHTML
+      data.info = html.querySelector('.vodplayinfo').innerHTML
+      let url = html.querySelectorAll('.vodplayinfo a')
+      let arr = []
+      for (let i in url) {
+        let j = url[i].innerHTML
+        if (j !== undefined && j.indexOf('.m3u8') !== -1) {
+          arr.push(url[i].innerHTML)
+        }
+      }
+      data.m3u8 = arr
+      resolve(data)
+    })
+  }
+}
+
+export default detail

src/views/Collection.vue

@@ -4,7 +4,7 @@
       <Table stripe :columns="columns" :data="data" :loading="loading">
         <template slot-scope="{ row }" slot="action" >
           <Button size="small" @click="play(row)">Play</Button>
-          <Button size="small" type="info" ghost @click="detail(row)">Detail</Button>
+          <Button size="small" type="info" ghost @click="detailShow(row)">Detail</Button>
           <Button size="small" type="error" ghost @click="deleteLi(row)">Delete</Button>
         </template>
       </Table>
@@ -43,7 +43,8 @@ export default {
         }
       ],
       data: [],
-      loading: false
+      loading: false,
+      detail: false
     }
   },
   methods: {
@@ -55,8 +56,10 @@ export default {
     play (e) {
       console.log(e)
     },
-    detail (e) {
-      console.log(e)
+    detailShow (e) {
+      this.$store.commit('SET_ICON_ACTIVE', 'detail')
+      this.$store.commit('SET_VIDEO', e)
+      this.$router.push({ name: 'detail' })
     },
     deleteLi (e) {
       db.remove(e._id).then(res => {

src/views/Detail.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="detail">
+    <div v-show="box" class="detail-box" v-html="data.box"></div>
+    <div v-show="box" class="detail-box" v-html="data.info"></div>
+    <div v-show="box" class="detail-box">
+      <Button v-for="(i, j) in data.m3u8" :key="j" @click="playBtn(i, j, video)">{{i | ftLink}}</Button>
+    </div>
+  </div>
+</template>
+<script>
+import detail from '@/util/util.detail'
+import { mapMutations } from 'vuex'
+export default {
+  name: 'detail',
+  data () {
+    return {
+      data: {
+        box: null,
+        info: null,
+        m3u8: null
+      },
+      box: false
+    }
+  },
+  filters: {
+    ftLink (e) {
+      let name = e.split('$')[0]
+      return name
+    }
+  },
+  computed: {
+    video () {
+      return this.$store.getters.getVideo
+    }
+  },
+  methods: {
+    ...mapMutations([
+      'SET_VIDEO_LIST',
+      'SET_DETAIL'
+    ]),
+    async getDetail () {
+      this.box = false
+      let url = this.video.detail
+      this.data = await detail.getList(url)
+      this.SET_VIDEO_LIST(this.data.m3u8)
+      this.box = true
+    },
+    playBtn (i, j, e) {
+      console.log(i, j, e, 'playBtn')
+    }
+  },
+  created () {
+    this.getDetail()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.detail{
+  .btns{
+    margin-bottom: 10px;
+  }
+  .detail-box{
+    button{
+      margin: 4px;
+    }
+  }
+}
+</style>

src/views/List.vue

@@ -1,10 +0,0 @@
-<template>
-  <Row>
-    <div class="list">list</div>
-  </Row>
-</template>
-<script>
-export default {
-  name: 'list'
-}
-</script>

src/views/Player.vue

@@ -1,13 +1,35 @@
 <template>
-  <Row class="player">{{video}}</Row>
+  <Row class="player">
+    <div class="title">{{ video.name }}</div>
+    <div class="box"></div>
+    <div class="list"></div>
+    {{video}}
+  </Row>
 </template>
 <script>
+import detail from '@/util/util.detail'
 export default {
   name: 'player',
+  data () {
+    return {
+      data: {},
+      url: null
+    }
+  },
   computed: {
     video () {
       return this.$store.getters.getVideo
     }
+  },
+  methods: {
+    async getDetail () {
+      let url = this.video.detail
+      this.data = await detail.getList(url)
+      console.log(this.data.m3u8)
+    }
+  },
+  created () {
+    this.getDetail()
   }
 }
 </script>

src/views/Search.vue

@@ -17,13 +17,11 @@
         <span class="progress-txt">搜索中</span>
       </Progress>
     </div>
-    <Detail v-if="show.detail" />
   </div>
 </template>
 <script>
 import db from '@/plugin/nedb/video'
 import video from '@/util/util.video'
-import Detail from '@/components/detail.vue'
 export default {
   name: 'search',
   data () {
@@ -56,15 +54,9 @@ export default {
         }
       ],
       data: [],
-      loading: true,
-      show: {
-        detail: false
-      }
+      loading: true
     }
   },
-  components: {
-    Detail
-  },
   methods: {
     async searchEvent () {
       if (this.txt !== '') {
@@ -109,8 +101,9 @@ export default {
       })
     },
     detail (e) {
-      this.show.detail = true
       this.$store.commit('SET_VIDEO', e)
+      this.$store.commit('SET_ICON_ACTIVE', 'detail')
+      this.$router.push({ name: 'detail' })
     }
   },
   created () {