Merge branch 'master' of https://git.banshouhui.com/lijundan/self-support

src/pages/learn/course-detail.vue

-<template>
-	<view>
-		<view class="uni-padding-wrap uni-common-mt">
-			<view><video object-fit="cover" class="course-video" id="courseVideo" :src="courseSrc" @error="videoErrorCallback" controls></video></view>
-			<uni-group>
-				<view class="course-title">{{ courseTitle }}</view>
-				<view class="course-desc">{{ courseDesc }}</view>
-			</uni-group>
-		</view>
-	</view>
-</template>
-
-<script>
-let app = getApp();
-export default {
-	data() {
-		return {
-			courseId: '',
-			courseStatus: 0,
-			courseSrc: '',
-			courseTitle: '',
-			courseDesc: '',
-		};
-	},
-	onLoad(e) {
-		if (e) {
-			if(e.courseId) {
-				this.courseId = e.courseId;
-			}
-			if(e.id) {
-				this.courseId = e.courseId;
-				this.courseSrc = app.globalData.service_standard[e.id].url;
-				this.courseTitle = app.globalData.service_standard[e.id].title;
-				this.courseDesc = app.globalData.service_standard[e.id].desc;
-				this.changeCourseStatus();
-			}
-			
-			if(e.status) {
-				this.courseStatus = e.status;
-			}
-		}
-	},
-	onReady: function(res) {
-		// #ifndef MP-ALIPAY
-		this.videoContext = uni.createVideoContext('courseVideo');
-		// #endif
-	},
-	methods: {
-		videoErrorCallback: function(e) {
-			uni.showModal({
-				content: e.target.errMsg,
-				showCancel: false
-			});
-		},
-		getRandomColor: function() {
-			const rgb = [];
-			for (let i = 0; i < 3; ++i) {
-				let color = Math.floor(Math.random() * 256).toString(16);
-				color = color.length == 1 ? '0' + color : color;
-				rgb.push(color);
-			}
-			return '#' + rgb.join('');
-		},
-		changeCourseStatus() {
-			let that = this
-			if(that.courseId) {
-				that.$u.api.saveCourseRate({courseId: that.courseId}).then(res => {
-					if(res.code == 200) {
-						// uni.navigateBack({delta: 1})
-						uni.navigateTo({
-							url: "/pages/learn/exam"
-						})
-					} else {
-						uni.showToast({
-							icon: "none",
-							title: "更新课程状态失败"
-						})
-					}
-				}).catch(e=> {
-					
-				})
-			} else {
-				uni.showToast({
-					title: "课程ID为空，请重新选择课程"
-				})
-			}
-		},
-	}
-};
-</script>
-
-<style lang="scss">
-.course-video {
-	width: 750rpx;
-}
-.course-title {
-	font-size: 36rpx;
-	font-weight: 700;
-	padding: 80rpx 60rpx 40rpx 60rpx;
-}
-.course-desc {
-	margin-left: 60rpx;
-}
+<template>
+	<view class="learn-vedio">
+		<view class="uni-padding-wrap uni-common-mt">
+			<view><video object-fit="cover" class="course-video" id="courseVideo" :src="courseSrc"
+					@error="videoErrorCallback" controls></video></view>
+			<view class="title-content">
+				<view class="item-content">
+					<view class="item-st">
+						<text class="item-st-text">{{courseTitle.split(' ') ? courseTitle.split(' ')[0] : ''}}</text>
+					</view>
+					<view class="item-title">{{courseTitle.split(' ') ? courseTitle.split(' ')[1] : ''}}</view>
+				</view>
+				<view>接单操作须知有助你快速了解充电桩安装业务，提高接单效率，请认真查看及学习。</view>
+			</view>
+			<view class="learn-view">
+				<view class="learn-view-title">内容大纲</view>
+				<view class="learn-list" v-for="(item, key) in courseOutline" :key="key">
+					<view class="learn-list-item">{{item}}</view>
+					<view class="line-view"></view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	let app = getApp();
+	export default {
+		data() {
+			return {
+				courseId: '',
+				courseStatus: 0,
+				courseSrc: '',
+				courseTitle: '',
+				courseDesc: '',
+				courseOutline: ['1 aaa', '2 bbb'] // 视频大纲
+			};
+		},
+		onLoad(e) {
+			if (e) {
+				if (e.courseId) {
+					this.courseId = e.courseId;
+				}
+				if (e.id) {
+					this.courseId = e.courseId;
+					this.courseSrc = app.globalData.service_standard[e.id].url;
+					this.courseTitle = app.globalData.service_standard[e.id].title;
+					this.courseDesc = app.globalData.service_standard[e.id].desc;
+					this.changeCourseStatus();
+				}
+
+				if (e.status) {
+					this.courseStatus = e.status;
+				}
+			}
+		},
+		onReady: function(res) {
+			// #ifndef MP-ALIPAY
+			this.videoContext = uni.createVideoContext('courseVideo');
+			// #endif
+		},
+		methods: {
+			videoErrorCallback: function(e) {
+				uni.showModal({
+					content: e.target.errMsg,
+					showCancel: false
+				});
+			},
+			getRandomColor: function() {
+				const rgb = [];
+				for (let i = 0; i < 3; ++i) {
+					let color = Math.floor(Math.random() * 256).toString(16);
+					color = color.length == 1 ? '0' + color : color;
+					rgb.push(color);
+				}
+				return '#' + rgb.join('');
+			},
+			changeCourseStatus() {
+				let that = this
+				if (that.courseId) {
+					that.$u.api.saveCourseRate({
+						courseId: that.courseId
+					}).then(res => {
+						if (res.code == 200) {
+							// uni.navigateBack({delta: 1})
+							uni.navigateTo({
+								url: "/pages/learn/exam"
+							})
+						} else {
+							uni.showToast({
+								icon: "none",
+								title: "更新课程状态失败"
+							})
+						}
+					}).catch(e => {
+
+					})
+				} else {
+					uni.showToast({
+						title: "课程ID为空，请重新选择课程"
+					})
+				}
+			},
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.learn-vedio {
+		background-color: #F4F5F7;
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.course-video {
+		width: 100%;
+	}
+
+	.course-title {
+		font-size: 36rpx;
+		font-weight: 700;
+		padding: 80rpx 60rpx 40rpx 60rpx;
+	}
+
+	.course-desc {
+		margin-left: 60rpx;
+	}
+
+	.title-content {
+		padding: 40rpx 30rpx;
+		margin-bottom: 20rpx;
+		background-color: #FFFFFF;
+		color: #999999;
+		font-size: 24rpx;
+
+		.item-content {
+			display: flex;
+		}
+
+		.item-st {
+			width: 80rpx;
+			height: 36rpx;
+			background-image: linear-gradient(to right, #FF930D, #FFC174);
+			font-size: 16rpx;
+			border-radius: 6rpx 36rpx 36rpx 6rpx;
+			padding-top: 8rpx;
+			padding-right: 2rpx;
+			text-align: center;
+			margin-right: 20rpx;
+
+			.item-st-text {
+				color: #FFFFFF;
+			}
+		}
+
+		.item-title {
+			color: #333333;
+			font-size: 28rpx;
+		}
+
+	}
+
+	.item-content {
+		display: flex;
+		padding-bottom: 30rpx;
+	}
+
+	.item-st {
+		width: 80rpx;
+		height: 36rpx;
+		background-image: linear-gradient(to right, #FF930D, #FFC174);
+		font-size: 16rpx;
+		border-radius: 6rpx 36rpx 36rpx 6rpx;
+		padding-top: 8rpx;
+		padding-right: 2rpx;
+		text-align: center;
+		margin-right: 20rpx;
+	}
+
+	.item-title {
+		color: #333333;
+		font-size: 28rpx;
+	}
+
+	.learn-view {
+		background-color: #FFFFFF;
+		border-radius: 12rpx;
+		padding: 38rpx 30rpx 30rpx 30rpx;
+		margin-bottom: 20rpx;
+		font-size: 32rpx;
+		color: #333333;
+
+.learn-view-title {
+	font-size: 32rpx;
+	font-weight: bold;
+	margin-bottom: 10rpx;
+}
+		.learn-list {
+		
+
+			.learn-list-item {
+				font: 24rpx;
+				margin-top: 30rpx;
+				margin-bottom: 30rpx;
+			}
+
+			.line-view {
+				background-color: #F4F5F7;
+				height: 2rpx;
+				width: 100%;
+			}
+		}
+	}
 </style>

src/pages/learn/exam.vue

@@ -130,7 +130,7 @@
 			buttonStyle() {
 				return {
 					'color': '#FFFFFF',
-					'width': '300rpx',
+					'width': '500rpx',
 					'height': '112rpx',
 					'background-color': '#2272FF',
 					'font-size': '32rpx',
@@ -292,7 +292,10 @@
 					padding-top: 8rpx;
 					padding-right: 2rpx;
 					text-align: center;
-					margin-right: 20rpx;
+					margin-right: 20rpx;
+					.item-st-text {
+						color: #FFFFFF;
+					}
 				}
 
 				.item-title {