frontend-app/pages/rwa_package/insights/search.vue

<template>
	<view class="page-container">
		<!-- 顶部安全距离 -->
		<TopSafe bgColor="#ffffff"></TopSafe>

		<!-- 1. 自定义导航栏：左边返回箭头，中间“商品搜索”标题 -->
		<view class="custom-navbar">
			<view class="nav-back flex-c" @click="onBack">
				<u-icon name="arrow-left" size="36rpx" color="#333333"></u-icon>
			</view>
			<view class="nav-title">商品搜索</view>
			<view class="nav-right"></view>
		</view>

		<!-- 2. 搜索框部分：放大镜 + 输入框 + 右侧紫色搜索按钮 -->
		<view class="search-bar-box">
			<view class="search-inner">
				<u-icon name="search" size="36rpx" color="#999999" class="search-icon"></u-icon>
				<input class="search-input" v-model="searchInput" placeholder="请输入商品关键字"
					placeholder-style="color: #999999; font-size: 28rpx;" confirm-type="search" @confirm="onSearch" />
				<view class="search-btn flex-c" @click="onSearch">
					<text class="search-btn-text">搜索</text>
				</view>
			</view>
		</view>

		<!-- 3. 历史搜索部分 -->
		<view class="history-container">
			<view class="history-header flex-r-lr">
				<text class="section-title">历史搜索</text>
				<u-icon name="trash" size="42rpx" color="#999999" @click="toggleDel"></u-icon>
			</view>

			<!-- 历史记录标签列表 -->
			<view class="history-tags flex-r" v-if="historyList.length">
				<view class="history-tag-item flex-r" v-for="(item, index) in historyList" :key="index"
					@click="onText(item)">
					<text class="tag-text">{{ item }}</text>
					<u-icon name="close-circle-fill" size="28rpx" color="#999999" class="del-icon" v-if="isDel"
						@click.stop="onDel(index)"></u-icon>
				</view>
			</view>

			<!-- 无历史记录时显示 -->
			<view class="history-empty" v-else>
				<text class="empty-text">暂无搜索内容</text>
			</view>
		</view>

		<!-- 4. 猜你喜欢部分 -->
		<view class="recommend-container">
			<view class="recommend-header">
				<text class="section-title">热门商品</text>
			</view>
			<view class="recommend-content">
				<choiceness :isTitle="false" />
			</view>
			<!-- <view class="recommend-list">
				<view class="product-grid" v-if="dataList && dataList.length">
					<ShopItem :obj="item" class="product-item" @click="onJump(item)" v-for="item in dataList"
						:key="item.id"></ShopItem>
				</view>
			</view> -->
		</view>
		<!-- 为您精选 -->


		<DownPopup></DownPopup>
	</view>
</template>

<script>
import { getUserInfo } from '@/api/auth.js';
import Header from '@/components/common/header.vue';
import TopSafe from '@/components/common/top-safe.nvue';
import DownPopup from '@/components/common/down-popup.vue';
import { searchList } from '@/api/product.js';
import ShopItem from './components/shop-item.vue';
import choiceness from "@/components/choiceness/choiceness.vue";

