fanghuayuexuan/pages/home/productSearch.vue

<template>
	<view class="content">
		<view class="status_bar" :style="{height: statusBarHeight}"></view>
		<!-- 搜索框 -->
		<view class="search-cont">
			<image @click="goBack" class="w64 h64" src="/static/images/back_black.png"></image>
			<view class="inner">
				<input v-model="searchValue" type="text" value="" placeholder="城口腊肉/香肠" confirm-type="搜索"
					@confirm="handleSearch" @input="handleInput" :focus='setFocus'
					placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" />
				<image @click="clearInput" v-if="searchValue" class="w32 h32"
					src="/static/images/search_close_gray.png">
				</image>
				<view class="line"></view>
				<view class="search" @click="handleSearch">搜索</view>
			</view>
		</view>
		<!-- 搜索历史 -->
		<!-- <view class="title-box">
			<text class="title">历史搜索</text>
			<image src="../../static/images/del.png" mode="" @click="clearHistory"></image>
		</view>
		<view class="data-list">
			<view class="item" v-for="(item,index) in searchHistory" :key="index" @click="doSearch(item)">
				{{ item }}
			</view>
		</view> -->

		<!-- 热门搜索 -->
		<view class="title-box">
			<text class="title">热门搜索</text>
			<image class="w32 h32" src="/static/images/delete_icon.png"></image>
		</view>
		<view class="popular-list">
			<view class="item" v-for="(item,index) in topSearch" :key="index" @click="doSearch(item)">
				{{ item }}
			</view>
		</view>
		<!-- 推荐搜索 -->
		<view class="title-box">
			<text class="title">大家都在搜</text>
			<image class="w32 h32" src="/static/images/refresh_icon.png"></image>
		</view>
		<view class="data-list">
			<view class="item" v-for="(item,index) in topSearch" :key="index" @click="doSearch(item)">
				<text> {{ item }}</text>
				<image class="w40 h40 ml8" src="/static/images/hot.png"></image>
			</view>
		</view>

		<scroll-view class="card-group" scroll-x="true" show-scrollbar="false" enhanced="true" enable-flex="true">
			<!-- 今日热卖榜 -->
			<view class="card border1">
				<image class="card-bg" src="/static/images/hot_selling.png"></image>
				<view class="card-title">
					<image class="w40 h40 ml8" src="/static/images/hot.png"></image>
					<text class="title1">今日热卖榜</text>
				</view>
				<view class="product-list">
					<view class="product-item">
						<view class="left">
							<image class="photo" src="/static/images/img.png"></image>
							<view class="lable">1</view>
						</view>
						<view class="right">
							<view class="title">乌灵胶囊81粒养心安神失乌灵胶囊81粒养心安神失眠乌灵胶囊81粒养心安神失眠眠健...</view>
							<view class="txt">肌肉酸疼、扭伤拉伤</view>
							<view class="num-box">
								<view class="price"><text class="symbol">￥</text><text class="bold">89</text>.48</view>
								<view class="sale">已售 5485</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 30天新品热销榜单 -->
			<view class="card ml24 border2">
				<image class="card-bg" src="/static/images/new_hot.png"></image>
				<view class="card-title">
					<image class="w40 h40 ml8" src="/static/images/new_product.png"></image>
					<text class="title1">30天新品热销榜单</text>
				</view>
				<view class="product-list">
					<view class="product-item">
						<view class="left">
							<image class="photo" src="/static/images/img.png"></image>
							<view class="lable">1</view>
						</view>
						<view class="right">
							<view class="title">乌灵胶囊81粒养心安神失乌灵胶囊81粒养心安神失眠乌灵胶囊81粒养心安神失眠眠健...</view>
							<view class="txt">肌肉酸疼、扭伤拉伤</view>
							<view class="num-box">
								<view class="price"><text class="symbol">￥</text><text class="bold">89</text>.48</view>
								<view class="sale">已售 5485</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: '',
				// 状态栏的高度
				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
				setFocus: false,
				// 历史搜索
				searchHistory: [],
				// 推荐搜索
				topSearch: []
			};
		},
		onShow() {
			this.setFocus = true
			this.searchHistory = this.utils.getHisSearch();
			var config = uni.getStorageSync('config');
			if (config != null && config != undefined && config != "") {
				this.topSearch = JSON.parse(config).hotSearch.split(',');
			}
		},
		onHide() {
			// 页面隐藏时重置聚焦状态
			this.setFocus = false;
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1 // 返回的页面数，1表示返回上一页
				});
			},
			// 处理输入
			handleInput(e) {
				this.searchValue = e.detail.value;
			},
			// 清除输入内容
			clearInput() {
				this.searchValue = '';
				this.setFocus = true; // 清除后重新聚焦
			},
			// 清空历史搜索数据
			clearHistory() {
				this.utils.clearHisSearch();
				this.searchHistory = this.utils.getHisSearch();
			},
			doSearch(item) {
				uni.navigateTo({
					url: './productList?key=' + item
				})
			},
			handleSearch() {
				if (!this.searchValue.trim()) {
					uni.showToast({
						title: '请输入搜索内容',
						icon: 'none'
					});
					return;
				}

				// 保存搜索历史
				this.utils.addHisSearch(this.searchValue);

				// 跳转到搜索结果页
				uni.navigateTo({
					url: './productList?key=' + encodeURIComponent(this.searchValue)
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.content {
		.search-cont {
			display: flex;
			padding: 16rpx 30rpx;
			background-color: #FFFFFF;

			.inner {
				box-sizing: border-box;
				width: 436rpx;
				height: 64rpx;
				background: #F5F7FA;
				border-radius: 36rpx;
				display: flex;
				align-items: center;
				padding: 0 24rpx;

				image {
					padding: 16rpx;
					/* 增加点击区域 */
					margin: -16rpx;
					/* 负边距抵消padding对布局的影响 */
					box-sizing: content-box;
				}

				.search {
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
				}

				.line {
					width: 2rpx;
					height: 24rpx;
					background: #999999;
					margin: 0 26rpx;
				}

				input {
					height: 60rpx;
					line-height: 60rpx;
					flex: 1;
				}
			}
		}

		.title-box {
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				font-weight: 600;
				font-size: 32rpx;
				color: #000000;
			}

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.data-list {
			padding: 0rpx 10rpx 30rpx;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			/* 两列布局 */
			grid-gap: 20rpx;

			.item {
				padding: 0 30rpx;
				height: 56rpx;
				line-height: 56rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #4D4D4D;
				border-radius: 28rpx;
				margin: 0;
				display: flex;
				align-items: center;
				text-align: center;
			}
		}

		.popular-list {
			padding: 0rpx 10rpx 30rpx;
			display: flex;
			flex-wrap: wrap;

			.item {
				padding: 0 40rpx;
				height: 56rpx;
				line-height: 56rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #4D4D4D;
				background: #F5F7FA;
				border-radius: 28rpx;
				margin: 0 20rpx 20rpx 0;
			}
		}

		.card-group {
			display: flex;
			padding: 0 24rpx;
			box-sizing: border-box;

			.card {
				width: 600rpx;
				padding: 26rpx 32rpx 0;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				position: relative;
				z-index: 0;

				.card-bg {
					width: 100%;
					height: 96rpx;
					position: absolute;
					top: 0;
					left: 0;
					border-radius: 24rpx 24rpx 0 0;
					z-index: -1;
				}

				.card-title {
					display: flex;
					align-items: center;
					font-weight: 600;
					font-size: 32rpx;
					margin-bottom: 34rpx;

					.title1 {
						color: #FF4400;
					}

					.title2 {
						color: #D46C0D;
					}
				}

				.product-list {
					.product-item {
						display: flex;
						align-items: center;
						margin-bottom: 40rpx;

						.left {
							margin-right: 22rpx;
							width: 120rpx;
							height: 120rpx;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							overflow: hidden;
							position: relative;

							.photo {
								width: 100%;
								height: 100%;
							}

							.lable {
								position: absolute;
								left: 0;
								top: 0;
								width: 32rpx;
								height: 32rpx;
								text-align: center;
								line-height: 32rpx;
								background: linear-gradient(135deg, #C1C5CD 0%, #A5AAB5 100%);
								border-radius: 8rpx 0rpx 8rpx 0rpx;
								font-family: Roboto, Roboto;
								font-weight: 500;
								font-size: 24rpx;
								color: #FFFFFF;

							}
						}

						.right {
							flex: 1;
							min-width: 0;

							.title {
								font-weight: 500;
								font-size: 28rpx;
								color: #333333;
								overflow: hidden;
								/* 隐藏溢出内容 */
								text-overflow: ellipsis;
								/* 显示省略号 */
								white-space: nowrap;
								/* 不换行 */
							}

							.txt {
								font-size: 22rpx;
								color: #999999;
								margin: 4rpx 0 20rpx;
							}

							.num-box {
								display: flex;
								justify-content: space-between;
								align-items: flex-end;

								.price {
									font-family: Roboto, Roboto;
									font-weight: 600;
									font-size: 26rpx;
									color: #FA341E;

									.symbol {
										font-size: 20rpx;
									}

									.bold {
										font-size: 36rpx;
									}
								}

								.sale {
									font-size: 21rpx;
									color: #999999;
								}
							}
						}

					}
				}
			}

			.border1 {
				border: 1rpx solid rgba(241, 89, 38, 0.5);
			}

			.border2 {
				border: 1rpx solid rgba(244, 160, 7, 0.5);
			}
		}
	}
</style>