<template>
<view>
<input type="text" v-model="text" placeholder="输入..........">
<button type="default" @click="serachFn">搜索</button>
<view>
<view class="title">历史记录 <text @click="deleteFn">shanchu</text></view>
<view>
<block v-for="( item,index) in history">
<text class="box">
{{item}}
</text>
</block>
</view>
</view>
</view>
</template>
<script>
export default{
data(){
return{
history:[], //历史记录数组
text:"" //搜索内容
}
},
onShow(){
var that=this;
// 页面显示获取搜索历史记录信息
uni.getStorage({
key: 'history_key',
success:function(res) {
console.log(res.data);
console.log("获取缓存成功");
that.history=res.data;
}
});
},
methods:{
serachFn(){
// 如果为空则不判断直接返回
if(!this.text.trim()){
return
}
// 查找关键字是否已存在 存在返回第一个查找到的内容 不存在返回undefined
let index=this.history.find(item=>item==this.text.trim());
if(!index){
// 未查找到情况下 历史记录前面增加一条信息
this.history.unshift(this.text);
// 超过5条删除最后一个 保证一直是显示5条内容
if(this.history.length>5){
this.history.pop();
}
// 存入缓存
uni.setStorage({
key: 'history_key',
data: this.history,
success: function () {
console.log('success');
}
});
}
},
deleteFn(){
var that=this;
uni.showModal({
title: '提示',
content: '这是一个模态弹窗',
success: function (res) {
if (res.confirm) {
that.history=[];
uni.setStorage({
key: 'history_key',
data: that.history,
success: function () {
console.log('success');
}
});
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
}
}
}
</script>
<style>
input{ height: 40px; margin: 10px; outline: 1px solid red; padding-left: 10px;}
.box{ padding: 5px 10px; border: 1px solid #ddd; margin: 10px;}
.title{ margin: 20px;}
</style>
