我的课程-购买 未完成

pages/course/myCourse.vue

@@ -9,47 +9,51 @@
 				itemStyle="padding-left: 15px; padding-right: 15px; height: 50px;"></u-tabs>
 		</view>
 		<view class="containerBg1">
+			<!-- 我的课程 -->
 			<view class="MyCourseBox" v-show="this.curTagId == 0">
 			<view class="search" style="margin-top: 20rpx;">
-				<u-search placeholder="请输入课程名"  @clear="clear" v-model="searchValue" 
+				<u-search placeholder="请输入课程名" @focus="focus" @clear="clear" v-model="searchValue" @blur="blur" 
 					 @search="search" @custom="search"></u-search>
 			</view>
 			
-			<uni-section class="mb-10" title="课程列表" type="line">			
-			  <template v-slot:right>
-			    <u-icon name="grid" color="#2979ff" size="28" @click="showDrawer"></u-icon>
-			  </template>
-			</uni-section>
-			<view class="selectCateText" v-if="selectCat != ''">				
-				    <text>已选中分类：{{selectCat}}</text>
-					<text class="del" @click="delselectCat">清除</text>
+			<view class="sectionTitle flexbox">
+				<view class="selectCateText" >
+					<view class="" >
+						<text v-if="selectCat == ''">已显示全部课程</text>
+						<text v-else>已选中分类：{{selectCat}}</text>
+						<text class="del" @click="delselectCat" v-if="selectCat != ''">清除</text>
+					</view>
+				</view>
+				<view class="flexbox rightIcon" @click="showDrawer">
+					<u-icon name="grid" color="#2979ff" size="28" ></u-icon><text>按分类筛选</text>
+				</view>
 			</view>
 			<!-- <view class="containerBg"> -->
 			<view class="newBox">
-				<view class="item flexbox" v-for="(item, index) in MyCourseList.list" :key="index"
-					@click="onPageJump('/pages/course/courseDetail',item.id)">
+				<view :class="['item','flexbox', userMsg.vip != '0'&& item.isBuy != 1 ? 'blueBorder':'']" v-for="(item, index) in MyCourseList.list" :key="index"
+					>
+					<view class="vipTag" v-if="userMsg.vip != '0' && item.isBuy != 1">
+						VIP畅学
+					</view>
 					<!-- <view class="imgcontainer" :style="{backgroundImage:surl(item.image)}"> -->
-					<view class="imgcontainer">
+					<view class="imgcontainer" @click="onPageJump('/pages/course/myCourseLearn',item.id)">
 						<image :src="item.image" mode="aspectFit"></image>
 					</view>
 					<view class="buyItems">
 						<view class="txt555">
-							{{item.title}}
-						</view>
+							<view class="" @click="onPageJump('/pages/course/myCourseLearn',item.id)">
+								{{item.title}}
+							</view>							
+						</view>						
 						<view class="jianjie" v-html="item.content">
 
 						</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="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">
-							<text>了解课程</text>
-						</view>
+						<view class="collection">
+							<!-- 收藏状态{{item.isStudying}} -->
+							<text class="add citem" v-if="item.isStudying == 0" @click="addCollection(item,index)">加入在学习</text>
+							<text class="del citem" v-else @click="delCollection(item,index)">取消在学习</text>
+							<text class="citem btn_box"  @click="onPageJump('/pages/course/myCourseLearn',item.id)">去学习</text>
+						</view>						
 					</view>
 
 				</view>
@@ -58,39 +62,32 @@
 			<u-divider v-show="MyCourseList.status == 3" text="暂无数据"></u-divider>
 			<u-divider v-show="MyCourseList.status == 1" text="加载中..."></u-divider>
 			</view>
-			
-			<view class="LearningCourseBox" v-show="this.curTagId == 1">
-			<uni-section class="mb-10" title="在学习课程列表" type="line">
-			  <!-- <template v-slot:right>
-			    <u-icon name="grid" color="#2979ff" size="28" @click="showDrawer"></u-icon>
-			  </template> -->
-			</uni-section>
+			<!-- 在学习 -->
+			<view class="LearningCourseBox" v-show="this.curTagId == 1">			
 			<!-- <view class="containerBg"> -->
 			<view class="newBox">
