book-hi/pages-mall/pages/goods/list1.vue

<!-- 分类列表 -->
<template>
	<view class="page">
		<!-- 带搜索框的一般导航栏 -->
		<NavbarSearch :title="'分类/'+cateInfo.name" v-model="searchVal"  @sortType="sortTypeChange" @confirm="confirmSearch"></NavbarSearch>
		<!-- 商品列表 -->
		<view class="list">
			<!-- 瀑布流组件 -->
			<u-waterfall ref="topicWaterFall" v-model="goodsList" marginLeft="7rpx" marginRight="7rpx">
				<template v-slot:left="{ leftList }">
					<CardGoods v-for="(item, index) in leftList" :key="index" :data="item" :showOldMoney="item.oldMoney"></CardGoods>
				</template>
				<template v-slot:right="{ rightList }">
					<CardGoods v-for="(item, index) in rightList" :key="index" :data="item" :showOldMoney="item.oldMoney"></CardGoods>
				</template>
			</u-waterfall>
		</view>
	</view>
</template>

<script>
// 组件
import CardGoods from '@/pages/mall/components/card.vue';
// import NavbarSearch from '@/pages-mall/components/navbar-search.vue';
import NavbarSearch from '@/components/navbar/navbar-search.vue';
// 假数据
import { recommendGoodsList as goodsList } from '@/static/test-data.js';
export default {
	components: {
		CardGoods,
		NavbarSearch
	},
	data() {
		return {
			searchVal:null,
			cateInfo:{
				name:null,
			},
			goodsList: goodsList,
		};
	},
	onLoad(opt) {
		console.log(opt.cateInfo)
		if(opt.cateInfo){
			console.log(this.cateInfo)
			this.cateInfo = JSON.parse(decodeURIComponent(opt.cateInfo));
			console.log(this.cateInfo)
		}
	},
	methods:{
		sortTypeChange(e) {
			console.log('eee>>>>>',e);
			this.sortType=e;
			this.page = 1;
			this.finish = false;
			this.goodsList=[];
			this.getGoodsList();
		},
		confirmSearch(e){
			console.log('搜索关键字>>>>',e);
			this.searchKeyWord = e;
			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,
				...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>
.list {
	padding: 30rpx;
}
</style>