课程页面修改

pages/course/courseDetail.vue

@@ -27,9 +27,25 @@
 					<view class="">{{item.title}}</view>
 				</view>
 			</view>
-			<view class="courseList" v-if="courseList.length > 0">
+			<view :class="['courseList',fold ? 'fold' : '']" v-if="courseList.length > 0">
-				<view class="item" v-for="(item, index) in courseList" :key="index">
+				<view class="item" v-for="(item, index) in courseList" :key="index" @click="chooseChapter(item, index)">
 					<text>{{item.title}}</text>
+					<uni-tag v-if="item.isAudition == 1" style="margin-left: 10rpx;" :inverted="true" text="试听"
+						size="mini" type="primary" />
+				</view>
+				<view class="showAll zhezhe" v-show="fold">
+					<view class="flexbox icon" @click="tozhankai()"><u-icon class="icon_item" name="arrow-left-double" color="#258feb"
+							size="28"></u-icon></view>
+					<text>查看全部</text>
+				</view>
+				<view class="showFew zhezhe" v-show="!fold">
+					<view class="flexbox icon" @click="toZhedie()"><u-icon class="icon_item1" name="arrow-left-double" color="#258feb"
+							size="28"></u-icon></view>
+					<text>收 起</text>
+				</view>
+				<view class="video_audio_audition_list">
+					<!-- 试听视频/音频列表 -->
+
 				</view>
 				<view class="buyBox flexbox" v-if="this.librayList[this.curIndex].isBuy == 0">
 					<!-- 普通未购买 -->
@@ -51,19 +67,50 @@
 				</view>
 			</view>
 			<u-divider v-else text="暂无数据"></u-divider>
+			<!-- <uni-section class="mb-10" title="教学体系" type="line"> -->
+				<!-- <template v-slot:right>
+								查看更多 >>
+							</template> -->
+			<!-- </uni-section> -->
+			<view class="linkPro">
+				<uni-section class="mb-10 graybg" title="相关书籍" type="line">
+					<template v-slot:right>
+						<span class="more" @click="pageJupm()">查看更多 >></span>
+					</template>
+				</uni-section>
+				<view class="list supermarketBox">
+					<scroll-view class="scroll-view_H" scroll-x="true">
+						<view class="item" v-for="(item, index) in tjProList" :key="index"
+							@click="onPageJump('/pages/bookShop/commodityDetail',item.productId)">
+							<view class="imgcontainer">
+								<image :src="item.productImages" mode="aspectFit"></image>
+							</view>
+							<view class="name">
+								{{item.productName}}
+							</view>
+
+							<view class="price" v-if="item.activityPrice && item.activityPrice > 0">
+								￥{{item.activityPrice}}
+							</view>
+							<view class="price" v-else>
+								￥{{item.price}}
+							</view>
+						</view>
+					</scroll-view>
+				</view>
+			</view>
+			<uni-section class="mb-10 graybg" title="留言板" type="line">
+			</uni-section>
 			<u-popup :show="pricespop" :round="10" @close="closePup">
 				<view class="proListPrice" v-if="proPriceList.length > 0">
-				<view class="title">
+					<view class="title">
-					请选择您的购买时长
+						请选择您的购买时长
-				</view>
+					</view>
-				<view class="list">
+					<view class="list">
-					<view class="item" v-for="(item,index) in proPriceList" 
+						<view class="item" v-for="(item,index) in proPriceList" :key="index" @click="choosePrice(item)">
-					:key="index"
+							{{item.productName}} - ￥{{item.price}}
-					@click="choosePrice(item)"
+						</view>
-					>
-						{{item.productName}} - ￥{{item.price}}
 					</view>
-				</view>
 
 				</view>
 			</u-popup>
@@ -100,6 +147,7 @@
 					fontWeight: 'bold',
 					color: '#258feb',
 				},
+				tjProList: [],
 				scrollTop: 0,
 				activeStyle: {
 					color: '#333',
@@ -108,7 +156,7 @@
 					// backgroundColor: '#258feb'
 
 				},
-				pricespop:false,
+				pricespop: false,
 				subList: [],
 				scrollable: false,
 				pageTitle: null,
@@ -117,7 +165,8 @@
 				librayList: [], // 目录列表
 				curId: null,
 				curIndex: 0,
-				proPriceList:[],
+				proPriceList: [],
+				fold:true,
 
 			};
 		},
@@ -129,6 +178,7 @@
 			console.log(e, '传入分类id')
 			// this.getCateList(this.courseId)
 			this.getData(e.id)
