mall-uniapp/pages/index/category.vue

<!-- 分类列表 -->
<template>
	<s-layout title="分类" tabbar="/pages/index/category" :bgStyle="{ color: '#fff' }">
		<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?.children" :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?.children?.length">
					<image v-if="state.categoryList.children[state.activeMenu].image" class="banner-img"
						:src="sheep.$url.cdn(state.categoryList.children[state.activeMenu].image)" mode="widthFix">
					</image>
					<first-one v-if="state.categoryList.style === 'first_one'" :data="state.categoryList"
						:activeMenu="state.activeMenu" :pagination="state.pagination" />
					<first-two v-if="state.categoryList.style === 'first_two'" :data="state.categoryList"
						:activeMenu="state.activeMenu" :pagination="state.pagination" />
					<second-one v-if="state.categoryList.style === 'second_one'" :data="state.categoryList"
						:activeMenu="state.activeMenu" :pagination="state.pagination" />
					<uni-load-more v-if="
              (state.categoryList.style === 'first_one' ||
                state.categoryList.style === 'first_two') &&
              state.pagination.total > 0
            " :status="state.loadStatus" :content-text="{
              contentdown: '点击查看更多',
            }" @tap="loadmore" />
				</scroll-view>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import secondOne from './components/second-one.vue';
	import firstOne from './components/first-one.vue';
	import firstTwo from './components/first-two.vue';
	import sheep from '@/sheep';

	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		computed,
		reactive
	} from 'vue';
	import _ from 'lodash';
  import { handleTree } from '@/sheep/util';
	const state = reactive({
    style: 'second_one', // first_one（一级 - 样式一）, first_two（二级 - 样式二）, second_one（二级）
		categoryList: [], // 商品分类树
		activeMenu: '0',

		pagination: {
			data: [],
			current_page: 1,
			total: 1,
			last_page: 1,
		},
		loadStatus: '',
	});

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

	async function getList(options) {
		const {
			code,
			data
		} = await sheep.$api.category.list({
			id: options.id,
		});
		if (code === 0) {
			state.categoryList = {
				children: handleTree(data),
				style: 'second_one'
			};
		}
	}

	const onMenu = (val) => {
		state.activeMenu = val;
		if (state.categoryList.style === 'first_one' || state.categoryList.style === 'first_two') {
			state.pagination = {
				data: [],
				current_page: 1,
				total: 1,
				last_page: 1,
			};
			getGoodsList(state.categoryList.children[val].id);
		}
		// 这段代码本来是在判断里的
		// getGoodsList(state.categoryList.children[val].id);
	};

	async function getGoodsList(id, page = 1, list_rows = 6) {
		state.loadStatus = 'loading';
		const res = await sheep.$api.goods.list({
			categoryId: id,
			pageSize: list_rows,
			pageNo: page,
		});
		if (res.code === 0) {
			let couponList = _.concat(state.pagination.data, res.data.list);
			state.pagination = {
				...res.data,
				data: couponList,
			};
			console.log(state.pagination)
			if (state.pagination.current_page < state.pagination.last_page) {
				state.loadStatus = 'more';
			} else {
				state.loadStatus = 'noMore';
			}
		}
	}
	// 加载更多
	function loadmore() {
		if (state.loadStatus !== 'noMore') {
			getGoodsList(
				state.categoryList.children[state.activeMenu].id,
				state.pagination.current_page + 1,
			);
		}
	}
	onLoad(async (options) => {
		await getList(options);
		if (state.categoryList.style === 'first_one' || state.categoryList.style === 'first_two') {
			getGoodsList(state.categoryList.children[0].id);
		}
	});
	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;

							&::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>