zhishifufei_uniapp/pages/store/goodsCate.vue

<template>
	<BaseContainer class="cate-box">
			<NavBar title="商品分类" />
			<view class="cate-list flex">
				<view class="cate-list-left">
					<view v-for="(item, index) in goodsCateList" :key="index" class="cate-item" :class="{'active': bigCate === item.name}" @click="bigCate = item.name">
						{{ item.name }}
					</view>
				</view>
				<view v-if="bigCate" class="cate-list-right">
					<!-- <view v-for="(item, index) in goodsCateList.filter(item => item.name === bigCate)[0].list" class="small-cate-content"> -->
					<view class="small-cate-content">
						<!-- <view class="small-cate-title">{{ bigCate }} + {{ item.title }}</view> -->
						<view class="small-cate-list flex">
							<view v-for="(con, k) in goodsCateList.filter(item => item.name === bigCate)[0].children" :key="k" class="small-cate-list-item">
								<view class="flex item-image">
									<image :src="con.pic" mode="aspectFill"></image>
								</view>
								<view class="item-name">{{ con.name }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
	</BaseContainer>
</template>

<script>
	import { getGoodsCateList, getGoodsList, getIndexData } from "@/api/store";
	
	export default {
		data() {
			return {
				goodsCateList: [
					{
						name: '特别推荐',
						list: [
							{
								title: '四级必备',
								list: [{name: '二级分类01'}, {name: '二级分类02'}, {name: '二级分类03'}, {name: '二级分类04'}],
							},
							{
								title: '托福雅思',
								list: [{name: '二级分类01'}, {name: '二级分类02'}, {name: '二级分类03'}, {name: '二级分类04'}],
							},
						]
					},
					{
						name: '考研试卷',
						list: [
							{
								title: '四级必备',
								list: [{name: '二级分类01'}, {name: '二级分类02'}, {name: '二级分类03'}, {name: '二级分类04'}],
							},
							{
								title: '托福雅思',
								list: [{name: '二级分类01'}, {name: '二级分类02'}, {name: '二级分类03'}, {name: '二级分类04'}],
							},
						]
					},
					{
						name: '语言学习',
						list: [
							{
								title: '四级必备',
								list: [{name: '二级分类01'}, {name: '二级分类02'}, {name: '二级分类03'}, {name: '二级分类04'}],
							},
							{
								title: '托福雅思',
								list: [{name: '二级分类01'}, {name: '二级分类02'}, {name: '二级分类03'}, {name: '二级分类04'}],
							},
						]
					}
				],
				bigCate: '',
			};
		},
		onLoad() {
			this.getGoodsCateList();
		},
		methods: {
			// 获取分类
			async getGoodsCateList() {
			  try {
			    const { data } = await getGoodsCateList();
			    console.log(data);
					this.goodsCateList = [
					  {
					    name: "特别推荐",
					    id: 0,
							children: data.recommend,
					  },
					].concat(data.category_list);
					console.log(this.goodsCateList);
			  } catch (err) { }
			},
		},
	};
</script>

<style lang="scss" scoped>
	.cate-box {
		background: #f6f6f6;
		height: 100vh;
		.cate-list {
			padding-top: 20rpx;
			display: flex;
			height: 100%;
			.cate-list-left {
				width: 220rpx;
				background: #fff;
				margin-right: 20rpx;
				padding-top: 12rpx;
				height: 100%;
				overflow-y: auto;
				.cate-item {
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					padding-left: 40rpx;
					margin-bottom: 12rpx;
					position: relative;
					color: #333;
					font-size: 26rpx;
					&.active {
						background: rgba(179, 219, 248, 0.1);
						color: #0f74bb;
						&:before {
							content: '';
							background: linear-gradient(0deg, #24a9e1, #0f74bb);
							position: absolute;
							top: 50%;
							left: 0;
							transform: translateY(-50%);
							width: 8rpx;
							height: 36rpx;
							border-radius: 4rpx;
						}
					}
				}
			}
			.cate-list-right {
				flex: 1;
				height: 100%;
				overflow-y: auto;
				.small-cate-content {
					padding-top: 18rpx;
					&:not(:nth-child(1)) {
						padding-top: 62rpx;
					}
					.small-cate-title {
						color: #333;
						font-size: 28rpx;
						font-weight: bold;
						line-height: 28rpx;
					}
					.small-cate-list {
						flex-wrap: wrap;
						.small-cate-list-item {
							width: 130rpx;
							margin-top: 30rpx;
							&:nth-child(3n + 2) {
								margin: 30rpx 40rpx 0;
							}
							.item-image {
								width: 130rpx;
								height: 130rpx;
								align-items: center;
								justify-content: center;
								>image {
									width: 110rpx;
									height: 110rpx;
								}
							}
							.item-name {
								margin-top: 18rpx;
								color: #333;
								font-size: 24rpx;
								text-align: center;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}
					}
				}
			}
		}
	}
</style>