xingmingyi_applet/pages/tabbar/class.vue

<template>
	<view class="root">
		<view class="topBox dffs">
			<u-tabs
				:list="dataList.grade"
				keyName="name"
				:current="current"
				:itemStyle="{ fontSize: '28rpx', height: '100rpx' }"
				:activeStyle="{ color: '#87C477',borderBottom:'2px solid #87C477' }"
				lineHeight="0" 
				sticky
				@click="topHandle"
			></u-tabs>
		</view>
		<view class="content dfsb">
			<view class="secTop">
				<scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y">
					<view @tap="choose(item.id)" :class="['topLi', leftSel == item.id ? 'topsel' : '']" v-for="(item, index) in dataList.subject" :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">
							<view class="swipe">
								<u-swiper :autoplay="false" :list="banner" keyName="img" height="84" border-radius="20" @click="bannerClick"></u-swiper>
							</view>
							<!-- -->
							<view v-if="showVideo==1" class="goodLi dffd">
								<view class="fontsm textgrey">{{ '视频类' }}</view>
								<view class="son dffs"> 
									<navigator
										:url="'/pages/index/video/video?cat=' + item.id"
										class="li fontmid"
										:class="ind == 0 ? 'sel' : ''"
										v-for="(item, ind) in vedio_cats"
										:key="ind"
									>
										{{ item.name }}
									</navigator>
								</view>
							</view>
							<view class="goodLi dffd" v-for="(item, index) in classList" :key="index">
								<view class="fontsm textgrey">{{ item.name || '商品名称' }}</view>
								<view class="son dffs">
									<view @click="toNext(2, ite)" class="fontmid" v-for="(ite, ind) in item.children" :key="ind">{{ ite.name || '商品名称' }}</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showVideo: uni.getStorageSync('showVideo') || '0',
			current: 0,
			vedio_cats: [], // 视频列表
			banner:[],
			dataList: {}, //一层
			classList: [
				// { name: '姓名', goods_img: '/static/img/pro/hotbgzj.png' },
			], //商品
			leftSel: 0, //一层分类选中
			status: 'loadmore',
			page: 1,
			pagnum: 15
		};
	},
	async onLoad(opt) {
		await this.onload();
		await this.getVidList();
	},
	onPullDownRefresh() {
		this.page = 1;
		this.leftSel = 0;
		this.current = 0;
		this.dataList = {};
		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: {
		
		getBanner() {
			this.$api
				.request('index/getBanner', {
					field: 'tabbar_cate_banner',
					cate_type: 1,
					cat_id: this.current,
					two_cat_id: this.leftSel,
				})
				.then(data => {
					console.log("getBanner",data)
					if (data.code == 200) {
						this.banner = data.data;
						
					} else {
						this.$api.toast(data.msg);
					}
				});
		},
		
		getVidList() {
			this.$api
				.request('index/index', {
					school_type: '',
					video_cat: '',
					page: 1,
					limit: 6
				})
				.then(data => {
					console.log("index",data)
					if (data.code == 200) {
						this.showVideo = data.data.vedio_status;
						uni.setStorageSync('showVideo', data.data.vedio_status);
						this.vedio_cats = data.data.vedio_cats;
					} else {
						this.$api.toast(data.msg);
					}
				});
		},
		// 轮播
		bannerClick(e) {
			console.log(e);
			let item = this.dataList.banner[e];
			if (item.goods_id != 0) {
				if (item.type == 1) {
					uni.navigateTo({
						url: '/pages/index/video/videoInfo?id=' + item.goods_id
					});
				} else {
					uni.navigateTo({
						url: '/pages/index/navInfo?id=' + item.goods_id
					});
				}
			}
		},
		// 顶部按钮被点击
		topHandle(e) {
			console.log('top: ',e);
			this.current = e.id;
			// this.onload();
			this.getBanner();
		},
		toNext(val, item) {
			console.log(item);
			if (val == 1) {
				uni.navigateTo({
					url: '/pages/index/video/video'
				});
				return;
			}
			
			// console.log('跳转时：',item.id);
			uni.navigateTo({ 
				// url: `/pages/index/classList?flag=${val}&subject_id=${val}&grade_id=${this.current}&title=${ item.name }`
				url: `/pages/index/classList?flag=${val}&cat_id=${item.id}&subject_id=${this.leftSel}&grade_id=${this.current}&title=${ item.name }`
			});
		},
		choose(index) {
			console.log('leftSel: ',index);
			this.leftSel = index;
			console.log('this.leftSel',this.leftSel);
			// this.onload();
			this.getBanner();
		},
		onload() {
			this.status = 'loadmore';
			this.$api
				.request('index/getCateList', {
					grade_id: this.current,
					subject_id: this.leftSel
				})
				.then(data => {
					console.log(data);
					if (data.code == 200) {
						this.current = data.data.grade[0].id;
						this.leftSel = data.data.subject[0].id;
						this.dataList = data.data;
						this.classList = data.data.class_cate;
						
						this.getBanner();
					} else {
						this.$api.toast(data.msg);
					}
				});
		}
	}
};
</script>
<style lang="scss" scoped>
page {
	height: 100vh;
}
.content {
	background-color: #fff;
	align-items: flex-start;
	.topBox {
		background-color: #fff;
	}
	.secTop {
		.scroll-Y {
			height: calc(100vh - 120rpx);
			flex-wrap: wrap;
		}
		.topLi {
			font-size: 26rpx;
			width: 168rpx;
			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 {
		width: 582rpx;
		padding-right: 30rpx;
		padding-left: 12rpx;
		background-color: #f5f5f5;
		// background-color: #fff;
		.swipe {
			width: 540rpx;
			height: 166rpx;
			margin: 20rpx 0;
		}
		.topClass {
			position: fixed;
			z-index: 1;
			background-color: #fff;
			padding-left: 12rpx;
			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 {
			flex: 1;
			height: calc(100vh - 120rpx);
			.maskbg {
				position: fixed;
				top: 170rpx;
				left: 200rpx;
				width: calc(100% - 200rpx);
				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 - 120rpx);
			}
			.box {
				width: 100%;
				flex-wrap: wrap;
			}
			.goodLi {
				width: 100%;
				margin-top: 20rpx;
				padding: 20rpx;
				background-color: #fff;
				border-radius: 10rpx;
				.gdImg {
					width: 100%;
					height: 120rpx;
					background-color: #fbf9fa;
					margin-bottom: 36rpx;
				}
				.oneelli {
					text-align: center;
					font-size: 24rpx;
				}
				.son {
					
					margin-top: 10rpx;
					margin-left: 30rpx;
					flex-wrap: wrap;
					.fontmid {
						margin-right: 30rpx;
						margin-bottom: 20rpx;
						font-size: 24rpx !important;
					}
				}
			}
		}
	}
}
.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>