播放页面支持频道分组(外置)

src/components/Play.vue

@@ -101,6 +101,16 @@
         <span class="last-tip" v-if="!video.key && right.history.length > 0" @click="historyItemEvent(right.history[0])">上次播放到【{{right.history[0].site}}】{{right.history[0].name}} 第{{right.history[0].index+1}}集</span>
       </div>
       <div class="more" v-if="video.iptv" :key="Boolean(video.iptv)">
+        <span class="zy-svg" @click="channelListShow = !channelListShow">
+          <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="dashboardIconTitle">
+            <title id="dashboardIconTitle">频道列表</title>
+            <rect width="20" height="20" x="2" y="2"></rect>
+            <path d="M11 7L17 7M11 12L17 12M11 17L17 17"></path>
+            <line x1="7" y1="7" x2="7" y2="7"></line>
+            <line x1="7" y1="12" x2="7" y2="12"></line>
+            <line x1="7" y1="17" x2="7" y2="17"></line>
+          </svg>
+        </span>
         <span class="zy-svg" @click="otherEvent" v-if="right.sources.length > 1">
           <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="coloursIconTitle">
             <title id="coloursIconTitle">换源</title>
@@ -171,6 +181,25 @@
           </ul>
         </div>
       </div>
+      <div v-if="channelListShow" class="list">
+         <div class="list-top">
+          <span class="list-top-title">频道列表</span>
+          <span class="list-top-close zy-svg" @click="channelListShow = false">
+            <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="closeIconTitle">
+              <title id="closeIconTitle">关闭</title>
+              <path d="M6.34314575 6.34314575L17.6568542 17.6568542M6.34314575 17.6568542L17.6568542 6.34314575"></path>
+            </svg>
+          </span>
+        </div>
+        <div class="list-body zy-scroll" :style="{overflowY:scroll? 'auto' : 'hidden',paddingRight: scroll ? '0': '5px' }" @mouseenter="scroll = true" @mouseleave="scroll = false">
+          <el-tree
+            :data="channelListForShow"
+            :props="defaultProps"
+            accordion
+            @node-click="handleNodeClick">
+          </el-tree>
+        </div>
+      </div>
     </transition>
   </div>
 </template>
@@ -277,7 +306,13 @@ export default {
       isStar: false,
       isTop: false,
       mini: {},
-      channelList: []
+      channelList: [],
+      channelListForShow: [],
+      channelListShow: false,
+      defaultProps: {
+        label: 'label',
+        children: 'children'
+      }
     }
   },
   filters: {
@@ -362,6 +397,12 @@ export default {
   },
   methods: {
     ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE']),
+    handleNodeClick (node) {
+      console.log(node)
+      if (node.channel) {
+        this.playChannel(node.channel)
+      }
+    },
     async getUrls () {
       if (this.video.key === '') {
         return false
@@ -379,6 +420,7 @@ export default {
         // 是直播源，直接播放
         this.playChannel(this.video.iptv)
       } else {
+        this.iptvMode = false
         const index = this.video.info.index | 0
         var time = this.video.info.time
         if (!time) {
@@ -1126,6 +1168,15 @@ export default {
     getChannelList () {
       channelList.all().then(res => {
         this.channelList = res.filter(e => e.isActive)
+        this.channelListForShow = []
+        const groups = [...new Set(this.channelList.map(iptv => iptv.group))]
+        groups.forEach(g => {
+          var doc = {
+            label: g,
+            children: this.channelList.filter(x => x.group === g).map(i => { return { label: i.name, channel: i } })
+          }
+          this.channelListForShow.push(doc)
+        })
       })
     },
     bindEvent () {
@@ -1447,6 +1498,9 @@ export default {
     padding: 6px;
     display: flex;
     flex-direction: column;
+    .el-tree{
+      background-color: inherit;
+    }
     .list-top{
       display: flex;
       justify-content: space-between;

src/lib/element/index.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { Message, Button, Table, TableColumn, Tag, Input, Dialog, Form, FormItem, Switch, Select, Option, Checkbox, Autocomplete, Col } from 'element-ui'
+import { Message, Button, Table, TableColumn, Tag, Input, Dialog, Form, FormItem, Switch, Select, Option, Checkbox, Autocomplete, Col, Tree } from 'element-ui'
 import Plugin from 'v-fit-columns'
 Vue.use(Button)
 Vue.use(Col)
@@ -16,4 +16,5 @@ Vue.use(Select)
 Vue.use(Option)
 Vue.use(Checkbox)
 Vue.use(Autocomplete)
+Vue.use(Tree)
 Vue.prototype.$message = Message