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.
152 lines
3.2 KiB
152 lines
3.2 KiB
<template>
|
|
<view class="scarch">
|
|
|
|
<u-navbar back-text="返回" :is-back="false" :title-bold="true">
|
|
<view class="slot-wrap" >
|
|
<!-- 如果使用u-search组件，必须要给v-model绑定一个变量 :show-action="showAction" -->
|
|
<u-search v-model="searchText" bg-color="#f5f7fa" :show-action="false" @search="search()" height="72" :action-style="{color: '#fff'}">
|
|
</u-search>
|
|
<text class="clear" @click="back">取消</text>
|
|
</view>
|
|
|
|
</u-navbar>
|
|
|
|
<!-- <view class="title">
|
|
<u-icon name="search" size="30" class="icon" color="#737373"></u-icon>
|
|
<u-input class="input" :clearable='false' v-model="searchText"
|
|
style="background-color: #f5f7fa;width: 594rpx;" confirm-type="search" @confirm="search()" />
|
|
<text class="clear" @click="back">取消</text>
|
|
</view> -->
|
|
<view class="history">
|
|
<view class="headline">
|
|
历史搜索
|
|
<view class="icon" @click="delShow = true">
|
|
|
|
</view>
|
|
</view>
|
|
<view class="ilst">
|
|
<view class="item" v-for="(item,index) in hitorySearchList" :key="index" @click="search(item)">
|
|
{{item}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-modal v-model="delShow" content="确定删除全部搜索记录？" confirm-color="red" @confirm="delAll" show-cancel-button>
|
|
</u-modal>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
list: [],
|
|
searchText: '',
|
|
delShow: false,
|
|
}
|
|
},
|
|
methods: {
|
|
back() {
|
|
uni.navigateBack()
|
|
},
|
|
search(item) {
|
|
if (!item) {
|
|
item = this.searchText
|
|
this.searchText = ''
|
|
}
|
|
if (!this.hitorySearchList.includes(item)) {
|
|
this.hitorySearchList.push(item)
|
|
this.$u.vuex('hitorySearchList', this.hitorySearchList)
|
|
}
|
|
uni.navigateTo({
|
|
url: '../searchList/searchList?text=' + item
|
|
|
|
})
|
|
},
|
|
delAll() {
|
|
this.hitorySearchList = []
|
|
this.$u.vuex('hitorySearchList', [])
|
|
this.delShow = false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.slot-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
padding: 0 36rpx;
|
|
|
|
.clear {
|
|
margin-left: 36rpx;
|
|
}
|
|
}
|
|
|
|
.scarch {
|
|
// .title {
|
|
// position: relative;
|
|
// display: flex;
|
|
// padding: 12rpx 36rpx;
|
|
// box-shadow: 0 2rpx 30rpx -1px #eeeeee;
|
|
|
|
// .icon {
|
|
// position: absolute;
|
|
// top: 30rpx;
|
|
// left: 60rpx;
|
|
// z-index: 2;
|
|
// }
|
|
|
|
// .input {
|
|
// text-indent: 65rpx;
|
|
// border-radius: 12rpx;
|
|
// vertical-align: middle;
|
|
// }
|
|
|
|
// .clear {
|
|
// line-height: 70rpx;
|
|
// margin-left: 32rpx;
|
|
// }
|
|
// }
|
|
|
|
.history {
|
|
.headline {
|
|
font-size: 30rpx;
|
|
color: #303133;
|
|
font-weight: 600;
|
|
margin-left: 36rpx;
|
|
margin-top: 48rpx;
|
|
|
|
.icon {
|
|
vertical-align: middle;
|
|
float: right;
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
background-image: url(../../../static/del.png);
|
|
background-size: 100% 100%;
|
|
transform: translateY(10rpx);
|
|
margin-right: 36rpx;
|
|
}
|
|
}
|
|
|
|
.ilst {
|
|
margin-top: 36rpx;
|
|
|
|
.item {
|
|
display: inline-block;
|
|
margin-left: 24rpx;
|
|
height: 66rpx;
|
|
text-align: center;
|
|
line-height: 66rpx;
|
|
background: #F5F7FA;
|
|
opacity: 1;
|
|
border-radius: 12rpx;
|
|
padding: 0 24rpx;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|