xingmingyi_applet/pagesA/mall/class.vue

<template>
	<view class="root">
		<view class="content dfsb">
			<view class="secTop">
				<scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y">
					<view @tap="choose(index)" :class="['topLi', topLiSel == index ? 'topsel' : '']" v-for="(item, index) in topData" :key="index">{{ item.name }}</view>
				</scroll-view>
			</view>
			<view class="topInfo">
				<view class="topCInfo">
					<scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
						<view class="box dffs">
							<view @click="toNext(item)" class="goodLi dffd" v-for="(item, index) in classList" :key="index">
								<image class="gdImg" :src="item.logo" mode="aspectFill"></image>
								<view class="oneelli">{{ item.name || '商品名称' }}</view>
							</view>
						</view>
						<view v-if="classList.length < 1" class="nodata"><u-empty icon-size="200" text="新品即将上新,敬请期待~" mode="list"></u-empty></view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			topData: [], //一层
			classList: [
				// { name: '姓名', goods_img: '/static/img/pro/hotbgzj.png' },
			], //商品
			topLiSel: 0, //一层分类选中
			status: 'loadmore',
			page: 1,
			pagnum: 15
		};
	},
	onLoad(opt) {
		this.onload();
	},
	onPullDownRefresh() {
		this.page = 1;
		this.topLiSel = 0;
		this.topData = [];
		this.classList = [];
		this.onload();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 800);
	},
	onReachBottom() {
		if (this.status == 'nomore') return;
		this.status = 'loadmore';
		this.page = ++this.page;
		this.onload();
	},

	onShow() {},
	methods: {
		toNext(item) {
			uni.navigateTo({
				url: '/pagesA/mall/mall?flag=2&type=1&id=' + item.id
			});
		},
		choose(index) {
			this.topLiSel = index;
			this.classList = this.topData[this.topLiSel].son;
		},
		onload() {
			this.status = 'loadmore';
			this.$api.request('goods/goods_catlist').then(data => {
				console.log(data);
				if (data.code == 200) {
					this.topData = data.data;
					this.classList = this.topData[this.topLiSel].son;
				} else {
					this.$api.toast(data.msg);
				}
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.content {
	margin-top: 20rpx;
	// padding: 20rpx 0;
	background-color: #fff;
	align-items: flex-start;
	border-top: 1rpx solid #e8e8e8;
	.secTop {
		width: 177rpx;
		height: calc(100vh - 20rpx);
		.scroll-Y {
			height: calc(100vh - 20rpx);
			flex-wrap: wrap;
		}
		.topLi {
			font-size: 26rpx;
			width: 177rpx;
			padding: 26rpx 0;
			line-height: 37rpx;
			text-align: center;
			background: #f4f4f4;
			color: #666;
		}
		.topsel {
			font-size: 28rpx;
			box-sizing: border-box;
			background-color: #fff;
			color: $promain;
			font-weight: 600;
		}
	}
	.topInfo {
		flex: 1;
		// background-color: #fff;
		.topClass {
			position: fixed;
			z-index: 1;
			background-color: #fff;
			padding-left: 15rpx;
			width: 556rpx;
			.topClaBox {
				flex: 1;
				height: 98rpx;
				line-height: 98rpx;
				display: -webkit-box;
				overflow-x: auto;
				/*适应苹果*/
				-webkit-overflow-scrolling: touch;
				//父盒子隐藏滚动条
				&::-webkit-scrollbar {
					display: none;
				}
				.topClasLi {
					font-size: 28rpx;
					padding: 0 15rpx;
				}
				.topClasel {
					color: $promain;
				}
			}
			.classDown {
				height: 98rpx;
				width: 70rpx;
				box-shadow: -2rpx -5rpx 2rpx 5rpx rgba($color: #000000, $alpha: 0.05);
				background-color: #fff;
				.xuanz {
					transform: translate(180deg);
				}
			}
		}
		.topCInfo {
			margin-left: 42rpx;
			flex: 1;
			height: calc(100vh - 20rpx);
			.maskbg {
				position: fixed;
				top: 170rpx;
				left: 200rpx;
				width: calc(100% - 120rpx);
				height: calc(100% - 100rpx);
				background-color: rgba(0, 0, 0, 0.65);
				z-index: 2;
			}
			/* #ifdef MP */
			.maskbg {
				position: fixed;
				top: 70rpx;
			}
			/* #endif */
			.scroll-Y {
				height: calc(100vh - 20rpx);
			}
			.box {
				width: 100%;
				flex-wrap: wrap;
			}
			.goodLi {
				width: 120rpx;
				margin-top: 58rpx;
				align-items: center;
				margin-right: 55rpx;
				.gdImg {
					width: 100%;
					height: 120rpx;
					background-color: #fbf9fa;
					margin-bottom: 36rpx;
				}
				.oneelli {
					text-align: center;
					font-size: 24rpx;
				}
			}
		}
	}
}
.cartBox {
	width: 710rpx;
	position: fixed;
	bottom: 10rpx;
	/* #ifdef H5 */
	bottom: 128rpx;
	/* #endif */
	left: 0;
	z-index: 999;
	margin: 0 20rpx;
	.leftbox {
		height: 100rpx;
		flex: 1;
		background: #000000;
		border-radius: 200rpx 0px 0px 200rpx;
		padding-left: 30rpx;
		.imgBox {
			position: relative;
			image {
				width: 90rpx;
				height: 82rpx;
			}
		}
		.priceInfo {
			position: relative;
			margin-left: 60rpx;
			.price {
				color: #fff;
			}
		}
	}
	.rightbox {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #fff;
		background: #d8d8d8 linear-gradient(90deg, #6fd237 0%, #57c32a 100%);
		border-radius: 0px 200rpx 200rpx 0px;
		width: 194rpx;
	}
	.ordbox {
		font-size: 24rpx;
		text-align: center;
		margin-bottom: 10rpx;
		text {
			font-size: 30rpx;
		}
		// height: 100rpx;
		// line-height: 100rpx;
		// text-align: center;
		// color: #fff;
		// background: linear-gradient(90deg, #6fd237 0%, #57c32a 100%);
		// border-radius: 200rpx ;
		// margin-right: 15rpx;
		// padding: 0 20rpx;
	}
	.rightBlack {
		background: #000;
		color: #999;
	}
}
.ordbtn {
	position: fixed;
	bottom: 130rpx;
	right: 0;
	z-index: 999;
	width: 150rpx;
	height: 150rpx;
	line-height: 150rpx;
	border-radius: 50%;
	color: #fff;
	text-align: center;
	vertical-align: middle;
	font-size: 30rpx;
	background: radial-gradient(#68e670 0%, #5dce2c 100%);
}
</style>