超v课程添加购买

2024-06-25 11:34:27 +08:00
parent 6dd47a5638
commit 0e28140768
6 changed files with 432 additions and 24 deletions
--- a/components/buyPup.vue
+++ b/components/buyPup.vue
@@ -143,7 +143,9 @@
 				font-size: 26rpx;
 				color: #333;
 				margin-bottom: 10rpx;
-				line-height: 80rpx;
+				padding-top:20rpx ;
+				padding-bottom:20rpx ;
+				line-height:40rpx;
 				border-radius: 50rpx;
 				border: 1px solid #eee;
 			}
--- a/pages/course/chapterDetail.vue
+++ b/pages/course/chapterDetail.vue
@@ -324,6 +324,7 @@ export default {

    this.options = options;
    this.getCourseDescriptionData();
+	console.log(this.options,'this.options-------------')
    // this.getUserInfo()
    // this.getCateList()
  },
--- a/pages/course/coursePrice.vue
+++ b/pages/course/coursePrice.vue
@@ -3,33 +3,66 @@
 		<!-- 公共组件-每个页面必须引入 -->
 		<public-module></public-module>
 		<z-nav-bar title="课程价格"></z-nav-bar>
+		<view class="addVip">
+			<u-alert
+			  v-if=""
+			  style="
+			   
+			    position: fixed;
+			    left: 0;
+			    width: 100%;
+			    z-index: 10;
+			  " 
+			  :title="goBuyTitle"
+			  type="warning"			 
+			  :show-icon="true"
+			>
+			  <template slot="rightSlot" slot-scope="slotProps">
+			    <text class="saveBtn vipBtn flexbox buyBtn" style="color: #fff;">
+			      开通VIP
+			    </text>
+			    <view> </view>
+			  </template>
+			</u-alert>
+		</view>
 		<view class="container">
 			<view class="" v-if="courseList.length > 0">
 				<uni-collapse accordion>
 					<uni-collapse-item v-for="(item,index) in courseList" :key="index" :title="item.courseMedicine.title"
 						:thumb="item.courseMedicine.icon">
 						<view class="content" v-if="item.courseList.length > 1">							
-							<!-- <pre>{{item}}</pre> -->
-							<view class="courseItemleve1" v-for="(item1, index1) in item.courseList" :key="index1">
-															<view class="text courseItem flexbox"><u-icon name="pushpin" color="#2979ff"
-																	size="24"></u-icon><text>{{item1.title}}</text></view>
+							<view :class="['courseItemleve1',userMsg.vip != 0 ? 'isVip' :'']" v-for="(item1, index1) in item.courseList" :key="index1" 
+							@click="onPageJump('/pages/course/courseDetail',item1.id)"
+							>
+								<view class="vipSee" v-if="userMsg.vip != 0">
+									<text>VIP畅学权益生效中</text>
+								</view>
+															<view :class="['text','courseItem','flexbox']"><u-icon name="pushpin" color="#2979ff"
+																	size="24"></u-icon><text>{{item1.title}}</text>
+															
+																	</view>
 															<view class="" v-for="(item2, index2) in item1.courseCatalogueEntityList" :key="index2">
-																<view :class="['priceItem', item2.isBuy == 1 ? 'isBuy' : '']">
+																
+																<view :class="['priceItem', item2.isBuy == 1 && userMsg.vip == 0 ? 'isBuy' : '']" >
+																	
 																	<text class="text mname"  v-if="item1.courseCatalogueEntityList.length > 1"
 																		style="font-weight: bold; margin-right: 10rpx;">【{{item2.title}}】</text>
 																		<view class="pbox flexbox">																			
+																			
 																			<text class="text">半年：￥{{item2.halfFee}} 元</text><text class="text"
 																				style="margin-left: 20rpx;">整年：￥{{item2.fee}} 元</text> 
+																				<text class="buybtns" @click.stop="goBuy(item2)" v-if="item2.isBuy == 0 && userMsg.vip == 0">立即购买</text>
 																		</view>
