视频答题基础功能效果+视频竖全屏

api/question.js

@@ -7,4 +7,22 @@ export const getBindJson = (data) => {
 		url: 'small/project/question/getBindJsonApp',
 		data
 	})
+}
+
+/** 答题次 */
+export const addQuestionFre = (data) => {
+	return $http({
+    method: 'POST',
+		url: 'small/questionFre/add',
+		data
+	})
+}
+
+/** 答题 */
+export const addAnswer = (data) => {
+	return $http({
+    method: 'POST',
+		url: 'small/questionAnswer/add',
+		data
+	})
 }

components/s-video/s-video.vue

@@ -1,18 +1,18 @@
 <template>
 	<view class="video-wrapper" id="video-container">
-		<view style="position: relative;width: 100%; height: 300px;">
+		<view style="position:relative;width:100%;" :style="{'height':videoHeight+'px'}">
-			<video :src="videoObj.videoUrl" @ended="videoEnded()" :autoplay="auto" style="width: 100%;height: 300px;"></video>
+			<video id="video_play" :src="videoObj.videoUrl" @ended="videoEnded()" :autoplay="auto" style="width: 100%;height: 100%;"></video>
 			<view class="question"></view>
 
 			<view class="popup-layer-back" v-if="!start" v-show="question">
 				<!-- <view class="popup-layer-close" @click="question=false">关闭</view> -->
 				<view class="popup-layer">
 					<h2>答案填充</h2>
-					<p @click="nextQuestion(item.outs[0])" v-for="(item, index) in answerList">答题{{item.outs[0]}}后跳转下一视频</p>
+					<p @click="nextQuestion(item.outs[0], item)" v-for="(item, index) in answerList">答题{{item.channel}}后跳转下一视频</p>
 				</view>
 			</view>
 			<view class="popup-layer-back" v-if="start">
-				<view class="popup-layer" @click="nextQuestion(2)">
+				<view class="popup-layer" @click="nextQuestion(2, null)">
 					<p>开始</p>
 				</view>
 			</view>
@@ -30,6 +30,7 @@
 		name: "s-video",
 		data() {
 			return {
+				videoHeight: 300,
 				videoObjList: [],
 				videoObj:{},
 				answerList: [],
@@ -37,6 +38,8 @@
 				end: false,
 				auto: true,
 				question: false,
+				questionFreId: "",
+				preQuestionId: "",
 			};
 		},
 		props:{
@@ -46,6 +49,14 @@
 			}
 		},
 		created() {
+			uni.getSystemInfo({
+				success: (res) => {
+					this.videoHeight = res.screenHeight;
+				}
+			});
+			
+			this.videoContext = uni.createVideoContext("video_play");
+			this.videoContext.requestFullScreen();
 			this.getBindJson();
 		},
 		methods: {
@@ -63,7 +74,32 @@
 					this.question = false;
 				}
 			},
-			nextQuestion(outId) {
+			nextQuestion(outId, obj) {
+				// 点击开始后先增加题次
+				if(2==outId) {
+					this.$api.addQuestionFre({
+						roleId : "1",
+						userId : "123"
+					})
+						.then(res => {
+							this.questionFreId = res.data;
+							console.log(this.questionFreId);
+						}).catch((e) => console.log(e)); //捕获异常
+				}
+				
+				// 先提交所选答案
+				if(null!=obj) {
+					var param = {
+						answer : obj.channel,
+						questionFreId : this.questionFreId,
+						questionId : this.preQuestionId
+					}
+					this.$api.addAnswer(param)
+						.then(res => {
+							console.log(res);
+						}).catch((e) => console.log(e)); //捕获异常
+				}
+				// 播放下一视频
 				this.hasNodeId(outId);
 				this.videoObj.videoUrl = 'http://localhost:85/'+this.videoObj.videoUrl
 				this.start = false;
@@ -86,6 +122,7 @@
 						this.videoObj = this.videoObjList[i];
 					}
 				}
