shop-app/pages/goods/search.vue

<!--
 * @Author: ch
 * @Date: 2022-03-21 11:29:38
 * @LastEditors: ch
 * @LastEditTime: 2022-05-05 10:51:53
 * @Description: file content
-->
<template>
  <view class="container">
	<UiPageHeader class="header">
		<view slot="custom" class="search">
			<u--input class="search--input" focus placeholder="请输入您想搜索的商品名称" 
				clearable v-model="searchValue" @confirm="onSearch"
				placeholderClass="search--input__placeholder">
				</u--input>
				<u-icon class="search--icon" size="48rpx" name="search" @click="onSearch" color="#ccc"/>
				<!-- <image class="search--icon" src="@/static/search/search.png"/> -->
		</view>
	</UiPageHeader>
    <view class="history" v-if="historyList.length">
      <view class="history--head">
        <text>最近搜索</text>
        <image class="history--del" src="@/static/search/del.png" @click="clearHistory" />
      </view>
      <view class="history--list">
        <view class="history--item" v-for="(val, index) in historyList" 
			:key="index" @click="handleQuick(val)">{{ val }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import UiPageHeader from '../../components/UiPageHeader.vue';

const HISTORY_SEARCH_KEY = "historySearch";
export default {
	components: { UiPageHeader },
	data() {
		return {
			historyList : [],
			searchValue: '',
		};
	},
	onShow(){
		this.searchValue = '';
		this.historyList = uni.getStorageSync(HISTORY_SEARCH_KEY) || [];
	},
	onHide(){
	},
	mounted(){
	},
	methods: {
		/**
		 * 搜索提交
		 */
		onSearch() {
			const { searchValue } = this;
			if (searchValue) {
				this.setHistory(searchValue);
				this.$Router.replace({path:'/goodsList', query :{
						search: searchValue
					}
				});
			}
		},

		/**
		 * 清空最近搜索记录
		 */
		clearHistory() {
			this.updateHistoryStorage([]);
		},
		/**
		 * 记录历史搜索
		 */
		setHistory(searchValue) {
			const data = this.historyList;
			const index = data.indexOf(searchValue);
			index > -1 && data.splice(index, 1);
			data.unshift(searchValue);
			if(data.length === 11){
				data.pop();
			}
			this.updateHistoryStorage(data);
		},
		/**
		 * 更新历史搜索缓存
		 * @param {Object} data
		 */
		updateHistoryStorage(data) {
			this.historyList = data;
			uni.setStorageSync(HISTORY_SEARCH_KEY, data);
		},

		/**
		 * 跳转到最近搜索
		 */
		handleQuick(searchValue) {
			this.setHistory(searchValue);
			this.$Router.replace({path:'/goodsList', query :{
					search: searchValue
				}
			});
		},
	},
};
</script>
<style lang="scss">
page {
	background: $color-grey0;
}
</style>
<style lang="scss" scoped>
.header{
	background: $color-grey0;
}
.search{
	height: 88rpx;
	flex: 1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	&--input{
		display: block;
		height: 70rpx;
		border:none;
		box-sizing: border-box;
		background: $color-grey1;
		padding-right: 70rpx !important;
		&__placeholder{
			font-size: $font-size-base;
			color: $color-grey5;
		}
	}
	&--icon{
		position: absolute;
		right: 60rpx;
	}
	
	&--btn{
		font-size: 26rpx;
		color: $color-grey5;
	}

}



// 最近搜索
.history {
	padding: 0 40rpx;
	&--head {
		text{
			font-size: 26rpx;
			color: $color-grey4;
		}
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 40rpx 0 20rpx;
	}
	&--del{
		width: 27rpx;
		height: 28rpx;
	}
	&--list{
		display: flex;
		flex-wrap: wrap;
	}
	&--item{
		max-width: 460rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 20rpx;
		font-size: 26rpx;
		color: $color-grey5;
		background: $color-grey1;
		margin: 10rpx;
	}

}
</style>