mall-front-app/pages/shop/allproduct.vue

<!-- 商品分类列表 -->
<template>
	<su-navbar :title="state.shopName" statusBar :color="color" :tools="tools" :opacityBgUi="opacityBgUi"
		@search="(e) => emits('search', e)" :defaultSearch="defaultSearch" />

	<!-- 情况一：单列布局 -->
	<view v-if="state.iconStatus && state.pagination.total > 0" class="goods-list ss-m-t-20">
		<view class="ss-p-l-20 ss-p-r-20 ss-m-b-20" v-for="item in state.pagination.list" :key="item.id">
			<s-goods-column class="" size="lg" :data="item" :topRadius="10" :bottomRadius="10"
				@click="sheep.$router.go('/pages/goods/index', { id: item.id })" />
		</view>
	</view>
	<!-- 情况二：双列布局 -->
	<view v-if="!state.iconStatus && state.pagination.total > 0"
		class="ss-flex ss-flex-wrap ss-p-x-20 ss-m-t-20 ss-col-top">
		<view class="goods-list-box">
			<view class="left-list" v-for="item in state.leftGoodsList" :key="item.id">
				<s-goods-column class="goods-md-box" size="md" :data="item" :topRadius="10" :bottomRadius="10"
					@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
					@getHeight="mountMasonry($event, 'left')">
					<template v-slot:cart>
						<button class="ss-reset-button cart-btn" />
					</template>
				</s-goods-column>
			</view>
		</view>
		<view class="goods-list-box">
			<view class="right-list" v-for="item in state.rightGoodsList" :key="item.id">
				<s-goods-column class="goods-md-box" size="md" :topRadius="10" :bottomRadius="10" :data="item"
					@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
					@getHeight="mountMasonry($event, 'right')">
					<template v-slot:cart>
						<button class="ss-reset-button cart-btn" />
					</template>
				</s-goods-column>
			</view>
		</view>
	</view>
	<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
		    contentdown: '上拉加载更多',
		  }" @tap="loadMore" />
	<s-empty v-if="state.pagination.total === 0" icon="/static/soldout-empty.png" text="暂无商品" />

	<s-tabbar path="/pages/shop/allproduct" :tabbar="tabbar" />
	
	<s-menu-tools />
</template>

