页面更新

src/components/question/listen.vue

@@ -7,35 +7,40 @@
 					<van-icon name="cross" size="40rpx" @click="goBack()" />
 				</template>
 				<template #title>
-					<text class="Exam_Current">{{current+1}}</text><text class="Exam_Count">/{{Count}}</text>
+					<text class="Exam_Current">{{ current + 1 }}</text>
+					<text class="Exam_Count">/{{ Count }}</text>
 				</template>
 			</van-nav-bar>
-			<swiper class="swiper-box" :style="{height: `calc(100vh - 180rpx)`}" :current="current" @change="onchange">
+			<swiper class="swiper-box" :style="{ height: `calc(100vh - 180rpx)` }" :current="current" @change="onchange">
 				<swiper-item v-for="(item1, index1) in dataList" :key="index1">
 					<view class="My_listen" @click="play(item1.Src)">
 						<i class="icon_audio_default" v-if="!isPlay"></i>
 						<i class="icon_audio_playing" v-else></i>
 					</view>
+					<view class="showtime">
+						<view class="">当前时长:{{ currentTime }}s /</view>
+						<view class="">总时长:{{ duration }}s</view>
+					</view>
 					<view class="item1" :style="{ height: `calc(100vh - 480rpx)` }">
-						<template v-if="item1.StudentAnswer.length<item1.QuestionContentObj.length">
+						<template v-if="item1.StudentAnswer.length < item1.QuestionContentObj.length">
 							<view class="questionView">
 								<view v-for="(item2, index2) in item1.QuestionContentObj" :key="index2" class="item2">
 									<view class="flex questionTitle">
-										<view>{{ index2 + 1 }}、({{item2.QuestionName.slice(0, 2)}})</view>
+										<view>{{ index2 + 1 }}、({{ item2.QuestionName.slice(0, 2) }})</view>
 										<view v-html="item2.SubTitle"></view>
 									</view>
 									<view v-for="(item3, index3) in item2.SubAnwser" :key="index3">
 										<!-- 单选 、判断-->
-										<view class="flex flex_start_center item3"
-											v-if="item2.QuestionKey === 'single'">
-											<view class="chooseNum"
-												:class="{ 'myAnswer': item1.StudentAnswer[index2]==item3.Name }"
-												@click="singerChange(item1, index2, item3)">{{ item3.Name }}
-											</view>
-											<view class="chooseName"
-												:class="{ 'myAnswer': item1.StudentAnswer[index2]==item3.Name }"
-												@click="singerChange(item1, index2, item3)" v-html="item3.Content">
+										<view class="flex flex_start_center item3" v-if="item2.QuestionKey === 'single'">
+											<view class="chooseNum" :class="{ myAnswer: item1.StudentAnswer[index2] == item3.Name }" @click="singerChange(item1, index2, item3)">
+												{{ item3.Name }}
 											</view>
+											<view
+												class="chooseName"
+												:class="{ myAnswer: item1.StudentAnswer[index2] == item3.Name }"
+												@click="singerChange(item1, index2, item3)"
+												v-html="item3.Content"
+											></view>
 										</view>
 									</view>
 								</view>
@@ -45,37 +50,34 @@
 							<view class="questionView">
 								<view v-for="(item2, index2) in item1.QuestionContentObj" :key="index2" class="item2">
 									<view class="flex questionTitle">
-										<view>{{ index2 + 1 }}、({{item2.QuestionName.slice(0, 2)}})</view>
+										<view>{{ index2 + 1 }}、({{ item2.QuestionName.slice(0, 2) }})</view>
 										<view v-html="item2.SubTitle"></view>
 									</view>
 									<view v-for="(item3, index3) in item2.SubAnwser" :key="index3">
 										<!-- 单选 、判断-->
