sct/pagesT/productDetail/groupList.vue

<template>
	<!-- 父组件使用 -->
	<view :class="['qn-page-' + theme]">
		<scroll-view scroll-y class="goods-scroll" lower-threshold="100px" @scrolltolower="lower">
			<Aempty text="暂无数据" src="https://onlineimg.qianniao.vip/search.png" v-if="shoppingList.length === 0"></Aempty>
			<!-- 循环item出来为对象 -->
			<block v-for="(item, index) in shoppingList" :key="index"><GoodsItem :isList="is_list" :item="item" @addCart="addCard(item.id)"></GoodsItem></block>
			<u-loadmore margin-top="20" v-if="shoppingList.length" :status="loading_status" />
		</scroll-view>
		<CartFloat />
		<AddCardModel @close="is_add_show = false" :isShow="is_add_show" @change="cardModelPopChange" :goodsId="goods_id" />
	</view>
</template>

<script>
import GoodsItem from '@/components/GoodsItem.vue';
import CartFloat from '../components/CartFloat.vue';
import AddCardModel from '@/components/AddCardModel';
export default {
	components: {
		GoodsItem,
		CartFloat,
		AddCardModel
	},
	data() {
		return {
			tab_current: 0,
			is_list: false,
			is_add_show: false,
			goods_id: 0,
			shoppingList: [],
			groupId: 1,
			page: 1,
			pageSize: 10,
			loading_status: 'loadmore'
		};
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.getGoodsByCategory();
	},
	async onLoad(options) {
		this.groupId = options.id;
		await this.getGoodsByCategory();
		uni.setNavigationBarTitle({
			title: options.name || ''
		});
	},
	methods: {
		// 切换商品列表展示样式
		changeStyle() {
			this.is_list = !this.is_list;
		},
		cardModelPopChange(obj) {
			if (!obj.show) {
				this.is_add_show = false;
			}
		},
		addCard(id) {
			this.goods_id = id;
			this.is_add_show = true;
		},
		// 上拉加载
		lower() {
			if (this.pageTotal / this.pageSize > this.page) {
				this.page += 1;
				this.getGoodsByCategory();
			}
		},
		// 获取商品列表
		getGoodsByCategory() {
			this.loading_status = 'loading';
			this.$u.api
				.getGoodsByCategory({
					goodsGroups: this.groupId,
					page: this.page,
					pageSize: this.pageSize
				})
				.then(data => {
					uni.stopPullDownRefresh();
					if (this.page === 1) {
						this.shoppingList = data.data;
					} else {
						this.shoppingList = this.shoppingList.concat(data.data);
					}
					this.pageTotal = data.pageTotal;
					this.loading_status = this.$_utils.loadStatus(this.page, this.pageSize, this.pageTotal);
				});
		},
	}
};
</script>

<style lang="scss" scoped>
.goods-scroll {
	padding: 0;
	height: 100vh;
}
.flist-no {
	padding-top: 0;
	height: 100vh;
}
</style>