shuzi/pages/category/category.vue

<template>
	<view class="content">
		<!-- 兼容小程序搜索 -->
		<!-- #ifdef MP -->
		<navigator url="/pages/product/search">
			<view class="input-box flex">
				<view class=" input-content flex">
					<view class="iconfont iconsearch"></view>
					<view class="input"><input disabled placeholder="请输入搜索内容" /></view>
				</view>
			</view>
		</navigator>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<!-- <view class="cate-bg"></view> -->
		<!-- #endif -->

		<div class="classBox">
			<scroll-view scroll-y class="left-aside">
				<view class="f-item b-b" :class="{ active: item.id === currentId }" v-for="(item, index) in flist" :key="item.id" @click="tabtap(item, index)">
					{{ item.cate_name }}
				</view>
			</scroll-view>

			<scroll-view scroll-with-animation scroll-y class="right-aside" :scroll-top="tabScrollTop" @scrolltolower="getListMore">
				<view class="t-list " v-if="flist.length > 0">
					<view @click="navToDetailPage(titem)" class="t-item" v-for="titem in flist[actionClassInd].list" :key="titem.id" id="'main-' + item.id">
						<image :src="titem.image" mode="scaleToFill" :lazy-load="true"></image>
						<view class="font">
							<view class="title">{{ titem.store_name }}</view>
							<view class="font-bottom">
								<view class="price">￥{{ titem.price }}</view>
								<view class="shop"><view class="shop-text">马上购</view></view>
							</view>
						</view>
					</view>
					<view class="text-center"><uni-load-more :status="flist[actionClassInd].loadingType"></uni-load-more></view>
				</view>
				<!-- </view> -->
			</scroll-view>
		</div>
	</view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import { getProducts, getCategoryList, newgetList } from '@/api/product.js';
export default {
	components: {
		uniLoadMore
	},
	data() {
		return {
			sizeCalcState: false,
			tabScrollTop: 0,
			currentId: 5,
			flist: [],
			commodity: [], //商品列表
			current: 0,
			page: 1, //当前页数
			limit: 6, //每次加载数据条数
			loadingType: 'more', //加载更多状态
			actionClassInd: 0
		};
	},
	onLoad() {
		this.loadData();
	},
	//下拉刷新
	onPullDownRefresh() {
		this.loadData('refresh');
	},
	// 监听导航栏输入框点击事件
	onNavigationBarSearchInputClicked(e) {
		uni.navigateTo({
			url: '/pages/product/search'
		});
	},
	//监听页面是否滚动到底部加载更多
	onReachBottom() {
		this.loadData();
	},
	methods: {
		// 载入数据
		async loadData(type = 'add', loading) {
			let obj = this;
			let data = {
				page: obj.page,
				limit: obj.limit
			};
			//没有更多直接返回
			if (type === 'add') {
				if (obj.loadingType === 'nomore') {
					return;
				}
				obj.loadingType = 'loading';
			} else {
				obj.loadingType = 'more';
			}
			if (type === 'refresh') {
				// 清空数组
				obj.page = 1;
			}
			getCategoryList({})
				.then(({ data }) => {
					console.log('------', data);
					obj.flist = data.map(function(s) {
						s.list = []; //用于保存当前分类下商品对象的数据
						s.loadingType = 'more'; //判断当前商品分类数据是否已经加载完毕
						s.page = 1; //当前商品分类加载的商品页数
						s.limit = 10; //每次家在数据加载的数据条数
						return s;
					});
					console.log(obj.flist, '数据');
					obj.currentId = obj.flist[0].id;
					// 开始处理数据
					// for (var i = 0; i < obj.flist.length; i++) {
					// }
					obj.getProductsList(obj.flist[0]);
				})
				.catch(err => {
					console.log(err);
				});
		},
		//一级分类点击
		tabtap(item, index) {
			// 判断有没有初始化页面高度对象数据
			// if (!this.sizeCalcState) {
			// 	this.calcSize();
			// }
			// 获取当前点击的id
			this.currentId = item.id;
			//获取当前点击的下标
			this.actionClassInd = index;
			this.tabScrollTop = item.top;
			// 获取当前选中的对象
			let ls = this.flist[this.actionClassInd];
			// 判断当前数据是否已经加载完毕
			if (ls.loadingType == 'more') {
				this.getProductsList(ls);
			}
		},
		//右侧栏滚动
		// asideScroll(e) {
		// 	console.log('开始处理数据');
		// 	// 判断有没有初始化页面高度对象数据
		// 	// if (!this.sizeCalcState) {
		// 	// 	this.calcSize();
		// 	// }
		// 	// 获取当前滚轮高度
		// 	let scrollTop = e.detail.scrollTop;
		// 	let box = 0; //列表包裹框高度初始化
		// 	let bottom = 10; //距离页面底部多少像素左侧列表切换到最后一个一级分类
		// 	// 查询当前页面对象
		// 	let view = uni.createSelectorQuery().select('.content');
		// 	view.fields(
		// 		{
		// 			id: true,
		// 			dataset: true,
		// 			rect: true,
		// 			size: true,
		// 			scrollOffset: true
		// 		},
		// 		function(e) {
		// 			// 保存包裹框高度
		// 			box = e.height;
		// 		}
		// 	).exec();
		// 	// 获取所有距离顶部大于滚轮距离页面高度的所有分类
		// 	let tabs = this.flist.filter(item => item.top - 10 <= scrollTop).reverse();
		// 	if (tabs.length > 0) {
		// 		// 判断是否已经到达滚轮底部
		// 		if (box + scrollTop + bottom >= e.detail.scrollHeight) {
		// 			this.currentId = this.flist[this.flist.length - 1].id;
		// 		} else {
		// 			this.currentId = tabs[0].id;
		// 		}
		// 	}
		// },
		//计算右侧栏每个tab的高度等信息
		// calcSize() {
		// 	let h = 0;
		// 	this.flist.forEach(item => {
		// 		let view = uni.createSelectorQuery().select('#main-' + item.id);
		// 		view.fields(
		// 			{
		// 				size: true
		// 			},
		// 			data => {
		// 				item.top = h;
		// 				h += data.height;
		// 				item.bottom = h;
		// 			}
		// 		).exec();
		// 	});
		// 	this.sizeCalcState = true;
		// },
		// 加载分类下商品数据
		getProductsList(item, type = 'add') {
			console.log(item);
			const obj = this;
			const requestData = {
				page: item.page,
				limit: item.limit,
				cid: item.id
			};
			// 判断数据是否加载中
			if (item.loadingType == 'nomore' || item.loadingType == 'loading') {
				return;
			}
			// 判断是否重新加载数据
			if (type == 'refresh') {
				item.list = [];
			}
			// 设置数据加载中
			item.loadingType = 'loading';
			return new Promise((ok, erro) => {
				getProducts(requestData)
					.then(({ data }) => {
						// item.list = data.map((s,ind) => {
						// 	return s;
						// });
						data.forEach((sj, index) => {
							item.list.push(sj);
						});
						if (item.limit == data.length) {
							item.page++;
							item.loadingType = 'more';
						} else {
							item.loadingType = 'nomore';
						}
						if (type === 'refresh') {
							if (loading == 1) {
								uni.hideLoading();
							} else {
								uni.stopPullDownRefresh();
							}
						}
					})
					.catch(err => {
						console.log(err);
					});
			});
		},
		//下拉到底部后加载商品列表数据
		getListMore() {
			this.getProductsList(this.flist[this.actionClassInd]);
		},
		navToDetailPage(item) {
			// 点击导航跳转到详细页面
			uni.navigateTo({
				url: '/pages/product/product?id=' + item.id
			});
		}
	}
};
</script>

