视频答题基础功能效果

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

@@ -8,7 +8,7 @@
 						<image v-else class="img" :src="item.selectIconPath"></image>
 					</view>
 					<view class="menuName">
-						<text :class="item.type==selectIndex?'TextColor':'Text'" >{{item.tabbarName}}</text>
+						<text :class="item.type==selectIndex?'TextColor':'Text'">{{item.tabbarName}}</text>
 					</view>
 				</view>
 			</view>
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-export default {
+	export default {
 		props: {
 			page: {
 				type: String,
@@ -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({
@@ -73,15 +73,15 @@ export default {
 			//进入tabble页
 			goPages(pageIndex) {
 				uni.switchTab({
-				url:"/"+pageIndex
+					url: "/" + pageIndex
 				})
 			},
 
 		},
-}
+	}
 </script>
 <style lang="scss">
-.tab_bar {
+	.tab_bar {
 		width: 100vw;
 		height: 120rpx;
 		position: fixed;
@@ -90,41 +90,40 @@ export default {
 		backdrop-filter: blur(10px);
 		border-radius: 60rpx;
 
-.tabbarBox {
+		.tabbarBox {
 			display: flex;
 			margin-top: 10rpx;
 			justify-content: space-evenly;
 
 
-.handleBox {
+			.handleBox {
 				width: 20vw;
 				height: 110rpx;
 
 
-.menuBox {
+				.menuBox {
 					padding: 0rpx 20rpx;
 					width: 120rpx;
 					height: 98%;
 					text-align: center;
 
-.img {
+					.img {
 						width: 50rpx;
 						height: 50rpx;
 					}
-}
 				}
-}
+			}
+		}
 	}
 
-.Text {
+	.Text {
 		font-size: 24rpx;
 		font-family: Cochin, serif;
 		font-weight: 900;
-}
+	}
 
-.TextColor {
+	.TextColor {
 		@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() {
@@ -16,26 +18,29 @@
 				page: "",
 			};
 		},
-		onReady(){
+		onReady() {
 			this.QR();
 		},
 		onShow() {
-			this.page= "scan"
+			this.page = "scan"
 		},
-		methods:{
+		methods: {
 			QR() {
-				uni.scanCode({
+				// uni.scanCode({
-				onlyFromCamera: true,
+				// 	onlyFromCamera: true,
-				success: (res) => {
+				// 	success: (res) => {
-					console.log('扫描二维码成功,结果:' + res.result);
+				// 		console.log('扫描二维码成功,结果:' + res.result);
-				},
+				// 	},
-				error: (res) => {
+				// 	error: (res) => {
-					console.log('扫描二维码出现错误')
+				// 		console.log('扫描二维码出现错误')
-				}
+				// 	}
-			 })
+				// })
 			},
 		},
-		components: {tabbar}
+		components: {
+			tabbar,
+			sVideo
+		}
 	}
 </script>