-				<view class="item flexbox" v-for="(item, index) in LearningCourseList.list" :key="index"
-					@click="onPageJump('/pages/course/courseDetail',item.id)">
+				<view :class="['item','flexbox', userMsg.vip != '0' && item.isBuy != 1 ? 'blueBorder':'']" v-for="(item, index) in LearningCourseList.list" :key="index"
+					>
+					
+					<view class="vipTag" v-if="userMsg.vip != '0' && item.isBuy != 1">
+						VIP畅学
+					</view>
+					<!-- {{userMsg}} -->
 					<!-- <view class="imgcontainer" :style="{backgroundImage:surl(item.image)}"> -->
-					<view class="imgcontainer">
+					<view class="imgcontainer" @click="onPageJump('/pages/course/myCourseLearn',item.id)">
 						<image :src="item.image" mode="aspectFit"></image>
 					</view>
 					<view class="buyItems">
-						<view class="txt555">
+						<view class="txt555" @click="onPageJump('/pages/course/myCourseLearn',item.id)">
 							{{item.title}}
-						</view>
-						<view class="jianjie" v-html="item.content">
-			
-						</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="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">
-							<text>了解课程</text>
-						</view>
+						</view>						
+						<view class="jianjie" v-html="item.content">			
+						</view>	
+						<view class="collection">
+							<!-- <text class="add citem" v-if="item.isStudying == 0" @click="addCollection(item,index)">加入在学习</text> -->
+							<text class="del citem"  @click="delCollection(item,index)">取消在学习</text>
+							<text class="citem btn_box"  @click="onPageJump('/pages/course/myCourseLearn',item.id)">去学习</text>
+						</view>	
 					</view>
 			
 				</view>
@@ -99,38 +96,25 @@
 			<u-divider v-show="LearningCourseList.status == 3" text="暂无数据"></u-divider>
 			<u-divider v-show="LearningCourseList.status == 1" text="加载中..."></u-divider>
 			</view>
-			
-			<view class="ExpiredCourseBox" v-show="this.curTagId == 2">
-			<uni-section class="mb-10" title="过期课程列表" type="line">
-			  <!-- <template v-slot:right>
-			    <u-icon name="grid" color="#2979ff" size="28" @click="showDrawer"></u-icon>
-			  </template> -->
-			</uni-section>
+			<!-- 已过期 -->
+			<view class="ExpiredCourseBox" v-show="this.curTagId == 2">			
 			<!-- <view class="containerBg"> -->
 			<view class="newBox">
 				<view class="item flexbox" v-for="(item, index) in ExpiredCourseList.list" :key="index"
-					@click="onPageJump('/pages/course/courseDetail',item.id)">
+					>
 					<!-- <view class="imgcontainer" :style="{backgroundImage:surl(item.image)}"> -->
-					<view class="imgcontainer">
+					<view class="imgcontainer" @click="onPageJump('/pages/course/courseDetail',item.id)">
 						<image :src="item.image" mode="aspectFit"></image>
 					</view>
 					<view class="buyItems">
-						<view class="txt555">
-							{{item.title}}
+						<view class="txt555" @click="onPageJump('/pages/course/courseDetail',item.id)">							
+								{{item.title}}							
 						</view>
 						<view class="jianjie" v-html="item.content">
 			
-						</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="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">
-							<text>了解课程</text>
+						</view>						
+						<view class="btn_box" @click="xufei(item)">
+							<text>续费课程</text>
 						</view>
 					</view>
 			
@@ -150,7 +134,7 @@
 		<!-- 评论弹出 -->
 		<public-module></public-module>
 		<tree-list ref="treeList" v-if="treeListVisible" @clickCourseInfo="clickCourseInfo"></tree-list>
-		
+		<buy-pup v-if="pricespop" :proPriceList="proPriceList" @closePup="closePup" @oprate="oprate"></buy-pup>
 		<z-navigation></z-navigation>
 		<!-- <music-play :playData="playData"></music-play> -->
 	</view>
@@ -159,6 +143,7 @@
 
 <script>
 	// import musicPlay from '@/components/music.vue'
+	import buyPup from '@/components/buyPup.vue'
 	import treeList from '@/components/tagTree.vue'
 	import commentsList from '@/components/commentsList.vue'
 	import emojiList1 from '../../bkhumor-emojiplus/emoji/biaoqin.js'
@@ -171,6 +156,8 @@
 	export default {
 		data() {
 			return {
+				proPriceList: [],
+				pricespop:false,
 				curTagId: 0,
 				playData: {},
 				searchValue:'',
@@ -227,7 +214,8 @@
 					status: 88,
 					page: 1,
 					flag: false
-				}
+				},
+				oldValue : ''
 
 			};
 		},
