163 lines
3.5 KiB
Vue
163 lines
3.5 KiB
Vue
<template>
|
|
<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"/>
|
|
<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 class="title">历史搜索</view>
|
|
<view class="list acea-row limit-box">
|
|
<view
|
|
class="item"
|
|
v-for="item of historyKey"
|
|
:key="item.id"
|
|
@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
|
|
class="item"
|
|
v-for="keywordsKey of keywords"
|
|
:key="keywordsKey"
|
|
@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.historyKey.unshift({id: this.$global.generateMixed(10), word: search});
|
|
this.setHistory();
|
|
this.search = "";
|
|
|
|
this.toSearch(search);
|
|
},
|
|
toSearch(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() {
|
|
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> |