book-hi/pages/search-result.vue

<template>
	<view class="search_result">
		<!-- 带搜索框的navbar -->
		<NavbarSearch ref="NavbarSearch" v-model="searchKeyWord"  @sortType="sortTypeChange" @confirm="confirmSearch"></NavbarSearch>
		
		<!-- 商品列表 -->
		<view class="goodsList">
			<Goods class="list_item" v-for="(item, index) in goodsList" :key="index" :data="item"></Goods>
		</view>
		<!-- 无数据 -->
		<NoData
			height="50vh"
			v-if="finish&&goodsList.length == 0"
		></NoData>
		<u-loadmore v-else :status="finish?'nomore':loading?'loading':'loadmore'" :load-text="loadText" margin-top="60" />
	</view>
</template>

<script>
import NavbarSearch from '@/components/navbar/navbar-search.vue';
import CardGoods from '@/pages/mall/components/card.vue';
import Goods from '@/pages/mall/components/goods.vue';
export default {
	components: { NavbarSearch, CardGoods,Goods},
	data() {
		return {
			searchKeyWord: '',//关键字
			cateInfo:{
				id:null,
				name:null,
			},
			sortType: {},//排序
			// 商品列表
			goodsList: [],
			status: 'loadmore',
			loadText: {
				loadmore: '轻轻上拉',
				loading: ' ',
				nomore: '没有更多了'
			},
			page:1,
			finish:false,
			loading:false,
		};
	},
	onLoad(opt) {
		if(opt.key){
			// 是搜索进来的
			this.searchKeyWord = opt.key;
		}
		if(opt.cateInfo){
			// 分类过来的
			this.cateInfo = JSON.parse(decodeURIComponent(opt.cateInfo));
		}
		uni.setNavigationBarTitle({
			title: this.cateInfo.id?'分类/'+this.cateInfo.name:'搜索列表'
		})
		this.getGoodsList();
	},
	onReachBottom(){
		this.getGoodsList();
	},
	methods: {
		sortTypeChange(e) {
			this.sortType=e;
			this.page = 1;
			this.finish = false;
			this.goodsList=[];
			this.getGoodsList();
		},
		confirmSearch(e){
			this.searchKeyWord = e;
			this.page = 1;
			this.finish = false;
			this.goodsList=[];
			this.getGoodsList();
		},
		
		// 查询商品
		getGoodsList() {
			if(this.finish)return false;
			if(this.loading) return false;
			this.loading = true;
			this.$u.api.getGoodsListAjax({
				title: this.searchKeyWord,
				page: this.page,
				cate_id:this.cateInfo.id,
				...this.sortType
			}).then(({code,data})=>{
				this.loading = false;
				if(code==1){
					if(data.last_page<=data.current_page){
						this.finish = true;
					}
					if(data.current_page==1){
						this.goodsList = data.data;
					}else{
						this.goodsList=this.goodsList.concat(data.data);
					}
				}else{
					this.finish = true;
				}				
				this.page = data.current_page+1;
			}).catch(()=>{
				this.loading = false;
				this.finish = true;
			})
		},
	}
};
</script>

<style lang="scss" scoped>
.search_result{
	background-color: #fff;
	min-height: 100vh;
}
// .goodsList {
// 	padding: 30rpx 0;
// }
.list_item:last-child{
	background-color: red;
}
.goodsList .goodsItem:last-child{
	border-bottom: 0;
}
</style>