@@ -240,9 +228,7 @@
 			console.log(e, '传入分类id')
 			this.getUserInfo()
 			// this.fatherClick()
-			this.getMyCourseList()
-			this.getLearningCourseList()
-			this.getExpiredCourseList()
+			this.getMyCourseList()			
 		},
 		onPageScroll(e) {
 			this.scrollTop = e.scrollTop;
@@ -284,14 +270,37 @@
 		components: {
 			// musicPlay
 			emotion,
-			treeList
+			treeList,
+			buyPup
 			// commentsList
 
 		},
 		//方法
 		methods: {
+			oprate(data){
+				console.log(data,'得到的内容')
+				if(data.name == 'buy'){
+					this.buy(data)
+				}else if(data.name == 'gouwuche'){
+					this.addCart(data)
+				}
+			},
+			// 购物车
+			addCart(){
+				
+			},
+			// 直接购买
+			buy(val){
+				uni.navigateTo({
+					url:`/pages/bookShop/settlement?type=2&list=${val.id}`
+				})
+			},
+			closePup(e){
+				this.pricespop = false
+			},
 			delselectCat(){
 				this.selectCat = ''
+				this.medicalId = ''
 				this.MyCourseList.page = 1
 				this.MyCourseList.list = []
 				this.getMyCourseList()	
@@ -302,16 +311,28 @@
 					this.MyCourseList.page = 1
 					this.MyCourseList.list = []
 					this.getMyCourseList()	
-					// this.curTagId = 0
-				// }else if(this.curTagId == 1){					
-				// 			this.getLearningCourseList()					
-				// }else if(this.curTagId == 2){					
-				// 			this.getExpiredCourseList()						
-				// }
+					console.log(this.searchValue,'searchValue')				
+			},
+			focus(res){
+				this.oldValue = res
+				// console.log(res,this.oldValue,'聚焦');
+			},
+			blur(res){				
+				// console.log(res,this.searchValue,'res');		
+				if(this.oldValue != res){ // 重新请求
+					this.MyCourseList.page = 1
+					this.MyCourseList.list = []
+					this.getMyCourseList()	
+					this.oldValue = ''
+				}
+				
 			},
-			cancel(res){},
 			clear(){
+				// console.log('++++++++++++++++++++++')
 				this.searchValue = ''
+				this.MyCourseList.page = 1
+				this.MyCourseList.list = []
+				this.getMyCourseList()	
 			},
 			clickCourseInfo(val){
 				console.log(val,'选择的分类数据');
@@ -327,7 +348,7 @@
 				console.log(e,'tabitem')
 				this.curTagId = e.index
 			},
-			showDrawer(){
+			showDrawer(){				
 				this.treeListVisible = true
 				this.$nextTick( ()=> {
 					this.$refs['treeList'].getData()
@@ -381,7 +402,7 @@
 						url: "medical/course/getUserCourseStudying",
 						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
 						data: {
-							 "userId": this.userInfo.id
+							 "userId": this.userMsg.id
 						},
 						header: { //默认 无 说明：请求头
 							'Content-Type': 'application/json'
@@ -417,7 +438,7 @@
 						url: "medical/course/getCourseExpire",
 						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
 						data: {
-							"userId": this.userInfo.id
+							"userId": this.userMsg.id
 						},
 						header: { //默认 无 说明：请求头
 							'Content-Type': 'application/json'
@@ -449,10 +470,115 @@
 					.post('book/user/info/' + this.userInfo.id)
 					.then(res => {
 						this.userMsg = res.user
+						// this.userInfo = res.user
+						this.getLearningCourseList()
+						this.getExpiredCourseList()
 					});
 				// }
 			},
+			addCollection(val,index){
+				$http.request({
+						url: "medical/course/addUserCourseStudying",
+						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
+						data: {
+							"userId": this.userInfo.id,
+							"courseId": val.id
+						},
+						header: { //默认 无 说明：请求头
+							'Content-Type': 'application/json'
+						},
+					})
+					.then(res => {
+						if(res.code == 0){
+							uni.showToast({
+								title:'加入成功',
+								icon:'success'
+							})
+							if(this.curTagId == 0){
+								console.log(this.MyCourseList.list[index],'this.MyCourseList[index]')
+								this.MyCourseList.list[index].isStudying = 1
+								this.getLearningCourseList() // 刷新收藏列表
+							}
+						}
 
+					})
+					.catch(e => {
+						console.log('加入在学习', e)
+					})
+			},
+			delCollection(val, index){
+				// console.log(val,'val');				
+				$http.request({
+						url: "medical/course/delUserCourseStudying",
+						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
+						data: {
+							// "userId": this.userInfo.id,
+							"courseId": val.id
+						},
+						header: { //默认 无 说明：请求头
+							'Content-Type': 'application/json'
+						},
+					})					
+					.then(res => {
+						if(res.code == 0){
+							uni.showToast({
+								title:'取消成功',
+								icon:'success'
+							})
+							if(this.curTagId == 0){
+								console.log(this.MyCourseList.list[index],'this.MyCourseList[index]')
+								this.MyCourseList.list[index].isStudying = 0
+								this.getLearningCourseList() // 刷新收藏列表
+							}else if(this.curTagId == 1){
+								this.LearningCourseList.list.splice(index,1)
+								this.MyCourseList.page = 1
+								this.MyCourseList.list = []
+								this.getMyCourseList()	
+							}
+						}
+				
+					})
+					.catch(e => {
+						console.log('取消收藏报错', e)
+						uni.showToast({
+							title:'取消失败',
+							icon:'error'
+						})
+					})
+			},
+			xufei(val){
+				console.log('去续费,获取商品列表')				
+					$http.request({
+							url: "sociology/product/getProductListForCourse",
+							method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
+							data: {
+								"id": val.id
+							},
+							header: { //默认 无 说明：请求头
+								'Content-Type': 'application/json'
+							},
+						})
+						.then(res => {
+							if (res.code == 0) {
+								if (res.productList.length > 0) {
+									this.proPriceList = res.productList
+									// this.curProId = this.proPriceList[0].productId
+								} else {
+									this.proPriceList = []
+								}
+							}
+				
+						}).catch(e => {
+							console.log(e, '获取商品列表报错')
+						});
+				
+					this.pricespop = true
+				
+			},
+			// 获取续费商品
+			getCourseProList(){
+				
+			},
 			// 跳转
 			onPageJump(url, id) {
 				uni.navigateTo({
@@ -465,7 +591,27 @@
 </script>
 <style lang="scss" scoped>
 	@import '@/style/mixin.scss';
-	.selectCateText{ margin-bottom: 20rpx;
+	
+	.LearningCourseBox,.ExpiredCourseBox{margin-top: 20rpx;}
+	.collection{ margin-top: 20rpx; overflow: hidden; text-align: right;
+		.btn_box{border: 1px solid $themeColor !important; color:$themeColor !important; margin-left: 20rpx;}
+		.citem{ display: inline-block;
+			border-radius: 10rpx;
+			// background-color: #ff7446;
+			border: 1px solid #ff7446;
+			padding: 10rpx; font-size:24rpx; 
+			color: #ff7446; 
+		}
+		.del{
+			background-color: #ffe6db; color: #ff7446;
+		}
+	}
+	.sectionTitle{		
+		justify-content: space-between; margin-bottom: 20rpx; margin-top: 20rpx;
+		.rightIcon{color:#2979ff ; align-items: center;}
+		}
+	
+	.selectCateText{ min-width:20rpx ; 
 		.del{color: #ff7446; padding-left: 20rpx;}
 	}
 	.search{background-color: $containerColor; padding: 10rpx; }
@@ -478,12 +624,23 @@
 	.curseSet{margin-right: 20rpx; font-size: 28rpx; display: flex; align-items: center;}
 	.fixed {
 		position: fixed;
-		z-index: 1; width: 100%; background-color: #fff;
+		z-index: 2; width: 100%; background-color: #fff;
 	}
 
 	.newBox {
-
-		.item {
+	.blueBorder{border: 1px solid  #2979ff !important;}
+		.item { overflow: hidden;
+		border: #fff 1px solid ;
+			.vipTag{position: absolute; padding:10rpx 80rpx;
+				left: -60rpx; top: 10rpx; 
+				transform: rotate(-30deg); 
+				-o-transform: rotate(-30deg); 
+				-webkit-transform: rotate(-30deg); 
+				-moz-transform: rotate(-30deg);
+				z-index: 1;
+				@include theme("btn_bg") ; 
+				color: #fff;}
+			position: relative;
 			margin-bottom: 20rpx;
 			background-color: #fff;
 			border-radius: 20rpx;
@@ -506,6 +663,7 @@
 					width: 100%;
 					height: 200rpx;
 				}
+				
 			}
 			.btn_box{ text-align: right;
 				text{