+				this.preQuestionId = this.videoObj.questionId;
 			},
 			getAnswer(outId) {
 				for(var i=0; i<this.videoObjList.length; i++) {

pages.json

@@ -37,7 +37,8 @@
 			"style": {
 				"navigationBarTitleText": "场景演练",
 				"navigationBarTextStyle": "black",
-				"enablePullDownRefresh": true
+				"enablePullDownRefresh": true,
+				"navigationStyle": "custom"
 			}
 		},
 		{

subpkg/list/list.vue

@@ -1,5 +1,7 @@
 <template>
-	<view>
+	<view class="scene-container">
+		<view class="secbar"> <span class="back" @click="back()"></span></view>
+		<view class="mainwrap3">
 		<!-- 轮播图 -->
 		<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
 			<swiper-item v-for="(item, i) in swiperList" :key="i">
@@ -25,7 +27,7 @@
 		    <image :src="item.uploadPath" class="nav-img"></image>
 		  </view>
 		</view>
-		
+		</view>
 	</view>
 </template>
 
@@ -94,14 +96,41 @@
 				  this.name = e
 				  this.getSceneList()
 				}, 500)
-			}
+			},
+			back(){
+				uni.navigateBack({
+					delta:1,//返回层数，2则上上页
+				})
+			},
 		}
 	}
 </script>
 
 <style lang="scss">
+	@import url("@/static/base_css.css");
+	.scene-container {
+		width: 100%;
+		height: 100%;	
+	}
+	.secbar {
+	    top: 0;
+	    z-index: 1;
+	}
+	.secbar ._span.back {
+	    top: 50px;
+	}
+	.mainwrap3 {
+		top: 0;
+		height: calc(100% - 70px);
+		overflow: hidden;
+	}
+	
    swiper {
-   	height: 330rpx;
+	   position: relative;
+	   top: 30px;
+	   margin: 0 3%;
+	   width: 94%;
+   	   height: 280rpx;
    
    	.swiper-item,
    	image {
@@ -113,17 +142,26 @@
    	}
    }
    .nav-list {
-     justify-content: space-around;
+	   position: relative;
-     margin: 12px 0;
+	   top: 50rpx;
+       justify-content: space-around;
+       margin: 2% 3%;
+	   width: 94%;
+	   height: 70%;
    
      .nav-img {
        width: 100%;
-       height: 140rpx;
+       height: 200rpx;
 	   margin-bottom: 10rpx;
 	   border-radius: 10px;
      }
    }
    
+   .search {
+	   position: relative;
+	   top: 70rpx;
+   }
+   
    .search-title{
    		font-family: 'Courier New', Courier, monospace;
    		color: #67676a;

subpkg/practice/practice.vue

@@ -2,7 +2,7 @@
 	<view>
 		<view class="video-wrapper" id="video-container">
 		</view>
-		<sVideo jsonId="6215c8757e8947c8aae0fd0b3d2d503b"></sVideo>
+		<sVideo :jsonId="jsonId"></sVideo>
 	</view>
 </template>
 
@@ -12,6 +12,8 @@
 
 		data() {
 			return {
+				page: "",
+				jsonId: "6215c8757e8947c8aae0fd0b3d2d503b",
 				roleId:"",
 			};
 		},

subpkg/role/role.vue

@@ -1,7 +1,7 @@
 <template>
 <view class="role-container">
 	<view class="wrap">
-	    <view class="secbar"> <span class="back" onclick="location='scene.html'"></span></view>
+	    <view class="secbar"> <span class="back" @click="back()"></span></view>
 	    <view class="mainwrap3"> 
 	      <img src="/static/images/bg_role.jpg" alt="" />
 	      <view class="role_wrap">
@@ -14,7 +14,7 @@
 	        <view class="more_role" @click="showMoreRole()"><a>更多角色</a></view>
 	      </view>
 	    
-	       <view class="startbtn"><image src="/static/images/btn_start.png"></image><a>开始演练</a></view> 
+	       <view class="startbtn"><image src="/static/images/btn_start.png" @click="startPractice()"></image><a>开始演练</a></view>
 	    </view>
 	  
 	      <view class="cnote">题目来源：深圳市******有限公司</view>  
@@ -93,7 +93,12 @@
 			  uni.navigateTo({
 			    url: '/subpkg/practice/practice?roleId='+item.guid
 			  })
-			}
+			},
+			back(){
+				uni.navigateBack({
+					delta:1,//返回层数，2则上上页
+				})
+			},
 		}
 	}
 </script>