commit

@@ -9,12 +9,12 @@ const isDev = process.env.NODE_ENV === 'development' || !process.env.NODE_ENV;
 let renderer;
 let template = fs.readFileSync(path.join(__dirname, '../../src/index.html'), 'utf-8');
 
-const microCache = LRU({
+const microCache = LRU({ // eslint-disable-line
     max: 10000,
     maxAge: 2000
 });
 
-const isCacheable = req => {
+const isCacheable = () => {
     return false;
 };
 

 <template>
     <div class="search-slider">
         <div class="search-block">
-            <input-search ref="search" class="search" v-model="searchValue" :loading="product.isSearching" @enter="enter"></input-search>
+            <input-search ref="search" class="search" v-model="keyword" :loading="product.isSearching" @enter="enter"></input-search>
             <button class="btn btn-trans btn-cancel" @click="cancel">取消</button>
         </div>
         <div class="search-content" v-show="extend">
             <div class="search-list" v-if="!searchEmpty">
                 <ul>
-                    <a-link
+                    <li
                         v-for="item in searchList"
                         :key="item.keyword"
-                        :to="`/channel/search?query=${item.keyword}`">
-                        <li>
-                            {{item.keyword}}
-                            <i class="icon icon-right"></i>
-                        </li>
-                    </a-link>
+                        @click="toSearch(item.keyword)">
+                        {{item.keyword}}
+                        <i class="icon icon-right"></i>
+                    </li>
                 </ul>
             </div>
             <div class="search-tip" v-else>
@@ -42,11 +40,10 @@ export default {
     name: 'SearchBar',
     props: {
         full: Boolean,
-        keyword: String
+        value: String
     },
     data() {
         return {
-            searchValue: this.keyword,
             searchList: [],
             searchEmpty: false
         };
@@ -58,6 +55,19 @@ export default {
                 return true;
             }
             return this.searchEmpty || this.searchList.length;
+        },
+        keyword: {
+            get() {
+                return this.value;
+            },
+            set(val) {
+                this.$emit('input', val);
+                if (val) {
+                    this.searchDebounce(val);
+                } else {
+                    this.clear();
+                }
+            }
         }
     },
     created() {
@@ -67,8 +77,16 @@ export default {
         cancel() {
             this.$emit('cancel');
         },
+        clear() {
+            this.searchEmpty = false;
+            this.searchList = [];
+        },
         enter() {
-            this.$router.push(`/channel/search?query=${this.searchValue}`);
+            this.toSearch(this.value);
+        },
+        toSearch(searchKey) {
+            this.clear();
+            this.$router.push(`/channel/search?query=${searchKey}`);
         },
         focus() {
             this.$refs.search.focus();
@@ -76,7 +94,7 @@ export default {
         async search(val) {
             const result = await this.$store.dispatch(FETCH_SEARCH_REQUEST, {keyword: val});
 
-            if (result && this.searchValue) {
+            if (result && this.value) {
                 if (result.data.length) {
                     this.searchEmpty = false;
                     this.searchList = result.data;
@@ -86,16 +104,6 @@ export default {
             }
         }
     },
-    watch: {
-        searchValue(val) {
-            if (val) {
-                this.searchDebounce(val);
-            } else {
-                this.searchEmpty = false;
-                this.searchList = [];
-            }
-        }
-    },
     components: {InputSearch}
 };
 </script>

 <template>
     <transition name="search-slider" @after-enter="afterEnter">
-        <search-bar ref="searchBar" v-if="value" :full="true" @cancel="cancel"></search-bar>
+        <search-bar ref="searchBar" v-model="search" v-if="value" :full="true" @cancel="cancel"></search-bar>
     </transition>
 </template>
 
@@ -8,6 +8,11 @@
 import SearchBar from './search-bar';
 export default {
     name: 'SearchSlider',
+    data() {
+        return {
+            search: ''
+        };
+    },
     props: {
         value: Boolean
     },

 <template>
     <layout-body class="product-search">
-        <search-bar class="product-search-bar" @cancel="cancel" :keyword="keyword"></search-bar>
-        <iframe class="ifr-product" src="" frameborder="0"></iframe>
+        <search-bar class="product-search-bar" @cancel="cancel" v-model="search"></search-bar>
+        <div class="frames">
+            <iframe :src="searchUrl" frameborder="0"></iframe>
+        </div>
     </layout-body>
 </template>
 
@@ -11,11 +13,23 @@ export default {
     name: 'Search',
     data() {
         return {
-            keyword: ''
+            searchKey: '',
+            search: ''
         };
     },
+    beforeRouteUpdate(to, from, next) {
+        this.searchKey = to.query.query;
+        this.search = to.query.query;
+        next();
+    },
     created() {
-        this.keyword = this.$route.query.query;
+        this.searchKey = this.$route.query.query;
+        this.search = this.$route.query.query;
+    },
+    computed: {
+        searchUrl() {
+            return `/search?query=${this.searchKey}`;
+        }
     },
     methods: {
         cancel() {
@@ -34,11 +48,15 @@ export default {
 .product-search-bar {
     height: 90px;
 }
-.ifr-product {
+.frames {
     position: absolute;
     top: 90px;
     left: 0;
     right: 0;
     bottom: 0;
+    iframe {
+        width: 100%;
+        height: 100%;
+    }
 }
 </style>