课程列表 + 精彩试听

pages/course/index.vue

@@ -3,31 +3,40 @@
 		<!-- 公共组件-每个页面必须引入 -->
 		<public-module></public-module>
 		<z-nav-bar :title="pageTitle"></z-nav-bar>
-		<view class="learnBox box" v-if="courseList.length > 0">
-			<view class="learn flexbox shiting">
-				<view class="item" v-for="(item, index) in courseList" :key="index">
-					<view class="imgcontainer">
-						<image :src="item.image" mode="aspectFit"></image>
-					</view>
-					<view class="buyItems flexbox">
-						<view class="txt555">
-							{{item.title}}
+		<u-tabs v-if="tabList.length > 0" class="tabList" @click="fatherClick" :activeStyle="activeStyle"
+			:scrollable="scrollable" :list="tabList"
+			itemStyle="padding-left: 15px; background-color:#fff;  padding-right: 15px; height: 50px;"></u-tabs>
+		<view class="containerBg">
+			<view class="subCate flex" v-if="subList.length> 0">
+				<text :class="['item',subTabId == item.id ? 'active' : '']" v-for="(item, index) in subList"
+					@click="curseClick(item)" :key="index">{{item.title}}</text>
+			</view>
+			<view class="learnBox box">
+				<view class="learn flexbox shiting">
+					<view class="item" v-for="(item, index) in courseList" :key="index">
+						<view class="imgcontainer">
+							<image :src="item.image" mode="aspectFit"></image>
 						</view>
-						<!-- <view class="buybtn" @click="onPageJump()">
-							<span>购买</span>
-						</view> -->
+						<view class="buyItems flexbox">
+							<view class="txt555">
+								{{item.title}}
+							</view>
+						</view>
+
 					</view>
-		
 				</view>
-			</view>	
-					<u-divider text="已加载全部"></u-divider>
-					<u-divider text="暂无数据"></u-divider>
-					<u-divider text="加载中..."></u-divider>
+				<u-divider v-show="status == 2" text="已加载全部"></u-divider>
+				<u-divider v-show="status == 3" text="暂无数据"></u-divider>
+				<u-divider v-show="status == 1" text="加载中..."></u-divider>
+			</view>
+			<view>
+				<u-back-top :scroll-top="scrollTop" bottom="60" :customStyle='bgiStyle'
+					:iconStyle="iconStyle"></u-back-top>
+			</view>
+			<public-module></public-module>
+			<z-navigation></z-navigation>
+			<music-play :playData="playData"></music-play>
 		</view>
-		
-		<public-module></public-module>
-		<z-navigation></z-navigation>
-		<music-play :playData="playData"></music-play>
 	</view>
 </template>
 
@@ -43,8 +52,35 @@
 			return {
 				playData: {},
 				tagId: null,
+				fatherTabId: null,
+				subTabId: null, //
+				bgiStyle: {
+					background: '#fff'
+				},
+				iconStyle: {
+					fontSize: '40rpx',
+					fontWeight: 'bold',
+					color: '#258feb',
+				},
+				scrollTop: 0,
+				activeStyle: {
+					color: '#333',
+					fontWeight: 'bold',
+					transform: 'scale(1.2)',
+					// backgroundColor: '#258feb'
+
+				},
+				subList: [],
+				scrollable: false,
 				pageTitle: '',
-				courseList: []
+				tabList: [{
+					name: 111,
+					id: 1
+				}],
+				courseList: [],
+				status: 0, // 0 不显示, 1 加载中，2 加载全部完成，3 暂无数据
+				page: 1,
+				flag: true, // 函数是否执行完
 			};
 		},
 		//第一次加载
@@ -54,6 +90,14 @@
 			this.tagId = e.id
 			this.pageTitle = e.title
 			console.log(e, '传入分类id')
