init done

src/util/util.video.js

@@ -1,49 +1,53 @@
 // import Axios from "axios"
 import axios from 'axios'
 const video = {
-  url: 'http://www.666zy.com/',
   getList (url, txt) {
-    const t = encodeURI(txt)
-    const d = `wd=${t}&submit=search`
-    axios({
-      url: url,
-      method: 'post',
-      params: { m: 'vod-search' },
-      data: d
-    }).then(res => {
-      this.parser(res.data)
+    return new Promise((resolve, reject) => {
+      const t = encodeURI(txt)
+      const d = `wd=${t}&submit=search`
+      axios({
+        url: url,
+        method: 'post',
+        params: { m: 'vod-search' },
+        data: d
+      }).then(res => {
+        resolve(this.parser(url, res.data))
+      })
     })
   },
-  parser (txt) {
-    const parser = new DOMParser()
-    let html = parser.parseFromString(txt, 'text/html')
-    let data = []
-    let name = []
-    let detail = []
-    let type = []
-    let time = []
-    let nameList = html.querySelectorAll('.xing_vb4 a')
-    for (let i = 0; i < nameList.length; i++) {
-      name.push(nameList[i].innerText)
-      detail.push('http://www.666zy.com' + nameList[i].getAttribute('href'))
-    }
-    let typeList = html.querySelectorAll('.xing_vb5 a')
-    for (let i = 0; i < typeList.length; i++) {
-      type.push(typeList[i].innerText)
-    }
-    let timeList = html.querySelectorAll('.xing_vb6')
-    for (let i = 0; i < timeList.length; i++) {
-      time.push(timeList[i].innerText)
-    }
-    for (let i = 0; i < name.length; i++) {
-      let d = {}
-      d.name = name[i]
-      d.detail = detail[i]
-      d.type = type[i]
-      d.time = time[i]
-      data.push(d)
-    }
-    return data
+  parser (url, txt) {
+    return new Promise((resolve, reject) => {
+      const parser = new DOMParser()
+      let html = parser.parseFromString(txt, 'text/html')
+      let data = []
+      let name = []
+      let detail = []
+      let category = []
+      let time = []
+      let nameList = html.querySelectorAll('.xing_vb4 a')
+      for (let i = 0; i < nameList.length; i++) {
+        name.push(nameList[i].innerText)
+        detail.push(url + nameList[i].getAttribute('href'))
+      }
+      let typeList = html.querySelectorAll('.xing_vb5 a')
+      for (let i = 0; i < typeList.length; i++) {
+        category.push(typeList[i].innerText)
+      }
+      let timeList = html.querySelectorAll('.xing_vb6')
+      for (let i = 0; i < timeList.length; i++) {
+        time.push(timeList[i].innerText)
+      }
+      for (let i = 0; i < name.length; i++) {
+        let d = {}
+        d.name = name[i]
+        d.detail = detail[i]
+        d.category = category[i]
+        d.time = time[i]
+        data.push(d)
+      }
+      console.log(data)
+      resolve(data)
+    })
   }
 }
 

src/views/Search.vue

@@ -25,8 +25,8 @@ export default {
   name: 'search',
   data () {
     return {
-      txt: '',
-      active: false,
+      txt: '吸血鬼',
+      active: true,
       percent: 0,
       columns: [
         {
@@ -35,11 +35,15 @@ export default {
         },
         {
           title: 'Category',
-          key: 'category'
+          key: 'category',
+          width: 120,
+          align: 'center'
         },
         {
           title: 'Time',
-          key: 'time'
+          key: 'time',
+          width: 180,
+          align: 'center'
         },
         {
           title: 'Action',
@@ -55,9 +59,10 @@ export default {
   methods: {
     async searchEvent () {
       if (this.txt !== '') {
+        this.data = await video.getList('http://www.666zy.com/', this.txt)
         this.active = true
-        let d = await video.getList('http://www.666zy.com/', this.txt)
-        console.log(d)
+        this.loading = false
+        this.percent = 20
       }
     },
     searchFocus () {
@@ -70,17 +75,21 @@ export default {
     collection (e) {},
     detail (e) {}
   },
-  created () {}
+  created () {
+    this.searchEvent()
+  }
 }
 </script>
 <style lang="scss" scoped>
 .search{
   height: 100%;
   position: relative;
-  display: flex;
-  flex-direction: column;
   .search-top{
-    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 60px;
+    width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -89,7 +98,7 @@ export default {
       width: 80%;
     }
     &.haveList{
-      animation: slideUp 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+      animation: slideUp 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
     }
     @keyframes slideUp {
       from {
@@ -109,10 +118,27 @@ export default {
     }
   }
   .search-middle{
-    flex: 1;
+    position: absolute;
+    top: 60px;
+    width: 100%;
+    height: calc(100% - 80px);
     padding: 10px;
+    overflow: scroll;
+    &::-webkit-scrollbar { display: none }
+    animation: fade-in 1.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
+  }
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
   }
   .search-bottom{
+    position: absolute;
+    bottom: 0;
+    left: 0;
     width: 100%;
     height: 20px;
     display: flex;