订单确认

App.vue

@@ -44,4 +44,7 @@
 	.uni-popup .uni-popup__wrapper{
 		margin: 30rpx!important;
 	}
+	.richTextContent img{
+		width: 100% !important;
+	}
 </style>

common/common.ts

@@ -32,4 +32,5 @@ export default {
   	  }
   	});
   },
+  
 }
\ No newline at end of file

pages/certifyDetail/certifyDetail.vue

@@ -79,7 +79,7 @@
 			<!-- 报名按钮区域 -->
 			<view class="signBtnContent">
 				<view class="consultBtn">咨询客服</view>
-				<view class="signBtn">立即报名</view>
+				<view class="signBtn" @click="registerNow()">立即报名</view>
 			</view>
 		</view>
 		
@@ -106,6 +106,11 @@
 						this.certificateInfo = res['data'];
 					}
 				})
+			},
+			registerNow(){
+				uni.navigateTo({
+					url: '/pages/orderConfirm/orderConfirm'
+				});
 			}
 		}
 	}

pages/courseDetail/courseDetail.vue

@@ -28,7 +28,22 @@
 			<view class="tabContent">
 				<!-- 课程介绍 -->
 				<view class="courseIntroContent" v-if="tabType===1">
-					<view v-html="courseInfo?.fileIntroduce"></view>
+					<view v-html="courseInfo?.fileIntroduce" class="richTextContent"></view>
+				</view>
+				<!-- 相关课程列表 -->
+				<view class="relationCourseListsContent" v-if="tabType===2">
+					<view class="totalCourseCount">共{{relatedCoursesLists ?  relatedCoursesLists.length : 0}}节</view>
+					<view class="courseItemContent" v-for="(item,index) in relatedCoursesLists" :key="item.fileId">
+						<view class="courseInfoContent">
+							<h4>{{index + 1}}.{{item.fileTitle}}</h4>
+							<view class="timeContent">
+								<view class="">00:00/{{secondsTransferPipe(Number(item.courseTotalTime))}}</view>
+							</view>
+						</view>
+						<view class="statusBtnContent">
+							试听
+						</view>
+					</view>
 				</view>
 				<!-- 讲师介绍 -->
 				  <view class="lecturerContent" v-if="tabType===3">
@@ -46,10 +61,10 @@
 					<h4>
 					  <text>讲师介绍</text>
 					</h4>
-					<view v-html="lecturerInfo?.lecturerIntroduce" class="lecturerText"></view>
+					<view v-html="lecturerInfo?.lecturerIntroduce" class="lecturerText richTextContent"></view>
 				  </view>
 				  <!-- 购买按钮 -->
-				  <view class="buyBox">
+				  <view class="buyBox" @click="buy()">
 					  <text>购买</text>
 				  </view>
 			</view>
@@ -59,6 +74,7 @@
 
 <script>
 	import api from "../../api/api";
+	import dataHandling from "@/util/dataHandling";
 	export default {
 		data() {
 			return {
@@ -78,7 +94,7 @@
 		    } else if (type == 2) {
 		      this.relatedCoursesList()
 		    } else {
-		      // this.filePathQuery(this.status, this.fileId)
+		      this.courseDetail()
 		    }
 		  },
 			// 讲师信息查询
@@ -109,16 +125,28 @@
 			},
 			// 相关课程查询
 			relatedCoursesList(){
-				api.relatedCoursesList({fileId:3937}).then(res=>{
+				api.relatedCoursesList({fileId:this.fileId}).then(res=>{
 					console.log('相关课程详情',res);
 					if(res['success']){
 						this.relatedCoursesLists =  res['data']['data'];
 					}
 				})
+			},
+			// 秒转时分秒格式
+			secondsTransferPipe(value){
+				return dataHandling.secondsTransferPipe(value)
+			},
+			// 购买
+			buy(){
+				uni.navigateTo({
+					url:`/pages/orderConfirm/orderConfirm?fileId=${this.fileId}`
+				})
 			}
+			
+		
 		},
 		mounted(){
-			this.switchTab(this.tabType)
+			this.switchTab(1)
 		},
 		onLoad(option){
 			this.fileId = option.fileId;
@@ -217,12 +245,44 @@
 					white-space: pre-wrap;
 					width: 100%;
 					box-sizing: border-box;
-					p{
-						width: auto !important;
-					}
 				}
 				  
 			}
