视频答题提交

api/question.js

@@ -0,0 +1,10 @@
+import $http from '@/utils/http.js'
+
+/** 根据id获取绑定的题目json串 */
+export const getBindJson = (data) => {
+	return $http({
+    method: 'POST',
+		url: 'small/project/question/getBindJsonApp',
+		data
+	})
+}

components/s-video/s-video.vue

@@ -1,14 +1,24 @@
 <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 style="position: relative;width: 100%; height: 300px;">
+			<video :src="videoObj.videoUrl" @ended="videoEnded()" :autoplay="auto" style="width: 100%;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-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()">答题后跳转下一视频</p>
+					<p @click="nextQuestion(item.outs[0])" v-for="(item, index) in answerList">答题{{item.outs[0]}}后跳转下一视频</p>
+				</view>
+			</view>
+			<view class="popup-layer-back" v-if="start">
+				<view class="popup-layer" @click="nextQuestion(2)">
+					<p>开始</p>
+				</view>
+			</view>
+			<view class="popup-layer-back" v-if="end">
+				<view class="popup-layer" @click="getBindJson()">
+					<p>重新开始</p>
 				</view>
 			</view>
 		</view>
@@ -20,36 +30,69 @@
 		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: "",
+				videoObjList: [],
+				videoObj:{},
+				answerList: [],
+				start: true,
+				end: false,
 				auto: true,
 				question: false,
 			};
 		},
+		props:{
+			jsonId: {
+				type: String,
+				default: "",
+			}
+		},
 		created() {
-			this.initVideo();
+			this.getBindJson();
 		},
 		methods: {
-			initVideo() {
-				this.videoObjTmp = this.videoObj;
-			},
 			videoEnded() {
 				this.auto = false;
 				this.question = true;
+				// 出答案
+				if(this.videoObj.outs.length>0) {
+					for(var i=0; i<this.videoObj.outs.length; i++) {
+						this.getAnswer(this.videoObj.outs[i])
+					}
+				} else {
+					this.end = true;
+					this.answerList = [];
+					this.question = false;
+				}
 			},
-			nextQuestion() {
-				this.videoObjTmp = this.videoObjTmp.childen;
+			nextQuestion(outId) {
+				this.hasNodeId(outId);
+				this.videoObj.videoUrl = 'http://localhost:85/'+this.videoObj.videoUrl
+				this.start = false;
 				this.question = false;
 				this.auto = true;
+			},
+			getBindJson() {
+				this.start = true;
+				this.end = false;
+				this.videoObjList = [];
+				this.$api.getBindJson(this.jsonId)
+					.then(res => {
+						this.videoObjList.push(...res.data);
+						this.hasNodeId(1);
+					}).catch((e) => console.log(e)); //捕获异常
+			},
+			hasNodeId(nodeId) {
+				for(var i=0; i<this.videoObjList.length; i++) {
+					if(nodeId == this.videoObjList[i].nodeId) {
+						this.videoObj = this.videoObjList[i];
+					}
+				}
+			},
+			getAnswer(outId) {
+				for(var i=0; i<this.videoObjList.length; i++) {
+					if(outId == this.videoObjList[i].nodeId) {
+						this.answerList.push(this.videoObjList[i]);
+					}
+				}
 			}
 		}
 	}

pages/scan/scan.vue

@@ -2,7 +2,7 @@
 	<view>
 		<view class="video-wrapper" id="video-container">
 		</view>
-		<sVideo></sVideo>
+		<sVideo jsonId="6215c8757e8947c8aae0fd0b3d2d503b"></sVideo>
 
 		<tabbar :page="page"></tabbar>
 	</view>