junzitang/pagesT/search/index.vue

<template>
	<view :class="['qn-page-' + theme]" class="search_out">
		<view class="search-box">
			<!-- 搜索框 -->
			<u-search
				bg-color="#f4f5f6"
				placeholder-color="#9fa8bd"
				search-icon-color="#9fa8bd"
				@search="doSearch(keyword)"
				@custom="doSearch(keyword)"
				placeholder="输入搜索商品发现更多好物…"
				v-model="keyword"
				:action-style="{
					color: '#FA6400',
					fontWeight: '400'
				}"
			></u-search>
			<!-- 搜索框 end -->
		</view>
		<!-- 历史搜索 -->
		<view class="keyword-box" v-if="oldKeywordList.length">
			<view class="keyword-header clearfix">
				<view class="float_left tit-text">历史搜索</view>
				<view class="float_right clear-view" @tap="oldDelete">
					<text class="ibonfont ibonshanchu"></text>
					清除历史
				</view>
			</view>
			<view class="keyword-ul">
				<view class="keyword-li" @tap="doSearch(keyword)" v-for="(keyword, index) in oldKeywordList" :key="index">{{ keyword }}</view>
			</view>
		</view>
		<!-- 热门搜索 -->
		<view class="keyword-box" v-if="hotKeywordList.length">
			<view class="keyword-header clearfix">
				<view class="float_left tit-text">
					<image class="ic-hot" src="https://onlineimg.qianniao.vip/ic-hot.png" mode="aspectFill"></image>
					热门搜索
				</view>
			</view>
			<view class="keyword-ul hot-ul">
				<view class="keyword-li" v-for="(keyword, index) in hotKeywordList" @tap="doSearch(keyword.name)" :key="index">
					<image class="ic-hot-tag" src="https://onlineimg.qianniao.vip/ic-hot-tag.png" mode="aspectFill"></image>
					{{ keyword.name }}
				</view>
			</view>
		</view>
		<!-- 热销榜 -->
		<view class="hot-search-ranking" v-if="hot_goods_list.length">
			<view class="title"><image class="hot-search" src="https://onlineimg.qianniao.vip/hot-search.png" mode="aspectFill"></image></view>
			<view class="hot-search-ul">
				<view class="hot-search-li clearfix" v-for="(item, index) in hot_goods_list" :key="index" @click="goPage(`/pagesT/product/product?id=${item.id}`)">
					<view class="float_left goods-img">
						<view class="sort-tag">{{ index + 1 }}</view>
						<image :src="item.images[0]" mode="aspectFill"></image>
					</view>
					<view class="float_left goods-info">
						<view class="ellipsis goods-name">{{ item.title }}</view>
						<view class="hot-num">
							人气值{{ item.realSalesNum + 999 }}
							<text class="ibonfont ibonshangsheng"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			defaultKeyword: '',
			keyword: '',
			oldKeywordList: [],
			hotKeywordList: [],
			keywordList: [],
			hot_goods_list: [], // 热销榜
			forbid: '',
			isShowKeywordList: false
		};
	},
	onLoad() {
		this.init();
	},
	components: {},
	methods: {
		init() {
			this.loadDefaultKeyword();
			this.loadOldKeyword();
			this.loadHotKeyword();
			this.getGoodsByCategory();
		},
		blur() {
			uni.hideKeyboard();
		},
		//加载默认搜索关键字
		loadDefaultKeyword() {
			//定义默认搜索关键字，可以自己实现ajax请求数据再赋值,用户未输入时，以水印方式显示在输入框，直接不输入内容搜索会搜索默认关键字
			// this.defaultKeyword =this.hotKeywordList;
		},
		//加载历史搜索,自动读取本地Storage
		loadOldKeyword() {
			uni.getStorage({
				key: 'OldKeys',
				success: res => {
					var OldKeys = JSON.parse(res.data);
					this.oldKeywordList = OldKeys;
				}
			});
		},
		//加载热门搜索
		loadHotKeyword() {
			//定义热门搜索关键字，可以自己实现ajax请求数据再赋值
			this.$u.api
				.getBasicField({
					field: 'recommend'
				})
				.then(res => {
					this.hotKeywordList = res.data.recommend;
				});
		},
		//顶置关键字
		setkeyword(data) {
			this.keyword = data.keyword;
		},
		//清除历史搜索
		oldDelete() {
			uni.showModal({
				content: '确定清除历史搜索记录？',
				success: res => {
					if (res.confirm) {
						console.log('用户点击确定');
						this.oldKeywordList = [];
						uni.removeStorage({
							key: 'OldKeys'
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		//热门搜索开关
		hotToggle() {
			this.forbid = this.forbid ? '' : '_forbid';
		},
		//执行搜索
		doSearch(key) {
			if (!key) {
				this.$api.msg('请输入您要搜索的商品');
				return;
			}
			key = key ? key : this.keyword ? this.keyword : this.defaultKeyword;
			this.keyword = key;
			//保存为历史
			this.saveKeyword(key);
			//跳转搜索
			this.goPage('/pagesT/search/SearchResult?key=' + this.keyword);
		},
		//保存关键字到历史记录
		saveKeyword(keyword) {
			uni.getStorage({
				key: 'OldKeys',
				success: res => {
					var OldKeys = JSON.parse(res.data);
					console.log(OldKeys);
					var findIndex = OldKeys.indexOf(keyword);
					if (findIndex == -1) {
						OldKeys.unshift(keyword);
					} else {
						OldKeys.splice(findIndex, 1);
						OldKeys.unshift(keyword);
					}
					//最多10个纪录
					OldKeys.length > 10 && OldKeys.pop();
					uni.setStorage({
						key: 'OldKeys',
						data: JSON.stringify(OldKeys)
					});
					this.oldKeywordList = OldKeys;
					console.log(this.oldKeywordList);
					//更新历史搜索
				},
				fail: e => {
					var OldKeys = [keyword];
					uni.setStorage({
						key: 'OldKeys',
						data: JSON.stringify(OldKeys)
					});
					this.oldKeywordList = OldKeys;
					//更新历史搜索
				}
			});
		},
		// 热销榜
		getGoodsByCategory() {
			this.$u.api
				.getGoodsByCategory({
					page: 1,
					pageSize: 10,
					sort: 1
				})
				.then(res => {
					this.hot_goods_list = res.data;
				});
		}
	}
};
</script>
<style>
.search_out .u-input {
	font-size: 24rpx !important;
}
page {
	background: #fff;
}
</style>
<style scoped lang="scss">
.search-box {
	padding: 24rpx 30rpx 32rpx;
}
.keyword-box {
	padding: 0 30rpx 24rpx 14rpx;
	.keyword-header {
		padding-bottom: 24rpx;
		padding-left: 16rpx;
		line-height: 40rpx;
		.tit-text {
			color: #000000;
			font-size: 28rpx;
			font-weight: 600;
			.ic-hot {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
				vertical-align: middle;
				transform: translateY(-4rpx);
			}
		}
		.clear-view {
			color: #9c9c9c;
			font-size: 24rpx;
			.ibonshanchu {
				font-size: 24rpx;
				margin-right: 10rpx;
			}
		}
	}
	.keyword-ul {
		display: flex;
		flex-wrap: wrap;
		.keyword-li {
			line-height: 40rpx;
			padding: 0 34rpx;
			border-radius: 40rpx;
			margin-bottom: 16rpx;
			margin-left: 16rpx;
			background-color: #f5f6f7;
			color: #6b6b6b;
			font-size: 22rpx;
		}
	}
	.hot-ul {
		.keyword-li {
			border-radius: 0px 21rpx 21rpx 21rpx;
			position: relative;
			.ic-hot-tag {
				position: absolute;
				left: 0;
				top: 0;
				width: 24rpx;
				height: 24rpx;
				display: block;
			}
		}
	}
}
.hot-search-ranking {
	width: 690rpx;
	background: linear-gradient(180deg, rgba(255, 218, 194, 0.22) 0%, rgba(255, 248, 244, 0.45) 29%, #ffffff 100%);
	border-radius: 24rpx;
	margin: 0 auto;
	.title {
		padding: 24rpx;
		.hot-search {
			width: 124rpx;
			height: 34rpx;
		}
	}
	.hot-search-ul {
		display: flex;
		flex-wrap: wrap;
		padding: 0 24rpx;
		.hot-search-li {
			width: 320rpx;
			margin-bottom: 16rpx;
			.goods-img {
				margin-right: 8rpx;
				position: relative;
				.sort-tag {
					position: absolute;
					width: 24rpx;
					height: 26rpx;
					background: #ffb482;
					border-radius: 8rpx 0px 8rpx 0px;
					top: 0;
					font-family: DIN-Medium;
					left: 0;
					font-size: 16rpx;
					color: #ffffff;
					line-height: 26rpx;
					text-align: center;
				}
				image {
					display: block;
					width: 88rpx;
					height: 88rpx;
					background: #ffffff;
					border-radius: 8rpx;
				}
			}
			.goods-info {
				width: calc(100% - 96rpx);
				.goods-name {
					line-height: 50rpx;
					-webkit-line-clamp: 1;
					font-size: 24rpx;
					color: #111111;
				}
				.hot-num {
					font-size: 20rpx;
					font-family: DINPro-Regular;
					color: #9c9c9c;
					line-height: 28rpx;
					margin-right: 10rpx;
					.ibonshangsheng {
						font-size: 18rpx;
						color: #e02020;
					}
					.ibonxiajiang {
						color: #64d992;
					}
				}
			}
			&:first-child {
				.goods-img {
					.sort-tag {
						background: #e02020;
					}
				}
			}
			&:nth-child(2) {
				.goods-img {
					.sort-tag {
						background: #fa6400;
					}
				}
			}
			&:nth-child(3) {
				.goods-img {
					.sort-tag {
						background: #f7b500;
					}
				}
			}
		}
	}
}
</style>