tire_parts_shop_applets/pages/integralMall/searchPage.vue

<template>
	<view>
		<view style="background-color: #E75F37;padding: 20rpx;">
			<u-search placeholder="请输入商品名称" bgColor="#fff" searchIconColor='#E75F37'  :actionStyle="{color:'#FFF'}"
				:searchIconSize='24' v-model="keyword" @search='goBack()' @custom="goBack()" focus></u-search>
		</view>
		<view class="recentSearches" v-if="recentSearches.length != 0">
			<view class="recentSearches-head">
				<view class="recentSearches-headLeft">
					<u-icon name="clock" color="#C4C4C4"></u-icon>
					<view style="font-size: 26rpx;margin-left: 6rpx;">最近搜索</view>
				</view>
				<view class="recentSearches-headRight">
					<u-icon name="trash" size="20px" @click="searchDeleteShow = true" color="#C4C4C4"></u-icon>
				</view>
			</view>
			<view class="recentSearches-text">
				<u-tag v-for="(item,index) in recentSearches" :key="index" :text="item" bgColor="#EFEFEF"
					color="#414141" borderColor="#EFEFEF" size="medium" closable :show="item" @close="tagClose(index)"
					shape="circle" @click.stop="tagSearches(item)"></u-tag>
			</view>
			<u-modal :show="searchDeleteShow" content="确认删除搜索记录吗？" showCancelButton @confirm="searchDeletefun"
				@cancel="searchDeleteShow = false" ref="uModal" :asyncClose="true">
			</u-modal>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				keyword: '',
				recentSearches: [], // 搜索数据
				searchDeleteShow: false, // 搜索全部删除弹窗
			}
		},
		mounted() {},
		onLoad(data) {
			if (uni.getStorageSync('recentSearches')) {
				this.recentSearches = uni.getStorageSync('recentSearches').slice(0,10);;
			}
			this.keyword = data.searchData
		},
		methods: {
			goBack() {
				uni.$emit('jfSearchData',this.keyword)
				uni.navigateBack({})
			},
			// 搜索全部删除
			searchDeletefun() {
				this.recentSearches = []
				uni.setStorageSync('recentSearches', this.recentSearches);
				this.searchDeleteShow = false
			},
			// 点击搜索
			tagSearches(name) {
				this.keyword = name;
				uni.$emit('jfSearchData', name)
				uni.navigateBack({})
			},
			// 最近搜索点击关闭按钮
			tagClose(index) {
				this.recentSearches.splice(index, 1)
				uni.setStorageSync('recentSearches', this.recentSearches);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tagClass {
		display: flex;
		padding: 41rpx 63rpx;
		background-color: #fff;
		justify-content: space-around;

		::v-deep .u-tag--mini {
			font-size: 28rpx;
			line-height: 22px;
			padding: 0rpx 24rpx;
		}
	}

	.recentSearches {
		padding: 38rpx 32rpx;
		background-color: #fff;

		.recentSearches-head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #C4C4C4;

			.recentSearches-headLeft {
				display: flex;
				align-items: center;
			}

			.recentSearches-headRight {}
		}

		.recentSearches-text {
			display: flex;
			flex-wrap: wrap;
			align-items: baseline;

			.recentSearches-textWidth {
				// width: 140rpx;
			}
		}
	}
</style>