@@ -2,36 +2,41 @@
|
||||
<view class="good-search">
|
||||
<view class="header">
|
||||
<view class="search-box flex jc-between ai-center">
|
||||
<input v-model="search" type="text" placeholder="搜索商品" placeholder-style="color:#999"/>
|
||||
<input
|
||||
v-model.trim="search"
|
||||
type="text"
|
||||
placeholder="搜索商品"
|
||||
placeholder-style="color:#999"
|
||||
/>
|
||||
<view class="btn flex-0 flex jc-center ai-center" @click="submit">
|
||||
<text class="iconfont icon-sousuo2"></text>
|
||||
<text>搜索</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="page-content" v-if="historyKey.length">
|
||||
<view v-if="historyKey.length" class="page-content">
|
||||
<view class="title">历史搜索</view>
|
||||
<view class="list acea-row limit-box">
|
||||
<view
|
||||
class="item"
|
||||
v-for="item of historyKey"
|
||||
:key="item.id"
|
||||
class="item"
|
||||
@click="toSearch(item.word)"
|
||||
>{{ item.word }}
|
||||
>
|
||||
{{ item.word }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="page-content" v-if="keywords.length">
|
||||
<view class="title">热门搜索</view>
|
||||
<view class="list acea-row">
|
||||
<view
|
||||
class="item"
|
||||
v-for="keywordsKey of keywords"
|
||||
:key="keywordsKey"
|
||||
class="item"
|
||||
@click="toSearch(keywordsKey)"
|
||||
>{{ keywordsKey }}
|
||||
>
|
||||
{{ keywordsKey }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -40,19 +45,18 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getSearchKeyword} from "@/api/store";
|
||||
import {trim} from "@/utils";
|
||||
|
||||
import {getSearchKeyword} from '@/api/store'
|
||||
import {trim} from '@/utils'
|
||||
export default {
|
||||
name: "GoodSearch",
|
||||
name: 'GoodSearch',
|
||||
props: {},
|
||||
data: function () {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
keywords: [],
|
||||
search: "",
|
||||
search: '',
|
||||
historyKey: []
|
||||
};
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
this.getData();
|
||||
@@ -62,29 +66,32 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
const search = trim(this.search) || "";
|
||||
if (!search) return;
|
||||
|
||||
this.historyKey.unshift({id: this.$global.generateMixed(10), word: search});
|
||||
this.setHistory();
|
||||
this.search = "";
|
||||
|
||||
this.toSearch(search);
|
||||
const search = trim(this.search) || ''
|
||||
if (!search) return
|
||||
this.setHistory(search)
|
||||
this.search = ''
|
||||
this.toSearch(search)
|
||||
},
|
||||
toSearch(s) {
|
||||
this.$yrouter.push({path: "/pages/shop/GoodsList/index", query: {s}});
|
||||
this.setHistory(s)
|
||||
this.$yrouter.push({path: '/pages/shop/GoodsList/index', query: {s}})
|
||||
},
|
||||
getData() {
|
||||
getSearchKeyword().then(res => {
|
||||
this.keywords = res.data;
|
||||
});
|
||||
this.keywords = res.data
|
||||
})
|
||||
},
|
||||
getHistory() {
|
||||
let temp = JSON.parse(uni.getStorageSync("historyKey")) || [];
|
||||
this.historyKey = temp.slice(0, 30);
|
||||
let temp = JSON.parse(uni.getStorageSync('historyKey') || '[]')
|
||||
this.historyKey = temp.slice(0, 30)
|
||||
},
|
||||
setHistory() {
|
||||
uni.setStorageSync("historyKey", JSON.stringify(this.historyKey));
|
||||
setHistory(word) {
|
||||
const index = this.historyKey.findIndex(item => item.word === word)
|
||||
if (index > -1) {
|
||||
return
|
||||
}
|
||||
this.historyKey.unshift({id: this.$global.generateMixed(10), word })
|
||||
uni.setStorageSync('historyKey', JSON.stringify(this.historyKey))
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user