+			this.getCateList(this.tagId)
+		},
+		onReachBottom() {
+			if (this.status != 2) {
+				this.page++
+				this.getData(this.subTabId)
+			}
+			console.log('触底加载', this.page)
 		},
 		computed: {
 			...mapState(['userInfo'])
@@ -62,7 +106,7 @@
 		onShow() {
 			// 隐藏原生的tabbar
 			uni.hideTabBar();
-			this.getData();
+
 
 		},
 		components: {
@@ -70,14 +114,12 @@
 		},
 		//方法
 		methods: {
-			getData() {
+			getCateList(id) {
 				$http.request({
-						url: "medical/home/getMarketCourseList",
+						url: "medical/home/getChildCourseMedicalTree",
 						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
 						data: {
-							"id": this.tagId,
-							"limit": 12,
-							"page": 1
+							"id": id,
 						},
 						header: { //默认 无 说明：请求头
 							'Content-Type': 'application/json'
@@ -85,24 +127,165 @@
 					})
 					.then(res => {
 						if (res.code == 0) {
-							if (res.courseList.records.length > 0) {
-								this.courseList = res.courseList.records
-							} else {
-								this.courseList = []
+							if (res.labels.length > 0) {
+								var list = []
+								res.labels.forEach(item => {
+									item.name = item.title
+								})
+								this.tabList = res.labels
+								// this.fatherTabId = this.tabList[0].id
+								if (this.tabList[0].isLast == 1) { // 终极
+									this.subList = []
+									this.subTabId = this.tabList[0].id
+								} else { //非终极
+									if (this.tabList[0].children.length > 0) {
+										this.subList = this.tabList[0].children
+										this.subTabId = this.subList[0].id
+
+									} else {
+										this.subList = []
+										this.subTabId = null
+									}
+								}
+								if (this.subTabId) {
+									console.log(this.subTabId, this.subList[0].title, '初始进入')
+									this.courseList = []
+									this.status = 1
+									this.getData(this.subTabId)
+								}
+
+
 							}
 						}
-
+					}).catch(e => {
+						console.log(e, '获取子分类报错')
 					});
-			}
+			},
+			fatherClick(e) {
+				// console.log(e, '点击')
+				this.page = 1
+				var item = e
+				if (item.isLast == 1) { // 终极
+					this.subList = []
+					this.subTabId = item.id
+				} else {
+					if (item.children.length > 0) { // 非终极
+						this.subList = item.children
+						this.subTabId = item.children[0].id
+					} else {
+						this.subList = []
+						this.subTabId = null
+					}
+				}
+				if (this.subTabId) {
+					this.status = 1
+					this.courseList = []
+					this.getData(this.subTabId);
+				}
+
+			},
+			curseClick(item) {
+				this.subTabId = item.id
+				this.courseList = []
+				this.page = 1
+				this.getData(this.subTabId);
+			},
+			getData(id) {
+				if (!this.flag) {
+					console.log('正在执行，未完成')
+					return
+				}
+				this.status = 1
+				this.flag = false
+				$http.request({
+						url: "medical/home/getMedicalCourseList",
+						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
+						data: {
+							"id": id,
+							"limit": 12,
+							"page": this.page
+						},
+						header: { //默认 无 说明：请求头
+							'Content-Type': 'application/json'
+						},
+					})
+					.then(res => {
+						if (res.code == 0) {
+							if (res.courses.records.length > 0) {
+								var list = res.courses.records
+								this.courseList = this.courseList.concat(list)
+								if (res.courses.pages > this.page) {
+									this.status = 0
+								} else {
+									this.status = 2
+								}
+							} else if (this.page > 1) {
+								this.status = 2 // 加载完成
+
+							} else {
+
+								this.status = 3 // 暂无数据
+							}
+							console.log('status', this.status)
+						}
+						this.flag = true
+					}).catch(e => {
+						console.log(e, '数据报错')
+					});
+			},
+			// 跳转
+			onPageJump(url) {
+				uni.navigateTo({
+					url: `${url}`
+				});
+			},
 		},
 	};
 </script>
 <style lang="scss" scoped>
 	@import '@/style/mixin.scss';
-	.flexbox{display: flex; }
+
+	.containerBg {
+		background-color: $containerColor;
+		padding: 0 20rpx;
+
+	}
+
+	.subCate {
+		margin-top: 10px;
+		margin-bottom: 5px;
+
+		.item {
+			font-size: 28rpx;
+			background-color: #fff;
+			border-radius: 10px;
+			color: #333;
+			margin-right: 30rpx;
+			padding: 10rpx 12rpx;
+		}
+
+		.item:last-child() {
+			margin-right: 0;
+		}
+
+		.item.active {
+			background-color: $themeColor;
+			color: #fff;
+		}
+	}
+
+	.tabList {
+		text-align: center;
+	}
+
+	.flexbox {
+		display: flex;
+	}
+
 	.imgcontainer {
 		background-color: $imgBg;
 	}
+
 	.box {
 		background-color: #fff;
 		@include pleft_right(10px);
@@ -114,30 +297,35 @@
 		margin-top: 10px;
 		@include ptop_bottm(10px);
 		@include pleft_right(10px);
-	
-		.learn { flex-wrap: wrap;
+
+		.learn {
+			flex-wrap: wrap;
 			justify-content: space-between;
-			margin-top: 20rpx; 
-	
+			margin-top: 20rpx;
+
 			.item {
-				width: 48%;margin-bottom: 16px;
-	
+				width: 48%;
+				margin-bottom: 16px;
+
 				overflow: hidden;
-	
+
 				image {
 					width: 100%;
 					height: 200rpx;
 				}
-	
-				.txt555 { display: block; text-align: center;
-					height: 40rpx; width: 100%;
+
+				.txt555 {
+					display: block;
+					text-align: center;
+					height: 40rpx;
+					width: 100%;
 					line-height: 40rpx;
 					@include bov(1);
 					margin-top: 10rpx;
 					font-size: 24rpx;
-	
+
 				}
-	
+
 			}
 		}
 	}