<script setup>
	import secondOne from '@/pages/index/components/second-one.vue';
	import firstOne from '@/pages/index/components/first-one.vue';
	import firstTwo from '@/pages/index/components/first-two.vue';
	import sheep from '@/sheep';
	import CategoryApi from '@/sheep/api/product/category';
	import SpuApi from '@/sheep/api/product/spu';
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		ref,
		computed,
		reactive
	} from 'vue';
	import _ from 'lodash';
	import {
		handleTree
	} from '@/sheep/util';
	import {
		t
	} from '@/locale'
	const tabbar = ref({
		"theme": "red",
		"style": {
			"bgType": "color",
			"bgColor": "#ffffff",
			"color": "#3c3c3c",
			"activeColor": "#1fa380"
		},
		"items": [{
				"text": t('common.shop_index'),
				"url": "/pages/shop/index",
				"iconUrl": sheep.$url.static('/static/shopIndex/shopIndex.svg'),
				"activeIconUrl": sheep.$url.static('/static/shopIndex/shopIndex-active.svg')
			},
			{
				"text": t('common.shop_category'),
				"url": "/pages/shop/category",
				"iconUrl": sheep.$url.static('/static/shopIndex/category.svg'),
				"activeIconUrl": sheep.$url.static('/static/shopIndex/category-active.svg')
			},
			{
				"text": t('common.all_product'),
				"url": "/pages/shop/allproduct",
				"iconUrl": sheep.$url.static('/static/shopIndex/allProduct.svg'),
				"activeIconUrl": sheep.$url.static('/static/shopIndex/allProduct-active.svg')
			},
			
		]
	});
	const state = reactive({
		pagination: {
			list: [],
			total: 0,
			pageNo: 1,
			pageSize: 6,
		},
		currentSort: undefined,
		currentOrder: undefined,
		currentTab: 0, // 当前选中的 tab
		curFilter: 0, // 当前选中的 list 筛选项
		showFilter: false,
		iconStatus: false, // true - 单列布局；false - 双列布局
		keyword: '',
		categoryId: 0,
		tabList: [{
				name: t('common.recommended'),
				list: [{
						label: t('common.recommended')
					},
					{
						label: t('common.price_asc'),
						sort: 'price',
						order: true,
					},
					{
						label: t('common.price_desc'),
						sort: 'price',
						order: false,
					},
				],
			},
			{
				name: t('common.sales'),
				sort: 'salesCount',
				order: false
			},
			{
				name: t('common.newest'),
				value: 'createTime',
				order: false
			},
		],
		loadStatus: '',
		leftGoodsList: [], // 双列布局 - 左侧商品
		rightGoodsList: [], // 双列布局 - 右侧商品
	});
	
	// 加载瀑布流
	let count = 0;
	let leftHeight = 0;
	let rightHeight = 0;
	
	// 处理双列布局 leftGoodsList + rightGoodsList
	function mountMasonry(height = 0, where = 'left') {
		if (!state.pagination.list[count]) {
			return;
		}
	
		if (where === 'left') {
			leftHeight += height;
		} else {
			rightHeight += height;
		}
		if (leftHeight <= rightHeight) {
			state.leftGoodsList.push(state.pagination.list[count]);
		} else {
			state.rightGoodsList.push(state.pagination.list[count]);
		}
		count++;
	}
	
	// 清空列表
	function emptyList() {
		resetPagination(state.pagination);
		state.leftGoodsList = [];
		state.rightGoodsList = [];
		count = 0;
		leftHeight = 0;
		rightHeight = 0;
	}
	
	// 搜索
	function onSearch(e) {
		state.keyword = e;
		emptyList();
		getList(state.currentSort, state.currentOrder);
	}
	
	// 点击
	function onTabsChange(e) {
		// 如果点击的是【综合推荐】，则直接展开或者收起筛选项
		if (state.tabList[e.index].list) {
			state.currentTab = e.index;
			state.showFilter = !state.showFilter;
			return;
		}
		state.showFilter = false;
	
		// 如果点击的是【销量】或者【新品优先】，则直接切换 tab
		if (e.index === state.currentTab) {
			return;
		}
	
		state.currentTab = e.index;
		state.currentSort = e.sort;
		state.currentOrder = e.order;
		emptyList();
		getList(e.sort, e.order);
	}
	
	// 点击 tab 的 list 筛选项
	const onFilterItem = (val) => {
		// 如果点击的是当前的筛选项，则直接收起筛选项，不要加载数据
		// 这里选择 tabList[0] 的原因，是目前只有它有 list
		if (state.currentSort === state.tabList[0].list[val].sort &&
			state.currentOrder === state.tabList[0].list[val].order) {
			state.showFilter = false;
			return;
		}
		state.showFilter = false;
	
		// 设置筛选条件
		state.curFilter = val;
		state.tabList[0].name = state.tabList[0].list[val].label;
		state.currentSort = state.tabList[0].list[val].sort;
		state.currentOrder = state.tabList[0].list[val].order;
		// 清空 + 加载数据
		emptyList();
		getList();
	}
	
	async function getList() {
		state.loadStatus = 'loading';
		const {
			code,
			data
		} = await SpuApi.getSpuPage({
			pageNo: state.pagination.pageNo,
			pageSize: state.pagination.pageSize,
			sortField: state.currentSort,
			sortAsc: state.currentOrder,
			categoryId: state.categoryId,
			keyword: state.keyword,
			shopId: state.shopId,
			merchantId: state.merchantId
		});
		if (code !== 0) {
			return;
		}
		state.pagination.list = _.concat(state.pagination.list, data.list)
		state.pagination.total = data.total;
		state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
		mountMasonry();
	}
	
	// 加载更多
	function loadMore() {
		if (state.loadStatus === 'noMore') {
			return;
		}
		state.pagination.pageNo++;
		getList(state.currentSort, state.currentOrder);
	}
	



	onLoad(async (options) => {
		state.merchantId = options.merchantId;
		state.shopId = options.shopId;
		state.shopName = options.shopName;
		state.categoryId = options.categoryId;
		state.keyword = options.keyword;
		
		tabbar.value.items = tabbar.value.items.map(item => {
			// 为每个 URL 添加参数
			item.url =
				`${item.url}?shopId=${state.shopId}&shopName=${encodeURIComponent(state.shopName)}&merchantId=${state.merchantId}`;
			return item;
		});
		getList(state.currentSort, state.currentOrder);
	});

	onReachBottom(() => {
		loadMore();
	});
</script>

<style lang="scss" scoped>
	.goods-list-box {
		width: 50%;
		box-sizing: border-box;

		.left-list {
			margin-right: 10rpx;
			margin-bottom: 20rpx;
		}

		.right-list {
			margin-left: 10rpx;
			margin-bottom: 20rpx;
		}
	}

	.goods-box {
		&:nth-last-of-type(1) {
			margin-bottom: 0 !important;
		}

		&:nth-child(2n) {
			margin-right: 0;
		}
	}

	.list-icon {
		width: 80rpx;

		.sicon-goods-card {
			font-size: 40rpx;
		}

		.sicon-goods-list {
			font-size: 40rpx;
		}
	}

	.goods-card {
		margin-left: 20rpx;
	}

	.list-filter-tabs {
		background-color: #fff;
	}

	.filter-list-box {
		padding: 28rpx 52rpx;

		.filter-item {
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			line-height: normal;
			margin-bottom: 24rpx;

			&:nth-last-child(1) {
				margin-bottom: 0;
			}
		}

		.filter-item-active {
			color: var(--ui-BG-Main);
		}
	}

	.tab-item {
		height: 50px;
		position: relative;
		z-index: 11;

		.tab-title {
			font-size: 30rpx;
		}

		.cur-tab-title {
			font-weight: $font-weight-bold;
		}

		.tab-line {
			width: 60rpx;
			height: 6rpx;
			border-radius: 6rpx;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 10rpx;
			background-color: var(--ui-BG-Main);
			z-index: 12;
		}
	}
</style>