Skip to content

E
educationStu
Commit 5bb6ec6e authored by 黄奎's avatar 黄奎
Browse files
Options

页面更新

parent 5837f8f9
Show whitespace changes
Inline Side-by-side
Showing with 441 additions and 421 deletions
src/components/question/listen.vue
View file @ 5bb6ec6e
......@@ -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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment