You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
110 lines
2.3 KiB
110 lines
2.3 KiB
<template>
|
|
<view>
|
|
<view class="lf-p-t-30 lf-p-r-30 lf-flex lf-w-100 lf-bg-white">
|
|
<u-icon name="search" class="search-icon"></u-icon>
|
|
<input class="rom-search" type="text" v-model="searchContent" @confirm="setSearch()" placeholder="请输入商品名称"/>
|
|
</view>
|
|
<view class="history-card" v-if="historySearch != ''">
|
|
<view class="lf-font-28 lf-color-gray lf-p-b-30 lf-p-l-30">
|
|
历史搜索
|
|
</view>
|
|
<view class="lf-flex lf-flex-wrap lf-p-l-20 lf-p-r-20">
|
|
<view class="search-tag" v-for="i of historySearch" @click="gosearch(i)">{{i}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="history-card" v-else>
|
|
<view class="lf-font-28 lf-color-gray lf-p-b-30 lf-p-l-30">
|
|
历史搜索
|
|
</view>
|
|
<view class="lf-flex lf-flex-wrap lf-p-l-30 lf-p-r-20">
|
|
暂无历史搜索记录
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
let list = []
|
|
export default {
|
|
data() {
|
|
return {
|
|
historySearch: [],
|
|
searchContent: ''
|
|
}
|
|
},
|
|
methods: {
|
|
gosearch(i) {
|
|
uni.navigateTo({
|
|
url: '/pages/search/searchList?serach_content=' + i
|
|
})
|
|
},
|
|
setSearch() {
|
|
console.log(this.searchContent)
|
|
// let list = [];
|
|
list.push(this.searchContent)
|
|
uni.navigateTo({
|
|
url: '/pages/search/searchList?serach_content=' + this.searchContent
|
|
})
|
|
setTimeout(() => {
|
|
this.historySearch = list
|
|
uni.setStorageSync('historySearch',this.historySearch)
|
|
},1000)
|
|
}
|
|
},
|
|
onShow() {
|
|
this.historySearch = uni.getStorageSync('historySearch') || [];
|
|
console.log('初始',this.historySearch)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background-color: #F8F8F8;
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
.history-card {
|
|
background-color: white;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 30rpx 0;
|
|
}
|
|
.search-tag {
|
|
padding: 10rpx 20rpx;
|
|
border-radius: 30rpx;
|
|
background: #f5f5f5;
|
|
color: #222;
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
width: max-content;
|
|
height: max-content;
|
|
font-size: 28rpx;
|
|
margin-right: 20rpx;
|
|
&:nth-child(5n) {
|
|
margin-right: 0;
|
|
}
|
|
&:nth-child(n + 6) {
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
.search-icon {
|
|
position: relative;
|
|
bottom: 0;
|
|
left: 54rpx;
|
|
}
|
|
/deep/.input-placeholder{
|
|
color: #777;
|
|
font-size: 28rpx;
|
|
}
|
|
.rom-search {
|
|
width: 686rpx;
|
|
height: 60rpx;
|
|
background: #f5f5f5;
|
|
border-radius: 30rpx;
|
|
padding-left: 74rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
</style>
|