+			this.getSuperMarketList()
 		},
 		onPageScroll(e) {
 			this.scrollTop = e.scrollTop;
@@ -152,6 +202,30 @@
 		},
 		//方法
 		methods: {
+			getSuperMarketList() {
+				$http.request({
+						url: "medical/labelAndMarket/getMarketShopProductList",
+						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
+						data: {
+							"current": 1,
+							"limit": 12,
+							"medicineMarketId": "28"
+						},
+						header: { //默认 无 说明：请求头
+							'Content-Type': 'application/json'
+						},
+					})
+					.then(res => {
+						if (res.code == 0) {
+							if (res.result.records.length > 0) {
+								this.tjProList = res.result.records
+							} else {
+								this.tjProList = []
+							}
+						}
+
+					});
+			},
 			getData(id) {
 				$http.request({
 						url: "sociology/course/getCourseDetail",
@@ -207,12 +281,12 @@
 
 				this.pricespop = true
 			},
-			closePup(){
+			closePup() {
 				this.pricespop = false
 				this.proPriceList = []
 			},
-			choosePrice(item){
+			choosePrice(item) {
-				console.log(item,'choosePrice')				
+				console.log(item, 'choosePrice')
 				uni.showModal({
 					title: '提示',
 					cancelText: '再想想',
@@ -226,6 +300,65 @@
 					}
 				});
 			},
+			chooseChapter(item,index) {
+				// 检查课程是否已经购买了 是否为试听
+				if (item.isAudition == 1) {
+					// 未购买仅试听
+					this.getPath(item, index)
+				} else if (this.librayList[this.curIndex].isBuy == 1) {
+					uni.showModal({
+						title: '提示',
+						cancelText: '再看看',
+						confirmText: '去学习',
+						content: `当前操作即将跳转至学习页面，是否继续？`,
+						success: function(res) {
+							if (res.confirm) {
+								console.log('用户点击确定');
+							} else if (res.cancel) {
+								console.log('用户点击取消');
+							}
+						}
+					})
+				} else {
+					uni.showModal({
+						title: '提示',
+						cancelText: '知道了',
+						confirmText: '立即购买',
+						content: `本章节不支持试听，购买课程后即可观看`,
+
+						success: function(res) {
+							if (res.confirm) {
+								console.log('用户点击确定');
+							} else if (res.cancel) {
+								console.log('用户点击取消');
+							}
+						}
+					})
+				}
+			},
+			getPath(item,index){
+				$http.request({
+						url: "sociology/course/getCourseCatalogueChapterDetail",
+						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
+						data: {
+							"id": item.id
+						},
+						header: { //默认 无 说明：请求头
+							'Content-Type': 'application/json'
+						},
+					}).then(res => {
+						if (res.code == 0) {
+							
+							// if (res.page.length > 0) {
+							// 	this.learnList = res.page
+							// } else {
+							// 	this.learnList = []
+							// }
+						}
+						// console.log(res,'-------------')
+				
+					});
+			},
 			clicklib(item, index) {
 				if (item.id == this.curId) {
 					return
@@ -234,6 +367,12 @@
 				this.curId = item.id
 				this.getChapterList(item.id)
 			},
+			toZhedie(){
+				this.fold = true
+			},
+			tozhankai(){
+				this.fold = false
+			},
 			getChapterList(id) {
 				$http.request({
 						url: "sociology/course/getCourseCatalogueChapterList",
@@ -270,33 +409,185 @@
 </script>
 <style lang="scss" scoped>
 	@import '@/style/mixin.scss';
-	.proListPrice{text-align: center; 
+	.showFew{
-	.title{font-size: 28rpx; margin: 10px 0; }
+		.icon_item1 {
-	.list{padding-bottom: 20rpx;
+			-moz-transform: rotate(90deg);
-		.item{font-size: 26rpx;color: $themeColor;  line-height: 80rpx; border-bottom: 1px solid #eee; }
+			-webkit-transform: rotate(90deg);
-		.item:last-child{border-bottom: none}
+		}
 	}
+	.showAll{
+		.icon_item {
+			-moz-transform: rotate(-90deg);
+			-webkit-transform: rotate(-90deg);
+		}
 	}
-	.vipBtn{
+
+	.fold {
+		// 折叠状态
+		height: 500rpx; overflow: hidden;
+	}
+
+	.linkPro {
+		.more {
+			font-size: 24rpx;
+			color: #666;
+		}
+	}
+
+	.zhezhe {
+		text-align: center; width: 100%; box-sizing: border-box;
+		padding: 20rpx;
+		z-index: 1;
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		background-position: left bottom;
+		background-image: url(@/static/zhedieBg.png);
+		background-repeat: repeat-x;
+		
+		.icon {
+			justify-content: center;			
+		}		
+		
+		text {
+			color: $themeColor ;
+			font-size: 26rpx;
+		}
+	}
+	.graybg{background-color: $containerColor;}
+	.scroll-view_H {
+		background-color: #fff;
+		white-space: nowrap;
+		padding: 10rpx;
+		margin-top: 12rpx;
+
+		.item {
+			padding: 10rpx;
+			overflow: hidden;
+			display: inline-block;
+			padding-bottom: 0;
+			width: 210rpx !important;
+			margin-right: 8rpx;
+			border-radius: 10rpx;
+
+
+			image {
+				display: block;
+				width: 100%;
+				height: 260rpx;
+			}
+
+
+			.bookName {
+				display: block;
+				margin-top: 6rpx;
+				color: #666;
+				font-size: 24rpx;
+				white-space: nowrap;
+				overflow-x: hidden;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+		}
+	}
+
+	.proListPrice {
+		text-align: center;
+
+		.title {
+			font-size: 28rpx;
+			margin: 10px 0;
+		}
+
+		.list {
+			padding-bottom: 20rpx;
+
+			.item {
+				font-size: 26rpx;
+				color: $themeColor;
+				line-height: 80rpx;
+				border-bottom: 1px solid #eee;
+			}
+
+			.item:last-child {
+				border-bottom: none
+			}
+		}
+	}
+
+	.vipBtn {
 		@include theme("vipbtnbg");
-		border-radius: 100rpx;  justify-content: center;
+		border-radius: 100rpx;
-		width: 150px; color:#fff;
+		justify-content: center;
+		width: 150px;
+		color: #fff;
 		margin: 10rpx auto;
 	}
+
 	.buyBox {
 		position: fixed;
 		z-index: 2;
 		bottom: 100rpx;
 		left: 0;
 		padding: 20rpx 10rpx;
-		width: 100%; font-size: 28rpx;  flex-wrap: wrap;
+		width: 100%;
+		font-size: 28rpx;
+		flex-wrap: wrap;
 		background: rgba(255, 255, 255, 0.9);
-		.item{  width: 100%;
+
+		.item {
+			width: 100%;
 			text-align: center;
 
 		}
-		.tbn{align-items: center;}
+
-		.buybtn{color: #fff;}
+		.tbn {
+			align-items: center;
+		}
+
+		.buybtn {
+			color: #fff;
+		}
+	}
+
+	.supermarketBox {
+		@include pleft_right(5px) .borderbb {
+			background-image: linear-gradient(180deg, #468aff 0%, #46c0ff 100%);
+			@include pleft_right(10px);
+			border-radius: 20rpx;
+			@include ptop_bottm(10px);
+			@include mshadow(10px, 1);
+
+		}
+
+		.name {
+			font-size: 24rpx;
+			@include toe();
+			margin-top: 10rpx;
+		}
+
+		.price {
+			// text-align: center;
+			font-size: 26rpx;
+			font-weight: bold;
+			color: $themeColor;
+			padding-top: 10rpx;
+		}
+
+		.tips {
+			margin-top: 10px;
+			background-color: #e9f0ff;
+			padding: 5px;
+			border-radius: 5px;
+			font-size: 24rpx;
+
+
+			text {
+				font-weight: bold;
+				color: $themeColor;
+			}
+		}
+
 	}
 
 	.curseImg {
@@ -307,6 +598,7 @@
 	}
 
 	.courseList {
+		position: relative;
 		// background-color: #fff;
 		padding: 0 20rpx;
 		background-image: linear-gradient(0deg, #e9f0ff 0%, #fbfbff 100%);
@@ -384,7 +676,8 @@
 	}
 
 	.buybtn {
-		border-radius: 100rpx;  justify-content: center;
+		border-radius: 100rpx;
+		justify-content: center;
 		width: 150px;
 		margin: 10rpx auto;
 		@include theme("btn_bg")

pages/course/index.vue

@@ -42,7 +42,7 @@
 							</view>
 							<view class="tag-view">
 								<uni-tag v-if="item.level != 0" style="margin-right: 10rpx;" :text="item.level == 1 ? '初级':'高级'" type="primary" size="small" />
-								<uni-tag v-if="item.selective != 0 && item.selective == 1" style="margin-right: 10rpx;" text="必修" size="small" type="error" />
+								<uni-tag v-if="item.selective != 0 && item.selective == 1" style="margin-right: 10rpx;" text="必修" size="small" type="warning" />
 								<uni-tag v-if="item.selective != 0 && item.selective == 2" style="margin-right: 10rpx;" text="选修" size="small" type="success" />
 							</view>
 							<view class="btn_box">