yanzong_qianduan/pages/search/index.vue

<template>
	<view class="container">
		<view class="search">
			<image  :src="$picUrl+'/static/home/search.png'"  mode="" class="searchIcon"></image>
			<input v-model="searchValue" class="input" focus="true" placeholder="请输入您搜索的商品" type="text" />
			<view class="searchBtn" @click="getSearchInfo">
				搜索
			</view>
		</view>
		<view class="find">
			<view class="findTitle">
				搜索发现
				<image src="/static/search/openEye.png" class="findIcon" v-if="showEye" @click="showEye=!showEye">
				</image>
				<image src="/static/search/closeEye.png" class="findIcon" v-if="!showEye" @click="showEye=!showEye">
				</image>
			</view>
			<view class="others">
				换一批
			</view>
		</view>
		<view class="hotSearch" v-if="showEye">
			<view v-for="(item,index) in searchList" :key="index" class="hotItem" @click="searchGoods(item)">
				<image src="/static/user/hot.png" mode="" class="hotImg" v-if="index==0"></image>
				<text>{{item}}</text>
			</view>
		</view>
		<view class="hotSuggest">
			<scroll-view class="hotList" scroll-x="true" @scroll="scroll">
				<view class="hotItem" v-for="(item,index) in 2" :key="index">
					<view class="itemHeade">
						<view class="headeIcon">
							<image src="/static/search/hotImg.png" mode=""></image>
						</view>
						<view class="headTitle">热门数码产品汇总</view>
					</view>
					<view class="itemMain" v-for="(s,k) in 4" :key="k">
						<view class="num1 numCommon" v-if="k==0">
							{{k+1}}
						</view>
						<view class="num2 numCommon" v-if="k==1">
							{{k+1}}
						</view>
						<view class="num3 numCommon" v-if="k==2">
							{{k+1}}
						</view>
						<view class="num4 numCommon" v-if="k==3">
							{{k+1}}
						</view>
						<image :src="$picUrl+'/static/home/goodsDemo.png'"  mode="" class="goodsImg" v-if="k<3"></image>
						<view class="goodsInfo">
							<view class="goodName">
								荣耀PlAY 7T
							</view>
							<view class="goodsSale" v-if="k<3">
								今日开售
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showEye: true,
				searchValue: 'iPhone15',
				searchData: [],
				searchList: []
			}
		},

		onShow() {
			if(uni.getStorageSync('searchList')){
				this.searchList = uni.getStorageSync('searchList')
				this.searchList = Array.from(new Set(this.searchList));
			}
			this.getHot()
		},

		methods: {
			getHot(){
				
			},
			searchGoods(item){
				this.searchList.push(this.searchValue)
				this.searchList = Array.from(new Set(this.searchList));
				uni.setStorageSync('searchList', this.searchList)
				uni.navigateTo({
					url: '/pages/goods/list?search=' + item
				})
			},
			getSearchInfo() {
				// 搜索
				uni.navigateTo({
					url: '/pages/goods/list?search=' + this.searchValue
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;
		min-height: 100vh;
		background: #f7f7f7;
	}

	.search {
		width: 680rpx;
		height: 64rpx;
		background: #FFFFFF;
		border-radius: 68rpx 68rpx 68rpx 68rpx;
		opacity: 1;
		border: 2rpx solid #F3202A;
		margin: 10rpx 0 0 32rpx;
		display: flex;
		align-items: center;

		.searchIcon {
			width: 28rpx;
			height: 28rpx;
			opacity: 1;
			margin: 0rpx 0 0 26rpx;
		}

		.input {
			flex: 1;
			padding-left: 20rpx;
		}

		.searchBtn {
			width: 126rpx;
			height: 56rpx;
			background: #F3202A;
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			opacity: 1;
			line-height: 56rpx;
			text-align: center;
			margin-right: 4rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}

	.find {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 44rpx;

		.findTitle {
			width: 200rpx;
			height: 44rpx;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #000000;
			line-height: 44rpx;
			margin-left: 40rpx;

			.findIcon {
				width: 36rpx;
				height: 27rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				opacity: 1;
				margin-left: 22rpx;
			}
		}

		.others {
			width: 72rpx;
			height: 34rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #8D8D8D;
			line-height: 34rpx;
		}
	}

	.hotSearch {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 20rpx;

		.hotItem {
			height: 64rpx;
			background: #FFFFFF;
			border-radius: 68rpx 68rpx 68rpx 68rpx;
			opacity: 1;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #000000;
			line-height: 64rpx;
			padding-right: 22rpx;
			margin-right: 12rpx;
			margin-bottom: 24rpx;
			padding-left: 30rpx;

			.hotImg {
				width: 25rpx;
				height: 29rpx;
				opacity: 1;
			}
		}
	}

	.hotSuggest {
		width: 100%;
		margin-left: 32rpx;

		.hotList {
			width: 100%;
			white-space: nowrap;

			.hotItem {
				margin-right: 26rpx;
				display: inline-block;
				width: 484rpx;
				height: 612rpx;
				overflow-y: auto;
				background-image: url('../../static/search/hotBack.png');
				background-size: 100% 100%;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				opacity: 1;
				border: 2rpx solid #FFFFFF;

				.itemHeade {
					display: flex;
					align-items: center;

					.headeIcon {
						margin: 18rpx 0 0 22rpx;
						width: 48rpx;
						height: 60rpx;
						opacity: 1;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.headTitle {
						width: 224rpx;
						height: 40rpx;
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						color: #F3202A;
						line-height: 40rpx;
						margin-left: 14rpx;
					}
				}

				.itemMain {
					display: flex;
					align-items: center;
					margin: 22rpx 0 0 26rpx;

					.numCommon {
						width: 34rpx;
						height: 28rpx;
						background-size: 100% 100%;
						text-align: center;
						font-size: 20rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						color: #FFFFFF;
						line-height: 28rpx;
					}

					.num1 {
						background-image: url('/static/search/first.png');
					}

					.num2 {
						background-image: url('/static/search/second.png');
					}

					.num3 {
						background-image: url('/static/search/third.png');
					}

					.num4 {
						background-image: url('/static/search/common.png');
					}

					.goodsImg {
						width: 100rpx;
						height: 90rpx;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						opacity: 1;
						margin-left: 10rpx;
					}

					.goodsInfo {
						margin-left: 18rpx;

						.goodName {
							width: 138rpx;
							height: 34rpx;
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							color: #000000;
							line-height: 34rpx;
							text-align: center;
						}

						.goodsSale {
							width: 96rpx;
							height: 34rpx;
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							color: #9B9B9B;
							line-height: 34rpx;
							margin-top: 6rpx;
						}
					}
				}
			}
		}
	}
</style>