-										<view class="flex flex_start_center item3"
-											v-if="item2.QuestionKey === 'single'">
-											<view class="chooseNum"
-												:class="{ 'isRightAnswer': item3.IsAnswer,'isNotRightAnswer':getErrorAnswer(item1,index2,item3.Name)}">
+										<view class="flex flex_start_center item3" v-if="item2.QuestionKey === 'single'">
+											<view class="chooseNum" :class="{ isRightAnswer: item3.IsAnswer, isNotRightAnswer: getErrorAnswer(item1, index2, item3.Name) }">
 												{{ item3.Name }}
 											</view>
-											<view class="chooseName"
-												:class="{ 'isRightText': item3.IsAnswer,'isNotAnswer':getErrorAnswer(item1,index2,item3.Name)}"
-												v-html="item3.Content"></view>
+											<view
+												class="chooseName"
+												:class="{ isRightText: item3.IsAnswer, isNotAnswer: getErrorAnswer(item1, index2, item3.Name) }"
+												v-html="item3.Content"
+											></view>
 										</view>
 									</view>
 									<view class="AnswerContent">
 										<view>
 											<text style="color: #8c8a94">正确答案：</text>
-											<text class="isTrueAnswer">{{item1.QuestionAnswerList[index2]}}</text>，
+											<text class="isTrueAnswer">{{ item1.QuestionAnswerList[index2] }}</text>
+											，
 											<text>
 												您的答案：
-												<template v-if="item1.StudentAnswer.length>0">
-													<text
-														v-if="item1.StudentAnswer[index2] == item1.QuestionAnswerList[index2]"
-														class="isTrueAnswer">
+												<template v-if="item1.StudentAnswer.length > 0">
+													<text v-if="item1.StudentAnswer[index2] == item1.QuestionAnswerList[index2]" class="isTrueAnswer">
 														{{ item1.StudentAnswer[index2] }}，回答正确
 													</text>
-													<text v-else class="isNotAnswer">
-														{{ item1.StudentAnswer[index2] }}，回答错误
-													</text>
+													<text v-else class="isNotAnswer">{{ item1.StudentAnswer[index2] }}，回答错误</text>
 												</template>
 												<template v-else>
 													<text class="isNotAnswer">未回答</text>
@@ -84,8 +86,7 @@
 										</view>
 									</view>
 								</view>
-								<view style="word-wrap: break-word; margin-bottom:30rpx;display: flex;"
-									class="AnswerContent" v-if="item1.AnswerParse">
+								<view style="word-wrap: break-word; margin-bottom:30rpx;display: flex;" class="AnswerContent" v-if="item1.AnswerParse">
 									<text style="color: #8c8a94;flex-shrink: 0;">解析：</text>
 									<view style="color: #000" v-html="item1.AnswerParse"></view>
 								</view>
@@ -93,9 +94,10 @@
 						</template>
 					</view>
 					<view class="AnswerBtn clear" style="display:none">
-						<view class="AnswerBtnFirst" @click="getBeforeExam()" v-if="current!=0">上一题</view>
-						<view class="AnswerBtnSecond" :class="{'isCanNext':item1.StudentAnswer.length==0}"
-							v-if="current!=dataList.length" @click="getNextExam(item1)">下一题</view>
+						<view class="AnswerBtnFirst" @click="getBeforeExam()" v-if="current != 0">上一题</view>
+						<view class="AnswerBtnSecond" :class="{ isCanNext: item1.StudentAnswer.length == 0 }" v-if="current != dataList.length" @click="getNextExam(item1)">
+							下一题
+						</view>
 					</view>
 				</swiper-item>
 			</swiper>
@@ -104,25 +106,13 @@
 </template>
 
 <script>
