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="https://cdn.his.cdwjyyh.com/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="https://cdn.his.cdwjyyh.com/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 class="w32 h32" src="https://cdn.his.cdwjyyh.com/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="https://cdn.his.cdwjyyh.com/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="https://cdn.his.cdwjyyh.com/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="https://cdn.his.cdwjyyh.com/images/hot_selling.png"></image>
				<view class="card-title">
					<image class="w40 h40 ml8" src="https://cdn.his.cdwjyyh.com/images/hot.png"></image>
					<text class="title1">今日热卖榜</text>
				</view>
				<view class="product-list">
					<view class="product-item" v-for="(item,index) in todayList" :key="index">
						<view class="left">
							<image class="photo" :src="item.image"></image>
							<view class="lable" :class="index === 0 ? 'bg1' : index === 1 ? 'bg2' : index === 2 ? 'bg3' : 'bg'">{{index+1}}</view>
						</view>
						<view class="right">
							<view class="title">{{item.productName}}</view>
							<view class="txt">{{item.productInfo}}</view>
							<view class="num-box">
								<view class="price"><text class="symbol">￥</text><text
										class="bold">{{item.price}}</text>.48</view>
								<view class="sale">已售 {{item.sales}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 30天新品热销榜单 -->
			<view class="card ml24 border2">
				<image class="card-bg" src="https://cdn.his.cdwjyyh.com/images/new_hot.png"></image>
				<view class="card-title">
					<image class="w40 h40 ml8" src="https://cdn.his.cdwjyyh.com/images/new_product.png"></image>
					<text class="title1">30天新品热销榜单</text>
				</view>
				<view class="product-list">
					<view class="product-item" v-for="(item,index) in newProductList" :key="index">
						<view class="left">
							<image class="photo" :src="item.image"></image>
						<view class="lable" :class="index === 0 ? 'bg1' : index === 1 ? 'bg2' : index === 2 ? 'bg3' : 'bg'">{{index+1}}</view>
						</view>
						<view class="right">
							<view class="title">{{item.productName}}</view>
							<view class="txt">{{item.productInfo}}</view>
							<view class="num-box">
								<view class="price"><text class="symbol">￥</text><text
										class="bold">{{item.price}}</text>.48</view>
								<view class="sale">已售 {{item.sales}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		todayAndHot
	} from '@/api/product.js'
	export default {
		data() {
			return {
				newProductList: [],
				todayList: [],
				searchValue: '',
				// 状态栏的高度
				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
				setFocus: false,
				// 历史搜索
				searchHistory: [],
				// 推荐搜索
				topSearch: []
			};
		},
		onShow() {
			this.getTodayAndHot();
			
			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: {
			getTodayAndHot() {
				todayAndHot().then(
					(res) => {
						if (res.code == 200) {
							this.newProductList = res.data.thirtyDaysNewProductRank
							this.todayList = res.data.todayHotRank
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					},
					(rej) => {}
				);
			},


			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 30rpx; /* 添加底部内边距 */
				box-sizing: border-box;
				align-items: flex-start;

			.card {
				width: 600rpx;
						padding: 26rpx 32rpx 32rpx;
						background: #FFFFFF;
						border-radius: 24rpx 24rpx 24rpx 24rpx;
						position: relative;
						z-index: 0;
						flex-shrink: 0;
						box-sizing: border-box;
						display: flex;
						flex-direction: column;
				.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;
								min-height: 50rpx;
					.title1 {
						color: #FF4400;
					}

					.title2 {
						color: #D46C0D;
					}
				}

				.product-list {
					flex: 1;
					.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;

							}
							.bg1{
								background: linear-gradient( 135deg, #FB7E4C 0%, #ED4B17 100%);
							}
							.bg2{
								background: linear-gradient( 135deg, #FBCF3F 0%, #F9B71B 100%);
							}
							.bg3{
								background: linear-gradient( 135deg, #D5AB78 0%, #C39760 100%);
							}
							.bg{
								background: linear-gradient( 135deg, #C1C5CD 0%, #A5AAB5 100%);
							}
						}

						.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>