waterDelivery/pages/home/category.vue

<template>
	<view class="content">
		<view class="scroll-top flex_item">
			<scroll-view class="scroll-list" scroll-x>
				<view class="scoll-box" v-for="ls in flist" :class="{ active: ls.id === currentId }"
					@click="tabtap(ls.id)">
					<view class="scoll-img">
						<image :src="ls.pic"></image>
					</view>
					<view class="scoll-name">{{ ls.cate_name }}</view>
				</view>
			</scroll-view>
			<view class="search-box" @click="Toseach">
				<view class="search">
					<image src="../../static/image/img22.png" mode="scaleToFill"></image>
				</view>
				<view>搜索</view>
			</view>
		</view>
		<view class="scroll-view flex-tpl" :style="{ height: pageHeight + 'px' }">
			<scroll-view scroll-y class="left-aside">
				<view v-for="(item,ind) in slist" class="f-item" :class="{ active_top: item.id === erjiid }"
					@click="changeSlist(item,ind)">{{ item.cate_name }}</view>
			</scroll-view>
			<scroll-view :scroll-with-animation="scrollAnimation" scroll-y class="right-aside"
				:scroll-top="tabScrollTop">
				<view class="tlist-box" v-if="slist.length>0">
					<view class="tlist-list flex_item" v-if="slist[indexAction].goods"
						v-for="item in slist[indexAction].goods" @click="ToDetail(item)">
						<view class="tlist-img">
							<image class="img" :src="item.image" :lazy-load="true" mode="scaleToFill"></image>
						</view>
						<view class="sell-out" v-if="item.stock == 0"><text>已售罄</text></view>
						<view class="tlist-info">
							<view class="name clamp2">{{ item.store_name }}</view>
							<!-- <view class="info clamp">{{ item.store_info }}</view> -->
							<view class="tipBox">
								<view class="tip clamp" v-if="item.keyword != ''">
									<text>{{ item.keyword }}</text>
								</view>
							</view>
							<view class="tlist-price flex">
								<view class="price-box">
									<view class="stock flex_item" v-if="item.stock > 0">
										<view class="stock-num clamp">库存剩{{ item.stock }}</view>
									</view>
									<view class="price">
										¥
										<text class="blod">{{ item.price }}</text>
										<text class="fen">/{{item.unit_name}}</text>
									</view>
								</view>
								<view class="gocar position-relative" v-if="item.is_barrel==0"
									@click.stop="Addcar(item)">
									<image src="/static/image/img21.png" mode="scaleToFill"></image>
									<view class="corner" v-if="item.cart_num > 0">
										<text>{{ item.cart_num }}</text>
									</view>
								</view>
							</view>
							<view class="bottom_border"></view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		category_layer,
		category_goods
	} from '@/api/water.js';
	import {
		cartAdd
	} from '@/api/product.js';
	import {
		saveUrl
	} from '@/utils/loginUtils';
	export default {
		data() {
			return {
				indexAction: 0, //当前选中的二级
				sizeCalcState: false,
				tabScrollTop: 0,
				currentId: '', //一级选择id，
				erjiid: '', //二级选择id
				flist: [], //一级分类列表
				slist: [], //二级分类列表
				yijishow: true, //一级界面显示
				sanjishow: false, //三级界面隐藏
				bili: 1, //设置页面比例
				pageHeight: 0, //保存滚轮页面高度
				CategoryID: '',
				userInfo: '',
				onload: true, //保存数据判断是否是第一次打开页面
				scrollAnimation: true //是否开启动画
			};
		},
		onLoad(option) {
			if (option.spread) {
				uni.setStorageSync('spread', option.spread);
			}
			saveUrl();
			uni.showLoading({
				title: '加载中'
			});
		},
		onShow() {
			let obj = this;
			const categoryId = uni.getStorageSync('categoryId') || '';
			if (obj.currentId != categoryId && categoryId != '' && !obj.onload) {
				obj.tabtap(categoryId);
			}
			// 初次数据加载完毕
			obj.onload = false;
			this.loadData();
		},
		onReady() {
			// 初始化获取页面宽度
			uni.createSelectorQuery()
				.select('.content')
				.fields({
						size: true
					},
					data => {
						// 获取页面百分比
						this.bili = data.width / 750;
						console.log(data, 2);
						this.pageHeight = data.height - 185 * this.bili;
						console.log(this.pageHeight, 33);
					}
				)
				.exec();
		},
		// #ifndef MP
		// 监听导航栏输入框点击事件
		onNavigationBarSearchInputClicked(e) {
			uni.navigateTo({
				url: '/pages/product/search'
			});
		},
		// #endif
		//下拉刷新
		onPullDownRefresh() {
			let obj = this;
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			setTimeout(function() {
				obj.loadData();
				uni.stopPullDownRefresh(); //停止下拉刷新动画
			}, 1000);
		},
		computed: {
			...mapState(['GetInfo']),
		},
		methods: {
			// 载入数据
			async loadData() {
				let obj = this;
				obj.loading = true;
				category_layer({})
					.then(({
						data
					}) => {
						obj.flist = data.list;
						obj.currentId = data.first;
						obj.erji();
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 二级数据加载
			erji() {
				let obj = this;
				category_goods({
						pid: obj.currentId
					})
					.then(({
						data
					}) => {
						obj.slist = data.slist.map(function(s) {
							return s;
						});
						obj.erjiid = obj.slist[0].id;
						obj.$nextTick(e => {
							// 重新开启动画效果
							uni.hideLoading();
							// 数据加载完成后重新计算高度
							// obj.calcSize()
							obj.scrollAnimation = true;
						});
					})
					.catch(err => {
						uni.hideLoading();
						console.log(err);
					});
			},
			//分享
			// #ifdef MP
			onShareAppMessage: function(res) {
				let userInfo = uni.getStorageSync('userInfo');
				// 来自页面内分享按钮
				let pages = getCurrentPages();
				// 获取当前页面
				let page = pages[pages.length - 1];
				let path = '/pages/category/category?';
				// 保存邀请人
				path += 'spread=' + userInfo.uid;
				let data = {
					path: path,
					imageUrl: this.GetInfo.img,
					title: this.GetInfo.title
				};
				console.log(data)
				return data;
			},
			// #endif
			//加入购物车
			Addcar(item) {
				let obj = this;
				cartAdd({
						cartNum: '1', //商品数量
						uniqueId: '', //商品标签
						new: 0, //商品是否新增加到购物车1为不加入0为加入
						mer_id: '',
						productId: item.id //商品编号
					})
					.then(function(e) {
						uni.showToast({
							title: '成功加入购物车',
							type: 'top',
							duration: 500,
							icon: 'none'
						});
						obj.erji();
					})
					.catch(e => {
						console.log(e);
					});
			},
			//一级分类点击
			tabtap(item) {
				uni.showLoading({
					title: '加载中'
				});
				let obj = this;
				// 关闭动画效果
				obj.scrollAnimation = false;
				// 设置顶部高度为0
				obj.$nextTick(function() {
					// 等待渲染完毕在执行高度修改否则动画效果依然存在
					obj.tabScrollTop = 0;
				})
				// 获取当前点击的id
				obj.currentId = item;
				// 二级分类分类保存id
				obj.erjiid = item;
				uni.setStorageSync('categoryId', item);
				// 重置分类滚轮绑定高度
				obj.sizeCalcState = false;
				// 加载二级方法
				setTimeout(function() {
					obj.erji();
				});
			},
			//二级点击
			changeSlist(item, ind) {
				let obj = this;
				// 获取当前点击的id
				// if (!obj.sizeCalcState) {
				// 	obj.calcSize();
				// }
				// // 获取当前点击的id
				obj.erjiid = item.id;
				// let index = obj.slist.findIndex(sitem => sitem.id === item.id);
				// setTimeout(function() {
				// 	obj.tabScrollTop = obj.slist[index].top;
				// }, 10);
				obj.indexAction = ind;
			},
			// 商品详情页
			ToDetail(item) {
				if (item.stock < 1) {
					this.$api.msg('该商品已售罄');
				} else {
					uni.navigateTo({
						url: `/pages/product/product?id=` + item.id
					});
				}
			},
			Toseach() {
				uni.navigateTo({
					url: `/pages/product/search`
				});
			},
			//右侧栏滚动
			// asideScroll(e) {
			// 	// 判断有没有初始化页面高度对象数据
			// 	if (!this.sizeCalcState) {
			// 		this.calcSize();
			// 	}
			// 	let scrollTop = e.detail.scrollTop;
			// 	let box = 0; //列表包裹框高度初始化
			// 	let bottom = 10; //距离页面底部多少像素左侧列表切换到最后一个一级分类
			// 	// 查询当前页面对象
			// 	let view = uni.createSelectorQuery().select('.right-aside');
			// 	view.fields(
			// 		{
			// 			id: true,
			// 			dataset: true,
			// 			rect: true,
			// 			size: true,
			// 			scrollOffset: true
			// 		},
			// 		function(e) {
			// 			// 保存包裹框高度
			// 			box = e.height;
			// 		}
			// 	).exec();
			// 	// 获取所有距离顶部大于滚轮距离页面高度的所有分类
			// 	let tabs = this.slist.filter(item => item.top <= scrollTop).reverse();
			// 	if (tabs.length > 0) {
			// 		// 判断是否已经到达滚轮底部
			// 		if (box + scrollTop + bottom >= e.detail.scrollHeight) {
			// 			this.erjiid = this.slist[this.slist.length - 1].id;
			// 		} else {
			// 			this.erjiid = tabs[0].id;
			// 		}
			// 	}
			// },
			//计算右侧栏每个tab的高度等信息
			// calcSize() {
			// 	let h = this.bili * 215;
			// 	this.slist.forEach(item => {
			// 		let view = uni.createSelectorQuery().select('#main-' + item.id);
			// 		view.fields(
			// 			{
			// 				size: true
			// 			},
			// 			data => {
			// 				item.top = Math.ceil(h);
			// 				h += data.height;
			// 				item.bottom = Math.ceil(h);
			// 			}
			// 		).exec();
			// 	});
			// 	this.sizeCalcState = true;
			// }
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
		height: 100%;

		.content {
			background-color: #ffffff;
			height: 100%;
		}
	}

	//顶部分类
	.scroll-top {
		width: 100%;
		font-size: 24rpx;
		height: 170rpx;
		padding: 0px 25rpx;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);

		.scroll-list {
			width: 80%;
			overflow: hidden;
			white-space: nowrap;

			.scoll-box {
				margin-right: 15rpx;
				text-align: center;
				display: inline-block;

				.scoll-img {
					width: 130rpx;
					height: 85rpx;
					border-radius: 100%;

					image {
						width: 85rpx;
						height: 100%;
						border-radius: 100%;
					}
				}

				.scoll-name {
					padding-top: 15rpx;
				}

				&.active {
					color: $base-color;
				}
			}
		}

		.search-box {
			text-align: center;
			margin-left: 50rpx;

			.search {
				width: 85rpx;
				height: 85rpx;
				border-radius: 100%;
				margin-bottom: 15rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 100%;
				}
			}
		}
	}

	.flex-tpl {
		display: flex;
		justify-content: space-between;
	}

	.scroll-view {
		margin-top: 15rpx;

		.left-aside {
			width: 190rpx;
			background-color: rgba(245, 246, 248, 1);
			overflow: hidden;
			height: 100%;
			display: block;
			overflow-y: scroll;
		}
	}

	.f-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100rpx;
		font-size: 24rpx;
		color: $font-color-base;
		position: relative;

		&.active_top {
			background: #ffffff;
			font-size: 26rpx;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);

			&: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 {
		overflow: hidden;
		padding: 0rpx 20rpx;
		height: 100%;
		display: block;
		overflow-y: scroll;
		width: 100%;

		.image {
			width: 100%;
			padding-bottom: 15rpx;

			.imageLV {
				width: 100%;
				height: 200rpx;
			}
		}

		.tlist-box {
			.tlistname {
				font-size: 24rpx;
				padding: 25rpx 25rpx;
				border-top: 2rpx solid rgba(238, 238, 238, 1);
				border-bottom: 2rpx solid rgba(238, 238, 238, 1);
			}

			.tlist-list.flex_item {
				height: 0;
				min-height: 240rpx;
				align-items: stretch;
			}

			.tlist-list {
				padding: 25rpx 0rpx;
				position: relative;

				.tlist-img {
					width: 190rpx;
					position: relative;

					.img {
						width: 190rpx;
						height: 190rpx;
					}
				}

				.sell-out {
					position: absolute;
					width: 190rpx;
					height: 190rpx;
					background: rgba(255, 255, 255, 0.4);
					text-align: center;

					text {
						line-height: 190rpx;
						background: rgba(0, 0, 0, 0.5);
						color: #ffffff;
						padding: 10rpx 25rpx;
						border-radius: 25rpx;
						font-size: 20rpx;
					}
				}

				.tlist-info {
					font-size: 24rpx;
					width: 0;
					flex-grow: 1;
					padding-left: 25rpx;
					padding-right: 25rpx;
					height: 100%;
					position: relative;
					line-height: 1;

					.bottom_border {
						position: absolute;
						border-bottom: 1px solid #eeeeee;
						left: 25rpx;
						bottom: 0;
						height: 2rpx;
						width: 100%;
					}

					.name {
						color: #141821;
						font-weight: 500;
						font-size: 26rpx;
						line-height: 1.2;
					}

					.info {
						margin: 10rpx 0rpx;
						height: 30rpx;
						color: #979797;
						font-size: 24rpx;
					}

					.tipBox {
						height: 50rpx;
						margin: 10rpx 0;

						.tip {
							padding: 10rpx 0rpx;

							text {
								border: 2rpx solid #ff1a27;
								color: #ff1a27;
								border-radius: 5rpx;
								font-size: 18rpx;
								padding: 5rpx 10rpx;
								margin-right: 15rpx;
							}
						}

					}

					.tlist-price {
						position: absolute;
						left: 0rpx;
						padding-left: 25rpx;
						padding-right: 25rpx;
						bottom: 10rpx;
						width: 100%;

						.stock {
							font-size: 26rpx;
							color: $font-color-light;

							.stock-num {
								padding-left: 7rpx;
								font-size: 22rpx;
								border-radius: 5rpx;
								height: 32rpx;
								line-height: 32rpx;
							}
						}

						.price-box {
							.price {
								color: #ff1a27;

								.blod {
									font-size: 35rpx;
									font-weight: bold;
								}

								.fen {
									color: #838691;
								}
							}
						}

						.gocar {
							width: 50rpx;
							height: 50rpx;
							align-self: flex-end;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}
		}

		.tlist {
			.cate {
				padding: 25rpx 0rpx;
				color: #666666;
				font-size: 24rpx;
			}
		}
	}

	.s-item {
		display: flex;
		align-items: center;
		height: 70rpx;
		padding-top: 8rpx;
		font-size: 28rpx;
		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 {
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 171rpx;
		font-size: 26rpx;
		color: #666;
		padding-bottom: 20rpx;

		image {
			width: 140rpx;
			height: 140rpx;
		}
	}
</style>