zhuoxin-user-uniapp/pages/index/search.vue

<template>
	<view class="content">
		<fxyk-navbar isSearch iconColor="#000"></fxyk-navbar>
		<view class="d-flex a-center j-sb u-p-38" style="margin-top:125rpx;margin-bottom:50rpx">
			<view class="word-one">历史搜索</view>
			<view @click="showModal = true"><u-image width="31rpx" height="35rpx" src="/static/images/waste.png" :fade="false"></u-image></view>
		</view>
		<view style="margin-top:-20rpx">
			<u-tag v-for="(item,index) in historySearchInFive" style="width:150rpx" :key="index" :text="item" class="u-m-l-80 u-m-b-35 over_style" type="info" border-color="transparent" shape="circle" @click="show_text(item)" />
			<u-tag v-if="historySearch.length > 5" :text="icon"  type="info" border-color="transparent" style="position:relative;top:-47rpx;margin-left:122rpx;" shape="circle" @click="show_search_data" />	
			<template v-if="show">
				<u-tag v-for="(item,index) in historySearchOverFive" style="width:150rpx" :key="item" :text="item" class="u-m-l-80 u-m-b-35 over_style" type="info" border-color="transparent" shape="circle" @click="show_text(item)" />
			</template>
		</view>
		<u-modal v-model="showModal" content="是否清空历史记录" :isBgColor="false" show-cancel-button @confirm="clear_history_data"></u-modal>
	</view>
</template>

<script>
	import { mapGetters, mapMutations,mapActions } from 'vuex'
	export default {
		data() {
			return {
				icon: "∨",
				show: false,
				showModal: false,
			}
		},
		// 监听页面卸载
		onUnload() {
			this.updateSearchItemData()
		},
 		computed: {
			...mapGetters(['historySearch', 'historySearchInFive', 'historySearchOverFive'])
		},
		methods: {
			...mapMutations(['updateSearchItemData', 'clearSearchData']),
			// 显示更多数据
			show_search_data() { 
				this.show = !this.show
				this.icon = this.icon === '∨' ? '∧' : '∨'
			},
			// 导航栏内显示数据
			show_text(value) {
				this.updateSearchItemData(value)
			},
			// 清空历史记录
			clear_history_data() {
				 uni.removeStorageSync('searchData')
				 this.clearSearchData([])
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
	}
	.content {
		width: 100%;
		height: 100%;
		min-height: 100vh;
		background-color: $yk-bg-color;
	}
	.icon-style {
		width:52rpx;
		height:52rpx;
		border-radius: 50%;
		background-color: $yk-gray-color;
		margin-top: -35rpx;
		margin-left: 110rpx;
	}
	.cell-item {
		width: 125rpx;
		height: 50rpx;
		border: 1px solid $yk-gray-color;
		border-radius: 17rpx;
		background-color: $yk-gray-color;
	}
	.word-one {
		font-size: 29rpx;
		font-family: SimSun;
		font-weight: 400;
		line-height: 40rpx;
		color: #666666;
	}
	.word-two {
		font-size: 25rpx;
		font-family: SimSun;
		font-weight: 400;
		line-height: 33rpx;
		color: #666666;
	}
	.over_style {
		width: 150rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: center;
	}
</style>