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="iPhone15" 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 class="others" v-if="searchList && searchList.length > 0">
					<u-icon size="40" color="#999" name="trash" @click="toDo(0)" v-if="isHot"></u-icon>
					<view class="do" v-else>
						<view class="red" @click="toDo(1)">全部删除</view>
						<view class="suc" @click="toDo(2)">完成</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="hotSearch" v-if="showEye">
			<view v-for="(item,index) in searchList" :key="index" class="hotItem">
				<text @click="searchGoods(item)">{{item}}</text>
				<view v-if="isHot == false" class="del" @click="toDo(3,index)"><u-icon size="30" color="#999" name="close-circle"></u-icon></view>
			</view>
		</view>
		<view class="hotSuggest">
			<scroll-view class="hotList" scroll-x="true" @scroll="scroll">
				<view class="hotItem" v-for="(item,index) in goodsList" :key="index">
					<view class="itemHeade">
						<image src="/static/search/hotImg.png" mode="widthFix"></image>
						<view class="headTitle">{{item.name}}</view>
					</view>
					<view class="itemMain" v-for="(s,k) in item.goods_list.slice(0,5)" :key="k"
						@click="handleTargetGoods(s.goods_id)">
						<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> -->
							<image :src="s.goods_image" mode="aspectFit" class="goodsImg"></image>
						</view>
						<view class="goodsInfo">
							<view class="goodName">
								{{s.goods_name}}
							</view>
							<view class="goodsSale" v-if="k<3">
								{{s.selling_point}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import * as GoodsApi from '@/api/home/index.js';
	export default {
		data() {
			return {
				showEye: true,
				searchValue: '',
				searchData: [],
				searchList: [],
				searchFindList: [],
				page: 1,
				goodsList: [],
				category_id:0,
				isHot: true,
			}
		},

		onShow() {
			if (uni.getStorageSync('searchList')) {
				this.searchList = uni.getStorageSync('searchList')
				this.searchList = Array.from(new Set(this.searchList));
				this.searchList=this.searchList.length>0?this.searchList.slice(0,6):[]
			}

		},
		onLoad(op) {
			this.category_id=op.category_id
			this.getHot()
			this.chartsGoodsJingHandle()
		},

		methods: {
			toDo(index,idx){
				if(index == 0){
					this.isHot = false
				}else if(index == 1){
					this.searchList = []
					uni.removeStorageSync("searchList")
				}else if(index == 2){
					this.isHot = true
				}else if(index == 3){
					this.searchList.splice(idx,1)
				}
			},
			// 跳转到秒杀商品详情
			handleTargetGoods(sharpGoodsId) {
				uni.navigateTo({
					url: '/pages/goods/detail?goodsId=' + sharpGoodsId
				})
			},
			changePage() {
				GoodsApi.searchFind({
					page: this.page
				}).then(res => {
					if (res.data.length == 0) {
						this.page = 1;
					} else {
						this.page++
					}
					this.getHot()
				})
			},
			getHot() {
				GoodsApi.searchFind({
					page: this.page
				}).then(res => {
					if (res.data.length == 0) {
						this.page = 1;
						this.$toast('暂无其他搜索发现')
					} else {
						this.page++;
						this.searchFindList = res.data;
					}

				})
			},
			searchGoods(item) {
				uni.navigateTo({
					url: '/pages/goods/list?search=' + item
				})
			},
			getSearchInfo() {
				// 搜索
				if(this.searchValue){
					this.searchList.push(this.searchValue)
					this.searchList = Array.from(new Set(this.searchList));
					uni.setStorageSync('searchList', this.searchList)
				}
				uni.redirectTo({
					url: '/pages/goods/list?search=' + this.searchValue+'&categoryId=' + this.category_id
				})
			},
			chartsGoodsJingHandle() {
				GoodsApi.chartsGoodsJingApi().then(res => {
					this.goodsList = res.data;

				})

			}
		}
	}
</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: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			&>text {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #000000;
			}
			.do{
				display: flex;
				align-items: center;
				padding: 0 20rpx;
				white-space: nowrap;
			}
			.red{
				font-size: 24rpx;
				color: #ff0000;
			}
			.suc{
				border-left: 1px solid #ececec;
				padding-left: 20rpx;
				margin-left: 20rpx;
				height: 30rpx;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #9B9B9B;
			}
			.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-left: 12rpx;
			margin-bottom: 24rpx;
			text{
				display: block;
				max-width: 200rpx;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}
			.del{
				border-left: 1px solid #ececec;
				padding-left: 20rpx;
				margin-left: 20rpx;
				height: 30rpx;
				display: flex;
				align-items: center;
			}
			
			.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;
						flex-shrink: 0;

						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;
						flex-shrink: 0;

						.goodsImg {
							width: 100%;
							height: 100%;
							// opacity: 1;
							// 
						}
					}



					.goodsInfo {
						margin-left: 18rpx;
						width: calc(100% - 160rpx);

						.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;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.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;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}
			}
		}
	}
</style>