课程详情页接口调取、购买未做

pages/tabbar/course/course.vue

@@ -108,7 +108,7 @@
 			// 去课程详情
 			goDetail(id){
 				uni.navigateTo({
-					url:`/pagesB/course-detail/course-detail?id=${id}`
+					url:`/pagesB/course-detail/course-detail?id=${id}&category_id=${this.classId}`
 				})
 			},
 		}

pagesB/course-detail/course-detail.vue

@@ -1,25 +1,27 @@
 <template>
-	<view>
+	<view v-if="isLoading">
 		<status-container titlet="课程详情" returnc="#FFFFFF">
 			<view slot="content" style="margin-top: -20rpx;">
 				<view class="bacf">
-					<view class="fon32 tcenter pad-s50">课程一：棍术讲解</view>
+					<view class="fon32 tcenter pad-s50">{{couresDetail.name}}</view>
 					<view class="pad30 posir disjcac">
-						<image src="https://s6.jpg.cm/2022/02/14/L4oDhy.jpg" style="height: 388rpx;" mode="aspectFill" class="width100" lazy-load></image>
+						<image :src="couresDetail.cover" style="height: 388rpx;" mode="aspectFill" class="width100" lazy-load></image>
 						<image class="posia" src="/static/tabbar/icon-play.png" mode="" style="width: 70rpx;height: 70rpx;" lazy-load></image>
 					</view>
 					<view class="mar-zy30 bbot pad-x10">
 						<span class="fon28 bold posir pad-x10">
-							课程介绍
+							<text>课程介绍</text>
 							<view class="posia-xzy" style="height: 6rpx;background-color: #e42417;bottom: -2rpx;"></view>
 						</span>
 					</view>
 					<view class="mar-zy30 pad-sx20 bbot">
 						<view class="disjbac ae pad-x20" style="color: #262626;">
-							<view class="fon24">教练：万老师</view>
-							<view class="fon20">2022.07.22</view>
+							<view class="fon24">教练：{{couresDetail.teacher}}</view>
+							<view class="fon20">{{couresDetail.published_at.slice(0,10).split('-').join('.')}}</view>
+						</view>
+						<view class="rich-text fon24" style="line-height: 1.8;">
+							<rich-text :nodes="couresDetail.content" style="color: #5a5a5a;"></rich-text>
 						</view>
-						<rich-text :nodes="richText" style="color: #5a5a5a;"></rich-text>
 					</view>
 					<view class="disjcac pad-sx40">
 						<view class="disjcac fon28 radius34" 
@@ -30,9 +32,9 @@
 				<view class="pad-zy20">
 					<view class="disjb ae mar-s40">
 						<view class="fon32 bold colb">推荐课程</view>
-						<view class="fon20" style="color: #bbb4b3;">更多+</view>
+						<view class="fon20" style="color: #bbb4b3;" @tap="$toolAll.tools.goPage('/pages/tabbar/course/course')">更多+</view>
 					</view>
-					<list></list>
+					<list ref="refcourse" @goDetail="goDetail"></list>
 				</view>
 				<!-- 登录弹框 start -->
 				<view class="posAll disjc" v-if="ifLogin">
@@ -57,15 +59,67 @@
 		components:{'foot-tab' :footTab,list,pitera},
 		data() {
 			return {
-				richText:'',
-				ifLogin:false
+				richText:'', //
+				ifLogin:false, //是否登录
+				isLoading:false, //加载完成
+				couresDetail:{}, //课程详情
+				couresRecommend:[], //课程推荐
+				classId:'', //分类id
+				id:'', //课程id
+				page:1, //页数
+				size:6, //条数
 			}
 		},
-		onLoad() {
-			
+		onLoad(op) {
+			if(op.category_id){
+				this.classId = op.category_id
+			}
+			if(op.id){
+				this.id = op.id;
+				// 获取课程详情
+				this.getCouresDetail(op.id);
+			}
 		},
 		methods: {
+			// 获取课程详情
+			getCouresDetail(id){
+				uni.showLoading({
+					title:'加载中'
+				});
+				this.$requst.get('/api/spu/detail',{id:id}).then(res=>{
+					console.log(res,'课程详情')
+					if(res.code==0) {
+						this.couresDetail = res.data.detail;
+						// 获取课程推荐
+						this.getCouresRecommend();
+					}
+					uni.hideLoading();
+					this.isLoading = true;
+				})
+			},
 			
+			// 获取课程推荐
+			getCouresRecommend(){
+				let params = {
+					page:this.page,
+					size:this.size,
+					category_id:this.classId,
+					id:this.id
+				}
+				this.$requst.get('/api/spu/course-recommend',params).then(res=>{
+					console.log(res,'课程推荐')
+					if(res.code==0) {
+						this.$refs.refcourse.list = res.data.list;
+					}
+				})
+			},
+			
+			// 去课程详情
+			goDetail(id){
+				uni.navigateTo({
+					url:`/pagesB/course-detail/course-detail?id=${id}&category_id=${this.classId}`
+				})
+			},
 		}
 	}
 </script>