collection done

src/assets/theme/light.scss

@@ -52,4 +52,11 @@
       }
     }
   }
+  .collection{
+    .ivu-table-cell{
+      button{
+        margin: 0 4px;
+      }
+    }
+  }
 }

src/plugin/iview/index.js

@@ -2,7 +2,8 @@ import Vue from 'vue'
 import 'view-design/dist/styles/iview.css'
 import {
   Layout, Sider, Header, Content, Row, Col,
-  Icon, Button, Input, Progress, Table
+  Icon, Button, Input, Progress, Table,
+  Message, Notice
 } from 'view-design'
 
 Vue.component('Layout', Layout)
@@ -16,3 +17,9 @@ Vue.component('Button', Button)
 Vue.component('Input', Input)
 Vue.component('Progress', Progress)
 Vue.component('Table', Table)
+
+Vue.prototype.$Message = Message
+Vue.prototype.$Notice = Notice
+Vue.prototype.$Notice.config({
+  top: 60
+})

src/views/Collection.vue

@@ -1,8 +1,85 @@
 <template>
-  <Row class="collection">collection</Row>
+  <Row class="collection">
+    <div class="collectionBox">
+      <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="error" ghost @click="deleteLi(row)">Delete</Button>
+        </template>
+      </Table>
+    </div>
+  </Row>
 </template>
 <script>
+import db from '@/plugin/nedb/video'
 export default {
-  name: 'collection'
+  name: 'collection',
+  data () {
+    return {
+      columns: [
+        {
+          title: 'Name',
+          key: 'name',
+          sortable: true
+        },
+        {
+          title: 'Category',
+          key: 'category',
+          width: 120,
+          align: 'center'
+        },
+        {
+          title: 'Time',
+          key: 'time',
+          width: 180,
+          align: 'center'
+        },
+        {
+          title: 'Action',
+          slot: 'action',
+          align: 'center',
+          width: 260
+        }
+      ],
+      data: [],
+      loading: false
+    }
+  },
+  methods: {
+    getList () {
+      db.find().then(res => {
+        this.data = res
+      })
+    },
+    play (e) {
+      console.log(e)
+    },
+    detail (e) {
+      console.log(e)
+    },
+    deleteLi (e) {
+      db.remove(e._id).then(res => {
+        this.getList()
+      })
+    }
+  },
+  created () {
+    this.getList()
+  }
 }
 </script>
+<style lang="scss" scoped>
+.collection{
+  height: 100%;
+  position: relative;
+  .collectionBox{
+    position: absolute;
+    width: 100%;
+    top: 0px;
+    height: 100%;
+    overflow: scroll;
+    &::-webkit-scrollbar { display: none }
+  }
+}
+</style>

src/views/Search.vue

@@ -21,6 +21,7 @@
   </div>
 </template>
 <script>
+import db from '@/plugin/nedb/video'
 import video from '@/util/util.video'
 import Detail from '@/components/detail.vue'
 export default {
@@ -78,14 +79,34 @@ export default {
       this.active = false
     },
     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) {
-      this.$store.commit('SET_ICON_ACTIVE', 'collection')
-      this.$store.commit('SET_VIDEO', e)
+      let data = {
+        category: e.category,
+        detail: e.detail,
+        name: e.name,
+        time: e.time
+      }
+      db.find({ detail: data.detail }).then(res => {
+        console.log(res, 'find')
+        if (res.length >= 1) {
+          this.$Notice.warning({
+            title: '资源已存在',
+            backgroud: true
+          })
+        } else {
+          db.add(data).then(res => {
+            console.log(res, 'add')
+            this.$Notice.success({
+              title: '收藏成功',
+              backgroud: true
+            })
+          })
+        }
+      })
     },
     detail (e) {
       this.show.detail = true