baiyuApp/pages_mall/category.vue

<template>
	<view class="category-page">
		<!-- 自定义头部 -->
		<view class="custom-header" :style="{paddingTop: statusBarHeight + 'px'}">
			<view class="header-content">
				<view class="back-btn" @click="goBack">
					<u-icon name="arrow-left" color="#fff" size="20"></u-icon>
				</view>
				<text class="title">商品分类</text>
				<view class="placeholder"></view>
			</view>
		</view>

		<!-- 搜索栏 -->
		<view class="search-wrap" :style="{marginTop: (statusBarHeight + 44) + 'px'}">
			<view class="search-bar" @click="toSearch">
				<u-icon name="search" color="#999" size="20"></u-icon>
				<text class="placeholder-text">搜索药品名称</text>
			</view>
		</view>

		<view class="category-container">
			<!-- 左侧一级分类 -->
			<scroll-view scroll-y class="left-aside">
				<view v-for="(item, index) in cates" :key="index" class="f-item"
					:class="{active: item.cateId === cateSelect}" @click="choseCate(item)">
					{{item.cateName}}
				</view>
			</scroll-view>

			<!-- 右侧二级分类/商品 -->
			<scroll-view scroll-y class="right-aside">
				<view class="s-list">
					<view class="s-item" v-for="(item, index) in subCates" :key="index" @click="showProductList(item)">
						<image :src="item.pic" mode="aspectFit" class="cate-img"></image>
						<text>{{item.cateName}}</text>
					</view>
					<view v-if="subCates.length === 0" class="empty-tip">暂无子分类</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		getProductCate
	} from '@/api/product'

	export default {
		data() {
			return {
				statusBarHeight: 20,
				allCates: [],
				cates: [],
				subCates: [],
				cateSelect: 0,
			}
		},
		created() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.getProductCate();
		},
		methods: {
			goBack() {
				uni.showTabBar()
				uni.switchTab({
					// url: '/pages_im/pages/conversation/conversationList/index'
					url: "/pages/index/index"
				})
			},
			toSearch() {
				uni.navigateTo({
					url: '/pages/index/home/productSearch'
				})
			},
			getProductCate() {
				getProductCate({}).then(res => {
					if (res.code == 200) {
						this.allCates = res.data;
						this.cates = this.allCates.filter(item => item.pid == 0);
						if (this.cates && this.cates.length > 0) {
							this.cateSelect = this.cates[0].cateId;
							this.getSubCate();
						}
					}
				});
			},
			choseCate(item) {
				this.cateSelect = item.cateId;
				this.getSubCate();
			},
			getSubCate() {
				this.subCates = this.allCates.filter(item => item.pid == this.cateSelect);
			},
			showProductList(item) {
				uni.navigateTo({
					url: '/pages_mall/productList?cateId=' + item.cateId + "&pid=" + item.pid
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.category-page {
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #F5F7FA;
	}

	.custom-header {
		background: linear-gradient(to right, #FF233C, #4FACFE);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;

		.header-content {
			height: 44px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;

			.back-btn {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}

			.title {
				color: #fff;
				font-size: 36rpx;
				font-weight: bold;
			}

			.placeholder {
				width: 60rpx;
			}
		}
	}

	.search-wrap {
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #f0f0f0;

		.search-bar {
			background-color: #F7F7F7;
			height: 72rpx;
			border-radius: 36rpx;
			display: flex;
			align-items: center;
			padding: 0 30rpx;

			.placeholder-text {
				font-size: 28rpx;
				color: #999;
				margin-left: 10rpx;
			}
		}
	}

	.category-container {
		flex: 1;
		display: flex;
		height: 0; // Fix flex scroll

		.left-aside {
			width: 200rpx;
			height: 100%;
			background-color: #F5F7FA;

			.f-item {
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				color: #606266;
				position: relative;

				&.active {
					color: #FF233C;
					background-color: #fff;
					font-weight: bold;

					&::before {
						content: '';
						position: absolute;
						left: 0;
						top: 30rpx;
						bottom: 30rpx;
						width: 8rpx;
						background-color: #FF233C;
						border-radius: 0 4rpx 4rpx 0;
					}
				}
			}
		}

		.right-aside {
			flex: 1;
			height: 100%;
			background-color: #fff;
			padding: 20rpx;

			.s-list {
				display: flex;
				flex-wrap: wrap;

				.s-item {
					width: 33.33%;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-bottom: 40rpx;

					.cate-img {
						width: 120rpx;
						height: 120rpx;
						border-radius: 12rpx;
						background-color: #f5f5f5;
						margin-bottom: 16rpx;
					}

					text {
						font-size: 24rpx;
						color: #333;
						text-align: center;
						padding: 0 10rpx;
					}
				}

				.empty-tip {
					width: 100%;
					text-align: center;
					color: #999;
					font-size: 26rpx;
					padding-top: 100rpx;
				}
			}
		}
	}
</style>