v0.7.5 获取资源列表, 获取详细信息, 播放资源, 收藏资源

2026-05-08 23:12:13 +08:00 · 2020-01-18 18:46:49 +08:00
parent 426bb05e1c
commit 93c7392754
12 changed files with 666 additions and 168 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,7 +27,7 @@
        <Setting v-show="Main === 'Setting'" />
      </el-main>
    </el-container>
-    <el-drawer :visible.sync="drawer" :show-close="true" size="80%" :with-header="false" direction="btt">
+    <el-drawer class="drawer" :visible.sync="detail" :show-close="true" size="90%" :with-header="true" direction="btt" title="详情">
      <Detail />
    </el-drawer>
  </el-container>
@@ -36,18 +36,35 @@
 <script lang="ts">
 import Vue from 'vue'
 import Detail from '@/components/detail.vue'
+import { mapMutations } from 'vuex'
 const { ipcRenderer: ipc } = require('electron')
 export default Vue.extend({
  data () {
-    return {
-      Main: 'Setting',
-      drawer: false
+    return {}
+  },
+  computed: {
+    Main: {
+      get () {
+        return this.$store.getters.getMain
+      },
+      set (val) {
+        this.SET_MAIN(val)
+      }
+    },
+    detail: {
+      get () {
+        return this.$store.getters.getDetail
+      },
+      set (val) {
+        this.SET_DETAIL(val)
+      }
    }
  },
  components: {
    Detail
  },
  methods: {
+    ...mapMutations(['SET_DETAIL', 'SET_MAIN']),
    clickFrameEvent (e:string) {
      ipc.send(e)
    },
--- a/src/assets/theme/light.scss
+++ b/src/assets/theme/light.scss
@@ -45,4 +45,25 @@
      }
    }
  }
+  .detail{
+    color: var(--l-c);
+    &::-webkit-scrollbar-track {
+      box-shadow: inset 0 0 6px var(--l-bdc);
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--l-icon);
+      outline: 1px solid var(--l-icon);
+    }
+    .box, .info, .urls{
+      border: 1px solid var(--l-bdc);
+    }
+    .vodInfo{
+      li, span, a{
+        color: var(--l-c);
+      }
+      label{
+        color: #f90;
+      }
+    }
+  }
 }
--- a/src/components/detail.vue
+++ b/src/components/detail.vue
@@ -1,16 +1,134 @@
 <template>
-  <el-row class="detail">detail</el-row>
+  <el-row class="detail">
+    <el-row class="detail-box" v-loading="loading">
+      <el-row v-html="detail.box" class="box"></el-row>
+      <el-row class="urls">
+        <el-button size="mini" v-for="(i, j) in detail.urls" :key="j" @click="playBtn(i, j, video)">{{i | ftLink}}</el-button>
+      </el-row>
+      <el-row v-html="detail.info" class="info"></el-row>
+    </el-row>
+  </el-row>
 </template>
 <script lang="ts">
 import Vue from 'vue'
+import zy from '@/lib/util.zy'
 export default Vue.extend({
-  name: 'detail'
+  name: 'detail',
+  data () {
+    return {
+      detail: {},
+      loading: true
+    }
+  },
+  computed: {
+    video () {
+      return this.$store.getters.getVideo
+    }
+  },
+  filters: {
+    ftLink (e: string) {
+      let name = e.split('$')[0]
+      return name
+    }
+  },
+  watch: {
+    video: {
+      handler (n) {
+        this.getDetailEvent(n)
+      },
+      deep: true
+    }
+  },
+  methods: {
+    getDetailEvent (n: any) {
+      this.detail = {}
+      this.loading = true
+      zy.detail(n.detail).then((res: any) => {
+        this.detail = res
+        this.loading = false
+      })
+    },
+    playBtn (i: string, j: number, video: any) {
+      console.log(i, j, video)
+    }
+  },
+  created () {},
+  mounted () {
+    this.getDetailEvent(this.video)
+  }
 })
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 .detail{
-  height: 100%;
  box-sizing: border-box;
-  padding: 10px;
+  padding: 0 60px;
+  .detail-box{
+    width: 100%;
+    .box{
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      flex-wrap: wrap;
+      width: 100%;
+      padding: 10px;
+      .vodImg{
+        width: 200px;
+        img{
+          width: 100%;
+          height: auto;
+        }
+      }
+      .vodAd{
+        display: none;
+      }
+      .vodInfo{
+        flex: 1;
+        margin-left: 20px;
+        .vodh{
+          h2{
+            display: inline-block;
+          }
+          span{
+            font-size: 12px;
+            margin-left: 10px;
+          }
+          label{
+            font-size: 20px;
+            font-weight: bold;
+            margin-left: 20px;
+          }
+        }
+        .cont, .tags{
+          display: none;
+        }
+        li{
+          list-style: none;
+          font-size: 14px;
+          height: 20px;
+          overflow: hidden;
+          a{
+            display: none;
+            pointer-events: none;
+          }
+          span{
+            word-wrap:break-word
+          }
+        }
+      }
+    }
+    .info, .urls{
+      padding: 10px;
+      margin-top: 10px;
+    }
+    .info{
+      font-size: 14px;
+    }
+    .urls{
+      padding-bottom: 0;
+      button{
+        margin: 0 10px 10px 0;
+      }
+    }
+  }
 }
 </style>
