SxsnWechat/pagesHome/searchActivity.vue

<template>
	<view class="common_page adffc" :style="{'height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title="搜索" bgColor="transparent"></cus-header>
		<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/19/54b75bc8-d926-449b-95a5-1126f700b481.png" class="top_bg_img" mode="widthFix"></image>
		<div class="top-search">
			<cus-search :isCancel="true" @handleSearch="handleSearch"></cus-search>
		</div>
		<div class="text">最近搜索</div>
		<div class="list">
			<div class="pre" v-for="(item,index) in list" :key="index">{{item}}</div>
		</div>
	</view>
</template>

<script setup name="">
	import CusHeader from '@/components/CusHeader/index.vue'
	import CusSearch from '@/components/CusSearch/index.vue'
	import { ref, getCurrentInstance, onMounted } from 'vue'
	const { proxy } = getCurrentInstance()
	
	const list = ref([])
	
	const handleSearch = data => {
		let sh = uni.getStorageSync('searchHistory');
		try{
			let sh_arr = [];
			if(sh) sh_arr = JSON.parse(sh);
			let arr = Array.from(new Set(sh_arr.concat([data])));
			uni.setStorageSync('searchHistory',JSON.stringify(arr));
		}catch(e){
			console.log(e,'e');
		}	
		proxy.getOpenerEventChannel().emit('confirmSearch',{
			data
		})
		uni.navigateBack();
	}
	
	const getSearchHistory = () => {
		let sh = uni.getStorageSync('searchHistory');
		try{
			list.value = JSON.parse(sh?sh:'[]')
		}catch(e){
			console.log(e,'e');
		}
	}
	
	onMounted(()=>{
		getSearchHistory()
	})
</script>

<style scoped lang="scss">
	.common_page{
		.top-search{
			position: relative;
			margin-top: 20rpx;
		}
		.text{
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #252525;
			line-height: 50rpx;
			margin-top: 40rpx;
			position: relative;
		}
		.list{
			position: relative;
			flex: 1;
			margin-top: 4rpx;
			overflow-y: auto;
			.pre{
				background: #FFFFFF;
				border-radius: 24rpx;
				padding: 25rpx 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #252525;
				line-height: 40rpx;
				margin-top: 24rpx;
			}
		}
	}
</style>