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.
shop-app/pages/goods/search.vue

181 lines
3.5 KiB

<!--
* @Author: ch
* @Date: 2022-03-21 11:29:38
* @LastEditors: ch
* @LastEditTime: 2022-04-22 14:14:25
* @Description: file content
-->
<template>
<view class="container">
<UiPageHeader class="header">
<view slot="custom" class="search">
<u--input class="search--input" focus placeholder="请输入您想搜索的商品名称"
prefixIcon="search" ref="search" clearable prefixIconStyle="font-size:48rpx;color:#ccc"
v-model="searchValue" placeholderClass="search--input__placeholder"></u--input>
<text class="search--btn" @click="onSearch">搜索</text>
</view>
</UiPageHeader>
<view class="history" v-if="historyList.length">
<view class="history--head">
<text>最近搜索</text>
<image class="history--del" src="@/static/search/del.png" @click="clearHistory" />
</view>
<view class="history--list">
<view class="history--item" v-for="(val, index) in historyList"
:key="index" @click="handleQuick(val)">{{ val }}
</view>
</view>
</view>
</view>
</template>
<script>
import UiPageHeader from '../../components/UiPageHeader.vue';
const HISTORY_SEARCH_KEY = "historySearch";
export default {
components: { UiPageHeader },
data() {
return {
historyList : [],
searchValue: '',
};
},
onShow(){
this.searchValue = '';
this.historyList = uni.getStorageSync(HISTORY_SEARCH_KEY) || [];
},
onHide(){
// console.log(getCurrentPages());
},
mounted(){
console.log(this.$refs.search); //.search.focus();
},
methods: {
/**
* 搜索提交
*/
onSearch() {
const { searchValue } = this;
if (searchValue) {
this.setHistory(searchValue);
this.$Router.push({path:'/goodsList', query :{
search: searchValue
}
});
}
},
/**
* 清空最近搜索记录
*/
clearHistory() {
this.updateHistoryStorage([]);
},
/**
* 记录历史搜索
*/
setHistory(searchValue) {
const data = this.historyList;
const index = data.indexOf(searchValue);
index > -1 && data.splice(index, 1);
data.unshift(searchValue);
if(data.length === 11){
data.pop();
}
this.updateHistoryStorage(data);
},
/**
* 更新历史搜索缓存
* @param {Object} data
*/
updateHistoryStorage(data) {
this.historyList = data;
uni.setStorageSync(HISTORY_SEARCH_KEY, data);
},
/**
* 跳转到最近搜索
*/
handleQuick(searchValue) {
this.setHistory(searchValue);
this.$Router.push({path:'/goodsList', query :{
search: searchValue
}
});
},
},
};
</script>
<style lang="scss" scoped>
page{
background: $color-grey0;
}
.header{
background: $color-grey0;
}
.search{
height: 88rpx;
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
&--input{
display: block;
margin-right: 40rpx;
height: 70rpx;
border:none;
box-sizing: border-box;
background: $color-grey1;
&__placeholder{
font-size: $font-size-base;
color: $color-grey5;
}
}
&--btn{
font-size: 26rpx;
color: $color-grey5;
}
}
// 最近搜索
.history {
padding: 0 40rpx;
&--head {
font-size: 26rpx;
color: $color-grey5;
display: flex;
justify-content: space-between;
align-items: center;
margin: 40rpx 0;
}
&--del{
width: 27rpx;
height: 28rpx;
}
&--list{
display: flex;
flex-wrap: wrap;
}
&--item{
max-width: 276rpx;
overflow: hidden;
text-overflow: ellipsis;
height: 70rpx;
line-height: 70rpx;
padding: 0 20rpx;
font-size: 26rpx;
color: $color-grey5;
background: $color-grey1;
margin: 10rpx 18rpx 10rpx 0;
}
}
</style>