uniapp+uView保存与删除搜索历史记录

Mirs_Zhu

已于 2024-07-22 12:19:46 修改

阅读量439

点赞数 12

文章标签： uni-app

于 2024-07-22 12:19:03 首次发布

本文链接：https://blog.csdn.net/Mirs_Zhu/article/details/140605555

版权

<u-search placeholder="请输入公司代码或简称" :show-action="false" searchIconColor="#999999" searchIconSize="24"

shape="round" bgColor="#F1F2F4" maxlength="10" placeholderColor="#C0C0C0" v-model="serchVal" @change="searchCompany"></u-search>

</view>

</view>

暂无搜索历史记录~

</view>

</view>

<u-list @scrolltolower="scrolltolower" class="uList" v-if="indexList.length != 0">

<u-list-item v-for="(item, index) in indexList" :key="index" class="uCellItem">

<u-cell v-html="item.cellText || `${item.title}（${item.code}）`" class="uCellStyle"

@click="toCompanyPage(item, index)"></u-cell>

</u-list-item>

</u-list>

暂无搜索记录~

</view>

<u-modal :show="showPopup" @confirm="confirm" @cancel="showPopup=false" :showCancelButton="true" ref="uModal" :content='content'>

</u-modal>

</view>

</template>

import {

queryCompanyList,

queryIntegral

} from "@/api/financial.js" // 后端接口

import {

getSession

} from '@/util/storage'; // 方法请看下方

