index.vue

<template>
	<view class="page-body">
		<scroll-view class="nav-left" scroll-y :scroll-top="scrollLeftTop" scroll-with-animation>
			<view class="nav-left-item" v-for="item in classifyData" @click="categoryClickMain(item.id)" :key="item.id"
				:class="item.id == categoryId ? 'active' : ''">
				<span>{{ item.name }}</span>
				<view :class="item.id == categoryId ? 'active-line' : ''"></view>
			</view>
		</scroll-view>
		<scroll-view class="nav-right" scroll-y :scroll-top="scrollTop" @scroll="scroll" @touchstart="openScroll"
			scroll-with-animation>
			<view v-for="category in classifyData" :id="category.id" :key="category.id" class="box">
				<view :style="loads" class="right-title">{{ category.name }}</view>
				<view class="nav-right-item" v-for="item in category.goods" :key="item.goodsId">
					<image src="../../static/imgs/isRecommend.png" v-if="item.isRecommend == 1" class="isRecommend" />
					<image @click="cart(item, category)" class="thumbnail" v-if="item.pics.thumbnailApplet" :src="item.pics.thumbnailApplet" />
					<image @click="cart(item, category)" class="thumbnail" v-else :src="item.pics.thumbnail" />
					<view @click="cart(item, category)" class="info">
						<view class="goods-name">{{ item.name }}</view>
						<view class="tags" v-if="item.tags">
							<view class="tag-item" v-for="tag in item.tags" :key="tag">{{ tag }}</view>
						</view>
						<view class="desc-box">
							<view class="desc">{{ item.desc || '' }}</view>
						</view>
						<view class="mon">
							<view class="discount">￥{{ getSku(item).discount }}</view>
							<view class="price">￥<text class="num">{{ getSku(item).price }}</text></view>
						</view>
					</view>
					<u-icon v-if="getSku(item).state==1" class="add" name="plus-circle-fill" color="#2979ff" @click.stop="getallNum(item, category)" size="22"></u-icon>
					<div v-else style="color: orangered;font-size: 22rpx;">已售罄</div>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	name: 'menuAssembly',
	watch: {},
	data() {
		return {
			classifyData: [],
			categoryId: '',
			categoryPostion: [],
			scrollLeftTop: 0,
			scrollTop: 0,
			scrolled: true

		}
	},
	methods: {
		getSku(data) {
			const { skus } = data;
			if (!skus || skus.length == 0) {
				return { discount: data.discount, price: data.price};
			}
			const sku = data.skus.find(v => v.isDefault == 1 && v.state == 1)
			|| data.skus.find(v => v.state == 1)
			|| data.skus.find(v => v.isDefault == 1)
			|| data.skus[0];
			return sku;
		},
		createList(data) {
			this.classifyData = data;
			// console.log(this.classifyData)
			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.box').boundingClientRect(data => {
					this.categoryPostion = data
				}).exec();
			})
		},
		getallNum(item, category) {
			this.$emit('getallNum', item, category)
		},
		openScroll() {
			this.scrolled = true
		},
		scroll(e) {
			if (!this.scrolled) return;
			const { categoryPostion } = this;
			const [el] = categoryPostion.filter(item => item.top - e.target.scrollTop >= 20);
			if (el) this.categoryId = el.id
		},
		categoryClickMain(id) {
			this.scrolled = false
			this.categoryId = id;
			this.categoryPostion.forEach(item => {
				if (item.id == id) {
					this.scrollTop = item.top - 320
				}
			});

		},
		cart: (item, category) => {
			uni.setStorageSync('goodsInfo', JSON.stringify({ ...item, category }));
			uni.navigateTo({ url: '/menuSubPackage/pages/goodsDetail/goodsDetail' })
		}
	}
}
</script>


<style lang="scss" scoped>
.menu-box {
	min-height: 100vh;

	.shop-info {
		position: absolute;
		left: 32rpx;
		color: #FFFFFF;

		.shop-box {
			min-width: 300rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			display: flex;

			.shop-name {
				flex: 1;
			}

			.arrow-right-select {
				width: 9rpx;
			}
		}

		.distance {
			height: 46rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 42rpx;
		}
	}
}

.menu-banner {
	height: 376rpx;
	position: relative;

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

	.login-area {
		display: flex;
		width: 624rpx;
		height: 88rpx;
		padding: 20rpx 22rpx;
		background: rgba(255, 255, 255, 0.2);
		box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;
		backdrop-filter: blur(10rpx);
		position: absolute;
		z-index: 1;
		bottom: 0;
		left: 64rpx;
		box-sizing: border-box;

		.avatar {
			display: flex;
			justify-items: center;
			align-items: center;
			background: red;
			width: 50rpx;
			height: 48rpx;
			margin-right: 22rpx;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(50, 50, 50, 0.25);
			border-radius: 4rpx;

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

			;
		}

		.user-info {
			flex: 1;

			.user-name {
				height: 28rpx;
				font-size: 20rpx;
				font-family: ArialMT;
				color: #FFFFFF;
				line-height: 22rpx;
			}

			.dialog {
				display: flex;
				height: 22rpx;
				font-size: 16rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 22rpx;

				.content {
					flex: 1;
				}

				.arrow {
					width: 10rpx;
					height: 12px;
					display: flex;
					font-size: 20rpx;
					justify-content: center;
					align-items: center;
				}
			}
		}

		.login-btn {
			//  width: 114rpx;
			height: 48rpx;
			background: #006ECF;
			border-radius: 4rpx;
			font-size: 20rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 48rpx;
			text-align: center;
		}

	}
}

