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

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

	<view class="s-category">
		<view class="three-level-wrap ss-flex ss-col-top" :style="[{ height: pageHeight + 'px' }]">
			<!-- 商品分类（左） -->
			<scroll-view class="side-menu-wrap" scroll-y :style="[{ height: pageHeight + 'px' }]">
				<view class="menu-item ss-flex" v-for="(item, index) in state.categoryList" :key="item.id"
					:class="[{ 'menu-item-active': index === state.activeMenu }]" @tap="onMenu(index)">
					<view class="menu-title ss-line-1">
						{{ item.name }}
					</view>
				</view>
			</scroll-view>
			<!-- 商品分类（右） -->
			
			<scroll-view class="goods-list-box" scroll-y :style="[{ height: pageHeight + 'px' }]"
				v-if="state.categoryList?.length">
				<image v-if="state.categoryList[state.activeMenu].picUrl" class="banner-img"
					:src="sheep.$url.cdn(state.categoryList[state.activeMenu].picUrl)" mode="widthFix" />
				<first-one v-if="state.style === 'first_one'" :pagination="state.pagination"  :merchantId="state.merchantId" :shopId="state.shopId"/>
				<first-two v-if="state.style === 'first_two'" :pagination="state.pagination" :merchantId="state.merchantId" :shopId="state.shopId"/>
				<second-one v-if="state.style === 'second_one'" :data="state.categoryList" :merchantId="state.merchantId " :shopId="state.shopId" :activeMenu="state.activeMenu" />
				<uni-load-more v-if="
              (state.style === 'first_one' || state.style === 'first_two') &&
              state.pagination.total > 0
            " :status="state.loadStatus" :content-text="{
              contentdown: '点击查看更多',
            }" @tap="loadMore" />
			</scroll-view>
		</view>
	</view>

	<s-tabbar path="/pages/shop/category" :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({
		style: 'second_one', // first_one（一级 - 样式一）, first_two（二级 - 样式二）, second_one（二级）
		categoryList: [], // 商品分类树
		activeMenu: 0, // 选中的一级菜单，在 categoryList 的下标
		shopId: 0, // 商家id
		merchantId: 0, // 商家id
		shopName: '',
		pagination: {
			// 商品分页
			list: [], // 商品列表
			total: [], // 商品总数
			pageNo: 1,
			pageSize: 6,
		},
		loadStatus: '',
	});

	const {
		safeArea
	} = sheep.$platform.device;
	const pageHeight = computed(() => safeArea.height - 44 - 50);

	// 加载商品分类
	async function getList() {
		const {
			code,
			data
		} = await CategoryApi.getCategoryList({
			merchantId: state.merchantId,
			shopId: state.shopId
		});
		if (code !== 0) {
			return;
		}
		
		state.categoryList = handleTree(data);
	}

	// 选中菜单
	const onMenu = (val) => {
		state.activeMenu = val;
		if (state.style === 'first_one' || state.style === 'first_two') {
			state.pagination.pageNo = 1;
			state.pagination.list = [];
			state.pagination.total = 0;
			getGoodsList();
		}
	};

	// 加载商品列表
	async function getGoodsList() {
		// 加载列表
		state.loadStatus = 'loading';
		const res = await SpuApi.getSpuPage({
			categoryId: state.categoryList[state.activeMenu].id,
			pageNo: state.pagination.pageNo,
			pageSize: state.pagination.pageSize,
		});
		if (res.code !== 0) {
			return;
		}
		// 合并列表
		state.pagination.list = _.concat(state.pagination.list, res.data.list);
		state.pagination.total = res.data.total;
		state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
	}

	// 加载更多商品
	function loadMore() {
		if (state.loadStatus === 'noMore') {
			return;
		}
		state.pagination.pageNo++;
		getGoodsList();
	}

	onLoad(async (options) => {
		state.merchantId = options.merchantId;
		state.shopId = options.shopId;
		state.shopName = options.shopName;
		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;
		});
		await getList();
		// 如果是 first 风格，需要加载商品分页
		if (state.style === 'first_one' || state.style === 'first_two') {
			onMenu(0);
		}
	});

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

<style lang="scss" scoped>
	.s-category {
		:deep() {
			.side-menu-wrap {
				width: 200rpx;
				height: 100%;
				padding-left: 12rpx;
				background-color: #f6f6f6;

				.menu-item {
					width: 100%;
					height: 88rpx;
					position: relative;
					transition: all linear 0.2s;

					.menu-title {
						line-height: 32rpx;
						font-size: 30rpx;
						font-weight: 400;
						color: #333;
						margin-left: 28rpx;
						position: relative;
						z-index: 0;

						// &::before {
						// 	content: '';
						// 	width: 64rpx;
						// 	height: 12rpx;
						// 	background: linear-gradient(90deg,
						// 			var(--ui-BG-Main-gradient),
						// 			var(--ui-BG-Main-light)) !important;
						// 	position: absolute;
						// 	left: -64rpx;
						// 	bottom: 0;
						// 	z-index: -1;
						// 	transition: all linear 0.2s;
						// }
					}

					&.menu-item-active {
						background-color: #fff;
						border-radius: 20rpx 0 0 20rpx;

						&::before {
							content: '';
							position: absolute;
							right: 0;
							bottom: -20rpx;
							width: 20rpx;
							height: 20rpx;
							background: radial-gradient(circle at 0 100%, transparent 20rpx, #fff 0);
						}

						&::after {
							content: '';
							position: absolute;
							top: -20rpx;
							right: 0;
							width: 20rpx;
							height: 20rpx;
							background: radial-gradient(circle at 0% 0%, transparent 20rpx, #fff 0);
						}

						.menu-title {
							font-weight: 600;
							color: var(--ui-BG-Main);

							&::before {
								left: 0;
							}
						}
					}
				}
			}

			.goods-list-box {
				background-color: #fff;
				width: calc(100vw - 100px);
				padding: 10px;
			}

			.banner-img {
				width: calc(100vw - 130px);
				border-radius: 5px;
				margin-bottom: 20rpx;
			}
		}
	}
</style>