课程列表 + 精彩试听

pages.json

@@ -234,6 +234,13 @@
 				"enablePullDownRefresh": false
 			}
 		},
+		{
+			"path" : "pages/course/tryListen",
+			"style" : 
+			{
+				"navigationBarTitleText" : "试听列表"
+			}
+		},
 		{
 			"path" : "pages/course/index",
 			"style" : 

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">
+		<u-tabs v-if="tabList.length > 0" class="tabList" @click="fatherClick" :activeStyle="activeStyle"
-			<view class="learn flexbox shiting">
+			:scrollable="scrollable" :list="tabList"
-				<view class="item" v-for="(item, index) in courseList" :key="index">
+			itemStyle="padding-left: 15px; background-color:#fff;  padding-right: 15px; height: 50px;"></u-tabs>
-					<view class="imgcontainer">
+		<view class="containerBg">
-						<image :src="item.image" mode="aspectFit"></image>
+			<view class="subCate flex" v-if="subList.length> 0">
-					</view>
+				<text :class="['item',subTabId == item.id ? 'active' : '']" v-for="(item, index) in subList"
-					<view class="buyItems flexbox">
+					@click="curseClick(item)" :key="index">{{item.title}}</text>
-						<view class="txt555">
+			</view>
-							{{item.title}}
+			<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()">
+						<view class="buyItems flexbox">
-							<span>购买</span>
+							<view class="txt555">
-						</view> -->
+								{{item.title}}
+							</view>
+						</view>
+
 					</view>
-		
 				</view>
-			</view>	
+				<u-divider v-show="status == 2" text="已加载全部"></u-divider>
-					<u-divider text="已加载全部"></u-divider>
+				<u-divider v-show="status == 3" text="暂无数据"></u-divider>
-					<u-divider text="暂无数据"></u-divider>
+				<u-divider v-show="status == 1" text="加载中..."></u-divider>
-					<u-divider 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,
+							"id": id,
-							"limit": 12,
-							"page": 1
 						},
 						header: { //默认 无 说明：请求头
 							'Content-Type': 'application/json'
@@ -85,24 +127,165 @@
 					})
 					.then(res => {
 						if (res.code == 0) {
-							if (res.courseList.records.length > 0) {
+							if (res.labels.length > 0) {
-								this.courseList = res.courseList.records
+								var list = []
-							} else {
+								res.labels.forEach(item => {
-								this.courseList = []
+									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;
+				.txt555 {
-					height: 40rpx; width: 100%;
+					display: block;
+					text-align: center;
+					height: 40rpx;
+					width: 100%;
 					line-height: 40rpx;
 					@include bov(1);
 					margin-top: 10rpx;
 					font-size: 24rpx;
-	
+
 				}
-	
+
 			}
 		}
 	}

pages/course/tryListen.vue

@@ -0,0 +1,173 @@
+<template>
+	<view>
+		<!-- 公共组件-每个页面必须引入 -->
+		<public-module></public-module>
+		<z-nav-bar :title="pageTitle"></z-nav-bar>
+		<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="buyItems flexbox">
+						<view class="txt555">
+							{{item.title}}
+						</view>
+						<!-- <view class="buybtn" @click="onPageJump()">
+							<span>购买</span>
+						</view> -->
+					</view>
+		
+				</view>
+			</view>	
+					<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>
+		
+		<public-module></public-module>
+		<z-navigation></z-navigation>
+		<music-play :playData="playData"></music-play>
+	</view>
+</template>
+
+<script>
+	import musicPlay from '@/components/music.vue'
+	import $http from '@/config/requestConfig.js';
+	var clear;
+	import {
+		mapState
+	} from 'vuex';
+	export default {
+		data() {
+			return {
+				playData: {},
+				tagId: null,
+				pageTitle: '',
+				courseList: [],
+				status:0, // 0 不显示, 1 加载中，2 加载全部完成，3 暂无数据
+				page:1,
+				flag:true, // 函数是否执行完
+			};
+		},
+		//第一次加载
+		onLoad(e) {
+			// 隐藏原生的tabbar
+			uni.hideTabBar();
+			this.tagId = e.id
+			this.pageTitle = e.title
+			console.log(e, '传入分类id')
+			this.getData();
+		},
+		onReachBottom() {
+			if(this.status != 2){
+			this.page ++
+			this.getData()	}		
+			console.log('触底加载',this.page)
+		},
+		computed: {
+			...mapState(['userInfo'])
+		},
+		//页面显示
+		onShow() {
+			// 隐藏原生的tabbar
+			uni.hideTabBar();
+			
+
+		},
+		components: {
+			musicPlay
+		},
+		//方法
+		methods: {
+			getData() {
+				if(!this.flag){
+					console.log('正在执行，未完成')
+					return
+				}
+				this.status = 1
+				this.flag = false
+				$http.request({
+						url: "medical/home/getMarketCourseList",
+						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
+						data: {
+							"id": this.tagId,
+							"limit": 12,
+							"page": this.page
+						},
+						header: { //默认 无 说明：请求头
+							'Content-Type': 'application/json'
+						},
+					})
+					.then(res => {
+						if (res.code == 0) {
+							if (res.courseList.records.length > 0) {
+								var list = res.courseList.records
+								this.courseList = this.courseList.concat(list)
+								if(res.courseList.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,'数据报错')
+					});
+			}
+		},
+	};
+</script>
+<style lang="scss" scoped>
+	@import '@/style/mixin.scss';
+	.flexbox{display: flex; }
+	.imgcontainer {
+		background-color: $imgBg;
+	}
+	.box {
+		background-color: #fff;
+		@include pleft_right(10px);
+		min-height: calc(100vh - 270rpx);
+	}
+
+	.learnBox {
+		background-color: #fff;
+		margin-top: 10px;
+		@include ptop_bottm(10px);
+		@include pleft_right(10px);
+	
+		.learn { flex-wrap: wrap;
+			justify-content: space-between;
+			margin-top: 20rpx; 
+	
+			.item {
+				width: 48%;margin-bottom: 16px;
+	
+				overflow: hidden;
+	
+				image {
+					width: 100%;
+					height: 200rpx;
+				}
+	
+				.txt555 { display: block; text-align: center;
+					height: 40rpx; width: 100%;
+					line-height: 40rpx;
+					@include bov(1);
+					margin-top: 10rpx;
+					font-size: 24rpx;
+	
+				}
+	
+			}
+		}
+	}
+</style>

pages/peanut/home.vue

@@ -12,6 +12,7 @@
 				</view>
 			</view>
 		</view>
+		<button type="default" @click="curseClickJump">去课程中心</button>
 		<view class="fourBox">
 			<view class="fourIcon flexbox" style="justify-content: space-around;">
 				<div class="item flexbox" @click="onPageJump()">
@@ -43,7 +44,7 @@
 		</view>
 		<view class="fourBox" v-if="sbuMedicalTagsList && sbuMedicalTagsList.length > 0">
 			<view class="childrenBox fourIcon flexbox" style="justify-content: space-around;">
-				<div class="item flexbox" @click="onPageJump()" v-for="(item, index) in sbuMedicalTagsList"
+				<div class="item flexbox" @click="curseClickJump(item)" v-for="(item, index) in sbuMedicalTagsList"
 					:key="index">
 					<image :src="item.icon" mode="aspectFit"></image>
 					<text>{{item.title}}</text>
@@ -165,8 +166,10 @@
 				</view>
 			</view>
 		</view>
+<view class="fourBox" v-if="tryListenList.length > 0">
+	
 
-		<view class="learnBox" v-if="tryListenList.length > 0">
+		<view class="learnBox" >
 			<view class="titleBox flexbox">
 				<image src="../../static/try_listen.png" mode="aspectFit"></image>
 				<text>精彩试听</text>
@@ -188,10 +191,10 @@
 				</view>
 			</view>
 			<view class="moreBox shiting">
-				<text @click="onPageJump('/pages/course/index',26,'精彩试听')">更多试听</text>
+				<text @click="onPageJump('/pages/course/tryListen',26,'精彩试听')">更多试听</text>
 			</view>
 		</view>
-
+</view>
 		<view>
 			<u-back-top :scroll-top="scrollTop" bottom="60" :customStyle='bgiStyle' :iconStyle="iconStyle"></u-back-top>
 		</view>
@@ -494,7 +497,7 @@
 			},
 			curseClick(item) {
 				this.tabsid = item.id
-				if (item.isLast == 1) { // 终极
+				if (item.isLast == 1) { // 非终极
 					if (item.children && item.children.length > 0) {
 						this.sbuMedicalTagsList = item.children
 					} else {
@@ -502,10 +505,16 @@
 					}
 				} else {
 					uni.navigateTo({
-						url: 'url'
+						url: `/pages/course/index?id=${this.tabsid}&title=${item.title}`
-					})
+					});
 				}
 			},
+			curseClickJump(item){
+				uni.navigateTo({
+					url: `/pages/course/index?id=33&title=中医学`
+					// url: `/pages/course/index?id=${item.id}&title=${item.title}`
+				});
+			},
 			// 获取用户详情
 			getUserInfo() {
 				// 用户详情
@@ -523,7 +532,7 @@
 				uni.navigateTo({
 					url: `${url}?id=${thatId}&title=${title}`
 				});
-			},
+			},			
 
 			onPageJumpData(url, data) {
 				uni.navigateTo({
@@ -853,9 +862,10 @@
 
 	.learnBox {
 		background-color: #fff;
-		margin-top: 10px;
+		margin-top: 10px; border-radius: 20rpx;
 		@include ptop_bottm(10px);
 		@include pleft_right(10px);
+		@include mshadow(10px, 1);margin-bottom: 10px;
 
 		.learn {
 			justify-content: space-between;