.order-banner {
	width: 686rpx;
	height: 179rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(166, 166, 166, 0.5);
	border-radius: 10rpx;
	box-sizing: border-box;
	position: relative;
	left: 32rpx;
	top: -8rpx;
	z-index: 1;
	display: flex;

	.info {
		padding-left: 32rpx;
		flex: 1;

		.first {
			height: 44rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #323232;
			line-height: 44rpx;
			margin-top: 40rpx;
		}

		.second {
			margin-top: 20rpx;
			height: 34rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #323232;
			line-height: 34rpx;

			.time {
				font-size: 28rpx;
				font-family: Arial-BoldMT, Arial;
				font-weight: normal;
				color: #006ECF;
				margin: 0 16rpx;
			}
		}
	}

	.line {
		width: 0;
		height: 104rpx;
		border-right: 4rpx solid #006ECF;
		position: absolute;
		right: 188rpx;
		top: 36rpx;
	}

	.barCode-box {
		margin-top: 30rpx;
		width: 150rpx;
		height: 122rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		flex-direction: column;

		.barCode {
			width: 86rpx;
			height: 86rpx;
			background: #006ECF;

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

		.barCode-dis {
			text-align: center;
			margin-top: 14rpx;
			font-size: 16rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #666666;
			line-height: 22rpx;
		}
	}
}

.page-body {
	display: flex;
	background: #fff;
	overflow: hidden;
}

.nav {
	display: flex;
	width: 100%;
}

.nav-left {
	width: 152rpx;
	background: #fff;
	border-right: 2rpx solid #D5D5D5;
	height: calc(100vh - 376rpx);
	overflow: auto;
}

.nav-left-item {
	position: relative;
	height: 170rpx;
	line-height: 170rpx;
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #666666;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav-left-item:last-child {
	border-bottom: none;
}

.nav-right {
	height: calc(100vh - 376rpx);
	overflow: auto;
	box-sizing: border-box;
	padding-top: 30rpx;
	width: 596rpx;
}

.box {
	display: block;
	overflow: hidden;
	/* min-height: 100vh; */
	/*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
}

.box:last-child {
	border: none;
	// min-height: 100vh;
}

.right-title {
	padding-left: 28rpx;
	margin-bottom: 40rpx;
	height: 44rpx;
	font-size: 32rpx;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #000000;
	line-height: 44rpx;
}

.nav-right-item {
	display: flex;
	padding: 0rpx 36rpx 0rpx 42rpx;
	margin-bottom: 50rpx;
	height: 162rpx;
	background: #fff;
	position: relative;

	.thumbnail {
		//缩略图
		display: flex;
		align-items: center;
		width: 140rpx;
		height: 140rpx;
		margin-right: 34rpx;
	}

	.info {
		flex: 1;
	
		.goods-name {
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
		}
	
		.tags {
			.tag-item {
				height: 24rpx;
				border-radius: 4rpx;
				border: 2rpx solid #006ECF;
				margin-right: 10rpx;
				padding: 4rpx 6rpx;
				font-size: 16rpx;
				font-family: ArialMT;
				color: #006ECF;
				line-height: 24rpx;
				display: inline-block;
			}
		}
	
		.desc-box {
			display: flex;
			font-size: 20rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 40rpx;
	
			.desc {
				flex: 1;
			}
		}
	
		.mon {
			.discount {
				display: inline-block;
				height: 32rpx;
				font-size: 24rpx;
				font-family: Arial-BoldMT, Arial;
				color: #EB5F17;
				line-height: 32rpx;
				margin-right: 6rpx;
			}
	
			.price {
				flex: 1;
				display: inline-block;
				height: 22rpx;
				font-size: 20rpx;
				font-family: ArialMT;
				color: #666666;
				line-height: 22rpx;
	
				.num {
					text-decoration: line-through;
				}
			}
		}
	}

	.isRecommend {
		position: absolute;
		width: 30rpx;
		height: 30rpx;
		top: 10rpx;
		left: 50rpx
	}
}

.nav-right-item image {
	width: 150rpx;
	height: 150rpx;
}

.active {
	font-weight: 600;
	color: #000000;
	background: #fff;
}

.active-line {
	height: 170rpx;
	width: 2rpx;
	position: absolute;
	right: -2rpx;
	top: 0;
	z-index: 1;
	border-right: 8rpx solid #006ECF;
	;
}

::-webkit-scrollbar {
	/*取消小程序的默认导航条样式*/
	width: 0;
	height: 0;
	color: transparent;
}
</style>