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">
				<text>搜索发现</text>
				<image src="/static/search/openEye.png" mode="widthFix" class="findIcon" v-if="showEye" @click="showEye=!showEye">
				</image>
				<image src="/static/search/closeEye.png" mode="widthFix" 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 searchFindList" :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">
						<image src="/static/search/hotImg.png" mode="widthFix"></image>
						<view class="headTitle">热门数码产品汇总</view>
					</view>
					<view class="itemMain" v-for="(s,k) in 5" :key="k">
						<view class="num1 numCommon" v-if="k==0">
							<text>{{k+1}}</text>
						</view>
						<view class="num2 numCommon" v-if="k==1">
							<text>{{k+1}}</text>
						</view>
						<view class="num3 numCommon" v-if="k==2">
							<text>{{k+1}}</text>
						</view>
						<view class="num4 numCommon" v-if="k>2">
							<text>{{k+1}}</text>
						</view>
						<view class="picContent" v-if="k<3"> 
							<image :src="$picUrl+'/static/index/goods.png'"  mode="aspectFit" class="goodsImg"></image>
						</view>
						<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: [],
				searchFindList:['1999元抢IPad','iPhone15pro','小米手机','小米手机','智能手表好价']
			}
		},

		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: 40rpx 0;
		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 20rpx;
		display: flex;
		align-items: center;
		margin:0 40rpx;

		.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:0 40rpx;
		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;
			&>text{
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #000000;
			}

			.findIcon {
				width: 36rpx;
				height: auto;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				opacity: 1;
				margin-left: 22rpx;
				margin-top:3rpx;
				position: relative;
				top:4rpx;
			}
		}

		.others {
			
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #8D8D8D;
			margin-right: 14rpx;
		}
	}

	.hotSearch {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin:0 40rpx;
		margin-top: 20rpx;
		
		.hotItem {
			padding:10rpx 30rpx;
			background: #FFFFFF;
			border-radius: 34px 34px 34px 34px;
			opacity: 1;
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;
			// 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;
		margin-top:12rpx;
		margin-left:40rpx;
		padding-right: 40rpx;
		.hotList {
			width: 100%;
			white-space: nowrap;

			.hotItem {
				margin-right: 30rpx;
				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;
				padding:18rpx 20rpx 48rpx 20rpx;
				// border: 2rpx solid #FFFFFF;

				.itemHeade {
					display: flex;
					align-items: center;
					margin-bottom:46rpx;
					image {
						width: 48rpx;
						height: auto;
					}
					
					.headTitle {
					
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						color: #F3202A;
						margin-left:14rpx;
					}
				}

				.itemMain {
					display: flex;
					align-items: center;
					margin-bottom: 22rpx;
					// 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;
						display: flex;
						align-items: center;
						justify-content: center;
						text{
							position: relative;
							left:-1rpx;
						}
					}

					.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');
					}
					.picContent{
						width: 100rpx;
						height: 90rpx;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						overflow: hidden;
						margin-left: 10rpx;
						.goodsImg {
							width: 100%;
							height:100%;
							// opacity: 1;
							// 
						}
					}

					

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