-																		<i class="haveBuy" v-if="item2.isBuy == 1">已购买</i>
+																		<i class="haveBuy" v-if="item2.isBuy == 1 && userMsg.vip == 0">已购买</i>
+																		
 																</view>									
 															</view>
-															<view class="buyBox" v-if="!item1.allBuy">
+															<!-- <view class="buyBox" v-if="!item1.allBuy">
 																<view class="saveBtn buybtn flexbox" @click="goBuy('halfFee')">
 																	<u-icon name="bag" color="#fff" size="24"></u-icon>
 																	<text>立即购买</text>
 																</view>
-															</view>
+															</view> -->
 														</view>
 						</view>
 					</uni-collapse-item>
@@ -41,12 +74,14 @@
 		<u-back-top :scroll-top="scrollTop" bottom="150" :customStyle='bgiStyle'
 			:iconStyle="iconStyle"></u-back-top>
 		<z-navigation></z-navigation>
+		<buy-pup v-if="pricespop" :proPriceList="proPriceList" @closePup="closePup" @oprate="oprate"></buy-pup>
 		<!-- <music-play :playData="playData"></music-play> -->
 	</view>
 </template>

 <script>
 	// import musicPlay from '@/components/music.vue'
+	import buyPup from '@/components/buyPup.vue'
 	import $http from '@/config/requestConfig.js';
 	var clear;
 	import {
@@ -56,6 +91,7 @@
 		data() {
 			return {
 				playData: {},
+				goBuyTitle : "购买VIP,即可免费观看吴门医述所有课程",
 				courseList: [],
 				status:0,
 				scrollTop: 0,
@@ -67,6 +103,9 @@
 					fontWeight: 'bold',
 					color: '#258feb',
 				},
+				proPriceList:[],
+				pricespop:false,
+				userMsg:{},				
 			};
 		},
 		//第一次加载
