视频答题基础功能效果

components/s-video/s-video.vue

@@ -0,0 +1,88 @@
+<template>
+	<view class="video-wrapper" id="video-container">
+		<view style="position: relative;width: 414px; height: 300px;">
+			<video :src="videoObjTmp.url" @ended="videoEnded()" :autoplay="auto" style="width: 414px;height: 300px;"></video>
+			<view class="question"></view>
+
+			<view class="popup-layer-back" v-show="question">
+				<view class="popup-layer-close" @click="question=false">关闭</view>
+				<view class="popup-layer">
+					<h2>答案填充</h2>
+					<p @click="nextQuestion()">答题后跳转下一视频</p>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "s-video",
+		data() {
+			return {
+				videoObj: {
+					url: "/static/videos/video1/video1.mp4",
+					childen: {
+						url: "/static/videos/video2/video2.mp4",
+						childen: {
+							url: "/static/videos/video3/video3.mp4"
+						}
+					}
+				},
+				videoObjTmp: {},
+				videoUrl: "",
+				auto: true,
+				question: false,
+			};
+		},
+		created() {
+			this.initVideo();
+		},
+		methods: {
+			initVideo() {
+				this.videoObjTmp = this.videoObj;
+			},
+			videoEnded() {
+				this.auto = false;
+				this.question = true;
+			},
+			nextQuestion() {
+				this.videoObjTmp = this.videoObjTmp.childen;
+				this.question = false;
+				this.auto = true;
+			}
+		}
+	}
+</script>
+
+<style>
+	/* 首先设置背景层 */
+	.popup-layer-back {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: rgba(0, 0, 0, 0.5);
+		z-index: 9998;
+	}
+
+	/* 然后设置弹出层 */
+	.popup-layer {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		background-color: #fff;
+		padding: 20px;
+		z-index: 9999;
+	}
+
+	/* 设置关闭按钮 */
+	.popup-layer-close {
+		position: absolute;
+		top: 5px;
+		right: 5px;
+		cursor: pointer;
+	}
+</style>

components/tabbar/tabbar.vue

@@ -52,11 +52,11 @@ export default {
 			// "pageIndex":"" //页面路径
 			//         }]
 			this.listTabbar();
-	},methods: {
+		},
+		methods: {
 			listTabbar() {
 				this.$api.listTabbar({})
 					.then(res => {
-					console.log(res)
 						for (var i = 0; i < res.data.length; i++) {
 							if (res.data[i].hide == 1) {
 								this.tabBarList.push({
@@ -126,5 +126,4 @@ export default {
 		@extend .Text;
 		color: #d81e06;
 	}
- 
 </style>

pages/index/index.vue

@@ -44,7 +44,7 @@
 		},
 		onLoad() {
 			this.getSwiperList();
-			this.checkLogin()
+			// this.checkLogin()
 		},
 		onShow() {
 			this.page= "home"

pages/scan/scan.vue

@@ -2,6 +2,7 @@
 	<view>
 		<view class="video-wrapper" id="video-container">
 		</view>
+		<sVideo></sVideo>
 
 		<tabbar :page="page"></tabbar>
 	</view>
@@ -9,6 +10,7 @@
 
 <script>
 	import tabbar from "@/components/tabbar/tabbar.vue";
+	import sVideo from "@/components/s-video/s-video.vue";
 	export default {
 
 		data() {
@@ -24,18 +26,21 @@
 		},
 		methods: {
 			QR() {
-				uni.scanCode({
-				onlyFromCamera: true,
-				success: (res) => {
-					console.log('扫描二维码成功,结果:' + res.result);
-				},
-				error: (res) => {
-					console.log('扫描二维码出现错误')
-				}
-			 })
+				// uni.scanCode({
+				// 	onlyFromCamera: true,
+				// 	success: (res) => {
+				// 		console.log('扫描二维码成功,结果:' + res.result);
+				// 	},
+				// 	error: (res) => {
+				// 		console.log('扫描二维码出现错误')
+				// 	}
+				// })
 			},
 		},
-		components: {tabbar}
+		components: {
+			tabbar,
+			sVideo
+		}
 	}
 </script>