-	import {
-		ref,
-		reactive,
-		toRefs,
-		toRef,
-		getCurrentInstance,
-		watch,
-		computed,
-		onMounted,
-		onUnmounted,
-	} from "vue";
-	const innerAudioContext = uni.createInnerAudioContext();
-	innerAudioContext.autoplay = false;
-	const bgAudioManager = uni.getBackgroundAudioManager();
-	import {
-		SetStudentPractice
-	} from "../../api/exam";
-
-	export default {
+import { ref, reactive, toRefs, toRef, getCurrentInstance, watch, computed, onMounted, onUnmounted } from 'vue';
+const innerAudioContext = uni.createInnerAudioContext();
+innerAudioContext.autoplay = false;
+const bgAudioManager = uni.getBackgroundAudioManager();
+import { SetStudentPractice } from '../../api/exam';
+
+export default {
 	props: {
 		paperData: Array,
 		Count: Number,
@@ -130,34 +120,43 @@
 		StartIndex: Number
 	},
 	setup(props, context) {
-			let {
-				refs
-			} = getCurrentInstance();
+		let { refs } = getCurrentInstance();
 		console.log(163, refs);
 		let data = reactive({
 			dataList: props.paperData,
 			current: 0, //默认从第几个开始-用于从快捷菜单点入
 			statusBarHeight: 0,
 			audioAction: {
-					method: "pause"
+				method: 'pause'
 			},
 			isIOS: false,
-				isPlay: false
+			isPlay: false,
+			currentTime: 0,
+			duration: 0
 		});
 		let UserInfo = uni.getStorageSync('userInfo');
 		let sys = uni.getSystemInfoSync().system;
-			watch(() => [...props.paperData], (val) => {
+		watch(
+			() => [...props.paperData],
+			val => {
 				data.dataList = [...data.dataList, ...val];
-			})
+			}
+		);
 		// watch(()=>props.StartIndex,(val)=>{
 		// 	if(val>-1){
 		// 		data.current=val;
 		// 	}
 		// })
-		    watch(()=>data.current, (newVal, oldValue) => {
+		watch(
+			() => data.current,
+			(newVal, oldValue) => {
 				innerAudioContext.stop();
-				data.isPlay=false;
-			},{deep:true});
+				data.isPlay = false;
+				innerAudioContext.src = data.dataList[newVal].Src;
+				data.duration = innerAudioContext.duration.toFixed(0);
+			},
+			{ deep: true }
+		);
 		let methods = {
 			//阻止手动滑动
 			stopTouchMove() {
@@ -165,7 +164,7 @@
 			},
 			jumpPage() {
 				uni.navigateTo({
-						url: "/pages/exam/examPaper",
+					url: '/pages/exam/examPaper'
 				});
 			},
 			goBack() {
@@ -181,14 +180,16 @@
 			},
 			getErrorAnswer(item1, index, name) {
 				if (item1.StudentAnswer[index] == name) {
-						return true
+					return true;
 				} else {
-						return false
+					return false;
 				}
 			},
-
 			onchange(e) {
+				data.currentTime = 0;
+				data.duration = 0;
 				data.current = e.detail.current;
+				data.isPlay = false;
 				if (data.current + 1 == data.dataList.length) {
 					this.$emit('getAfter');
 				}
@@ -199,19 +200,30 @@
 					data.isPlay = false;
 				} else {
 					innerAudioContext.src = Src;
-						innerAudioContext.play()
+					innerAudioContext.play();
 					data.isPlay = true;
-						innerAudioContext.onEnded((e) => {
+					innerAudioContext.onEnded(e => {
 						data.isPlay = false;
-						})
+					});
+					const time = setInterval(() => {
+						data.currentTime = innerAudioContext.currentTime.toFixed(0); //当前播放位置
+						data.duration = innerAudioContext.duration.toFixed(0); //音频总长度
+						if (!data.isPlay) {
+							clearInterval(time);
+						}
+					}, 500);
 				}
 			},
 			//点击上一题
 			getBeforeExam() {
 				data.current = data.current - 1;
+				data.currentTime = 0;
+				data.duration = 0;
 			},
 			//点击下一题
 			getNextExam(item) {
+				data.currentTime = 0;
+				data.duration = 0;
 				let msg = {
 					Id: 0,
 					StudentId: UserInfo.AccountId,
@@ -228,61 +240,69 @@
 					IsAnswer: 0,
 					IsWrong: 0,
 					Times: props.Times
-					}
+				};
 				if (data.dataList[data.current].StudentAnswer.length > 0) {
 					msg.IsAnswer = 1;
 				} else {
 					msg.IsAnswer = 0;
 				}
-					if (data.dataList[data.current].StudentAnswer.length == data.dataList[data.current]
-						.QuestionAnswerList.length) {
-						if (data.dataList[data.current].StudentAnswer.toString() == data.dataList[data.current]
-							.QuestionAnswerList.toString()) {
-							msg.IsWrong = 0
+				if (data.dataList[data.current].StudentAnswer.length == data.dataList[data.current].QuestionAnswerList.length) {
+					if (data.dataList[data.current].StudentAnswer.toString() == data.dataList[data.current].QuestionAnswerList.toString()) {
+						msg.IsWrong = 0;
 					} else {
-							msg.IsWrong = 1
+						msg.IsWrong = 1;
 					}
 				}
 				let res = SetStudentPractice(msg).then(res => {
 					if (res) {
 						if (res.Code == 1) {
-
 						}
 					}
 				});
-					if(msg.IsWrong == 0){
+				if (msg.IsWrong == 0) {
 					data.current = data.current + 1;
 					innerAudioContext.stop();
 					data.isPlay = false;
 				}
-				},
+			}
 		};
 		onMounted(() => {
 			data.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
 		});
 		onUnmounted(() => {
+			data.currentTime = 0;
+			data.duration = 0;
 			innerAudioContext.stop();
 			data.isPlay = true;
 		});
 		let that = methods;
 		return {
 			...toRefs(data),
-				...methods,
-			};
-		},
+			...methods
 		};
+	}
+};
 </script>
 <style scoped>
