shop-app/pages/goods/category.vue

<template>
	<view class="container">
		<!-- 搜索框 -->
		<!-- <search tips="搜索商品" @event="$navTo('pages/search/index')" /> -->

		<view class="cate-content" v-if="list.length > 0">
			<!-- 左侧 一级分类 -->
			<scroll-view class="cate-left" :scroll-y="true">
				<text class="type-nav" :class="{ selected: curIndex == index }"
					v-for="(item, index) in list" @click="handleSelectNav(index)"
					:key="index" >{{ item.name }}</text>
			</scroll-view>

			<!-- 右侧 二级分类 -->
			<scroll-view class="cate-right" :scroll-top="scrollTop" :scroll-y="true">
				
				<!-- <image class="cate-tow-img" :src="list[curIndex].image ? list[curIndex].image.preview_url : ''"></image> -->
				<image class="cate-tow-img" src="@/static/goods/category_banner.jpg"></image>
				<view v-for="(item, idx) in list[curIndex].productList"
					:key="idx" @click="onTargetGoodsList(item.category_id)">
					<view class="cate-tow-group">
						<text class="cate-tow-group--title">{{item.name}}</text>
						<view class="cate-tow-group--item" v-for="i in item.productList" :key="i.id">
							<image class="cate-tow-group--img" mode="scaleToFill"
								:src="i.image.preview_url"></image>
							<text class="cate-tow-group--name">{{i.name}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<BsEmpty v-if="!list.length" :isLoading="isLoading" />
	</view>
</template>


<script>
import categoryData from "@/mock/category.json";
import BsEmpty from "@/components/BsEmpty";
export default {
	components: { BsEmpty },
	data() {
		return {
			// 一级分类：指针
			curIndex: 0,
			// 内容区竖向滚动条位置
			scrollTop: 0,
			// 分类列表
			list: [],
			// 正在加载中
			isLoading: true,
		};
	},
	onLoad() {
		// 加载页面数据
		this.getPageData();
	},
	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow() {
		this.getPageData();
	},
	methods: {

		// 一级分类：选中分类
		handleSelectNav(index) {
			this.curIndex = index;
			this.scrollTop = 0;
		},
		/**
		 * 获取页面数据
		 */
		getPageData() {
			this.isLoading = true;
			// 初始化分类列表数据
			this.initCategory(categoryData.data.list);

			this.isLoading = false;
		},

		/**
		 * 初始化分类列表数据
		 * @param {Object} result
		 */
		initCategory(list) {
			this.list = list;
		},
	},
};
</script>
<style>
page {
	background: #fff;
}
</style>
<style lang="scss" scoped>
.cate-content {
	background: #fff;
	height: calc(100vh - 120rpx);
	display: flex;
}

.cate-left {
	width: 190rpx;
	color: #444;
	height: 100%;
	background: #f8f8f8;
}

.cate-right {
	height: 100%;
	padding: 40rpx 0;
	overflow: hidden;
}
.type-nav {
	display: block;
	width: 190rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-size: 28rpx;
	text-align: center;
	color: #999;
}

.type-nav.selected {
	background: #fff;
	color: #FF875B;
	font-size: 28rpx;
}

.cate-tow-img{
	width:480rpx;
	margin: 0 40rpx 40rpx;
	height: 164rpx;
	background: #ccc;
	border-radius: 16rpx;
}
.cate-tow-group{
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 40rpx;
	&--title{
		padding: 20rpx 40rpx;
		display: block;
		width: 100%;
		font-size: 30rpx;
		color: #333;
	}
	&--item{
		margin-left: 40rpx;
	}
	&--img{
		display: block;
		width: 130rpx;
		height: 130rpx;
	}
	&--name{
		display: block;
		text-align: center;
		font-size: 24rpx;
		margin: 10rpx 0 40rpx;
		color: #333;
	}
}

</style>