<style lang="scss">
.text-center {
	width: 100%;
	text-align: center;
}
/* #ifdef MP || APP-PLUS*/
.input-box {
	padding: 25rpx;
	/* #ifdef APP-PLUS */
	margin-top: var(--status-bar-height);
	/* #endif */
	background-color: #fe8119;
	height: 44px;
	.iconsearch {
		font-size: 50rpx;
	}
	.input-content {
		border-radius: 99rpx;
		flex-grow: 1;
		padding: 5rpx 30rpx;
		// background-color: rgba(231, 231, 231, 0.7);
		background: #ffffff;
		.input {
			flex-grow: 1;
			input {
				font-size: $font-base;
			}
		}
	}
	.input-button {
		padding-left: 20rpx;
		font-size: $font-base;
		height: 100%;
	}
}
/* #endif */

page,
.content {
	height: 100%;
	background-color: #f8f8f8;
}
.content {
	.cate-bg {
		position: fixed;
		top: 0;
		width: 750rpx;
		height: 44px;
		z-index: 10;
		// background: linear-gradient(90deg, #FF8E00, #FE762F);
		background: #12ada9;
	}
	.classBox {
		// padding-top: 44px;
		display: flex;
		height: calc(100% - 44px);
		/* #ifdef APP-PLUS || MP */
		height: calc(100% - 88px);
		/* #endif */
	}
}
.left-aside {
	flex-shrink: 0;
	width: 180rpx;
	height: 100%;
	background-color: #fff;
}
.f-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100rpx;
	font-size: 28rpx;
	color: $font-color-base;
	position: relative;
	&.active {
		color: $base-color;
		background: #f8f8f8;
		&:before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			height: 36rpx;
			width: 8rpx;
			background-color: $base-color;
			border-radius: 0 4px 4px 0;
			opacity: 0.8;
		}
	}
}

.right-aside {
	flex: 1;
	overflow: hidden;
	padding-left: 20rpx;
	padding-right: 20rpx;
}
.s-item {
	display: flex;
	align-items: center;
	font-weight: bold;
	height: 70rpx;
	padding-top: 8rpx;
	font-size: 35rpx;
	color: $font-color-dark;
}
.t-list {
	display: flex;
	flex-wrap: wrap;
	border-radius: 15rpx;
	width: 100%;
	background: #fff;
	padding-top: 12rpx;
	&:after {
		content: '';
		flex: 99;
		height: 0;
	}
}
.t-item {
	height: 220rpx;
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	width: 500rpx;
	font-size: 26rpx;
	color: #666;
	padding-bottom: 20rpx;
	margin-right: 40rpx;
	&.active {
		display: none;
	}

	image {
		width: 200rpx;
		height: 200rpx;
		margin-top: 30rpx;
		margin-left: 20rpx;
	}
	.font {
		margin-left: 25rpx;
		margin-top: 30rpx;
		width: 500rpx;
		.title {
			font-weight: bold;
			font-size: $font-base;
			color: $font-color-dark;
			word-break: break-all;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}
		.font-bottom {
			height: 60rpx;
			width: 100%;
			display: flex;
			margin-top: 76rpx;
			justify-content: space-between;
			.shop {
				width: 137rpx;
				height: 52rpx;
				background: linear-gradient(270deg, #ff8149, #ff4e00);
				border-radius: 26rpx;

				.shop-text {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ffffff;
					margin-left: 30rpx;
					margin-top: 10rpx;
				}
			}
			.price {
				margin-top: 14rpx;
				width: 88rpx;
				height: 26rpx;
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #fb3a2f;
				line-height: 34rpx;
			}
		}
	}
}
</style>