fe / yohoblk-wap · Commits

Go to a project

Authored by 陈峰
Commit 502b2cc023c6dda1e3a362c81e6e167c885bcee2 1 parent 3fbf5274

commit

Inline Side-by-side
Showing 4 changed files with 61 additions and 30 deletions
@@ -9,12 +9,12 @@ const isDev = process.env.NODE_ENV === 'development' || !process.env.NODE_ENV; @@ -9,12 +9,12 @@ const isDev = process.env.NODE_ENV === 'development' || !process.env.NODE_ENV;
9 let renderer; 9 let renderer;
10 let template = fs.readFileSync(path.join(__dirname, '../../src/index.html'), 'utf-8'); 10 let template = fs.readFileSync(path.join(__dirname, '../../src/index.html'), 'utf-8');
11 11
12 -const microCache = LRU({ 12 +const microCache = LRU({ // eslint-disable-line
13 max: 10000, 13 max: 10000,
14 maxAge: 2000 14 maxAge: 2000
15 }); 15 });
16 16
17 -const isCacheable = req => { 17 +const isCacheable = () => {
18 return false; 18 return false;
19 }; 19 };
20 20
1 <template> 1 <template>
2 <div class="search-slider"> 2 <div class="search-slider">
3 <div class="search-block"> 3 <div class="search-block">
4 - <input-search ref="search" class="search" v-model="searchValue" :loading="product.isSearching" @enter="enter"></input-search> 4 + <input-search ref="search" class="search" v-model="keyword" :loading="product.isSearching" @enter="enter"></input-search>
5 <button class="btn btn-trans btn-cancel" @click="cancel">取消</button> 5 <button class="btn btn-trans btn-cancel" @click="cancel">取消</button>
6 </div> 6 </div>
7 <div class="search-content" v-show="extend"> 7 <div class="search-content" v-show="extend">
8 <div class="search-list" v-if="!searchEmpty"> 8 <div class="search-list" v-if="!searchEmpty">
9 <ul> 9 <ul>
10 - <a-link 10 + <li
11 v-for="item in searchList" 11 v-for="item in searchList"
12 :key="item.keyword" 12 :key="item.keyword"
13 - :to="`/channel/search?query=${item.keyword}`">  
14 - <li>  
15 - {{item.keyword}}  
16 - <i class="icon icon-right"></i>  
17 - </li>  
18 - </a-link> 13 + @click="toSearch(item.keyword)">
  14 + {{item.keyword}}
  15 + <i class="icon icon-right"></i>
  16 + </li>
