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

191 lines
3.7 KiB

<!--
* @Author: ch
* @Date: 2022-03-21 11:29:38
* @LastEditors: ch
* @LastEditTime: 2022-04-30 16:09:41
* @Description: file content
-->
<template>
<view class="container">
<UiPageHeader class="header">
<view slot="custom" class="search">
<u--input class="search--input" focus placeholder="请输入您想搜索的商品名称"
clearable v-model="searchValue" @confirm="onSearch"
placeholderClass="search--input__placeholder">
</u--input>
<u-icon class="search--icon" size="48rpx" name="search" @click="onSearch" color="#ccc"/>
<!-- <image class="search--icon" src="@/static/search/search.png"/> -->
</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.replace({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.replace({path:'/goodsList', query :{
search: searchValue
}
});
},
},
};
</script>
<style lang="scss">
page {
background: $color-grey0;
}
</style>
<style lang="scss" scoped>
.header{
background: $color-grey0;
}
.search{
height: 88rpx;
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
&--input{
display: block;
height: 70rpx;
border:none;
box-sizing: border-box;
background: $color-grey1;
padding-right: 70rpx !important;
&__placeholder{
font-size: $font-size-base;
color: $color-grey5;
}
}
&--icon{
position: absolute;
right: 60rpx;
}
&--btn{
font-size: 26rpx;
color: $color-grey5;
}
}
// 最近搜索
.history {
padding: 0 40rpx;
&--head {
text{
font-size: 26rpx;
color: $color-grey4;
}
display: flex;
justify-content: space-between;
align-items: center;
margin: 40rpx 0 20rpx;
}
&--del{
width: 27rpx;
height: 28rpx;
}
&--list{
display: flex;
flex-wrap: wrap;
}
&--item{
max-width: 460rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 70rpx;
line-height: 70rpx;
padding: 0 20rpx;
font-size: 26rpx;
color: $color-grey5;
background: $color-grey1;
margin: 10rpx;
}
}
</style>