sct/pagesT/productDetail/productDetail.vue

<template>
	<!-- 父组件使用 -->
	<view :class="['qn-page-' + theme]">
		<view v-if="flist.length" style="border-top: 1px solid #F5F5F5;">
			<u-tabs inactive-color="rgba(0, 0, 0, 0.5);" height="78" font-size="28" active-color="#000000"
				:bar-style="{ height: '4rpx', backgroundColor: primaryColor }" :list="flist" name="title"
				:current="tab_current" @change="tabtap"></u-tabs>
		</view>
		<scroll-view scroll-y class="goods-scroll" :class="[flist.length === 0 ? 'flist-no' : '']"
			lower-threshold="100px" @scrolltolower="lower">
			<Aempty text="暂无数据" src="https://onlineimg.qianniao.vip/search.png" v-if="shoppingList.length === 0">
			</Aempty>
			<!-- 循环item出来为对象 -->
			<block v-if="shoppingList.length > 0">
				<u-waterfall v-model="shoppingList" ref="uWaterfall">
					<template v-slot:left="{ leftList }">
						<block v-for="(item, index) in leftList" :key="index">
							<GoodsItem :isList="is_list" :item="item" @addCart="addCard(item.id)"></GoodsItem>
						</block>
					</template>
					<template v-slot:right="{ rightList }">
						<block v-for="(item, index) in rightList" :key="index">
							<GoodsItem :isList="is_list" :item="item" @addCart="addCard(item.id)"></GoodsItem>
						</block>
					</template>
				</u-waterfall>
			</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,
				flist: [],
				shoppingList: [],
				currentId: 1,
				cateId: 1,
				page: 1,
				pageSize: 10,
				loading_status: 'loadmore'
			};
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getGoodsByCategory();
		},
		async onLoad(options) {
			this.currentId = options.id;
			this.cateId = options.id;
			await this.getAllCategoryByPidid(this.currentId);
			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();
				}
			},
			// 获取分类列表
			async getAllCategoryByPidid(currentId) {
				this.$u.api.getAllCategoryByPidid(currentId).then(res => {
					this.flist = res.data;
					if (this.flist.length) {
						this.flist.unshift({
							title: '全部',
							id: this.currentId
						});
					}
				});
			},
			// 获取商品列表
			getGoodsByCategory() {
				this.loading_status = 'loading';
				this.$u.api
					.getGoodsByCategory({
						categoryId: this.currentId,
						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);
					});
			},
			tabtap(current) {
				this.tab_current = current;
				// 获取的id
				this.currentId = this.flist[current].id;
				this.page = 1;
				// 调用商品详情
				this.shoppingList = []
				this.getGoodsByCategory();
			},
			leftList(dev) {
				console.log(dev);
			},
			rightList(dev) {
				console.log(dev);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.goods-scroll {
		padding: 0;
		height: calc(100vh - 92rpx);
	}

	.flist-no {
		padding-top: 0;
		height: 100vh;
	}
</style>