< template>
< view>
< view class = "zhuangbox u-flex" >
< u-- input
placeholder= "请输入关键字搜索"
border= "surround"
shape= 'circle'
prefixIcon= "search"
prefixIconStyle= "font-size: 22px;color: #909399"
v- model= "inputVal"
@confirm= 'searchFun'
> < / u-- input>
< text class = "u-m-l-30 u-color-8D4 u-f-s-26" @click= "cancelFun" > 取消< / text>
< / view>
< view class = "search-keyword" >
< scroll- view class = "keyword-box" scroll- y>
< view class = "keyword-block" >
< view class = "u-flex u-row-between u-p-t-30 u-p-b-30 u-tips-color" >
< view class = "title" > 历史搜索< / view>
< view @tap= "oldDelete" >
< image src= "@/static/img/shanchu.png" mode= "" class = "u-w-40 u-h-40" > < / image>
< / view>
< / view>
< view class = "u-flex u-flex-wrap" >
< view class = "u-m-r-15 u-m-b-15" v- for = "(keyword, index) in list" @tap= "doSearch(keyword)" : key= "index" >
< view class = "neirong" > { { keyword} } < / view>
< / view>
< / view>
< / view>
< / scroll- view>
< / view>
< / view>
< / template>
< script>
export default {
data ( ) {
return {
inputVal : '' ,
list : [ ] ,
}
} ,
onShow ( ) {
this . inputVal = '' ;
this . getSearchStorage ( ) ;
} ,
methods : {
searchFun ( ) {
if ( ! this . inputVal. trim ( ) ) {
this . $u. toast ( '请输入关键词' )
return ;
}
this . setSearchStorage ( this . inputVal) ;
this . gopage ( '/pagesA/index/list?keyword=' + this . inputVal) ;
} ,
cancelFun ( ) {
this . inputVal = '' ;
} ,
doSearch ( value ) {
if ( ! value. trim ( ) ) {
this . $u. toast ( '请输入关键词' )
return ;
}
this . active = true ;
this . inputVal = value;
this . gopage ( '/pagesA/index/list?keyword=' + value)
} ,
oldDelete ( ) {
uni. setStorageSync ( 'search_key' , '' ) ;
this . list = [ ] ;
} ,
setSearchStorage ( searchkey ) {
let searchArr= uni. getStorageSync ( 'search_key' ) || [ ]
searchArr. unshift ( searchkey)
uni. setStorageSync ( 'search_key' , searchArr)
} ,
getSearchStorage ( ) {
let getData = uni. getStorageSync ( 'search_key' )
let setData = [ ... new Set ( getData) ]
this . list = setData;
} ,
gopage ( url ) {
uni. navigateTo ( {
url : url
} )
} ,
}
}
< / script>
< style lang= "scss" >
. zhuangbox{
background : #FFFFFF ;
padding : 0 32rpx;
. u- input{
padding- left: 30rpx ! important;
background- color: $uni- bg- color- grey;
}
. u- input. u- border{
border- color: transparent ! important;
}
}
< / style>
< style lang= "scss" scoped>
. search- keyword{
padding : 0 30rpx 30rpx;
. keyword- block{
padding- bottom: 30rpx;
}
}
. zanwu{
margin : 0 auto;
}
. title{
font- size: 28rpx;
font- weight: 500 ;
color : #181818 ;
}
. neirong{
background : #F5F5F5 ;
border- radius: 28rpx;
padding : 10rpx 34rpx;
font- size: 26rpx;
color : #181818 ;
}
. u- flex{
display : flex;
align- items: center;
}
. wrap, . u- flex- wrap{
flex- wrap: wrap;
}
. flex_jus_between, . u- row- between{
justify- content: space- between;
}
. u- m- l- 30 {
margin- left: 30rpx;
}
. u- m- r- 15 {
margin- right: 15rpx;
}
. u- m- b- 15 {
margin- bottom: 15rpx;
}
. u- p- t- 30 {
padding- top: 30rpx;
}
. u- p- b- 30 {
padding- bottom: 30rpx;
}
. u- w- 40 {
width : 40rpx;
}
. u- h- 40 {
height : 40rpx;
}
< / style>