fish-uniapp/pages/goods/good_com/search_bar.vue

<template>
	<view class="search_page">
		<view class="search_bar">
			<view v-if="backTag" class="back_icon" @click="back">
				<uni-icons color="#ffffff" size="26" type="back"></uni-icons>
			</view>
			<view class="search_bar_view">
				<uni-search-bar @focus="getData" cancelButton="none" v-model="content" @confirm="confirm" />
				<!-- <button class="h5_btm" type="default" @click="confirm(content)">搜</button> -->
			</view>
		</view>
		<view class="searchzw"></view>
		<view class="search_result" v-if="lishi">
			<view class="search-title">搜索历史
				<text v-if="!close" class="edit" @click="edit">编辑</text>
				<text v-else class="edit" @click="edit">取消编辑</text>
			</view>
			<view class="search_text" v-for="(item,index) in searchData" :key="index">
				<view v-if="close">{{item}}
					<uni-icons @click="clearHis(index)" size="20" class="search_close" type="close">
					</uni-icons>
				</view>
				<view v-else @click="confirms(item)">
					{{item}}
				</view>
			</view>
			<view class="guanbi" @click="closeLishi()">关闭</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'search_bar',
		data() {
			return {
				content: '',
				searchData: {},
				close: false,
				closeText: "编辑",
				lishi: false,
			};
		},
		computed: {
			backTag() {
				return getCurrentPages().length > 1 && uni.getSystemInfoSync().uniPlatform=="app"
			}
		},
		created() {
			this.content = this.getSearchData()[0]
		},
		methods: {
			confirm(content) {
				this.confirms(content.value)
			},
			confirms(content) {
				this.content = content
				if (!this.content) return;
				this.clearHis(this.searchData.indexOf(this.content))
				this.searchData = this.setSearchData(this.content)
				this.closeLishi()
				this.$emit("toPage", {
					keyword: this.content
				})
			},
			getData() {
				this.lishi = true
				this.searchData = this.getSearchData()
			},
			closeLishi() {
				this.lishi = false
				this.close = false
			},
			back() {
				uni.navigateBack()
			},
			edit() {
				this.close = !this.close
				if (this.close) {
					this.closeText = "取消编辑"
				} else {
					this.closeText = "编辑"
				}
			},
			clearHis(index) {
				if (index < 0) return
				this.searchData.splice(index, 1)
				this.setSearchData(this.searchData)
			},
			setSearchData(content) {
				let searchHistory = uni.getStorageSync('searchHistory')
				if (typeof searchHistory != "object") {
					searchHistory = []
				}
				if (typeof content == "string") {
					if (searchHistory.indexOf(content) == -1) {
						searchHistory.unshift(content)
					}
				} else if (typeof content == "object") {
					searchHistory = content
				}
				uni.setStorageSync('searchHistory', searchHistory)
				return searchHistory
			},
			getSearchData() {
				let searchHistory = uni.getStorageSync('searchHistory')
				if (typeof searchHistory != "object") {
					searchHistory = []
				}
				return searchHistory
			}
		}
	}
</script>

<style lang="scss">
	.search_page {

		width: 100%;
		position: relative;

		.search_bar {
			position: fixed;
			width: 100%;
			padding-top: var(--status-bar-height);
			background-color: #ff5500;
			height: 115rpx;
			line-height: 80rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			z-index: 100;

			.back_icon {

				width: 70rpx;
				text-align: right;
				z-index: 100;
			}

			.search_bar_view {
				flex: 1;
				position: relative;

			}
		}

		.searchzw {
			padding-top: var(--status-bar-height);
			width: 100%;
			height: 115rpx;

		}

		//#ifdef APP
		//#endif
		.search_result {
			width: 710rpx;
			padding: 20rpx;
			line-height: 40rpx;
			background-color: #f8f8f8;
			border: #efefef 1px solid;
			position: absolute;
			top: 110rpx+var(--status-bar-height);
			z-index: 200;



			.search-title {
				font-weight: bold;
				color: #666;
				line-height: 80rpx;

				.edit {
					position: absolute;
					right: 20rpx;
					display: inline-block;
					text-align: right;
					font-weight: normal;
					color: #55aaff;
				}
			}

			.search_text {
				background-color: #f0f0f0;
				padding: 10rpx 20rpx;
				display: inline-block;
				margin: 10rpx 15rpx;
				border-radius: 10rpx;
				position: relative;

				.search_close {
					position: absolute;
					right: -15rpx;
					top: -10rpx
				}
			}

			.guanbi {
				width: 100rpx;
				margin: 20rpx auto 0rpx auto;
				color: #e3e3e3;
				text-align: center;
			}
		}
	}
</style>