@@ -82,6 +121,7 @@
 		onShow() {
 			// 隐藏原生的tabbar
 			uni.hideTabBar();
+			this.getUserInfo()
 			this.getCoursePriceList()
 		},
 		onPageScroll(e) {
@@ -93,9 +133,94 @@
 		},
 		components: {
 			// musicPlay
+			buyPup
 		},
 		//方法
 		methods: {
+			oprate(data){
+				console.log(data,'得到的内容')
+				if(data.name == 'buy'){
+					this.buy(data.item)
+				}
+				// else if(data.name == 'gouwuche'){
+				// 	this.addCart(data.item)
+				// }
+			},
+			buy(val){
+				var mynavData = JSON.stringify({
+				        goods: [
+				          {
+				            productImages: val.productImages,
+				            productId: val.productId,
+				            productName: val.productName,
+				            price: val.activityPrice && val.activityPrice != 0 ? val.activityPrice:val.price,
+				            goodsType: val.goodsType,
+				          },
+				        ],				
+				        navTitle: this.options.navTitle,
+				        title: this.options.title,
+				        typeId: 0,
+				      }); // 这里转换成 字符串
+				
+				      uni.navigateTo({
+				        url: `/pages/goods/order/index?data=${mynavData}`,
+				      });				
+			},
+			onPageJump(path, id){
+				uni.navigateTo({
+					url:`${path}?id=${id}`
+				})
+			},
+			getUserInfo() {
+				// 用户详情
+				// if (this.userInfo.id != undefined) {
+				this.$http
+					.post('book/user/info/' + this.userInfo.id)
+					.then(res => {
+						this.userMsg = res.user						
+					});
+				// }
+			},
+			closePup(e){
+				this.pricespop = false
+			},
+			goBuy(val){
+				console.log(val,'val')
+				$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.pricespop = true	
+								// this.curProId = this.proPriceList[0].productId
+							} else {
+								this.proPriceList = []
+								uni.showToast({
+									title:'课程未绑定商品',
+									icon:'none'
+								})
+							}
+						}
+							
+					}).catch(e => {
+						console.log(e, '获取商品列表报错')
+						uni.showToast({
+							title:'获取商品失败',
+							icon:'none'
+						})
+					});
+								
+				
+			},
 			getCoursePriceList() {
 				this.$http
 					.post('medical/home/getMedicalCoursePrice')
@@ -142,10 +267,27 @@
 </script>
 <style lang="scss" scoped>
 	@import '@/style/mixin.scss';
+	.isVip{position: relative; padding-top: 50rpx !important; border: 1px solid #6429db; box-sizing: border-box;}
+.vipSee{ 
 	
+	position: absolute; right:0; top:0; 
+	font-size: 24rpx;
+	background-image: linear-gradient(90deg, #6429db 0%, #0075ed 100%);
+	// @include theme("btn_bg"); 
+	color: #fff; padding: 10rpx; border-radius: 50rpx 0 0 50rpx;
+	
+	}
 	.flexbox {
 		display: flex;
 	}
+	.buybtns{
+		@include theme("btn_bg"); border-radius: 30rpx; color: #fff; font-size: 28rpx; padding: 0 10rpx; margin-left: 10rpx;
+	}
+	.addVip{
+		.saveBtn{
+			width: 150rpx;
+		}
+	}
 	.buyBox{
 		.saveBtn{ margin: 0 auto;}
 	}
--- a/pages/course/myCourse.vue
+++ b/pages/course/myCourse.vue
@@ -110,14 +110,13 @@
 						<view class="txt555" @click="onPageJump('/pages/course/courseDetail',item.id)">							
 								{{item.title}}-{{item.catalogueTitle}}						
 						</view>
-						<view class="jianjie" v-html="item.content">
+						<view class="jianjie" v-html="item.content" style="margin-bottom: 10rpx;">
 			
 						</view>						
-						<view class="btn_box" @click="xufei(item)">
+						<view class="btn_box" @click="xufei(item)" >
 							<text>续费课程</text>
 						</view>
 					</view>			
-			
 				</view>
 			</view>
 			<u-divider v-show="ExpiredCourseList.status == 2" text="已加载全部"></u-divider>
@@ -662,7 +661,7 @@
 					})
 			},
 			xufei(val){
-				console.log('去续费,获取商品列表')				
+				// console.log('去续费,获取商品列表')				
 					$http.request({
 							url: "sociology/product/getProductListForCourse",
 							method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
@@ -678,16 +677,25 @@
 								if (res.productList.length > 0) {
 									this.proPriceList = res.productList
 									// this.curProId = this.proPriceList[0].productId
+									this.pricespop = true
 								} else {
 									this.proPriceList = []
+									uni.showToast({
+										title:'课程未绑定商品',
+										icon:'none'
+									})
 								}
 							}
 								
 						}).catch(e => {
 							console.log(e, '获取商品列表报错')
+							uni.showToast({
+								title:'获取商品失败',
+								icon:'none'
+							})
 						});
 				
-					this.pricespop = true
+					
 				
 			},			
 			// 跳转
--- a/pages/course/myCourseLearn.vue
+++ b/pages/course/myCourseLearn.vue
@@ -39,14 +39,15 @@
 			<view class="endBox" v-if="librayList[curIndex].isBuy == 1 && userMsg.vip == '0'">
 				<view class="" >
 					<view class="flexbox" v-if="librayList[curIndex].startTime == null">
-						<text >当前目录还未开始学习</text><uni-tag type="warning" text="去学习"></uni-tag>
+						<text >当前目录还未开始学习</text>
+						<!-- <uni-tag type="warning" text="去学习"></uni-tag> -->
 					</view>
 					<view class="flexbox" v-else>
-						<text >课程观看有效期截止到：2025-06-14  00:00 </text><uni-tag type="primary" text="继续学习"></uni-tag>
+						<text >课程观看有效期截止到：{{librayList[curIndex].endTime}} </text><uni-tag type="primary" text="继续学习"></uni-tag>
 					</view>					
 				</view>
 			</view>			
-				<view class="item" v-for="(item, index) in courseList" :key="index" @click="chooseChapter(item, index)">
+				<view class="item" v-for="(item, index) in courseList" :key="index" @click="gotoDetail(item, index)">
 					<text>{{item.title}}</text>
 					<uni-tag v-if="librayList[curIndex].isBuy == 1 && item.isLearned == 0" style="" :inverted="true" text="未学"
 						size="mini" type="primary" />
