170 lines
3.7 KiB
Vue
170 lines
3.7 KiB
Vue
<template>
|
|
<view class="good-search">
|
|
<view class="header">
|
|
<view class="search-box flex jc-between ai-center">
|
|
<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 v-if="historyKey.length" class="page-content">
|
|
<view class="title">历史搜索</view>
|
|
<view class="list acea-row limit-box">
|
|
<view
|
|
v-for="item of historyKey"
|
|
:key="item.id"
|
|
class="item"
|
|
@click="toSearch(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
|
|
v-for="keywordsKey of keywords"
|
|
:key="keywordsKey"
|
|
class="item"
|
|
@click="toSearch(keywordsKey)"
|
|
>
|
|
{{ keywordsKey }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="line"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {getSearchKeyword} from '@/api/store'
|
|
import {trim} from '@/utils'
|
|
export default {
|
|
name: 'GoodSearch',
|
|
props: {},
|
|
data: function () {
|
|
return {
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
keywords: [],
|
|
search: '',
|
|
historyKey: []
|
|
}
|
|
},
|
|
mounted: function () {
|
|
this.getData();
|
|
},
|
|
onShow() {
|
|
this.getHistory();
|
|
},
|
|
methods: {
|
|
submit() {
|
|
const search = trim(this.search) || ''
|
|
if (!search) return
|
|
this.setHistory(search)
|
|
this.search = ''
|
|
this.toSearch(search)
|
|
},
|
|
toSearch(s) {
|
|
this.setHistory(s)
|
|
this.$yrouter.push({path: '/pages/shop/GoodsList/index', query: {s}})
|
|
},
|
|
getData() {
|
|
getSearchKeyword().then(res => {
|
|
this.keywords = res.data
|
|
})
|
|
},
|
|
getHistory() {
|
|
let temp = JSON.parse(uni.getStorageSync('historyKey') || '[]')
|
|
this.historyKey = temp.slice(0, 30)
|
|
},
|
|
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))
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.good-search {
|
|
min-height: 100vh;
|
|
background: #fff !important;
|
|
|
|
.header {
|
|
padding: 40rpx 32rpx 32rpx;
|
|
background: #F9F9F9;
|
|
|
|
.search-box {
|
|
width: 686rpx;
|
|
height: 72rpx;
|
|
box-sizing: border-box;
|
|
padding: 0 8rpx 0 32rpx;
|
|
border-radius: 36rpx;
|
|
background: #fff;
|
|
font-size: 24rpx;
|
|
|
|
input {
|
|
width: 100%;
|
|
}
|
|
|
|
.btn {
|
|
width: 128rpx;
|
|
height: 54rpx;
|
|
background: #FD574B;
|
|
border-radius: 28rpx;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
|
|
.icon-sousuo2 {
|
|
margin-right: 4rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.page-content {
|
|
padding: 0 32rpx;
|
|
|
|
.title {
|
|
margin: 22rpx 0 24rpx;
|
|
color: #333;
|
|
font-size: 28rpx;
|
|
line-height: 40rpx;
|
|
font-weight: bold;
|
|
letter-spacing: 4px;
|
|
}
|
|
|
|
.list {
|
|
.item {
|
|
height: 48rpx;
|
|
box-sizing: border-box;
|
|
margin: 0 24rpx 20rpx 0;
|
|
padding: 0 24rpx;
|
|
border-radius: 28rpx;
|
|
background: #F1F0EE;
|
|
color: #666;
|
|
font-size: 24rpx;
|
|
line-height: 48rpx;
|
|
}
|
|
}
|
|
|
|
.limit-box {
|
|
max-height: 260rpx;
|
|
overflow-y: hidden;
|
|
}
|
|
}
|
|
}
|
|
</style> |