本文已参与「新人创作礼」活动，一起开启掘金创作之路。
- 两个页面共同使用此页面，所以判断进入此页面的路由，分别存储和取出历史记录
- 功能：搜索相同关键词位置提前，删除单个、删除全部、搜索记录去重
vue组件
<template>
<div class="ledger_search">
<van-search
v-model="search_value"
show-action
shape="round"
placeholder="请输入搜索关键词"
@search="onSearch"
@cancel="onCancel"
/>
<div class="search_history">
<div class="title_delete">
<p>历史搜索</p>
<p v-if="history.length!=0" @click="clearHistory"><i class="iconfont icon-shanchu1"></i></p>
</div>
<div class="record_box" >
<span @click="onSearch(item)" @touchstart="deleteItem(item)" @touchend="clearTimer(item)" v-for="(item,index) in history" :key="index">{{item}}</span>
</div>
<div class="history_null" v-if="history.length==0">
暂无历史记录
</div>
</div>
</div>
</template>
<script>
import { Dialog,Toast } from 'vant';
import { getStore,setStore,removeStore } from '@/util/utils';
import { mapState,mapMutations } from 'vuex';
export default{
name:'ledgerSearch',
data:()=>{
return{
search_value:'',
history:[],
timer:null,
history_name:''
}
},
computed:{
...mapState(['userLedgerKeyword'])
},
methods:{
...mapMutations(["EQUIP_SEARCH_VALUE","USER_SEARCH_VALUE"]),
onSearch(val){
// Toast(val)
if(val.trim()!=''){
// console.log('-----')
this.addHistory(val)
}else{
//值为空，传第一个history,亦或传空
//传第一个history：搜索关键字如何设为空
//传空：无法实现淘宝搜索，placeholder不需要设置为显示第一个历史记录
console.log('空')
Toast("搜索内容不能为空")
// this.commitStore(val)
// this.$router.go(-1)
}
},
//搜索时添加历史记录
addHistory(val){
let history = getStore(this.history_name)
if(history){
history = Array.from(JSON.parse(history));
if(history.indexOf(val.trim())>-1){
let index = history.indexOf(val.trim())
history.splice(index,1)
history.unshift(val.trim())
}else{
history.unshift(val.trim())
}
this.history = history
setStore(this.history_name,JSON.stringify(history))
}else{
let arr=[]
arr.push(val.trim())
this.history = arr
setStore(this.history_name,JSON.stringify(arr))
}
this.commitStore(val)
this.$router.go(-1)
},
//判断页面存入相应store
commitStore(val){
if(this.history_name=="equip_ledger"){
this.EQUIP_SEARCH_VALUE(val.trim())
}else if(this.history_name=="user_ledger"){
this.USER_SEARCH_VALUE(val.trim())
}
},
onCancel() {
// Toast('取消');
this.commitStore("")
this.$router.go(-1)
},
//清空搜索记录
clearHistory(){
Dialog.confirm({
message: '确认删除全部历史记录？',
getContainer:()=>{
return document.querySelector(".ledger_search")
}
}).then(() => {
//on confirm
console.log('delete')
removeStore(this.history_name)
this.history = []
}).catch(() => {
console.log('no')
// on cancel
});
},
//长按删除
deleteItem(item){
clearTimeout(this.timer)
this.timer = setTimeout(()=>{
Dialog.confirm({
message: '确认删除该历史记录？',
getContainer:()=>{
return document.querySelector(".ledger_search")
}
}).then(() => {
//on confirm
console.log('delete')
let history = getStore(this.history_name)
history = Array.from(JSON.parse(history));
let index = history.indexOf(item)
history.splice(index,1)
this.history = history
setStore(this.history_name,JSON.stringify(history))
}).catch(() => {
console.log('no')
// on cancel
});
},1000)
},
clearTimer(item){
clearTimeout(this.timer)
},
//获取历史记录
getHistory(name){
let history = getStore(name)
if(history){
this.history = Array.from(JSON.parse(history))
}
}
},
beforeRouteEnter(to,from,next){
next(vm=>{
if(from.name=="userLedger"){
vm.history_name="user_ledger"
}else{
vm.history_name="equip_ledger"
}
vm.getHistory(vm.history_name)
})
},
mounted(){
// this.getHistory(this.history_name)
// console.log(this.userLedgerKeyword)
if(this.userLedgerKeyword){
this.search_value = this.userLedgerKeyword
}
}
}
</script>
<style lang="less" scoped>
.ledger_search{
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
width: 100%;
height: 100%;
background:#fff;
padding: 0 32px;
box-sizing: border-box;
.search_history{
margin-top: 0px;
.title_delete{
height: 60px;
display: flex;
justify-content: space-between;
font-size: 26px;
color: #999;
line-height: 60px;
i{
font-size: 30px;
}
}
.history_null{
text-align: center;
line-height: 100px;
color: #999;
font-size: 16px;
}
.record_box{
span{
display: inline-block;
padding: 14px 24px;
border-radius: 8px;
background: #F4F4F4;
font-size: 26px;
color: #666;
margin-top: 20px ;
margin-right: 20px;
user-select: none;
}
span:active{
background: #F1F1F1
}
}
}
}
</style>
<style lang="less">
.ledger_search{
.van-search{
height: 120px;
.van-search__action{
margin-left: 20px;
}
.van-search__content{
height: 60px;
padding: 0 20px;
.van-field__left-icon{
line-height: 60px;
margin-right: 10px;
}
.van-cell__value {
line-height: 60px;
}
}
}
.van-dialog{
width: 400px;
height: 200px;
.van-dialog__content{
height: 140px;
.van-dialog__message{
padding: 0;
line-height: 150px;
}
}
}
}
</style>
utils文件
/**
* 存localStorage
*/
export const setStore = (name, content) => {
if (!name) return;
if (typeof content !== 'string') {
content = JSON.stringify(content);
}
window.localStorage.setItem(name, content);
}
/**
* 获取localStorage
*/
export const getStore = (name) => {
if (!name) return;
return window.localStorage.getItem(name);
}
/**
* 删除localStorage
*/
export const removeStore = name => {
if (!name) return;
window.localStorage.removeItem(name);
}
store.js文件
state:{
userLedgerKeyword:'',//用户台账搜索关键字
equipLedgerKeyword:'',
},
mutations: {
EQUIP_SEARCH_VALUE(state,key){
state.equipLedgerKeyword = key
},
USER_SEARCH_VALUE(state,key){
state.userLedgerKeyword = key
},
}
