search btns event

src/components/detail.vue

@@ -0,0 +1,24 @@
+<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/store.js

@@ -6,7 +6,8 @@ Vue.use(Vuex)
 export default new Vuex.Store({
   state: {
     theme: 'light',
-    iconActive: 'search'
+    iconActive: 'search',
+    video: {}
   },
   getters: {
     getTheme: state => {
@@ -14,6 +15,9 @@ export default new Vuex.Store({
     },
     getIconActive: state => {
       return state.iconActive
+    },
+    getVideo: state => {
+      return state.video
     }
   },
   mutations: {
@@ -22,9 +26,14 @@ export default new Vuex.Store({
     },
     SET_ICON_ACTIVE: (state, payload) => {
       state.iconActive = payload
+    },
+    SET_VIDEO: (state, payload) => {
+      state.video = payload
     }
   },
   actions: {
-
+    addCollection: (payload) => {
+      localStorage.collection = payload
+    }
   }
 })

src/views/Player.vue

@@ -1,8 +1,13 @@
 <template>
-  <Row class="player">player</Row>
+  <Row class="player">{{video}}</Row>
 </template>
 <script>
 export default {
-  name: 'player'
+  name: 'player',
+  computed: {
+    video () {
+      return this.$store.getters.getVideo
+    }
+  }
 }
 </script>

src/views/Search.vue

@@ -5,10 +5,10 @@
     </div>
     <div class="search-middle" v-if="active">
       <Table stripe :columns="columns" :data="data" :loading="loading">
-        <template slot-scope="{ row, index }" slot="action" >
+        <template slot-scope="{ row }" slot="action" >
           <Button size="small" @click="play(row)">Play</Button>
-          <Button size="small" @click="collection(index)">Star</Button>
-          <Button size="small" @click="detail(index)">Detail</Button>
+          <Button size="small" @click="collection(row)">Star</Button>
+          <Button size="small" @click="detail(row)">Detail</Button>
         </template>
       </Table>
     </div>
@@ -17,10 +17,12 @@
         <span class="progress-txt">搜索中</span>
       </Progress>
     </div>
+    <Detail v-if="show.detail" />
   </div>
 </template>
 <script>
 import video from '@/util/util.video'
+import Detail from '@/components/detail.vue'
 export default {
   name: 'search',
   data () {
@@ -53,9 +55,15 @@ export default {
         }
       ],
       data: [],
-      loading: true
+      loading: true,
+      show: {
+        detail: false
+      }
     }
   },
+  components: {
+    Detail
+  },
   methods: {
     async searchEvent () {
       if (this.txt !== '') {
@@ -71,9 +79,18 @@ export default {
     },
     play (e) {
       console.log(e)
+      this.$router.push({ name: 'play' })
+      this.$store.commit('SET_ICON_ACTIVE', 'play')
+      this.$store.commit('SET_VIDEO', e)
     },
-    collection (e) {},
-    detail (e) {}
+    collection (e) {
+      this.$store.commit('SET_ICON_ACTIVE', 'collection')
+      this.$store.commit('SET_VIDEO', e)
+    },
+    detail (e) {
+      this.show.detail = true
+      this.$store.commit('SET_VIDEO', e)
+    }
   },
   created () {
     this.searchEvent()