视频答题基础功能效果

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

@@ -4,127 +4,126 @@
 			<view class="handleBox" v-for="(item,index) in tabBarList" :key="index">
 				<view class="menuBox" @click="goPages(item.pageIndex)">
 					<view class="menuIcon">
-						<image v-if="item.type!=selectIndex" class="img"                 :src="item.iconPath"></image>
+						<image v-if="item.type!=selectIndex" class="img" :src="item.iconPath"></image>
 						<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>
 		</view>
-		
+
 	</view>
 </template>
- 
+
 <script>
-export default {
+	export default {
-	props: {
+		props: {
-		page: {
+			page: {
-			type: String,
+				type: String,
-			default: "homeIndex"
+				default: "homeIndex"
-		}
+			}
-	},
+		},
-	watch: {
+		watch: {
-		page: {
+			page: {
-			handler(value) {
+				handler(value) {
-				this.selectIndex = value;
+					this.selectIndex = value;
-			},
+				},
-			immediate: true,
+				immediate: true,
-			deep: true
+				deep: true
-		}
+			}
-	},
+		},
-	data() {
+		data() {
-		return {
+			return {
-			selectIndex: "",
+				selectIndex: "",
-			tabBarList: [],
+				tabBarList: [],
-		}
+			}
-		
+
-	},
-	//uniapp子组件不支持应用生命周期，所以只能用vue生命周期
-	created() {
- 
-        //tabbar数据，这儿也支持后台定义通过接口获取数据
-    //     this.tabBarList = [{
-    // 			"tabbarName":"", //tababr名称
-				// "iconPath":"", //tabbar icon
-				// "selectIconPath":"", //tabbar 选择icon
-				// "pageIndex":"" //页面路径
-    //         }]
-	this.listTabbar();
-	},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({
-								"tabbarName": res.data[i].title, 
-								"iconPath": res.data[i].selectedIconPath, 
-								"selectIconPath": res.data[i].selectedIconPath,
-								"pageIndex": res.data[i].pagePath,
-								"type": res.data[i].type
-							});
-						}
-					}
-				}).catch((e) => console.log(e)); //捕获异常
 		},
-		//进入tabble页
+		//uniapp子组件不支持应用生命周期，所以只能用vue生命周期
-		goPages(pageIndex) {
+		created() {
-			uni.switchTab({
+
-				url:"/"+pageIndex
+			//tabbar数据，这儿也支持后台定义通过接口获取数据
-			})
+			//     this.tabBarList = [{
+			// 			"tabbarName":"", //tababr名称
+			// "iconPath":"", //tabbar icon
+			// "selectIconPath":"", //tabbar 选择icon
+			// "pageIndex":"" //页面路径
+			//         }]
+			this.listTabbar();
 		},
-		
+		methods: {
-	},
+			listTabbar() {
-}
+				this.$api.listTabbar({})
+					.then(res => {
+						for (var i = 0; i < res.data.length; i++) {
+							if (res.data[i].hide == 1) {
+								this.tabBarList.push({
+									"tabbarName": res.data[i].title,
+									"iconPath": res.data[i].selectedIconPath,
+									"selectIconPath": res.data[i].selectedIconPath,
+									"pageIndex": res.data[i].pagePath,
+									"type": res.data[i].type
+								});
+							}
+						}
+					}).catch((e) => console.log(e)); //捕获异常
+			},
+			//进入tabble页
+			goPages(pageIndex) {
+				uni.switchTab({
+					url: "/" + pageIndex
+				})
+			},
+
+		},
+	}
 </script>
 <style lang="scss">
-.tab_bar {
+	.tab_bar {
-	width: 100vw;
+		width: 100vw;
-	height: 120rpx;
+		height: 120rpx;
-	position: fixed;
+		position: fixed;
-	bottom: 30rpx;
+		bottom: 30rpx;
-	/* 模糊大小就是靠的blur这个函数中的数值大小 */
+		/* 模糊大小就是靠的blur这个函数中的数值大小 */
-	backdrop-filter: blur(10px);
+		backdrop-filter: blur(10px);
-	border-radius: 60rpx;
+		border-radius: 60rpx;
-		
+
-.tabbarBox {
+		.tabbarBox {
-	display: flex;
+			display: flex;
-	margin-top: 10rpx;
+			margin-top: 10rpx;
-	justify-content: space-evenly;
+			justify-content: space-evenly;
-	
+
-	
+
-.handleBox {
+			.handleBox {
-	width: 20vw;
+				width: 20vw;
-	height: 110rpx;
+				height: 110rpx;
-	
+
- 
+
-.menuBox {
+				.menuBox {
-	padding: 0rpx 20rpx;
+					padding: 0rpx 20rpx;
-	width: 120rpx;
+					width: 120rpx;
-	height: 98%;
+					height: 98%;
-	text-align: center;
+					text-align: center;
- 
+
-.img {
+					.img {
-	width: 50rpx;
+						width: 50rpx;
-	height: 50rpx;
+						height: 50rpx;
+					}
+				}
+			}
+		}
 	}
-}
+
+	.Text {
+		font-size: 24rpx;
+		font-family: Cochin, serif;
+		font-weight: 900;
 	}
-}
+
+	.TextColor {
+		@extend .Text;
+		color: #d81e06;
 	}
- 
-.Text {
-	font-size: 24rpx;
-	font-family: Cochin, serif;
-	font-weight: 900;
-}
- 
-.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,43 +2,48 @@
 	<view>
 		<view class="video-wrapper" id="video-container">
 		</view>
-		
+		<sVideo></sVideo>
+
 		<tabbar :page="page"></tabbar>
 	</view>
 </template>
 
 <script>
 	import tabbar from "@/components/tabbar/tabbar.vue";
+	import sVideo from "@/components/s-video/s-video.vue";
 	export default {
-		
+
 		data() {
 			return {
 				page: "",
 			};
 		},
-		onReady(){
+		onReady() {
 			this.QR();
 		},
 		onShow() {
-			this.page= "scan"
+			this.page = "scan"
 		},
-		methods:{
+		methods: {
-		    QR() {
+			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>
 
 <style lang="scss">
 
-</style>
+</style>