export default {
	components: { Header, TopSafe, DownPopup, ShopItem, choiceness },
	data() {
		return {
			searchInput: '',
			historyList: [],
			isDel: false,
			dataList: [],
		};
	},
	onShow() {
		this.init();
	},
	methods: {
		init() {
			let arr = uni.getStorageSync('history') || '';
			if (arr) {
				this.historyList = arr.split(',').filter(item => item.trim() !== '');
			} else {
				this.historyList = [];
			}
		},
		onJump(item) {
			uni.navigateTo({
				url: '/pages/other_package/productInfo/productInfo?id=' + item.id,
			});
		},
		onBack() {
			uni.navigateBack();
		},
		onSearch() {
			if (!this.searchInput || !this.searchInput.trim()) {
				return;
			}
			this.onAdd();
			uni.navigateTo({
				url: '/pages/rwa_package/insights/search-result?keyword=' + encodeURIComponent(this.searchInput.trim())
			});
		},
		onDel(index) {
			this.historyList.splice(index, 1);
			this.onSave();
			if (this.historyList.length === 0) {
				this.isDel = false;
			}
		},
		toggleDel() {
			if (this.historyList.length > 0) {
				this.isDel = !this.isDel;
			}
		},
		onAdd() {
			if (this.searchInput && this.searchInput.trim()) {
				let val = this.searchInput.trim();
				let index = this.historyList.indexOf(val);
				if (index > -1) {
					this.historyList.splice(index, 1);
				}
				this.historyList.unshift(val);
				if (this.historyList.length > 15) {
					this.historyList.pop();
				}
				this.onSave();
			}
		},
		onText(item) {
			this.searchInput = item;
			this.onSearch();
		},
		onSave() {
			if (this.historyList.length) {
				uni.setStorageSync('history', this.historyList.join(','));
			} else {
				uni.setStorageSync('history', '');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
/* 避免全局 .content 的 align-items: center 导致元素全挤在中间 */
.page-container {
	width: 750rpx;
	min-width: 750rpx;
	max-width: 100%;
	min-height: 100vh;
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	box-sizing: border-box;
}

/* 导航栏 */
.custom-navbar {
	width: 100%;
	height: 88rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 0 32rpx;
	box-sizing: border-box;
	background-color: #ffffff;
	position: relative;

	.nav-back {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.nav-title {
		font-size: 34rpx;
		font-weight: bold;
		color: #1a1a1a;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		white-space: nowrap;
	}

	.nav-right {
		width: 60rpx;
	}
}

/* 搜索框 */
.search-bar-box {
	width: 100%;
	padding: 16rpx 32rpx;
	box-sizing: border-box;

	.search-inner {
		width: 100%;
		height: 80rpx;
		background-color: #ffffff;
		border-radius: 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 8rpx 0 28rpx;
		box-sizing: border-box;
		border: 2rpx solid #efefef;

		.search-icon {
			margin-right: 12rpx;
		}

		.search-input {
			flex: 1;
			height: 100%;
			font-size: 28rpx;
			color: #333333;
			background: transparent;
			border: none;
		}

		.search-btn {
			height: 64rpx;
			padding: 0 32rpx;
			background: linear-gradient(270deg, #b164fb 0%, #7934f6 100%);
			border-radius: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.search-btn-text {
				font-size: 28rpx;
				color: #ffffff;
				font-weight: 500;
			}
		}
	}
}

/* 历史搜索 */
.history-container {
	width: 100%;
	padding: 32rpx 32rpx 16rpx 32rpx;
	box-sizing: border-box;

	.history-header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;

		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}
	}

	.history-tags {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 24rpx;
		width: 100%;

		.history-tag-item {
			padding: 6rpx 24rpx;
			background-color: #f5f5f7;
			border-radius: 24rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: row;
			align-items: center;

			.tag-text {
				font-size: 26rpx;
				color: #666666;
			}

			.del-icon {
				margin-left: 10rpx;
			}
		}
	}

	.history-empty {
		margin-top: 16rpx;
		width: 100%;

		.empty-text {
			font-size: 26rpx;
			color: #999999;
		}
	}
}

/* 猜你喜欢 */
.recommend-container {
	width: 100%;
	padding: 20rpx 32rpx 0;
	box-sizing: border-box;

	.recommend-header {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;

		.section-title {
			font-size: 32rpx;
			color: #333333;
		}
	}

	.recommend-content {
		::v-deep(.choiceness_warp) {
			margin-top: 15rpx;
		}

	}

	.recommend-list {
		width: 100%;
		margin-top: 24rpx;

		.product-grid {
			width: 100%;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
		}
	}
}
</style>