课程详情以及抠图

api/api.ts

@@ -31,7 +31,11 @@ export default {
 	},
 	// 课程查询列表接口
 	courseList(params){
-		return request(`${cffpURL}/course/list`,'POST',params)
+		return request(`${cffpURL}/course/list`,"POST",params)
+	},
+	// 讲师信息查询
+	lecturerQuery(params){
+		return request(`${apiURL}/college/lecturerQuery`, "POST", params)
 	}
 	
 }

pages.json

@@ -21,6 +21,24 @@
 				"navigationBarTitleText": "CFFP"
 			}
 		}
+	    ,{
+            "path" : "pages/courseDetail/courseDetail",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/shareFriend/shareFriend",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	// "tabBar": {
 	//         "color": "#7A7E83", // tab 上的文字默认颜色

pages/courseDetail/courseDetail.vue

+<template>
+	<view class="container">
+		<!-- 课程banner图 -->
+		<view class="courseBannerBox"></view>
+		<!-- 课程详情图 -->
+		<view class="courseTitleContent">
+			<view class="courseTitle">
+				<h4>CFFP初级认证（报名+培训）</h4>
+				<view class="shareF">
+					<view></view>
+					<!-- <view>送好友</view> -->
+				</view>
+			</view>
+			<view class="dataBox">
+				<strong>￥6888.00</strong>
+				<text>5656人购买</text>
+			</view>
+		</view>
+		<!-- 课程介绍，相关课程，讲师 -->
+		<view class="courseProBox">
+			<!-- tab区域 -->
+			<view class="tab">
+				<text :class="{'actived': tabType===1}" @click="switchTab(1)">介绍</text>
+				<text :class="{'actived': tabType===2}" @click="switchTab(2)">相关课程</text>
+				<text :class="{'actived': tabType===3}" @click="switchTab(3)">讲师</text>
+			</view>
+			<!-- tabContent区域 -->
+			<view class="tabContent">
+				<!-- 讲师介绍 -->
+				  <view class="lecturerContent" v-if="tabType===3">
+					<view class="lecturerIntro">
+					  <view class="lecturerUrl">
+						<!-- <img :src="{{lecturerInfo.lecturerUrl}}" alt="" srcset=""> -->
+					  </view>
+					  <view>
+						<p><text class="lecturerName">{{lecturerInfo.lecturerName}}</text></p>
+						<template v-if="lecturerInfo?.lecturerRankNames">
+						  <p v-for="item in lecturerInfo.lecturerRankNames.split(',')"  class="lecturerTitle"><text>{{item}}</text></p>
+						</template> 
+					  </view>
+					</view>
+					<h4>
+					  <text>讲师介绍</text>
+					</h4>
+					<view v-html="lecturerInfo?.lecturerIntroduce" class="lecturerText"></view>
+				  </view>
+				  <!-- 购买按钮 -->
+				  <view class="buyBox">
+					  <text>购买</text>
+				  </view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import api from "../../api/api";
+	export default {
+		data() {
+			return {
+				lecturerId:9,
+				tabType:3,
+				lecturerInfo:{}
+			};
+		},
+		methods:{
+			// 切换tab
+		  switchTab(type) {
+		    this.tabType = type;
+		    if (type === 3) {
+		      this.lecturerQuery();
+		    } else if (type == 2) {
+		      // this.filePathQuery(null, null,this.fileUploadItem.mdDropOptionCode)
+		    } else {
+		      // this.filePathQuery(this.status, this.fileId)
+		    }
+		  },
+			// 讲师信息查询
+			lecturerQuery(){
+				api.lecturerQuery({id:this.lecturerId}).then(res=>{
+					if(res['success']){
+						this.lecturerInfo = res['data']['lecturerInfos'][0];
+					}else{
+						uni.showToast({
+							title: res['message'],
+							duration: 2000,
+							icon: 'none'					
+						})
+					}
+				})
+			}
+		},
+		mounted(){
+			this.switchTab(this.tabType)
+		}
+	}
+</script>
+
+<style lang="scss">
+	.container{
+		background-color: #FBFBFB;
+	}
+	.courseBannerBox{
+		height: 300rpx;
+		background-color: #ebebeb;
+	}
+	.courseTitleContent{
+		height: 150rpx;
+		background-color: #fff;
+		margin-bottom: 10rpx;
+		padding: 20rpx 30rpx;
+		box-sizing: border-box;
+		.courseTitle{
+			display: flex;
+			justify-content: space-between;
+			margin-bottom: 16rpx;
+			h4{
+				font-size: 40rpx;
+			}
+		}
+		.dataBox{
+			strong{
+				font-size: 30rpx;
+				color: #F15A1F;
+				margin-right: 30rpx;
+			}
+			text{
+				font-size: 28rpx;
+				color: #333;
+			}
+		}
+	}
+	.courseProBox{
+		.tab{
+			display: flex;
+			justify-content: space-between;
+			padding: 40rpx 30rpx 0;
+			background-color: #fff;
+			color: #666;
+			font-size: 32rpx;
+			text.actived{
+				border-bottom: 2px solid #20269B;
+				color: #333;
+			}
+		}
+		.tabContent{
+			padding-bottom: 200rpx;
+			background-color: #fff;
+		  .lecturerContent{
+				.lecturerIntro{
+					display: flex;
+					padding: 40rpx 50rpx;
+					border-bottom: 2rpx solid #fbfbfb;
+					.lecturerUrl{
+						width: 200rpx;
+						height: 200rpx;
+						border-radius: 50%;
+						background-color: #ccc;
+						overflow: hidden;
+						margin-right: 40rpx;
+					}
+					.lecturerName{
+						display: inline-block;
+						background: #5359CD;
+						border-radius: 10rpx;
+						color: #fff;
+						font-size: 28rpx;
+						padding: 4rpx 20rpx;
+					}
+					.lecturerTitle{
+						font-size: 28rpx;
+						color: #5359CD;
+						margin-top: 16rpx;
+					}
+				}
+				h4{
+					padding-left: 30rpx;
+					padding-top: 10rpx;
+					padding-bottom: 20rpx;
+					background-color: #fff;
+					text{
+						border-bottom: 1px solid #333;
+						font-size: 30rpx;
+					}
+				}
+				.lecturerText{
+					padding: 0 28rpx;
+					background-color: #fff;
+					white-space: pre-wrap;
+					width: 100%;
+					box-sizing: border-box;
+					p{
+						width: auto !important;
+					}
+				}
+				  
+			}
+			.buyBox{
+				position: fixed;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				border-radius: 80rpx;
+				background-color: #20269B;
+				color: #fff;
+				font-size: 36rpx;
+				padding: 20rpx 90rpx;
+				text-align: center;
+				max-width: 60%;
+				margin: 0 auto;
+			}
+		}
+	}
+</style>

pages/shareFriend/shareFriend.vue

+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+
+</style>