export default {

data() {

return {

serchVal: '', // 搜索框值

indexList: [], // 列表数据

cellText: '', // 搜索高亮显示的数据

timer: null, // 定时器

oldWordList: [], // 页面展示记录列表

showNoData: true, // 是否显示无记录文本

showNoDataImg: false, // 是否显示无搜索列表图片

showPopup: false, // 是否显示清空历史记录弹框

content:'确定清空全部历史搜索记录？', // 清空历史记录弹框内容

}

onLoad(option) {

this.oldWordList = JSON.parse(localStorage.getItem('oldWordList'))

if (this.oldWordList && this.oldWordList.length > 0) {

this.showNoData = false

this.showNoDataImg = false

}

created() {

methods: {

//清除历史搜索

oldDelete() {

if (!this.showNoData) {

this.showPopup = true

}

// 确认清空历史记录

confirm() {

this.showPopup = false

this.oldKeywordList = [];

this.serchVal = ''

localStorage.removeItem('oldKeywordList')

localStorage.removeItem('oldWordList')

this.showNoData = true

this.showNoDataImg = false

// 点击记录快捷跳转页面（根据自身需求跳转）

doSearch(item) {

this.saveKey(item)

// 验证输入框不能输入表情符

validParams() {

let iconRule =

/[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig

if (iconRule.test(this.serchVal) == true) {

uni.$u.toast('不能输入表情符')

return false

}

let specialKey = /[`~!@#$%^&()_\+=<>?{}|\;'\\（）[\]·~！@#¥%……&——\+={}|《》？：【】、；‘’，。、～]/g

if (specialKey.test(this.serchVal) == true) {

uni.$u.toast('不能输入特殊字符')

return false

}

return true

// 搜索

searchCompany() {

if (this.timer) {

clearTimeout(this.timer);

}

let oldWordList1 = JSON.parse(localStorage.getItem('oldWordList'))

if (this.serchVal.trim() != '' && this.validParams()) {

this.timer = setTimeout(() => {

let params = {

company: this.serchVal

}

let _this = this

queryCompanyList(params).then(res => {

if (res.code == 0) {

this.indexList = []

// 遍历所有对话文本内容

for (let i = 0; i < res.data.length; i++) {

this.cellText = `${res.data[i].title}（${res.data[i].code}）`

let item = res.data || []

// 当对话内容中有包含搜索框中的字符串时(不区分大小写)

// let oRegExp = new RegExp('('+this.serchVal.trim()+')',"\*ig");

this.cellText = this.cellText.replace(this.serchVal.trim(),`<font style='color:#3849B4;'>${this.serchVal.trim()}</font>`

)

//替换所有搜索找到的关键字更换颜色

this.indexList.push({

cellText: this.cellText,

...item

})

}

if (this.indexList.length == 0) {

this.showNoDataImg = true

this.showNoData = false

} else {

if (oldWordList1 && oldWordList1.length > 0) {

this.showNoData = false

this.showNoDataImg = false

}

} else {

uni.$u.toast(res.msg)

}

})

}, 500)

} else {

if (oldWordList1 && oldWordList1.length > 0) {

this.indexList = []

this.showNoDataImg = false

this.showNoData = false

} else {

this.indexList = []

this.showNoDataImg = false

this.showNoData = true

}

// 点击列表选项页面跳转

toCompanyPage(item, index) {

let objValues = Object.values(item)

objValues.forEach((res1, index1) => {

if (index1 == index) {

let title = `${res1.title}（${res1.code}）`

this.saveKey(title)

}

})

saveKey(title) {

//保存关键字到历史记录

let oldKeyPageList = JSON.parse(localStorage.getItem('oldWordList'))

let oldTitle = title

let oldWordPageList = [] // 定义新数组缓存页面搜索列表

oldWordPageList.push(oldTitle)

// 缓存完整代码记录

if (oldKeyPageList && oldKeyPageList.length > 0) { // 如果缓存有历史记录

let OldKeys1 = oldKeyPageList

let findIndex1 = oldKeyPageList.indexOf(oldTitle)

if (findIndex1 == -1) {

oldKeyPageList.unshift(oldTitle)

} else {

oldKeyPageList.splice(findIndex1, 1)

oldKeyPageList.unshift(oldTitle)

}

this.oldWordList = oldKeyPageList

} else { // 如果缓存没有历史记录

this.oldWordList = oldWordPageList // 新数组

}

// 最多10个纪录

this.oldWordList.length > 10 && this.oldWordList.pop()

localStorage.setItem('oldWordList',JSON.stringify(this.oldWordList))

// 列表下滑

scrolltolower() {

this.loadmore()

// 列表加载更多

loadmore() {

for (let i = 0; i < 30; i++) {

this.indexList.push({

url: this.urls[uni.$u.random(0, this.urls.length - 1)]

})

}

</script>

.page {

width: 100%;

height: 100%;

background: #ffffff;

.companyIpt {

width: 690rpx;

height: 66rpx;

line-height: 66rpx;

margin: 20rpx auto 20rpx;

}

.uList {

width: 690rpx;

margin: 0rpx auto;

color: #666666;

font-size: 28rpx;

font-family: PingFang SC;

.uCellItem {

padding: 30rpx 24rpx;

border-bottom: 1rpx solid #DCDEE3;

}

.uCellStyle {

font-size: 28rpx;

font-family: PingFang SC;

color: #666666;

}

.noDataBox {

position: fixed;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

.noDataImg {

width: 320rpx;

height: 268rpx;

background-size: 100% 100%;

}

.noDataText {

color: #666666;

font-size: 26rpx;

margin-top: 53rpx;

text-align: center;

}

.serchImg {

width: 586rpx;

height: 482rpx;

background-size: 100% 100%;

position: fixed;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

}

.keyword-list-header {

margin: 20rpx 27rpx 27rpx 30rpx;

display: flex;

justify-content: space-between;

.serachText {

font-size: 30rpx;

font-family: PingFang SC;

font-weight: 800;

color: #1C1C1C;

}

.icon-qingkongjilu {

font-size: 30rpx;

font-family: PingFang SC;

font-weight: 500;

color: #999999;

margin-top: 2rpx;

margin-right: 6rpx;

}

.iconText {

font-size: 24rpx;

font-family: PingFang SC;

font-weight: 500;

color: #999999;

}

.keyword {

padding: 0 30rpx;

display: flex;

flex-flow: wrap;

justify-content: flex-start;

view {

display: flex;

justify-content: center;

align-items: center;

border-radius: 27rpx;

padding: 0 20rpx;

margin: 10rpx 20rpx 10rpx 0;

height: 54rpx;

font-size: 28rpx;

background: #FAFAFB;

border: 1rpx solid #EAEBED;

color: #333333;

}

.noData {

display: flex;

justify-content: center;

align-items: center;

color: #999999;

font-size: 30rpx;

margin-top: 427rpx;

}

.noDataBox {

position: fixed;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

.noDataImg {

width: 320rpx;

height: 268rpx;

background-size: 100% 100%;

}

.noDataText {

color: #666666;

font-size: 26rpx;

margin-top: 53rpx;

text-align: center;

}

/deep/ .uni-modal {

border-radius: 12rpx;

}

/deep/ .u-modal__button-group__wrapper--confirm,

.u-modal__button-group__wrapper--only-cancel {

border-left: 1rpx solid rgb(214, 215, 217);

}

/deep/ .u-image {

width: 320rpx;

height: 268rpx;

}

/deep/ .u-search__content__input--placeholder {

font-size: 24rpx;

font-family: PingFang SC;

font-weight: 500;

}

/deep/ uni-view,

uni-scroll-view,

uni-swiper-item {

display: block;

}

</style>

storage.js文件获取session方法：

// sessionStorage获取

export function getSession(key) {

return getObjectValue(sessionStorage.getItem(getMixKey(key)))

}

// 返回正确格式数据（若存储的时候为json，则直接返回json对象，否则为字符串）

// valueType 0字符类型，1json类型

export function getObjectValue(value) {

// 防止value为null的出错情况

let {valueType, realValue} = JSON.parse(value) || {}

return realValue

}

// 获取混合后key名

export function getMixKey(key) {

return `${PROJECT_DIR_NAME}__${key}`

}

Mirs_Zhu

关注

12
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
uniapp+uView保存与删除搜索历史记录

this.oldWordList = oldWordPageList // 新数组。', // 清空历史记录弹框内容。showNoDataImg: false, // 是否显示无搜索列表图片。
复制链接

扫一扫