<template> <view class="w-100"> <!-- searbar --> <view class="search-bar w-100 flex j-between a-center"> <view class="input-wrap flex j-between a-center flex-1"> <!-- @blur="handleSearch" --> <input class="input font-28 flex-1" type="text" v-model="val" placeholder="搜索商品" confirm-type="search" @confirm="search" /> <view class="cancleInput flex j-center a-center"> <view v-show="val.length" @click="clearInput" > <image style="width: 34rpx;height: 34rpx;" src="/static/images/common/icon-clear.png" mode="aspectFit" /> </view> </view> <image class="search-icon" src="/static/images/common/icon-search.png" mode="aspectFit" /> </view> <view class="search-btn font-28" @click="search">搜索</view> </view> <!-- history --> <view class="history-wrap w-100"> <view class="font-28 flex j-between a-center w-100 py-2"> <view class="title">历史记录</view> <image class="del-btn" src="/static/images/common/icon-del.png" mode="aspectFit" @click="clearHistory" /> </view> <view class="w-100 flex j-start a-center flex-wrap"> <view class="history-item font-28 mr-2 mb-2" v-for="(item, index) in list" :key="index" @click="handleHistory(item)" >{{item}}</view> </view> </view> </view> </template> <script> import { removeStorage } from '@/lib/storage/index.js' import { throttle } from '@/utils/common.js' let cacheHistory = [] export default { data() { return { val: '', list: [], // 在页面显示的历史 } }, onShow() { const localHisotry = this.$getStorage('search-history') || [] this.list = localHisotry cacheHistory = localHisotry // this.cancle = false }, onHide() { this.$setStorage('search-history', cacheHistory) this.cacheHistory = [] }, // onUnload() { // this.$setStorage('search-history', this.list) // }, watch: { val: throttle(function(newVal) { if(newVal.length > 0) { this.inputFocus = true } }, 800) }, methods: { // 搜索 search() { const { val, list } = this if(!val) return this.$toast({title: '请输入搜索内容'}) if(!cacheHistory.includes(val)) { cacheHistory.push(val) } uni.navigateTo({ url: `/pages/search/list?val=${val}` }) }, // 点击历史 handleHistory(val) { uni.navigateTo({ url: `/pages/search/list?val=${val}` }) }, // 清除记录 clearHistory() { this.list = [] cacheHistory = [] removeStorage('search-history') }, clearInput() { // this.cancle = true this.val = '' // this.timer = setTimeout(() => { // this.cancle = false // clearTimeout(this.timer) // }, 300) } } } </script> <style lang="scss" scoped> .search-bar { position: relative; @include borderBox(20rpx, 40rpx); margin: 0 auto; background-color: #fff; .input-wrap { width: 100%; height: 88rpx; border-radius: 8rpx; overflow: hidden; background-color: $mainBg; .input { width: 534rpx; height: 88rpx; padding-left: 70rpx; background-color: $mainBg; } .cancleInput { position: relative; flex: 0 0 50rpx; width: 50rpx; height: 88rpx; } .search-icon { position: absolute; left: 60rpx; top: 50%; transform: translateY(-50%); width: 34rpx; height: 34rpx; } } .search-btn { flex: 0 0 60rpx; height: 88rpx; line-height: 88rpx; margin-left: 20rpx; text-align: center; } } .history-wrap { @include borderBox(20rpx, 20rpx); .title { color: $desc; } .del-btn { width: 30rpx; height: 30rpx; } .history-item { padding: 12rpx 20rpx; border-radius: 8rpx; background-color: #FFE0D1; } } </style>