-	.AnswerBtn {
+swiper-item {
+	overflow-y: scroll;
+}
+.showtime {
+	height: 30px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+.AnswerBtn {
 	margin-top: 38rpx;
 	/* position: absolute; */
-	}
+}
 
-	.clear {
+.clear {
 	clear: both;
-	}
+}
 
-	.AnswerBtnFirst {
+.AnswerBtnFirst {
 	width: 250rpx;
 	height: 60rpx;
 	text-align: center;
@@ -291,9 +311,9 @@
 	border: 1px solid #00acf9;
 	color: #00acf9;
 	float: left;
-	}
+}
 
-	.AnswerBtnSecond {
+.AnswerBtnSecond {
 	width: 250rpx;
 	height: 60rpx;
 	text-align: center;
@@ -302,9 +322,9 @@
 	background-color: #00acf9;
 	color: #fff;
 	float: right;
-	}
+}
 
-	.name {
+.name {
 	height: 90rpx;
 	font-size: 30rpx;
 	font-family: PingFang SC;
@@ -313,64 +333,64 @@
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	}
+}
 
-	.isRightAnswer {
+.isRightAnswer {
 	background-color: green !important;
 	color: #fff !important;
-	}
+}
 
-	.isRightText {
+.isRightText {
 	color: green !important;
-	}
+}
 
-	.isTrueAnswer {
+.isTrueAnswer {
 	color: green !important;
-	}
+}
 
-	.isNotRightAnswer {
+.isNotRightAnswer {
 	background-color: red;
 	color: #fff !important;
-	}
+}
 
-	.isNotAnswer {
+.isNotAnswer {
 	color: red;
-	}
+}
 
-	.AnswerContent {
+.AnswerContent {
 	font-size: 30rpx;
 	padding: 25rpx;
 	background-color: #f4f4f4;
 	border-radius: 5px;
-	}
+}
 
-	.swiper-box {
+.swiper-box {
 	box-sizing: border-box;
 	position: relative;
-	}
+}
 
-	.num {
+.num {
 	font-size: 30rpx;
 	font-family: PingFang SC;
 	color: #111111;
-	}
+}
 
-	.item {
+.item {
 	position: relative;
-	}
+}
 
-	.item1 {
+.item1 {
 	align-items: center;
-		overflow-y: auto;
+	/* overflow-y: auto; */
 	margin-top: 30rpx;
-	}
+}
 
-	.questionView {
+.questionView {
 	overflow-y: auto;
 	z-index: 999;
-	}
+}
 
-	.audioBox {
+.audioBox {
 	width: 120rpx;
 	height: 30rpx;
 	background: #b4ddfe;
@@ -380,25 +400,25 @@
 	font-family: PingFang SC;
 	font-weight: 500;
 	color: #00acf9;
-	}
+}
 
-	.item2 {
+.item2 {
 	box-sizing: border-box;
 	margin: 30rpx 0;
 	/* padding: 0 30rpx; */
-	}
+}
 
-	.item3 {
+.item3 {
 	padding-left: 25rpx;
 	margin: 20rpx 0;
-	}
+}
 
-	.myAnswer {
+.myAnswer {
 	background-color: #00acf9 !important;
 	color: #ffffff !important;
-	}
+}
 
-	.chooseNum {
+.chooseNum {
 	width: 50rpx;
 	height: 50rpx;
 	text-align: center;
@@ -410,52 +430,52 @@
 	font-family: PingFang SC;
 	font-weight: bold;
 	color: #111111;
-	}
+}
 
-	.chooseName {
+.chooseName {
 	font-size: 30rpx;
 	font-family: PingFang SC;
 	font-weight: 500;
 	color: #111111;
-	}
+}
 
-	.chooseName2 {
+.chooseName2 {
 	flex-grow: 1;
 	border-bottom: 1px solid #111;
-	}
+}
 
-	.questionTitle {
+.questionTitle {
 	font-size: 28rpx;
 	font-family: PingFang SC;
 	font-weight: bold;
 	color: #111111;
-	}
+}
 
-	.listen .van-count-down {
+.listen .van-count-down {
 	font-size: 22rpx !important;
 	color: #00acf9 !important;
-	}
+}
 
-	.Exam_Current {
+.Exam_Current {
 	font-size: 35rpx;
 	color: red;
-	}
+}
 
-	.Exam_Count {
+.Exam_Count {
 	color: gray;
 	font-size: 26rpx;
-	}
+}
 
-	.Exam_Score {
+.Exam_Score {
 	color: #999999;
 	font-size: 28rpx;
-	}
+}
 
-	.isCanNext {
+.isCanNext {
 	background-color: gray !important;
-	}
+}
 
-	.icon_audio_default {
+.icon_audio_default {
 	background: transparent url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/iconloop.png') no-repeat 0 0;
 	width: 18px;
 	height: 25px;
@@ -464,9 +484,9 @@
 	-webkit-background-size: 54px 25px;
 	background-size: 54px 25px;
 	background-position: -36px center;
-	}
+}
 
-	.icon_audio_playing {
+.icon_audio_playing {
 	background: transparent url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/iconloop.png') no-repeat 0 0;
 	width: 18px;
 	height: 25px;
@@ -476,9 +496,9 @@
 	background-size: 54px 25px;
 	-webkit-animation: audio_playing 1s infinite;
 	background-position: 0px center;
-	}
+}
 
-	@-webkit-keyframes audio_playing {
+@-webkit-keyframes audio_playing {
 	30% {
 		background-position: 0px center;
 	}
@@ -498,16 +518,16 @@
 	100% {
 		background-position: -36px center;
 	}
-	}
+}
 
-	.My_listen {
+.My_listen {
 	width: 150rpx;
 	height: 150rpx;
-		background-color: #E4E5FB;
+	background-color: #e4e5fb;
 	border-radius: 50%;
 	margin: 0 auto 30rpx;
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	}
+}
 </style>