taoke/pages/home/search.vue

<template>
	<view id="body">
		<view class="history" v-if="products.length===0 && search===''">
			<view class="header">
				<image src="../../static/images/clock.png" mode="scaleToFill"
					style="width: 30upx;height: 30upx;margin-left: 10upx;"></image>
				<text style="margin-left: 10upx;">历史搜索</text>
				<uni-icons type="trash" style="margin-left: auto;margin-right: 10upx;" @tap="removeHistory"></uni-icons>
			</view>
			<view class="content">
				<view class="item" v-for="vlaue in history" @tap="fastSearch(vlaue)">
					{{vlaue}}
				</view>
			</view>
		</view>
		<view class="list">
			<template v-for="product in products">
				<product-item type="list" :id="product.id" :image="product.images|imagesFilter" :title="product.name"
					:org-price="product.org_price" :price="product.price"></product-item>
			</template>
		</view>
		<view class="nomore" v-if="nomore">没搜到任何相关商品</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				products: [],
				page: 1,
				pageLoading: false,
				search: "",
				history: [],
				nomore: false
			}
		},
		onPageScroll(e) {
			const query = uni.createSelectorQuery();
			query.select("#body").boundingClientRect(data => {
				if (e.scrollTop > data.height - uni.getSystemInfoSync().windowHeight * 2) {
					this.getProductList();
				}
			}).exec();

		},
		onLoad() {
			this.history = uni.getStorageSync("history") || []
		},
		onNavigationBarSearchInputChanged(e) {
			this.search = e.text;
		},
		onNavigationBarSearchInputConfirmed(e) {
			this.page = 1
			this.products = []
			this.getProductList()
		},
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				this.page = 1
				this.products = []
				this.getProductList()
			}
		},
		methods: {
			getProductList() {
				if (!this.pageLoading) {
					console.log("加载下一页");
					this.pageLoading = true;
					this.$http.get({
						url: "/product/lists",
						data: {
							limit: 10,
							page: this.page,
							search: this.search
						},
						success: (res) => {
							this.products = [...this.products, ...res.data.data.rows]
							this.page++;
							this.pageLoading = false;
							if (this.products.length === 0) {
								this.nomore = true;
							} else {
								this.nomore = false;
							}
						}
					})

					if (!this.history.includes(this.search) && this.search !== '') {
						console.log(this.history)
						this.history.push(this.search)
						uni.setStorageSync("history", this.history)
					}
				}
			},
			fastSearch(vlaue) {
				this.search = vlaue
				this.page = 1
				this.products = []
				this.getProductList()

				// #ifdef APP-PLUS			
				const currentWebview = this.$scope.$getAppWebview();
				currentWebview.setTitleNViewSearchInputText(this.search);
				currentWebview.setTitleNViewSearchInputFocus(true)
				currentWebview.setTitleNViewSearchInputFocus(false)
				// #endif

			},
			removeHistory() {
				uni.removeStorageSync("history")
				this.history = []
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 18upx;
	}

	.list .product-item {
		margin-bottom: 18upx;
	}

	.history {
		margin: 20upx;
		padding: 10upx;
		background: white;
		border-radius: 10upx;

		.header {
			display: flex;
			font-size: 28upx;
			align-items: center;
			padding-bottom: 10upx;
			border-bottom: 2upx solid #EEEEEE;
		}

		.content {
			min-height: 160upx;
			display: flex;
			justify-content: start;
			flex-wrap: wrap;

			.item {

				font-size: 28upx;
				margin: 10upx;
				padding: 0upx 20upx;
				color: #999999;
				border: 2upx solid #999999;
				height: 40upx;
				border-radius: 40upx;

			}
		}
	}

	.nomore {
		text-align: center;
		font-size: 28upx;
	}
</style>