+			.courseIntroContent,.relationCourseListsContent{
+				padding: 0 28rpx;
+				background-color: #fff;
+				white-space: pre-wrap;
+				width: 100%;
+				box-sizing: border-box;
+			}
+			.relationCourseListsContent{
+				.totalCourseCount{
+					color: #20269B;
+					font-size: 1rem;
+					padding: 0.1875rem 0;
+					border: 1px solid #fbfbfb;
+					border-left: none;
+					border-right: none;
+				}
+				.courseItemContent{
+					padding: 16rpx 0;
+					border-bottom: 1px solid #fbfbfb;
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					.courseInfoContent{
+						h4{
+							color: #666;
+						}
+						.timeContent{
+							color: #999;
+							padding-left: 28rpx;
+							
+						}
+					}
+				}
+				
+			}
 			.buyBox{
 				position: fixed;
 				bottom: 0;

pages/orderConfirm/orderConfirm.vue

 <template>
-	<view>
-		
+	<view class="container">
+		<view class="courseInfoContent">
+			<view class="thumbnailBox">
+				<img :src="courseInfoItem.displayImage" alt="">
+			</view>
+			<view class="courseDetailBox">
+				<h4>{{courseInfoItem.fileTitle}}</h4>
+				<view class="summaryBox">
+					<text>{{courseInfoItem.fileSynopsis}}</text>
+				</view>
+				<view class="dataBox">
+					<strong>￥{{courseInfoItem.coursePrice}}</strong>
+					<text>{{courseInfoItem.salesNumber}}人购买</text>
+				</view>
+				<view class="tagListBox">
+					<view class="tagItem">{{courseInfoItem.fileLecturerName}}</view>
+					<view class="tagItem">{{courseInfoItem.fileLecturerRanks}}</view>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script>
+	import api from "@/api/api";
 	export default {
 		data() {
 			return {
-				
+				courseInfoItem:{},
+				fileId:null
 			}
 		},
 		methods: {
+			// 课程详情页面
+			courseDetail(){
+				api.courseDetail({fileId:this.fileId}).then(res=>{
+					console.log('课程详情',res);
+					if(res['success']){
+						this.courseInfoItem =  res['data']['data'];
+					}
+				})
+			},
+		},
+		onLoad(option){
+			console.log(option)
+			this.fileId = option.fileId;
 			
+		},
+		mounted() {
+			this.courseDetail();
 		}
 	}
 </script>
 
-<style>
-
+<style lang="scss">
+	.courseInfoContent{
+		display: flex;
+		align-items: center;
+		background-color: #fff;
+		border-radius: 20rpx;
+		margin-bottom: 10rpx;
+		padding: 10rpx;
+		.thumbnailBox{
+			width: 200rpx;
+			height: 200rpx;
+			background-color: #888;
+			margin-right: 26rpx;
+			img{
+				max-width: 100%;
+				height: auto;
+			}
+		}
+		.courseDetailBox{
+			width: 100%;
+			color: #333;
+			h4{
+				font-size: 32rpx;
+			}
+			.summaryBox{
+				font-size: 24rpx;
+				margin: 10rpx 0;
+				text{
+					margin-right: 20rpx;
+				}
+			}
+			.dataBox{
+				strong{
+					color: #F15A1F;
+					font-size: 30rpx;
+					margin-right: 20rpx;
+				}
+				text{
+					font-size: 28rpx;
+				}
+			}
+			.tagListBox{
+				display: flex;
+				.tagItem{
+					color: #20279B;
+					font-size: 28rpx;
+					border-radius: 20rpx;
+					border-top-left-radius: 0;
+					border-bottom-right-radius: 0;
+					padding: 10rpx 18rpx;
+					border: 1px solid #20279B;
+					margin-right: 20rpx;
+				}
+			}
+		}
+	}
 </style>

util/dataHandling.ts

@@ -24,5 +24,12 @@ export default{
 	    return intPartFormat + '.' + floatPart
 	  }
 	  return intPartFormat + floatPart	
+	},
+	// 秒转换成时分秒
+	secondsTransferPipe(value:number){
+		   const h = Math.floor(value / 3600) > 0 ? Math.floor(value / 3600) : '00';
+		  const m = Math.floor(value % 3600 / 60) > 0 ? Math.floor(value % 3600 / 60) : '00';
+		  const s = Math.floor(value % 60) > 0 ? Math.floor(value % 60) : '00';
+		  return h + ':' + m + ':' + s;
 	}
 }
\ No newline at end of file