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/img/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.name }}</view>
			</scroll-view>
			<scroll-view :scroll-with-animation="scrollAnimation" scroll-y class="right-aside" @scroll="asideScroll" :scroll-top="tabScrollTop">
				<view class="image" id="topImg" @click="Tomember">
					<image mode="scaleToFill" class="imageLV" src="http://shicai.liuniu946.com/static/img/bpbx.jpg"></image>
				</view>
				<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.list" v-for="item in ls.list" @click="ToDetail(item)">
						<view class="tlist-img">
							<view class="img"><image :src="item.image" :lazy-load="true" mode="scaleToFill"></image></view>
							<view class="stock flex_item" v-if="item.stock > 0">
								<image class="img" src="/static/img/img01.png" mode="scaleToFill"></image>
								<view class="stock-num clamp">库存剩{{ item.percent | parseIntTo }}%</view>
							</view>
						</view>
						<view class="sell-out" v-if="item.stock == 0"><text>已售罄</text></view>
						<view class="tlist-info">
							<view class="name clamp">{{ item.store_name }}</view>
							<view class="info clamp">{{ item.store_info }}</view>
							<view class="tipBox">
								<view class="tip clamp" v-if="item.keyword != ''">
									<text v-for="lss in item.keyword">{{ lss }}</text>
								</view>
							</view>
							<view class="tlist-price flex">
								<view class="price-box">
									<view class="price">
										¥
										<text class="blod">{{ item.price }}</text>
										<text class="fen">/份</text>
									</view>
									<view class="vip_price">
										¥{{ item.ot_price }}
										<text>市场价</text>
									</view>
								</view>
								<view class="gocar position-relative" @click.stop="Addcar(item)">
									<image src="/static/img/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 } from '@/api/water.js';
import { getProducts,cartAdd } from '@/api/product.js';
import { getUserInfo } from '@/api/login.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);
	},
	filters: {
		parseIntTo(percent) {
			percent = +percent * 100;
			if (percent % 1 === 0) {
				return percent;
			} else {
				percent = percent.toFixed(1);
				return percent;
			}
		}
	},
	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;
			getProducts({
				cid: obj.currentId,
				flag: 1,
				type: 1
			})
				.then(({ data }) => {
					// let newArr = [];
					// let arr = [];
					obj.slist = data.map(function(s) {
						// if(s.list){
						// 	arr = s.list;
						// 	newArr.push(...arr);
						// }
						// if (s.list) {
						// 	s.list = s.list.map(function(e) {
						// 		e.percent = +e.percent*100;
						// 		console.log(e.percent )
						// 		if (e.percent % 1 === 0) {
						// 			return e;
						// 		} else {
						// 			e.percent = e.percent.toFixed(1);
						// 			console.log(e.percent )
						// 			return e;
						// 		}
						// 	});
						// }
						return s;
					});
					obj.erjiid = obj.slist[0].id;
					obj.$nextTick(e => {
						// 重新开启动画效果
						uni.hideLoading();
						// 数据加载完成后重新计算高度
						obj.calcSize()
						obj.scrollAnimation = true;
					});
					// obj.erjiid = newArr[0].id;
					// data.forEach(function(e) {
					// 	if (e.list) {
					// 		obj.tlist = obj.tlist.concat(e.list);
					// 	}
					// });
				})
				.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
		// 加载三级数据
		// sanji() {
		// 	let obj = this;
		// 	getProducts({
		// 		sid: obj.erjiid
		// 	})
		// 		.then(({ data }) => {
		// 			obj.tlist = data;
		// 		})
		// 		.catch(err => {
		// 			console.log(err);
		// 		});
		// },
		//加入购物车
		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
				});
			}
		},
		Tomember() {
			uni.navigateTo({
						url: '/pages/groupBooking/index'
					});
			// this.$api.msg('暂未开通！');
			//  this.userInfo = uni.getStorageSync('userInfo');
			// if(this.userInfo == ''){
			// 	userinfo({})
			// 		.then(({ data }) => {
			// 			this.userInfo = data;
			// 		})
			// 		.catch(e => {});
			// }else{
			// 	if (this.userInfo.level_info.grade > 99) {
			// 		uni.navigateTo({
			// 			url: '/pages/user/renew'
			// 		});
			// 	}
			// 	if (this.userInfo.level_info.grade < 100) {
			// 		uni.navigateTo({
			// 			url: '/pages/user/card'
			// 		});
			// 	}
			// }
		},
		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: 25rpx;
		.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: 280rpx;
			align-items: stretch;
		}
		.tlist-list {
			padding: 25rpx 0rpx;
			position: relative;
			.tlist-img {
				width: 169rpx;
				position: relative;
				.img {
					width: 169rpx;
					height: 169rpx;
					image {
						width: 169rpx;
						height: 169rpx;
					}
				}
				.stock {
					margin-top: 13rpx;
					font-size: 26rpx;
					background: #fff1ee;
					width: 100%;
					color: #fb4912;
					padding: 6rpx 0;
					border-radius: 5rpx;
					justify-content: center;
					align-items: center;
					position: absolute;
					left: 0;
					bottom: 0;
					.img {
						width: 20rpx;
						height: 20rpx;
						flex-shrink: 0;
					}
					.stock-num {
						padding-left: 7rpx;
						font-size: 22rpx;
						border-radius: 5rpx;
						height: 32rpx;
						line-height: 32rpx;
					}
				}
			}
			.sell-out {
				position: absolute;
				width: 169rpx;
				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: 61%;
				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 {
					height: 28rpx;
					color: #141821;
					font-weight: 500;
					font-size: 26rpx;
				}
				.info {
					margin: 10rpx 0rpx;
					height: 30rpx;
					color: #979797;
					font-size: 24rpx;
				}
				.tipBox {
					height: 50rpx;
				}
				.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: 25rpx;
					bottom: 27rpx;
					width: 100%;
					.price-box {
						.price {
							padding-bottom: 15rpx;
							color: #ff1a27;
							.blod {
								font-size: 35rpx;
								font-weight: bold;
							}
							.fen {
								color: #838691;
							}
						}
						.vip_price {
							color: #2dbd59;
							font-size: 26rpx !important;
							text {
								background: linear-gradient(45deg, rgba(21, 197, 52, 1), rgba(21, 197, 52, 1));
								border-radius: 5rpx;
								color: #ffffff;
								padding: 0rpx 10rpx;
								margin-left: 10rpx;
								font-size: 20rpx !important;
							}
						}
					}
					.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>