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 in slist"  class="f-item" :class="{ active_top: item.id === erjiid }" @click="changeSlist(item)">{{ item.cate_name }}</view>
			</scroll-view>
			<scroll-view :scroll-with-animation="scrollAnimation" scroll-y class="right-aside" @scroll="asideScroll" :scroll-top="tabScrollTop">
				<view class="tlist-box" v-for="ls in slist" :id="'main-' + ls.id">
					<view class="tlistname" v-if="ls.list">{{ ls.name }}</view>
					<view class="tlist-list flex_item" v-if="ls.goods" v-for="item in ls.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" @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 {
			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: '加载中'
		});
		this.loadData();
	},
	onShow() {
		let obj = this;
		const categoryId = uni.getStorageSync('categoryId') || '';
		if (obj.currentId != categoryId && categoryId != '' && !obj.onload) {
			obj.tabtap(categoryId);
		}
		// 初次数据加载完毕
		obj.onload = false;
	},
	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) {
			let obj = this;
			// 判断有没有初始化页面高度对象数据
			console.log(obj.sizeCalcState)
			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);
		},
		// 商品详情页
		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>