baqing-shop/shop-app/pages/category/index.vue

<template>
	<view class="page-a">
		<search-entry />
		<view v-if="pageLoading" class="page-a__loading">
			<u-loading-icon mode="circle" text="加载中" />
		</view>
		<view v-else-if="!treeList.length" class="page-a__empty">
			<u-empty mode="list" :text="loadFailed ? '分类加载失败' : '暂无分类'" icon-size="80" />
		</view>
		<view v-else class="page-a__body">
			<scroll-view class="page-a__left" scroll-y>
				<view
					v-for="(item, index) in treeList"
					:key="item.categoryId"
					class="left-item"
					:class="{ 'left-item--active': selectedIndex === index }"
					@click="onSelectLevel1(index)"
				>
					<text class="left-item__name">{{ item.categoryName }}</text>
					<text v-if="item.isHot" class="left-item__hot">热</text>
				</view>
			</scroll-view>
			<scroll-view class="page-a__right" scroll-y>
				<view class="right-grid">
					<view
						v-for="child in currentChildren"
						:key="child.categoryId"
						class="right-item"
						@click="onLevel2Tap(child)"
					>
						<image-preview class="right-item__pic" :src="child.categoryPic" />
						<text v-if="child.isHot" class="right-item__badge">热</text>
						<text class="right-item__name">{{ child.categoryName }}</text>
					</view>
				</view>
				<view v-if="!currentChildren.length" class="right-empty">
					<text>该分类下暂无子类</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getCategoryTree } from '@/api/category'
import { mapCategoryTree } from '@/utils/categoryDisplay'
import SearchEntry from '@/components/mall/SearchEntry.vue'
import { PAGE_CATEGORY_GOODS_LIST } from '@/utils/pageRoute'

const treeList = ref([])
const selectedIndex = ref(0)
const pageLoading = ref(true)
const loadFailed = ref(false)

const currentChildren = computed(() => {
	const cur = treeList.value[selectedIndex.value]
	return cur && cur.children ? cur.children : []
})

async function loadTree() {
	pageLoading.value = true
	loadFailed.value = false
	try {
		const res = await getCategoryTree()
		treeList.value = mapCategoryTree(res.data || [])
		if (treeList.value.length && selectedIndex.value >= treeList.value.length) {
			selectedIndex.value = 0
		}
	} catch (e) {
		loadFailed.value = true
		treeList.value = []
	} finally {
		pageLoading.value = false
	}
}

function onSelectLevel1(index) {
	selectedIndex.value = index
}

function onLevel2Tap(child) {
	const level1 = treeList.value[selectedIndex.value]
	if (!level1) return
	uni.navigateTo({
		url:
			`${PAGE_CATEGORY_GOODS_LIST}?categoryId=${child.categoryId}` +
			`&level1Id=${level1.categoryId}` +
			`&level1Name=${encodeURIComponent(level1.categoryName || '')}` +
			`&level2Name=${encodeURIComponent(child.categoryName || '')}`
	})
}

onShow(() => {
	loadTree()
})
</script>

<style lang="scss" scoped>
.page-a {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 188rpx);
	background: #f5f6f8;
}
.page-a__loading,
.page-a__empty {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.page-a__body {
	flex: 1;
	display: flex;
	min-height: 0;
}
.page-a__left {
	width: 200rpx;
	background: #f0f2f0;
	flex-shrink: 0;
}
.left-item {
	position: relative;
	padding: 28rpx 16rpx;
	text-align: center;
}
.left-item--active {
	background: #fff;
}
.left-item--active::before {
	content: '';
	position: absolute;
	left: 0;
	top: 24rpx;
	bottom: 24rpx;
	width: 6rpx;
	background: #2e7d32;
	border-radius: 0 4rpx 4rpx 0;
}
.left-item__name {
	font-size: 26rpx;
	color: #333;
}
.left-item__hot {
	display: inline-block;
	margin-left: 4rpx;
	padding: 0 6rpx;
	font-size: 18rpx;
	color: #fff;
	background: #ff9800;
	border-radius: 4rpx;
	vertical-align: middle;
}
.page-a__right {
	flex: 1;
	background: #fff;
}
.right-grid {
	display: flex;
	flex-wrap: wrap;
	padding: 16rpx;
}
.right-item {
	position: relative;
	width: 33.33%;
	padding: 16rpx 8rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.right-item__pic {
	width: 120rpx;
	height: 120rpx;
	border-radius: 16rpx;
	background: #f5f5f5;
}
.right-item__badge {
	position: absolute;
	top: 12rpx;
	right: 12rpx;
	padding: 2rpx 8rpx;
	font-size: 18rpx;
	color: #fff;
	background: #ff9800;
	border-radius: 6rpx;
}
.right-item__name {
	margin-top: 12rpx;
	font-size: 24rpx;
	color: #333;
	text-align: center;
}
.right-empty {
	padding: 80rpx 24rpx;
	text-align: center;
	color: #999;
	font-size: 26rpx;
}
</style>