medicine-xcx/pagesC/search/searchInfo.vue

<template>
	<view class="search-info flex-1 flex flex-column">
		<view class="search-info-box position-fixed top-0 left-0 w-100 zIndex-1">
			<u-search disabled placeholder="请输入要搜索的商品" height="70" :show-action="false" @click="handleSearch" />
		</view>
		<view class="search-info-scroll flex-1">
			<view class="p-20" v-if="goodsList.length">
				<view class="m-b-20" v-for="item in goodsList" :key="item.id">
					<goods-item :goods="item" thereTo='home' />
				</view>
			</view>
			<view class="w-100 h-100" v-else-if="!loading && !goodsList.length">
				<u-empty icon-size="100" mode="search" text="没有搜索到此商品"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data: () => ({
			title: '',
			pageNo: 1,
			pageSize: 10,
			goodsList: [],
			loading: true,
			total: null,
			isMore: 1
		}),
		onLoad(optios) {
			uni.showLoading()
			this.title = optios.keyword
			this.getGoodsList()
		},
		onReachBottom() {
			if(this.isMore === 1) {
				this.isMore = 2
				this.pageNo+=1;
				this.getGoodsList();
			}
		},
		onPullDownRefresh() {
			this.pageNo= 1;
			uni.showLoading()
			this.isMore = 1
			this.goodsList = []
			this.getGoodsList();
		},
		methods: {
			getGoodsList () {
				this.$api('getGoodsList', {title: this.title, pageNo: this.pageNo, pageSize: this.pageSize })
				.then(res => {
					uni.hideLoading()
					this.loading = false
					let { code, result } = res
					if (res.code === 200) {
						this.isMore = 1
						if(this.pageNo * this.pageSize >= this.total) this.isMore = 0
						result.records.forEach(item => {
							const picArray= item.pic.split(',')
							item.pic= picArray[0]
						})
						this.goodsList = [ ...result.records, ...this.goodsList ]
					}
				})
				.catch(err => {
					uni.hideLoading()
					this.loading = false
				})
			},
			handleSearch () {
				this.$tools.redirectTo({
					url: '/pagesC/search/search'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.search-info {
		background: #f6f6f6;
		&-box {
			padding: 20rpx;
			background-color: #fff;
		}
		&-scroll {
			padding-top: 110rpx;
		}
	}
</style>