shop-app/pages/goods/category.vue

<template>
	<view class="container">
		<!-- 搜索框 -->
		<UiPageHeader :back="false" class="search">
			<u--input slot="custom" class="search--input" prefixIconStyle="font-size:48rpx;color:#ccc"
				prefixIcon="search" placeholderClass="search--input__placeholder" clearable
				placeholder="请输入您想要搜索的商品名称" 
				@focus="$Router.push('/search')"/>
		</UiPageHeader>
		<view class="cate-content" v-if="categoryData.length > 0">
			<!-- 左侧 一级分类 -->
			<scroll-view class="cate-left" :scroll-y="true">
				<text class="type-nav" :class="{ selected: curIndex == index }"
					v-for="(item, index) in categoryData" @click="handleSelectNav(index)"
					:key="index" >{{ item.name }}</text>
			</scroll-view>

			<!-- 右侧 二级分类 -->
			<scroll-view class="cate-right" @scrolltolower="reachBottom" :scroll-top="scrollTop" :scroll-y="true">
				<image class="cate-tow-img" src="@/static/goods/category_banner.jpg"></image>
				<!-- <view @click="onTargetGoodsList(item.id)"> -->
				<view class="cate-tow-group" :class="idx === categoryData[curIndex].children.length - 1 ? 'cate-tow-group__last' :''"
					v-for="(item, idx) in categoryData[curIndex].children" :key="idx">
					<text class="cate-tow-group--title">{{item.name}}</text>
					<view class="cate-tow-group--item" v-for="i in item.productList" :key="i.id"
						@click="$Router.push(`/goodsDetail?id=${i.id}`)">
						<image class="cate-tow-group--img" mode="scaleToFill"
							:src="i.mainPicture"></image>
						<text class="cate-tow-group--name">{{i.name}}</text>
					</view>
				</view>
				<!-- </view> -->
				<BsEmpty v-if="!categoryData[curIndex].children.length && !categoryData[curIndex].isLoading" />
				<u-loadmore status="loading" v-if="categoryData[curIndex].isLoading" />
			</scroll-view>
		</view>
		<BsEmpty v-if="!categoryData.length && !isLoading" />
		<u-loadmore status="loading" v-if="isLoading" />
	</view>
</template>


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

		// 一级分类：选中分类
		handleSelectNav(index) {
			this.curIndex = index;
			this.scrollTop = 0;
		},
		reachBottom(){
			if(this.curIndex >= this.categoryData.length){
				return false
			}
			this.handleSelectNav(this.curIndex+1);
		},
		/**
		 * 获取分类数据
		 */
		async getCategoryData() {
			
			this.isLoading = true;
			// 初始化分类列表数据
			const {error, result } = await ApiGetCategoryOneList();
			this.categoryData = result.map((item) => {
				item.children = [];
				item.isLoading = true;
				this.getTwoCategoryData(item);
				return item;
			});
			this.isLoading = false;
		},

		/**
		 * 初始化分类列表数据
		 * @param {Object} result
		 */
		async getTwoCategoryData(item) {
			const {error, result} = await ApiGetCategoryTwoAndGoods({categoryId : item.id});
			this.$set(item, 'children', result);
			this.$set(item, 'isLoading', false);
		}
	},
};
</script>
<style>
page {
	background: #fff;
}
</style>
<style lang="scss" scoped>
.search{
	padding: 0 30rpx;
}
.search--input{
	display: block;
	height: 70rpx;
	border:none;
	box-sizing: border-box;
	background: #F8F8F8;
	&__placeholder{
		font-size: 26rpx;
		color: #666;
	}
}

.cate-content {
	background: #fff;
	height: calc(100vh - 220rpx);
	display: flex;
}

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

.cate-right {
	height: 100%;
	padding: 40rpx 0 0;
	overflow: hidden;
	box-sizing: border-box;
}
.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;
		width: 130rpx;
		text-align: center;
		font-size: 24rpx;
		line-height: 36rpx;
		margin: 10rpx 0 40rpx;
		color: #333;
		  display: -webkit-box;
		/*! autoprefixer: off */
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	&__last{
		padding-bottom: 200rpx;
	}
}

</style>