Merge pull request #117 from ntutshop/develop/search

Develop search function

components/good/good-list.vue

@@ -7,7 +7,7 @@
         :label="item.title"
       >
         <good
-          v-for="(item, index) in goodList"
+          v-for="(item, index) in list"
           :key="index"
           :meta="item"
         />
@@ -25,12 +25,12 @@ export default {
   props: {
     list: {
       type: Array,
-      default () {
+      default() {
         return []
       }
     }
   },
-  data () {
+  data() {
     return {
       orderLabel: [
         {
@@ -45,37 +45,8 @@ export default {
         {
           title: '評價最高'
         }
-      ],
-      goodList: [
-        {
-          name: '雲南菜',
-          imgUrl:
-            'http://p1.meituan.net/600.600/deal/dd5fb74439b6601228cf0cb4d9275889323455.jpg@220w_125h_1e_1c',
-          rate: 5,
-          owner: 'Andy Meow',
-          price: 238,
-          type: '食物'
-        },
-        {
-          name: '雲南菜',
-          imgUrl:
-            'http://p1.meituan.net/600.600/deal/dd5fb74439b6601228cf0cb4d9275889323455.jpg@220w_125h_1e_1c',
-          rate: 5,
-          owner: 'Andy Meow',
-          price: 238,
-          type: '食物'
-        }
       ]
     }
-  },
-  async asyncData ({ app }) {
-    let { data } = await app.$axios.get('searchList')
-    return { items: data.list }
-  },
-  methods: {
-    navSelect: function () {
-      console.log('select')
-    }
   }
 }
 </script>

components/good/good.vue

@@ -41,10 +41,13 @@ export default {
   props: {
     meta: {
       type: Object,
-      default () {
+      default() {
         return {}
       }
     }
+  },
+  created() {
+    console.log(this.meta)
   }
 }
 </script>

components/index/test.json

@@ -0,0 +1,4 @@
+{
+    "uid": "yGk4p9RPWkgT56IBeYnAro1IJeU2",
+    "apiKey": "AIzaSyDlcf8iUDzlJ9mVEiCR8tLR51pD1HeUqvs"
+}

components/public/header/index.vue

@@ -23,17 +23,7 @@
         :span="8"
         class="search"
       >
-        <el-autocomplete
-          v-model="value"
-          :fetch-suggestions="querySearchAsync"
-          placeholder="請輸入內容"
-          @select="handleSelect"
-        >
-          <el-button
-            slot="append"
-            icon="el-icon-search"
-          />
-        </el-autocomplete>
+        <search-bar/>
       </el-col>
       <el-col :span="8">
         <v-layout>
@@ -54,11 +44,13 @@
 import Navbar from './nav.vue'
 import User from './user.vue'
 import Cart from './cart.vue'
+import SearchBar from './search.vue'
 export default {
   components: {
     Navbar,
     User,
-    Cart
+    Cart,
+    SearchBar
   },
   props: {
     prominent: {

components/public/header/search.vue

@@ -5,17 +5,49 @@
         v-model="value"
         :fetch-suggestions="querySearchAsync"
         placeholder="請輸入內容"
-        @select="handleSelect"
+        @select="searchCommit"
       >
         <el-button
           slot="append"
           icon="el-icon-search"
+          @click="searchCommit"
         />
       </el-autocomplete>
     </el-col>
   </div>
 </template>
 
-<style lang="scss">
+<script>
+export default {
+  data() {
+    return {
+      value: '',
+      timeout: null
+    }
+  },
+  methods: {
+    async querySearchAsync(queryString, callback) {
+      let { data } = await this.$axios.get(`/goods?keyword=${queryString}`)
+      let searchResult = []
+      data.forEach(element => {
+        searchResult.push({
+          value: element.name,
+          id: element.id
+        })
+      })
+      clearTimeout(this.timeout)
+      this.timeout = setTimeout(() => {
+        callback(searchResult)
+      }, 1000 * Math.random())
+    },
+    searchCommit(item) {
+      this.$router.push({
+        path: `/good/${item.id}`
+      })
+    }
+  }
+}
+</script>
 
+<style lang="scss">
 </style>