--- a/src/lib/util.zy.ts
+++ b/src/lib/util.zy.ts
@@ -1,33 +1,171 @@
 import fly from 'flyio'
 import sites from './sites'
+import { TimeSelect } from 'element-ui'

 interface ZY {
  num: number
  page: number
  key: string
-  site: object
+  site: any
  list: Array<string>
  getInfoRequire: any
  getInfoHtml: any
  info: any
-  getDetailUrls: any
  detail: any
-  getFilmsRequire: any
  films: any
 }
-const zy:ZY = {
+
+interface info {
+  name?: string
+  type?: string
+  time?: string
+  detail?: string
+  urls?: Array<string>
+  index?: number
+}
+
+interface detail {
+  box?: any
+  info?: any
+  urls?: Array<string>
+}
+
+const zy: ZY = {
  num: 0,
  page: 1,
  key: '',
  site: {},
  list: [],
-  getInfoRequire () {},
-  getInfoHtml () {},
-  info () {},
-  getDetailUrls () {},
-  detail () {},
-  getFilmsRequire () {},
-  films () {}
+  getInfoRequire () {
+    return new Promise((resolve, reject) => {
+      let key = encodeURI(this.key)
+      const params = `${this.site.url}/index.php?m=vod-search-pg-${this.page}-wd-${key}.html`
+      fly.get(params).then(res => {
+        this.getInfoHtml(res.data).then((data: any) => {
+          resolve(data)
+        })
+      }).catch(err => {
+        reject(err)
+      })
+    })
+  },
+  getInfoHtml (txt: string): any {
+    return new Promise((resolve, reject) => {
+      try {
+        const parser = new DOMParser()
+        const html = parser.parseFromString(txt, 'text/html')
+        const list: any = html.querySelectorAll('.xing_vb li')
+        let d: any = { list: [], total: 0 }
+        for (let i = 1; i < list.length - 1; i++) {
+          let info: info = {
+            name: list[i].childNodes[1].innerText,
+            type: list[i].childNodes[3].innerText,
+            time: list[i].childNodes[5].innerText,
+            detail: this.site.url + list[i].childNodes[1].childNodes[0].getAttribute('href'),
+            index: 0,
+            urls: []
+          }
+          d.list.push(info)
+        }
+        let num: any = (<HTMLImageElement>html.querySelectorAll('.nvc dd span')[1]).innerText
+        num = parseInt(num)
+        d.total = num
+        resolve(d)
+      } catch (err) {
+        reject(err)
+      }
+    })
+  },
+  info (n: number = 0, p: number = 1, k: string = '') {
+    return new Promise((resolve, reject) => {
+      this.num = n
+      this.page = p
+      this.key = k
+      this.site = sites[n]
+      this.getInfoRequire().then((res: any) => {
+        resolve(res)
+      }).catch((err: any) => {
+        reject(err)
+      })
+    })
+  },
+  detail (url: string) {
+    return new Promise((resolve, reject) => {
+      if (!url) return
+      fly.get(url).then(res => {
+        const parser = new DOMParser()
+        let html = parser.parseFromString(res.data, 'text/html')
+        let data: detail = {
+          box: '',
+          info: '',
+          urls: []
+        }
+        let vodBox = html.querySelector('.vodBox')
+        if (vodBox) {
+          data.box = vodBox.innerHTML
+        }
+        let vodInfo = {}
+        if (url.indexOf('123ku') !== -1 || url.indexOf('subo988') !== -1) {
+          vodInfo = html.querySelectorAll('.vodplayinfo')[1]
+        } else {
+          vodInfo = <HTMLImageElement>html.querySelector('.vodplayinfo')
+        }
+        data.info = (<HTMLImageElement>vodInfo).innerText
+        let urls = html.querySelectorAll('.vodplayinfo li')
+        let arr = []
+        for (let i in urls) {
+          let j = (<HTMLImageElement>urls[i]).innerText
+          if (j !== undefined && j.indexOf('.m3u8') !== -1) {
+            arr.push((<HTMLImageElement>urls[i]).innerText)
+          }
+        }
+        data.urls = arr
+        resolve(data)
+      }).catch(err => {
+        reject(err)
+      })
+    })
+  },
+  films (n: number = 0, p: number = 1, type: number = 0) {
+    return new Promise((resolve, reject) => {
+      this.site = sites[n]
+      let url: string = sites[n].url
+      let params: string = ''
+      if (type === 0) {
+        params = `${url}/?m=vod-index-pg-${p}.html`
+      } else {
+        params = `${url}/?m=vod-type-id-${type}-pg-${p}.html`
+      }
+      fly.get(params).then(res => {
+        const parser = new DOMParser()
+        const html = parser.parseFromString(res.data, 'text/html')
+        const list: any = html.querySelectorAll('.xing_vb li')
+        let d: any = { list: [], total: 0 }
+        for (let i = 1; i < list.length - 1; i++) {
+          let info: info = {
+            name: list[i].childNodes[1].innerText,
+            type: list[i].childNodes[3].innerText,
+            time: list[i].childNodes[5].innerText,
+            detail: this.site.url + list[i].querySelector('a').getAttribute('href'),
+            index: 0,
+            urls: []
+          }
+          d.list.push(info)
+        }
+        let num: any = html.querySelectorAll('.pages')
+        if (num) {
+          let n = num[0].innerText
+          n = n.split('条')[0]
+          n = n.split('共')[1]
+          n = parseInt(n)
+          d.total = n
+        }
+        resolve(d)
+      }).catch(err => {
+        reject(err)
+      })
+    })
+  }
 }

 export default zy
--- a/src/page/film.vue
+++ b/src/page/film.vue
@@ -1,26 +1,26 @@
 <template>
  <el-row class="film">
    <el-row class="film-tabs">
-      <el-tabs v-model="activeName" @tab-click="tabClick">
-        <el-tab-pane class="film-tabpane" v-for="i in sites[siteNum].type" :key="sites[siteNum].id + i[1]" :label="i[0]" :value="i[1]" :name="i[0]"></el-tab-pane>
+      <el-tabs v-model="tabs" @tab-click="tabClick">
+        <el-tab-pane class="film-tabpane" v-for="(i, j) in sites[site].type" :key="j" :label="i[0]" :value="i[1]"></el-tab-pane>
      </el-tabs>
    </el-row>
    <el-row class="film-table-box table-box">
-      <el-table :data="filmData" stripe class="film-table">
+      <el-table :data="filmData" stripe class="film-table" v-loading="loading" size="mini">
        <el-table-column prop="name" label="影片名称"></el-table-column>
        <el-table-column prop="type" label="影片类别" width="120"></el-table-column>
        <el-table-column prop="time" label="更新时间" width="180"></el-table-column>
        <el-table-column label="操作" width="130">
          <template slot-scope="scope">
-            <el-button type="text" @click="tableBtnClick(scope.row)">详情</el-button>
-            <el-button type="text" @click="tableBtnClick(scope.row)">收藏</el-button>
-            <el-button type="text" @click="tableBtnClick(scope.row)">播放</el-button>
+            <el-button type="text" @click="tableBtnClick('detail', scope.row)">详情</el-button>
+            <el-button type="text" @click="tableBtnClick('star', scope.row)">收藏</el-button>
+            <el-button type="text" @click="tableBtnClick('play', scope.row)">播放</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row class="film-bottom" type="flex" justify="space-between">
-      <el-select v-model="siteNum" placeholder="请选择" size="small" @change="selectSite">
+      <el-select v-model="site" placeholder="请选择" size="small" @change="selectSite">
        <el-option
          v-for="(i, j) in sites"
          :key="i.id"
@@ -42,64 +42,90 @@
 import Vue from 'vue'
 import zy from '@/lib/util.zy'
 import sites from '@/lib/sites'
+import { mapMutations } from 'vuex'
+import video from '@/plugins/dexie/video'
 export default Vue.extend({
  data () {
    return {
      sites: sites,
-      siteNum: 0,
-      activeName: sites[0].type[0][0],
+      tabs: 0,
      filmPage: 1,
      filmTotal: 0,
-      filmData: [
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' }
-      ]
+      filmData: [],
+      loading: false
+    }
+  },
+  computed: {
+    video: {
+      get () {
+        return this.$store.getters.getVideo
+      },
+      set (val) {
+        this.SET_VIDEO(val)
+      }
+    },
+    site: {
+      get () {
+        return this.$store.getters.getSite
+      },
+      set (val) {
+        this.SET_SITE(val)
+      }
+    },
+    Main: {
+      get () {
+        return this.$store.getters.getMain
+      },
+      set (val) {
+        this.SET_MAIN(val)
+      }
    }
  },
  methods: {
+    ...mapMutations(['SET_SITE', 'SET_DETAIL', 'SET_MAIN', 'SET_VIDEO']),
    tabClick (tab:any) {
-      console.log(tab.$attrs.value)
+      this.getFilmList(this.site, this.filmPage, tab.$attrs.value)
    },
    selectSite (e:any) {
-      this.activeName = sites[e].type[0][0]
+      this.site = e
+      this.filmPage = 1
+      this.getFilmList(e, 1, 0)
+    },
+    getFilmList (n: number = 0, p: number = 1, type: number = 0) {
+      this.loading = true
+      this.filmData = []
+      zy.films(n, p, type).then((res: any) => {
+        this.filmTotal = res.total
+        this.filmData = res.list
+        this.filmPage = p
+        this.loading = false
+      })
+    },
+    tableBtnClick (type: string, e: any) {
+      if (type === 'detail') {
+        this.video = e
+        this.SET_DETAIL(true)
+      }
+      if (type === 'star') {
+        video.find({ detail: e.detail }).then(res => {
+          if (res) {
+            this.$message.warning('已存在')
+          } else {
+            video.add(e).then(res => {
+              this.$message.success('收藏成功')
+            })
+          }
+        })
+      }
+      if (type === 'play') {
+        this.Main = 'Player'
+        this.video = e
+      }
    }
  },
-  created () {}
+  created () {
+    this.getFilmList()
+  }
 })
 </script>
 <style lang="scss" scoped>
--- a/src/page/player.vue
+++ b/src/page/player.vue
@@ -1,9 +1,12 @@
 <template>
  <el-row class="player">
    <el-row class="player-title" type="flex" justify="space-between">
-      <span>{{title}}</span>
      <span>
-        <el-button size="mini" icon="el-icon-document" circle></el-button>
+        <span>{{Object.keys(video).length !== 0 ? video.name : '无视频'}}</span>
+        <span v-if="video.id"> -- {{ urls[video.index] | ftLink}}</span>
+      </span>
+      <span v-if="video.id">
+        <el-button size="mini" @click="openDetail" icon="el-icon-document" circle></el-button>
        <el-button size="mini" icon="el-icon-star-off" circle></el-button>
      </span>
    </el-row>
@@ -11,12 +14,14 @@
      <div id="xg"></div>
    </el-row>
    <el-row class="player-films">
-      <el-button size="mini">第一集</el-button>
+      <el-button size="mini" v-for="(i, j) in urls" :key="j" @click="playBtnClick(i, j)">{{i | ftLink}}</el-button>
    </el-row>
  </el-row>
 </template>
 <script lang="ts">
 import Vue from 'vue'
+import { mapMutations } from 'vuex'
+import zy from '@/lib/util.zy'
 import 'xgplayer'
 // @ts-ignore
 import Hls from 'xgplayer-hls.js'
@@ -24,22 +29,86 @@ export default Vue.extend({
  data () {
    return {
      xg: null,
-      title: '视频标题',
      config: {
        id: 'xg',
-        url: 'https://iqiyi.cdn9-okzy.com/20191214/3344_80c1876a/index.m3u8',
+        url: '',
        fluid: false,
        autoplay: true,
+        videoInit: true,
        keyShortcut: 'on',
        defaultPlaybackRate: 1,
        playbackRate: [0.5, 0.75, 1, 1.5, 2]
+      },
+      urls: []
+    }
+  },
+  filters: {
+    ftLink (e: string) {
+      let name = e.split('$')[0]
+      return name
+    }
+  },
+  computed: {
+    video: {
+      get () {
+        return this.$store.getters.getVideo
+      },
+      set (val) {
+        this.SET_VIDEO(val)
      }
+    },
+    Main () {
+      return this.$store.getters.getMain
+    }
+  },
+  watch: {
+    video: {
+      handler (n, o) {
+        if (n.id !== o.id) {
+          this.getUrls()
+        }
+      },
+      deep: true
    }
  },
  methods: {
-
+    ...mapMutations(['SET_DETAIL', 'SET_VIDEO']),
+    openDetail () {
+      if (Object.keys(this.video).length > 0) {
+        this.SET_DETAIL(true)
+      }
+    },
+    playVideo (url: string) {
+      if (this.xg === null) {
+        console.log('lalal')
+        // this.config.url = 'this.video.'
+        this.xg = new Hls(this.config)
+      }
+      if (this.xg !== null) {
+        this.xg.src = url
+      }
+    },
+    getUrls () {
+      zy.detail(this.video.detail).then((res: any) => {
+        this.urls = res.urls
+        if (this.xg === null) {
+          let info: any = this.urls[this.video.index]
+          let url = info.split('$')[1]
+          console.log(url)
+          this.config.url = url
+          this.xg = new Hls(this.config)
+        }
+      })
+    },
+    playBtnClick (i: string, j: number) {
+      this.video.index = j
+      let url: string = i.split('$')[1]
+      this.playVideo(url)
+    }
+  },
+  created () {
+    this.getUrls()
  },
-  created () {},
  mounted () {
    if (Hls.isSupported()) {
      if (this.xg === null) {
--- a/src/page/search.vue
+++ b/src/page/search.vue
@@ -1,23 +1,23 @@
 <template>
  <el-row class="search">
    <el-row class="search-box">
-      <el-input class="search-input" size="medium" placeholder="请输入内容" v-model="keywords">
-        <el-select v-model="siteNum" slot="prepend" placeholder="请选择" @change="selectSite" style="width: 130px;">
+      <el-input class="search-input" size="medium" clearable placeholder="请输入内容" v-model.trim="keywords" @change="searchEvent">
+        <el-select v-model="site" slot="prepend" placeholder="请选择" @change="selectSite" style="width: 130px;">
          <el-option v-for="(i, j) in sites" :key="i.id" :label="i.name" :value="j"></el-option>
        </el-select>
-        <el-button slot="append" icon="el-icon-search"></el-button>
+        <el-button slot="append" icon="el-icon-search" @click="searchEvent"></el-button>
      </el-input>
    </el-row>
    <el-row class="search-table-box table-box">
-      <el-table :data="filmData" stripe class="search-table">
+      <el-table :data="filmData" stripe class="search-table" size="mini" v-loading="loading">
        <el-table-column prop="name" label="影片名称"></el-table-column>
        <el-table-column prop="type" label="影片类别" width="120"></el-table-column>
        <el-table-column prop="time" label="更新时间" width="180"></el-table-column>
        <el-table-column label="操作" width="130">
          <template slot-scope="scope">
-            <el-button type="text" @click="tableBtnClick(scope.row)">详情</el-button>
-            <el-button type="text" @click="tableBtnClick(scope.row)">收藏</el-button>
-            <el-button type="text" @click="tableBtnClick(scope.row)">播放</el-button>
+            <el-button type="text" @click="tableBtnClick('detail', scope.row)">详情</el-button>
+            <el-button type="text" @click="tableBtnClick('star', scope.row)">收藏</el-button>
+            <el-button type="text" @click="tableBtnClick('play', scope.row)">播放</el-button>
          </template>
        </el-table-column>
      </el-table>
@@ -28,6 +28,7 @@
        layout="total, prev, pager, next, jumper"
        :current-page="filmPage"
        :page-size="50"
+        @current-change="pageChange"
        :total="filmTotal">
      </el-pagination>
    </el-row>
@@ -36,60 +37,92 @@
 <script lang="ts">
 import Vue from 'vue'
 import sites from '@/lib/sites'
+import zy from '@/lib/util.zy'
+import { mapMutations } from 'vuex'
+import video from '@/plugins/dexie/video'
 export default Vue.extend({
  data () {
    return {
      sites: sites,
-      siteNum: 1,
      keywords: '',
-      filmData: [
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' }
-      ],
+      filmData: [],
      filmPage: 1,
-      filmTotal: 100
+      filmTotal: 0,
+      loading: false
+    }
+  },
+  computed: {
+    video: {
+      get () {
+        return this.$store.getters.getVideo
+      },
+      set (val) {
+        this.SET_VIDEO(val)
+      }
+    },
+    site: {
+      get () {
+        return this.$store.getters.getSite
+      },
+      set (val) {
+        this.SET_SITE(val)
+      }
+    },
+    Main: {
+      get () {
+        return this.$store.getters.getMain
+      },
+      set (val) {
+        this.SET_MAIN(val)
+      }
    }
  },
  methods: {
+    ...mapMutations(['SET_SITE', 'SET_DETAIL', 'SET_MAIN', 'SET_VIDEO']),
    selectSite (e:number) {
-      this.siteNum = e
+      this.site = e
+      this.filmData = []
+      this.filmPage = 1
+      this.filmTotal = 0
+      this.searchEvent()
+    },
+    searchEvent () {
+      if (this.keywords !== '') {
+        this.loading = true
+        zy.info(this.site, this.filmPage, this.keywords).then((res: any) => {
+          this.filmData = res.list
+          this.filmTotal = res.total
+          this.loading = false
+        })
+      }
+    },
+    pageChange (e:number) {
+      this.filmPage = e
+      this.searchEvent()
+    },
+    tableBtnClick (type: string, e: any) {
+      if (type === 'detail') {
+        this.SET_DETAIL(true)
+        this.video = e
+      }
+      if (type === 'star') {
+        video.find({ detail: e.detail }).then(res => {
+          if (res) {
+            this.$message.warning('已存在')
+          } else {
+            video.add(e).then(res => {
+              this.$message.success('收藏成功')
+            })
+          }
+        })
+      }
+      if (type === 'play') {
+        this.Main = 'Player'
+        this.video = e
+      }
    }
-  }
+  },
+  created () {}
 })
 </script>
 <style lang="scss" scoped>
--- a/src/page/setting.vue
+++ b/src/page/setting.vue
@@ -54,9 +54,9 @@ export default Vue.extend({
      // setting.add({ theme: 'light' }).then(res => {
      //   console.log(res)
      // })
-      setting.count().then(res => {
-        console.log(res)
-      })
+      // setting.count().then(res => {
+      //   console.log(res)
+      // })

      // setting.find({ theme: 'light' }).then(res => {
      //   console.log(res)
--- a/src/page/star.vue
+++ b/src/page/star.vue
@@ -1,15 +1,15 @@
 <template>
  <el-row class="star">
    <el-row class="star-table-box table-box">
-      <el-table :data="filmData" stripe class="film-table">
+      <el-table :data="filmData" stripe class="film-table" size="mini">
        <el-table-column prop="name" label="影片名称"></el-table-column>
        <el-table-column prop="type" label="影片类别" width="120"></el-table-column>
        <el-table-column prop="time" label="更新时间" width="180"></el-table-column>
        <el-table-column label="操作" width="130">
          <template slot-scope="scope">
-            <el-button type="text" @click="tableBtnClick(scope.row)">详情</el-button>
-            <el-button type="text" @click="tableBtnClick(scope.row)">删除</el-button>
-            <el-button type="text" @click="tableBtnClick(scope.row)">播放</el-button>
+            <el-button type="text" @click="tableBtnClick('detail', scope.row)">详情</el-button>
+            <el-button type="text" @click="tableBtnClick('delete', scope.row)">删除</el-button>
+            <el-button type="text" @click="tableBtnClick('play', scope.row)">播放</el-button>
          </template>
        </el-table-column>
      </el-table>
@@ -27,39 +27,73 @@
 </template>
 <script lang="ts">
 import Vue from 'vue'
+import video from '@/plugins/dexie/video'
+import { mapMutations } from 'vuex'
 export default Vue.extend({
  data () {
    return {
-      filmData: [
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
-        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' }
-      ],
+      filmData: [],
      filmPage: 1,
-      filmTotal: 120
+      filmTotal: 0
    }
+  },
+  computed: {
+    video: {
+      get () {
+        return this.$store.getters.getVideo
+      },
+      set (val) {
+        this.SET_VIDEO(val)
+      }
+    },
+    Main: {
+      get () {
+        return this.$store.getters.getMain
+      },
+      set (val) {
+        this.SET_MAIN(val)
+      }
+    }
+  },
+  watch: {
+    Main: {
+      handler () {
+        this.getAllStar()
+      },
+      deep: true
+    }
+  },
+  methods: {
+    ...mapMutations(['SET_DETAIL', 'SET_VIDEO', 'SET_MAIN']),
+    getAllStar () {
+      video.all().then(res => {
+        this.filmData = res
+        this.filmTotal = res.length
+      })
+    },
+    tableBtnClick (type: string, e: any) {
+      if (type === 'detail') {
+        this.SET_DETAIL(true)
+        this.video = e
+      }
+      if (type === 'delete') {
+        video.remove(e.id).then(res => {
+          if (!res) {
+            this.$message.success('删除成功')
+          } else {
+            this.$message.warning('删除失败, 请重试~')
+          }
+          this.getAllStar()
+        })
+      }
+      if (type === 'play') {
+        this.Main = 'Player'
+        this.video = e
+      }
+    }
+  },
+  created () {
+    this.getAllStar()
  }
 })
 </script>
--- a/src/plugins/dexie/video.ts
+++ b/src/plugins/dexie/video.ts
@@ -19,6 +19,15 @@ export default {
      })
    })
  },
+  all (): Promise<any> {
+    return new Promise((resolve, reject) => {
+      db.video.toArray().then(res => {
+        resolve(res)
+      }).catch(err => {
+        reject(err)
+      })
+    })
+  },
  update (id: number, data: any): Promise<any> {
    return new Promise((resolve, reject) => {
      db.video.update(id, data).then(updated => {
--- a/src/plugins/element.ts
+++ b/src/plugins/element.ts
@@ -2,7 +2,8 @@ import Vue from 'vue'
 import {
  Container, Row, Col, Header, Aside, Main, Drawer,
  Tabs, TabPane, Button, Select, Option, Pagination,
-  Table, TableColumn, Input, Card, Link
+  Table, TableColumn, Input, Card, Link, Loading,
+  Notification, Message
 } from 'element-ui'

 Vue.use(Container)
@@ -23,3 +24,7 @@ Vue.use(TableColumn)
 Vue.use(Input)
 Vue.use(Card)
 Vue.use(Link)
+Vue.use(Loading)
+
+Vue.prototype.$notify = Notification
+Vue.prototype.$message = Message
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -5,11 +5,39 @@ Vue.use(Vuex)

 export default new Vuex.Store({
  state: {
+    Main: 'Player',
+    site: 0,
+    detail: false,
+    video: {}
+  },
+  getters: {
+    getMain: state => {
+      return state.Main
+    },
+    getSite: state => {
+      return state.site
+    },
+    getDetail: state => {
+      return state.detail
+    },
+    getVideo: state => {
+      return state.video
+    }
  },
  mutations: {
+    SET_MAIN: (state, payload) => {
+      state.Main = payload
+    },
+    SET_SITE: (state, payload) => {
+      state.site = payload
+    },
+    SET_DETAIL: (state, payload) => {
+      state.detail = payload
+    },
+    SET_VIDEO: (state, payload) => {
+      state.video = payload
+    }
  },
-  actions: {
-  },
-  modules: {
-  }
+  actions: {},
+  modules: {}
 })