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://oss.familydaf.cn/sxsnfile/20251218/ff31a76e0e1148378a318382b998a51f.png" class="top_bg_img" mode="widthFix"></image>
		<view class="top-search">
			<cus-search :isCancel="true" @handleSearch="handleSearch" @handleCancel="handleCancel"></cus-search>
		</view>
		<view class="text">最近搜索</view>
		<view class="list">
			<view class="pre" v-for="(item,index) in list" :key="index" @click="handleSearch(item)">{{item}}</view>
		</view>
	</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 queryText = 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');
		}
	}
	
	const handleCancel = () => {
		uni.navigateBack()
	}
	
	onMounted(()=>{
		getSearchHistory()
	})
</script>

<style scoped lang="scss">
	::v-deep .u-navbar>view{
		background: url('https://oss.familydaf.cn/sxsnfile/20251223/d07237024c5e4f00a63b9089abbf5a3c.png') no-repeat;
		background-size: 100% 100%;
	}
	
	.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>