@@ -193,6 +194,9 @@
 			this.getData(e.id)			
 			// this.getSayList()
 		},
+		onPullDownRefresh() {
+			uni.stopPullDownRefresh()
+		},
 		onPageScroll(e) {
 			this.scrollTop = e.scrollTop;
 			if (this.scrollTop > 100) {
@@ -235,7 +239,21 @@
 					});
 				// }
 			},
-			// 评论
+			gotoDetail(v, video, index) {
+			  console.log("v at line 668:", v);
+			  // if (
+			  //   this.cateList[this.currentCateIndex].isBuy == 1 ||
+			  //   v.isAudition == 1 ||
+			  //   this.vip.type != "0"
+			  // ) {
+			  uni.navigateTo({
+			    // url: '../bookShop/commodityDetail?id=' + item.id
+			    url: `/pages/course/chapterDetail?navTitle=${this.pageTitle}&title=${v.title}&id=${v.id}&conditions=${v.conditions}&videoId=${video.id}`,
+			  });
+			  // } else {
+			  //   this.$commonJS.showToast("请先购买课程");
+			  // }
+			},
 			// 加载更多子评论
 			showMoreChildren(i,val){
 				console.log('更多评论');
--- a/pages/course/vipCourse.vue
+++ b/pages/course/vipCourse.vue
@@ -0,0 +1,237 @@
+<template>
+	<view>
+		<!-- 公共组件-每个页面必须引入 -->
+		<public-module></public-module>
+		<z-nav-bar :title="pageTitle"></z-nav-bar>
+		<view class="learnBox box" >
+			<view class="newBox">
+				<view class="item flexbox" v-for="(item, index) in courseList" :key="index" @click="onPageJump('/pages/course/courseDetail',item.id, item.title)">
+					<!-- <view class="imgcontainer" :style="{backgroundImage:surl(item.image)}"> -->
+					<view class="imgcontainer">
+						<image :src="item.image" mode="aspectFit"></image>
+					</view>
+					<view class="buyItems">
+						<view class="txt555">
+							{{item.title}}
+						</view>
+						<view class="jianjie" v-html="item.content">
+			
+						</view>
+						<!-- <view class="tag-view">
+							<uni-tag style="margin-right: 10rpx;" text="高级" type="primary" size="small" />
+							<uni-tag style="margin-right: 10rpx;" text="选修" size="small" type="success" />
+						</view> -->
+						<view class="btn_box">
+							<text>课程详情</text>
+						</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: {
+			// 跳转
+			onPageJump(url,thatId,title) {
+				uni.navigateTo({
+					url: `${url}?id=${thatId}&title=${title}`
+				});
+			},	
+			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);
+	}
+	.newBox {
+	
+		.item {
+			margin-bottom: 20rpx;
+			background-color: #fff;
+			border-radius: 20rpx;
+			@include ptop_bottm(10px);
+			@include pleft_right(10px);
+	
+			@include mshadow(10px, 1) .imgcontainer {
+				display: block;
+				width: 110rpx;
+				margin-right: 20rpx;
+				// background-size: cover;
+				// background-position: center;
+				height: 200rpx;
+				flex-grow: 1;
+				// @include ptop_bottm(10px);
+				overflow: hidden;
+	
+				// @include pleft_right(10px);
+				image {
+					width: 100%;
+					height: 200rpx;
+				}
+			}
+			.btn_box{ text-align: right;
+				text{
+					border-radius: 20rpx;
+					padding: 3px 5px;  @include theme("btn_bg");
+					font-size: 28rpx; color: #fff;
+				}
+			}
+			.buyItems {
+				width: 60%;
+			}
+	
+			.jianjie {
+				margin-top: 10rpx;
+				font-size: 24rpx;
+				@include bov();
+				color: #9c9c9c;
+			}
+	
+			.txt555 {
+				font-size: 30rpx;
+				color: #000;
+				@include bov()
+			}
+		}
+	}
+	.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>