v0.7.6 资源播放优化样式

2026-05-05 20:44:52 +08:00 · 2020-01-19 14:37:22 +08:00
parent 93c7392754
commit dabf4390bd
9 changed files with 235 additions and 107 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,7 +27,7 @@
        <Setting v-show="Main === 'Setting'" />
      </el-main>
    </el-container>
-    <el-drawer class="drawer" :visible.sync="detail" :show-close="true" size="90%" :with-header="true" direction="btt" title="详情">
+    <el-drawer class="drawer" :visible.sync="detail.show" :show-close="true" size="90%" :with-header="true" direction="btt" title="详情">
      <Detail />
    </el-drawer>
  </el-container>
--- a/src/assets/theme/light.scss
+++ b/src/assets/theme/light.scss
@@ -9,6 +9,12 @@
  .el-pagination .btn-next, .el-pagination .btn-prev{
    color: var(--l-c);
  }
+  .el-drawer{
+    overflow: auto;
+    &::-webkit-scrollbar{
+      width: 0px;
+    }
+  }
  .Header, .Aside{
    i{
      color: var(--l-icon);
@@ -28,7 +34,7 @@
    }
  }
  .Main{
-    .film, .search, .star{
+    .film, .search, .star, .player{
      .table-box{
        &::-webkit-scrollbar-track {
          box-shadow: inset 0 0 6px var(--l-bdc);
--- a/src/components/detail.vue
+++ b/src/components/detail.vue
@@ -2,16 +2,17 @@
  <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 class="urls">
+        <el-button size="mini" v-for="(i, j) in detail.urls" :key="j" @click="playBtn(i, j)">{{i | ftLink}}</el-button>
+      </el-row>
    </el-row>
  </el-row>
 </template>
 <script lang="ts">
 import Vue from 'vue'
 import zy from '@/lib/util.zy'
+import { mapMutations } from 'vuex'
 export default Vue.extend({
  name: 'detail',
  data () {
@@ -21,8 +22,29 @@ export default Vue.extend({
    }
  },
  computed: {
-    video () {
-      return this.$store.getters.getVideo
+    d () {
+      return this.$store.getters.getDetail
+    },
+    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: {
+    d () {
+      this.getDetailEvent()
    }
  },
  filters: {
@@ -31,31 +53,33 @@ export default Vue.extend({
      return name
    }
  },
-  watch: {
-    video: {
-      handler (n) {
-        this.getDetailEvent(n)
-      },
-      deep: true
-    }
-  },
  methods: {
-    getDetailEvent (n: any) {
+    ...mapMutations(['SET_MAIN', 'SET_VIDEO']),
+    getDetailEvent () {
+      let url = this.d.video.detail
      this.detail = {}
      this.loading = true
-      zy.detail(n.detail).then((res: any) => {
+      zy.detail(url).then((res: any) => {
        this.detail = res
        this.loading = false
      })
    },
-    playBtn (i: string, j: number, video: any) {
-      console.log(i, j, video)
+    playBtn (i: string, j: number) {
+      if (this.Main !== 'Player') {
+        this.d.video.index = j
+        this.video = this.d.video
+        this.Main = 'Player'
+      } else {
+        this.d.video.index = j
+        this.video = this.d.video
+      }
+      this.d.show = false
    }
  },
-  created () {},
-  mounted () {
-    this.getDetailEvent(this.video)
-  }
+  created () {
+    this.getDetailEvent()
+  },
+  mounted () {}
 })
 </script>
 <style lang="scss">
@@ -124,6 +148,7 @@ export default Vue.extend({
      font-size: 14px;
    }
    .urls{
+      margin-bottom: 20px;
      padding-bottom: 0;
      button{
        margin: 0 10px 10px 0;
--- a/src/lib/sites.ts
+++ b/src/lib/sites.ts
@@ -10,31 +10,31 @@ const sites:Array<Site> = [
    id: 'okzy',
    name: 'OK资源网',
    url: 'https://www.okzy.co',
-    type: [[ '最新', 0 ], [ '电影', 1 ], [ '电视剧', 2 ], [ '综艺', 3 ], [ '动漫', 4 ], [ '伦理', 21 ], [ '福利', 22 ], [ '解说', 33 ]]
+    type: [[ '最新', '0' ], [ '电影', '1' ], [ '电视剧', '2' ], [ '综艺', '3' ], [ '动漫', '4' ], [ '伦理', '21' ], [ '福利', '22' ], [ '解说', '33' ]]
  },
  {
    id: 'zuidazy',
    name: '最大资源网',
    url: 'http://www.zuidazy1.com',
-    type: [[ '最新', 0 ], [ '电影', 1 ], [ '电视剧', 2 ], [ '综艺', 3 ], [ '动漫', 4 ], [ '福利', 16 ], [ '伦理', 17 ], [ '音乐', 18 ]]
+    type: [[ '最新', '0' ], [ '电影', '1' ], [ '电视剧', '2' ], [ '综艺', '3' ], [ '动漫', '4' ], [ '福利', '16' ], [ '伦理', '17' ], [ '音乐', '18' ]]
  },
  {
    id: 'subo',
    name: '速播资源站',
    url: 'https://www.subo988.com',
-    type: [[ '最新', 0 ], [ '电影', 1 ], [ '电视剧', 2 ], [ '综艺', 3 ], [ '动漫', 4 ], [ '伦理', 16 ], [ '音乐', 20 ]]
+    type: [[ '最新', '0' ], [ '电影', '1' ], [ '电视剧', '2' ], [ '综艺', '3' ], [ '动漫', '4' ], [ '伦理', '16' ], [ '音乐', '20' ]]
  },
  {
    id: 'zuixinzy',
    name: '最新资源网',
    url: 'http://www.zuixinzy.cc',
-    type: [[ '最新', 0 ], [ '电影', 1 ], [ '电视剧', 2 ], [ '综艺', 3 ], [ '动漫', 4 ], ['伦理', 21], ['情色', 23], [ '福利', 30 ], [ '解说', 34 ]]
+    type: [[ '最新', '0' ], [ '电影', '1' ], [ '电视剧', '2' ], [ '综艺', '3' ], [ '动漫', '4' ], ['伦理', '21'], ['情色', '23'], [ '福利', '30' ], [ '解说', '34' ]]
  },
  {
    id: '123ku',
    name: '123资源网',
    url: 'https://www.123ku.com',
-    type: [[ '最新', 0 ], [ '电影', 1 ], [ '电视剧', 2 ], [ '综艺', 3 ], [ '动漫', 4 ], [ '伦理', 16 ]]
+    type: [[ '最新', '0' ], [ '电影', '1' ], [ '电视剧', '2' ], [ '综艺', '3' ], [ '动漫', '4' ], [ '伦理', '16' ]]
  }
 ]

--- a/src/page/film.vue
+++ b/src/page/film.vue
@@ -2,7 +2,7 @@
  <el-row class="film">
    <el-row class="film-tabs">
      <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-tab-pane class="film-tabpane" v-for="(i, j) in sites[site].type" :key="j" :label="i[0]" :name="i[1]"></el-tab-pane>
      </el-tabs>
    </el-row>
    <el-row class="film-table-box table-box">
@@ -48,7 +48,7 @@ export default Vue.extend({
  data () {
    return {
      sites: sites,
-      tabs: 0,
+      tabs: '0',
      filmPage: 1,
      filmTotal: 0,
      filmData: [],
@@ -84,10 +84,11 @@ export default Vue.extend({
  methods: {
    ...mapMutations(['SET_SITE', 'SET_DETAIL', 'SET_MAIN', 'SET_VIDEO']),
    tabClick (tab:any) {
-      this.getFilmList(this.site, this.filmPage, tab.$attrs.value)
+      this.getFilmList(this.site, this.filmPage, tab.name)
    },
    selectSite (e:any) {
      this.site = e
+      this.tabs = '0'
      this.filmPage = 1
      this.getFilmList(e, 1, 0)
    },
@@ -103,8 +104,11 @@ export default Vue.extend({
    },
    tableBtnClick (type: string, e: any) {
      if (type === 'detail') {
-        this.video = e
-        this.SET_DETAIL(true)
+        let d = {
+          show: true,
+          video: e
+        }
+        this.SET_DETAIL(d)
      }
      if (type === 'star') {
        video.find({ detail: e.detail }).then(res => {
@@ -144,7 +148,7 @@ export default Vue.extend({
    top: 54px;
    width: 100%;
    height: calc(100% - 100px);
-    overflow-y: scroll;
+    overflow: auto;
    &::-webkit-scrollbar{
      width: 6px;
    }
--- a/src/page/player.vue
+++ b/src/page/player.vue
@@ -1,20 +1,25 @@
 <template>
  <el-row class="player">
-    <el-row class="player-title" type="flex" justify="space-between">
-      <span>
-        <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 class="player-title">
+      <el-row class="player-title-box" type="flex" justify="space-between">
+        <span>
+          <span>{{Object.keys(video).length !== 0 ? video.name : '无视频'}}</span>
+          <span> -- {{ num }}</span>
+        </span>
+        <span v-show="Object.keys(video).length > 0">
+          <el-button size="mini" @click="openDetail" icon="el-icon-document" circle></el-button>
+          <el-button size="mini" v-show="!star" @click="starEvent" icon="el-icon-star-off" circle></el-button>
+          <el-button size="mini" v-show="star" @click="starEvent" icon="el-icon-star-on" circle></el-button>
+        </span>
+      </el-row>
    </el-row>
    <el-row class="player-box">
      <div id="xg"></div>
    </el-row>
-    <el-row class="player-films">
-      <el-button size="mini" v-for="(i, j) in urls" :key="j" @click="playBtnClick(i, j)">{{i | ftLink}}</el-button>
+    <el-row class="player-films table-box">
+      <el-row class="player-films-box">
+        <el-button :type="j === video.index ? 'primary' : ''" size="mini" v-for="(i, j) in urls" :key="j" @click="playBtnClick(i, j)" plain>{{i | ftLink}}</el-button>
+      </el-row>
    </el-row>
  </el-row>
 </template>
@@ -25,6 +30,7 @@ import zy from '@/lib/util.zy'
 import 'xgplayer'
 // @ts-ignore
 import Hls from 'xgplayer-hls.js'
+import video from '@/plugins/dexie/video'
 export default Vue.extend({
  data () {
    return {
@@ -39,16 +45,15 @@ export default Vue.extend({
        defaultPlaybackRate: 1,
        playbackRate: [0.5, 0.75, 1, 1.5, 2]
      },
-      urls: []
-    }
-  },
-  filters: {
-    ftLink (e: string) {
-      let name = e.split('$')[0]
-      return name
+      urls: [],
+      num: '',
+      star: false
    }
  },
  computed: {
+    d () {
+      return this.$store.getters.getDetail
+    },
    video: {
      get () {
        return this.$store.getters.getVideo
@@ -63,59 +68,87 @@ export default Vue.extend({
  },
  watch: {
    video: {
-      handler (n, o) {
-        if (n.id !== o.id) {
-          this.getUrls()
-        }
+      handler () {
+        this.getUrls()
      },
      deep: true
    }
  },
+  filters: {
+    ftLink (e: string) {
+      let name = e.split('$')[0]
+      return name
+    }
+  },
  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
+      let d = {
+        show: true,
+        video: this.video
      }
+      this.SET_DETAIL(d)
    },
    getUrls () {
+      if (this.xg) {
+        // @ts-ignore
+        this.xg.destroy(true)
+        this.xg = null
+      }
+      this.checkStar()
      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.num = info.split('$')[0]
          this.config.url = url
-          this.xg = new Hls(this.config)
+          this.$nextTick(() => {
+            this.xg = new Hls(this.config)
+            // @ts-ignore
+            this.xg.on('error', function () {
+              console.log('lala')
+            })
+          })
+        }
+      })
+    },
+    checkStar () {
+      video.find({ detail: this.video.detail }).then(res => {
+        if (res) {
+          this.star = true
+        } else {
+          this.star = false
+        }
+      })
+    },
+    starEvent () {
+      video.find({ detail: this.video.detail }).then(res => {
+        if (res) {
+          video.remove(res.id).then(res => {
+            if (!res) {
+              this.$message.success('删除成功')
+              this.star = false
+            } else {
+              this.$message.warning('删除失败, 请重试~')
+            }
+          })
+        } else {
+          video.add(this.video).then(res => {
+            this.star = true
+            this.$message.success('收藏成功')
+          })
        }
      })
    },
    playBtnClick (i: string, j: number) {
-      this.video.index = j
-      let url: string = i.split('$')[1]
-      this.playVideo(url)
-    }
-  },
-  created () {
-    this.getUrls()
-  },
-  mounted () {
-    if (Hls.isSupported()) {
-      if (this.xg === null) {
-        // this.xg = new Hls(this.config)
+      if (this.video.index !== j) {
+        let url = i.split('$')[1]
+        this.num = i.split('$')[0]
+        this.video.index = j
+        // @ts-ignore
+        this.xg.src = url
      }
-    } else {
-      console.log('haha')
    }
  }
 })
@@ -123,24 +156,47 @@ export default Vue.extend({
 <style lang="scss" scoped>
 .player{
  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  width: 100%;
+  position: relative;
  .player-title{
-    width: 600px;
-    height: 40px;
-    line-height: 40px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+    .player-title-box{
+      width: 600px;
+      margin: 0 auto;
+    }
  }
  .player-box{
+    position: absolute;
+    top: 50px;
+    left: 0;
    width: 100%;
-    height: auto;
-    display: flex;
-    justify-content: center;
+    height: 350px;
+    #xg{
+      margin: 0 auto;
+    }
  }
-  .player-btns, .player-films{
-    margin-top: 10px;
-    width: 600px;
+  .player-films{
+    position: absolute;
+    top: 400px;
+    left: 0;
+    width: 100%;
+    height: calc(100% - 400px);
+    overflow: auto;
+    button{
+      margin: 0 10px 10px 0;
+    }
+    &::-webkit-scrollbar{
+      width: 6px;
+    }
+    .player-films-box{
+      width: 600px;
+      margin: 0 auto;
+    }
  }
 }
 </style>
--- a/src/page/search.vue
+++ b/src/page/search.vue
@@ -1,6 +1,6 @@
 <template>
  <el-row class="search">
-    <el-row class="search-box">
+    <el-row class="search-box" :class="table === true ? 'search-box hasTable' : 'search-box'">
      <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>
@@ -8,7 +8,7 @@
        <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-row v-show="table" class="search-table-box table-box">
      <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>
@@ -22,7 +22,7 @@
        </el-table-column>
      </el-table>
    </el-row>
-    <el-row class="search-bottom" type="flex" justify="end">
+    <el-row v-show="table" class="search-bottom" type="flex" justify="end">
      <el-pagination
        small
        layout="total, prev, pager, next, jumper"
@@ -43,6 +43,7 @@ import video from '@/plugins/dexie/video'
 export default Vue.extend({
  data () {
    return {
+      table: false,
      sites: sites,
      keywords: '',
      filmData: [],
@@ -89,6 +90,7 @@ export default Vue.extend({
    searchEvent () {
      if (this.keywords !== '') {
        this.loading = true
+        this.table = true
        zy.info(this.site, this.filmPage, this.keywords).then((res: any) => {
          this.filmData = res.list
          this.filmTotal = res.total
@@ -102,8 +104,11 @@ export default Vue.extend({
    },
    tableBtnClick (type: string, e: any) {
      if (type === 'detail') {
-        this.SET_DETAIL(true)
-        this.video = e
+        let d = {
+          show: true,
+          video: e
+        }
+        this.SET_DETAIL(d)
      }
      if (type === 'star') {
        video.find({ detail: e.detail }).then(res => {
@@ -135,13 +140,38 @@ export default Vue.extend({
    left: 0;
    width: 100%;
    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    animation: slideDown 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+    @keyframes slideDown {
+      from {
+        height: 40px;
+      }
+      to{
+        height: 90%;
+      }
+    }
+    &.hasTable{
+      animation: slideUp 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+    }
+    @keyframes slideUp {
+      from {
+        height: 90%;
+        opacity: 0;
+      }
+      to{
+        height: 40px;
+        opacity: 1;
+      }
+    }
  }
  .search-table-box{
    position: absolute;
    top: 40px;
    width: 100%;
    height: calc(100% - 100px);
-    overflow-y: scroll;
+    overflow: auto;
    &::-webkit-scrollbar{
      width: 6px;
    }
--- a/src/page/star.vue
+++ b/src/page/star.vue
@@ -73,8 +73,11 @@ export default Vue.extend({
    },
    tableBtnClick (type: string, e: any) {
      if (type === 'detail') {
-        this.SET_DETAIL(true)
-        this.video = e
+        let d = {
+          show: true,
+          video: e
+        }
+        this.SET_DETAIL(d)
      }
      if (type === 'delete') {
        video.remove(e.id).then(res => {
@@ -106,7 +109,7 @@ export default Vue.extend({
    top: 0px;
    width: 100%;
    height: calc(100% - 40px);
-    overflow-y: scroll;
+    overflow: auto;
    &::-webkit-scrollbar{
      width: 6px;
    }
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -7,7 +7,11 @@ export default new Vuex.Store({
  state: {
    Main: 'Player',
    site: 0,
-    detail: false,
+    detail: {
+      show: false,
+      video: ''
+    },
+    dUrl: '',
    video: {}
  },
  getters: {