19 </ul> 17 </ul>
20 </div> 18 </div>
21 <div class="search-tip" v-else> 19 <div class="search-tip" v-else>
@@ -42,11 +40,10 @@ export default { @@ -42,11 +40,10 @@ export default {
42 name: 'SearchBar', 40 name: 'SearchBar',
43 props: { 41 props: {
44 full: Boolean, 42 full: Boolean,
45 - keyword: String 43 + value: String
46 }, 44 },
47 data() { 45 data() {
48 return { 46 return {
49 - searchValue: this.keyword,  
50 searchList: [], 47 searchList: [],
51 searchEmpty: false 48 searchEmpty: false
52 }; 49 };
@@ -58,6 +55,19 @@ export default { @@ -58,6 +55,19 @@ export default {
58 return true; 55 return true;
59 } 56 }
60 return this.searchEmpty || this.searchList.length; 57 return this.searchEmpty || this.searchList.length;
  58 + },
  59 + keyword: {
  60 + get() {
  61 + return this.value;
  62 + },
  63 + set(val) {
  64 + this.$emit('input', val);
  65 + if (val) {
  66 + this.searchDebounce(val);
  67 + } else {
  68 + this.clear();
  69 + }
  70 + }
61 } 71 }
62 }, 72 },
63 created() { 73 created() {
@@ -67,8 +77,16 @@ export default { @@ -67,8 +77,16 @@ export default {
67 cancel() { 77 cancel() {
68 this.$emit('cancel'); 78 this.$emit('cancel');
69 }, 79 },
  80 + clear() {
  81 + this.searchEmpty = false;
  82 + this.searchList = [];
  83 + },
70 enter() { 84 enter() {
71 - this.$router.push(`/channel/search?query=${this.searchValue}`); 85 + this.toSearch(this.value);
  86 + },
  87 + toSearch(searchKey) {
  88 + this.clear();
  89 + this.$router.push(`/channel/search?query=${searchKey}`);
72 }, 90 },
73 focus() { 91 focus() {
74 this.$refs.search.focus(); 92 this.$refs.search.focus();
@@ -76,7 +94,7 @@ export default { @@ -76,7 +94,7 @@ export default {
76 async search(val) { 94 async search(val) {
77 const result = await this.$store.dispatch(FETCH_SEARCH_REQUEST, {keyword: val}); 95 const result = await this.$store.dispatch(FETCH_SEARCH_REQUEST, {keyword: val});
78 96
79 - if (result && this.searchValue) { 97 + if (result && this.value) {
80 if (result.data.length) { 98 if (result.data.length) {
81 this.searchEmpty = false; 99 this.searchEmpty = false;
82 this.searchList = result.data; 100 this.searchList = result.data;
@@ -86,16 +104,6 @@ export default { @@ -86,16 +104,6 @@ export default {
86 } 104 }
87 } 105 }
88 }, 106 },
89 - watch: {  
90 - searchValue(val) {  
91 - if (val) {  
92 - this.searchDebounce(val);  
93 - } else {  
94 - this.searchEmpty = false;  
95 - this.searchList = [];  
96 - }  
97 - }  
98 - },  
99 components: {InputSearch} 107 components: {InputSearch}
100 }; 108 };
101 </script> 109 </script>
1 <template> 1 <template>
2 <transition name="search-slider" @after-enter="afterEnter"> 2 <transition name="search-slider" @after-enter="afterEnter">
3 - <search-bar ref="searchBar" v-if="value" :full="true" @cancel="cancel"></search-bar> 3 + <search-bar ref="searchBar" v-model="search" v-if="value" :full="true" @cancel="cancel"></search-bar>
4 </transition> 4 </transition>
5 </template> 5 </template>
6 6
@@ -8,6 +8,11 @@ @@ -8,6 +8,11 @@
8 import SearchBar from './search-bar'; 8 import SearchBar from './search-bar';
9 export default { 9 export default {
10 name: 'SearchSlider', 10 name: 'SearchSlider',
  11 + data() {
  12 + return {
  13 + search: ''
  14 + };
  15 + },
11 props: { 16 props: {
12 value: Boolean 17 value: Boolean
13 }, 18 },
1 <template> 1 <template>
2 <layout-body class="product-search"> 2 <layout-body class="product-search">
3 - <search-bar class="product-search-bar" @cancel="cancel" :keyword="keyword"></search-bar>  
4 - <iframe class="ifr-product" src="" frameborder="0"></iframe> 3 + <search-bar class="product-search-bar" @cancel="cancel" v-model="search"></search-bar>
  4 + <div class="frames">
  5 + <iframe :src="searchUrl" frameborder="0"></iframe>
  6 + </div>
5 </layout-body> 7 </layout-body>
6 </template> 8 </template>
7 9
@@ -11,11 +13,23 @@ export default { @@ -11,11 +13,23 @@ export default {
11 name: 'Search', 13 name: 'Search',
12 data() { 14 data() {
13 return { 15 return {
14 - keyword: '' 16 + searchKey: '',
  17 + search: ''
15 }; 18 };
16 }, 19 },
  20 + beforeRouteUpdate(to, from, next) {
  21 + this.searchKey = to.query.query;
  22 + this.search = to.query.query;
  23 + next();
  24 + },
17 created() { 25 created() {
18 - this.keyword = this.$route.query.query; 26 + this.searchKey = this.$route.query.query;
  27 + this.search = this.$route.query.query;
  28 + },
  29 + computed: {
  30 + searchUrl() {
  31 + return `/search?query=${this.searchKey}`;
  32 + }
19 }, 33 },
20 methods: { 34 methods: {
21 cancel() { 35 cancel() {
@@ -34,11 +48,15 @@ export default { @@ -34,11 +48,15 @@ export default {
34 .product-search-bar { 48 .product-search-bar {
35 height: 90px; 49 height: 90px;
36 } 50 }
37 -.ifr-product { 51 +.frames {
38 position: absolute; 52 position: absolute;
39 top: 90px; 53 top: 90px;
40 left: 0; 54 left: 0;
41 right: 0; 55 right: 0;
42 bottom: 0; 56 bottom: 0;
  57 + iframe {
  58 + width: 100%;
  59 + height: 100%;
  60 + }
43 } 61 }
44 </style> 62 </style>