Skip to content

E
educationStu
Commit 57abcfd9 authored by 罗超's avatar 罗超
Browse files
Options

1

parent f5f6467f
Show whitespace changes
Inline Side-by-side
Showing with 617 additions and 508 deletions
src/components/subject/ListenTopic.vue
View file @ 57abcfd9
......@@ -5,22 +5,39 @@
<view class="name">
<view>
{{ changeNumToHan(sortIndex) }}、{{ data.GroupName }}
<text class="Exam_Score">（共{{ data.DetailsList.length }}道,{{ data.GScore }}分）</text>
<text class="Exam_Score"
>（共{{ data.DetailsList.length }}道,{{ data.GScore }}分）</text
>
</view>
<view class="ExamIndex_Box">
<text class="Single_Before">{{ ExamIndex }}</text>/<text
class="Exam_Total">{{ data.DetailsList.length }}</text>
<text class="Single_Before">{{ ExamIndex }}</text
>/<text class="Exam_Total">{{ data.DetailsList.length }}</text>
</view>
</view>
<swiper class="swiper-box" :style="{
<swiper
class="swiper-box"
:style="{
height: `calc(100vh - 300rpx - ${statusBarHeight}px)`,
}" :autoplay="autoplay" :current="current" @change="onchange" :skip-hidden-item-layout="true">
}"
:autoplay="autoplay"
:current="current"
@change="onchange"
:skip-hidden-item-layout="true"
>
<swiper-item v-if="sortIndex != 1"></swiper-item>
<swiper-item v-for="(item1, index1) in data.DetailsList" :key="index1">
<audio style="text-align: left"
<audio
style="text-align: left"
poster="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png"
:src="item1.Src" name="日语听力" :action="audioAction" controls></audio>
<view class="item1" :style="{height: `calc(100vh - 540rpx - ${statusBarHeight}px)`}">
:src="item1.Src"
name="日语听力"
:action="audioAction"
controls
></audio>
<view
class="item1"
:style="{ height: `calc(100vh - 540rpx - ${statusBarHeight}px)` }"
>
<view class="flex flex_start_center">
<!-- <view
class="audioBox flex flex_center_center"
......@@ -41,76 +58,133 @@
</view> -->
</view>
<view class="questionView">
<view v-for="(item2, index2) in item1.QuestionContentObj" :key="index2" class="item2">
<view
v-for="(item2, index2) in item1.QuestionContentObj"
:key="index2"
class="item2"
>
<view class="flex questionTitle">
<view>{{ index2 + 1 }}、({{
<view
>{{ index2 + 1 }}、({{
item2.QuestionName.slice(0, 2)
}})</view>
}})</view
>
<view v-html="item2.SubTitle"></view>
<text class=".Exam_Score">（{{item1.Score}}）</text>
<text class=".Exam_Score">（{{ item1.Score }}）</text>
</view>
<view v-for="(item3, index3) in item2.SubAnwser" :key="index3">
<!-- 单选 、判断-->
<view class="flex flex_start_center item3" v-if="
<view
class="flex flex_start_center item3"
v-if="
item2.QuestionKey === 'single' ||
item2.QuestionKey === 'judge'
">
"
>
<template v-if="isOperate">
<view class="chooseNum" :class="{ myAnswer: item3.IsAnswer }"
@click="singerChange(item2, item3)">{{ item3.Name }}
<view
class="chooseNum"
:class="{ myAnswer: item3.IsAnswer }"
@click="singerChange(item2, item3)"
>{{ item3.Name }}
</view>
<view class="chooseName" @click="singerChange(item2, item3)"
v-html="item3.Content"></view>
<view
class="chooseName"
@click="singerChange(item2, item3)"
v-html="item3.Content"
></view>
</template>
<template v-else>
<view class="chooseNum" :class="{ isTrueAnswer: item3.IsAnswer }">
<view
class="chooseNum"
:class="{ isTrueAnswer: item3.IsAnswer }"
>
{{ item3.Name }}
</view>
<view class="chooseName" :class="{ isTrueAnswer: item3.IsAnswer }"
v-html="item3.Content"></view>
<view
class="chooseName"
:class="{ isTrueAnswer: item3.IsAnswer }"
v-html="item3.Content"
></view>
</template>
</view>
<!-- 多选 -->
<view class="flex flex_start_center item3" v-if="item2.QuestionKey === 'multiple'">
<view
class="flex flex_start_center item3"
v-if="item2.QuestionKey === 'multiple'"
>
<template v-if="isOperate">
<view class="chooseNum" :class="{ myAnswer: item3.IsAnswer }"
@click="multipleChange(item2, item3)">{{ item3.Name }}
<view
class="chooseNum"
:class="{ myAnswer: item3.IsAnswer }"
@click="multipleChange(item2, item3)"
>{{ item3.Name }}
</view>
<view class="chooseName" @click="multipleChange(item2, item3)"
v-html="item3.Content"></view>
<view
class="chooseName"
@click="multipleChange(item2, item3)"
v-html="item3.Content"
></view>
</template>
<template v-else>
<view class="chooseNum" :class="{ isTrueAnswer: item3.IsAnswer }">
<view
class="chooseNum"
:class="{ isTrueAnswer: item3.IsAnswer }"
>
{{ item3.Name }}
</view>
<view class="chooseName" :class="{ isTrueAnswer: item3.IsAnswer }"
v-html="item3.Content"></view>
<view
class="chooseName"
:class="{ isTrueAnswer: item3.IsAnswer }"
v-html="item3.Content"
></view>
</template>
</view>
<!-- 填空 -->
<view class="flex flex_start_center item3" v-if="item2.QuestionKey === 'fill-in'">
<view
class="flex flex_start_center item3"
v-if="item2.QuestionKey === 'fill-in'"
>
<view class="chooseNum">{{ index3 + 1 }} </view>
<template v-if="isOperate">
<input v-for="cItem in item2.SubAnwser" type="text" v-model="cItem.Content"
class="chooseName chooseName2" placeholder="请填写答案"
@input="AnswerChange(item2)" />
<input
v-for="cItem in item2.SubAnwser"
type="text"
v-model="cItem.Content"
class="chooseName chooseName2"
placeholder="请填写答案"
@input="AnswerChange(item2)"
/>
</template>
<template v-else>
<view v-for="cItem in item2.SubAnwser" class="viewAnswerContent"
v-html="cItem.Content"></view>
<view
v-for="cItem in item2.SubAnwser"
class="viewAnswerContent"
v-html="cItem.Content"
></view>
</template>
</view>
<!-- 简答 -->
<view class="flex flex_start_center item3"
v-if="item2.QuestionKey === 'short-answer'">
<view
class="flex flex_start_center item3"
v-if="item2.QuestionKey === 'short-answer'"
>
<template v-if="isOperate">
<textarea type="text" v-for="cItem in item2.SubAnwser"
v-model="cItem.Content" class="chooseName chooseName2"
placeholder="请填写答案" @input="AnswerChange(item2)" />
<textarea
type="text"
v-for="cItem in item2.SubAnwser"
v-model="cItem.Content"
class="chooseName chooseName2"
placeholder="请填写答案"
@input="AnswerChange(item2)"
/>
</template>
<template v-else>
<view v-for="cItem in item2.SubAnwser" class="viewAnswerContent"
v-html="cItem.Content"></view>
<view
v-for="cItem in item2.SubAnwser"
class="viewAnswerContent"
v-html="cItem.Content"
></view>
</template>
</view>
</view>
......@@ -120,11 +194,20 @@
<text style="color: #8c8a94">正确答案：</text>
<text class="isTrueAnswer">{{
item1.QuestionAnswerList[index2].SubAnswer
}}</text>，
}}</text
>，
<text>
您的答案：
<template v-if="item1.AnswerList[index2].SubAnswer!=''">
<text v-if="item1.QuestionAnswerList[index2].SubAnswer == item1.AnswerList[index2].SubAnswer"class="isTrueAnswer">
<template
v-if="item1.AnswerList[index2].SubAnswer != ''"
>
<text
v-if="
item1.QuestionAnswerList[index2].SubAnswer ==
item1.AnswerList[index2].SubAnswer
"
class="isTrueAnswer"
>
{{ item1.AnswerList[index2].SubAnswer }}，回答正确
</text>
<text v-else class="isNotAnswer">
......@@ -136,11 +219,19 @@
</template>
</text>
</view>
<view style="margin-top: 20rpx"
v-if="item1.AnswerList[index2].StudentScore!=''||item1.AnswerList[index2].StudentScore===0">
<view
style="margin-top: 20rpx"
v-if="
item1.AnswerList[index2].StudentScore != '' ||
item1.AnswerList[index2].StudentScore === 0
"
>
<text style="color: #8c8a94">您的得分：</text>
<text class="isTrueAnswer"
v-if="item1.AnswerList[index2].StudentScore > 0">{{ item1.AnswerList[index2].StudentScore }}</text>
<text
class="isTrueAnswer"
v-if="item1.AnswerList[index2].StudentScore > 0"
>{{ item1.AnswerList[index2].StudentScore }}</text
>
<text class="isNotAnswer" v-else>{{
item1.AnswerList[index2].StudentScore
}}</text>
......@@ -152,13 +243,26 @@
<view class="AnswerContent" v-if="!isOperate && item1.AnswerParse">
<view style="word-wrap: break-word">
<text style="color: #8c8a94">解析：</text>
<view style="color: #000; display: inline-block" v-html="item1.AnswerParse"></view>
<view
style="color: #000; display: inline-block"
v-html="item1.AnswerParse"
></view>
</view>
</view>
</view>
<view class="AnswerBtn clear">
<view class="AnswerBtnFirst" @click="getBeforeExam()" v-if="ExamIndex!=1||sortIndex!=1">上一题</view>
<view class="AnswerBtnSecond" v-if="sortIndex != sortTotal" @click="getNextExam()">下一题</view>
<view
class="AnswerBtnFirst"
@click="getBeforeExam()"
v-if="ExamIndex != 1 || sortIndex != 1"
>上一题</view
>
<view
class="AnswerBtnSecond"
v-if="sortIndex != sortTotal"
@click="getNextExam()"
>下一题</view
>
</view>
</swiper-item>
<swiper-item v-if="sortIndex != sortTotal"></swiper-item>
......@@ -169,7 +273,7 @@
</template>
<script>
import {
import {
ref,
reactive,
toRefs,
......@@ -179,13 +283,11 @@
computed,
onMounted,
onUnmounted,
} from "vue";
import {
changeNumToHan
} from "../../utils/index";
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
export default {
} from "vue";
import { changeNumToHan } from "../../utils/index";
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
export default {
props: {
paperData: Object,
sort: Number,
......@@ -196,9 +298,7 @@
ExamStatus: Number,
},
setup(props, context) {
let {
refs
} = getCurrentInstance();
let { refs } = getCurrentInstance();
console.log(163, refs);
let data = reactive({
autoplay: false,
......@@ -213,8 +313,9 @@
isOperate: props.isOperate,
ExamStatus: props.ExamStatus,
audioAction: {
method: 'pause'
}
method: "pause",
},
isIOS: false,
});
data.data.DetailsList.map((item) => {
let arr = item.Title.split(" "); //按空格分段
......@@ -263,20 +364,21 @@
//获取总时长
getTotalTime(url) {
innerAudioContext.src = url;
var Inner = '';
var Inner = "";
innerAudioContext.onCanplay(() => {
innerAudioContext.duration;
let t = innerAudioContext.duration;
let Time = t
var second = parseInt(Time)
var hours = Math.floor(second / 3600)
second = second - hours * 3600
var mimute = Math.floor(second / 60)
second = second - mimute * 60
let Time = t;
var second = parseInt(Time);
var hours = Math.floor(second / 3600);
second = second - hours * 3600;
var mimute = Math.floor(second / 60);
second = second - mimute * 60;
// let aa = hours + ':' + ('0' + mimute).slice(-2) + ':' + ('0' + second).slice(-2);
let TotalTime = ('0' + mimute).slice(-2) + ':' + ('0' + second).slice(-2);
return TotalTime
})
let TotalTime =
("0" + mimute).slice(-2) + ":" + ("0" + second).slice(-2);
return TotalTime;
});
},
audioManage(url) {
innerAudioContext.src = url;
......@@ -363,7 +465,13 @@
//点击下一题
getNextExam() {
data.current = data.current + 1;
},
getSystem() {
let sys = uni.getSystemInfoSync().system;
if ((sys, indexOf("ios") != -1)) {
data.isIOS = true;
}
},
};
onMounted(() => {
if (props.isLast) {
......@@ -374,6 +482,7 @@
}
}
data.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
that.getSystem();
});
onUnmounted(() => {
innerAudioContext.stop();
......@@ -385,40 +494,40 @@
...methods,
};
},
};
};
</script>
<style scoped>
.AnswerBtn {
.AnswerBtn {
margin-top: 20rpx;
}
}
.clear {
clear: both
}
.clear {
clear: both;
}
.AnswerBtnFirst {
.AnswerBtnFirst {
width: 250rpx;
height: 60rpx;
text-align: center;
line-height: 60rpx;
border-radius: 10rpx;
border: 1px solid #00ACF9;
color: #00ACF9;
border: 1px solid #00acf9;
color: #00acf9;
float: left;
}
}
.AnswerBtnSecond {
.AnswerBtnSecond {
width: 250rpx;
height: 60rpx;
text-align: center;
line-height: 60rpx;
border-radius: 10rpx;
background-color: #00ACF9;
background-color: #00acf9;
color: #fff;
float: right;
}
}
.name {
.name {
height: 90rpx;
font-size: 30rpx;
font-family: PingFang SC;
......@@ -427,73 +536,73 @@
display: flex;
align-items: center;
justify-content: space-between;
}
}
.ExamIndex_Box {
.ExamIndex_Box {
margin-right: 40rpx;
}
}
.Single_Before {
.Single_Before {
font-size: 30rpx;
font-weight: bold;
color: #da7878;
}
}
.isTrueAnswer {
.isTrueAnswer {
color: green !important;
}
}
.isNotAnswer {
.isNotAnswer {
color: red !important;
}
}
.AnswerContent {
.AnswerContent {
font-size: 30rpx;
padding: 25rpx;
background-color: #f4f4f4;
border-radius: 5px;
}
}
.viewAnswerContent {
.viewAnswerContent {
width: 100%;
min-height: 44rpx;
border-bottom: 1px solid #d1d1d1;
padding-bottom: 5px;
}
}
.Exam_Total {
.Exam_Total {
font-size: 25rpx;
color: gray;
}
}
.swiper-box {
.swiper-box {
height: calc(100vh - 270rpx);
box-sizing: border-box;
}
}
.num {
.num {
font-size: 30rpx;
font-family: PingFang SC;
color: #111111;
}
}
.item {
.item {
/* margin-bottom: 40rpx; */
position: relative;
}
}
.item1 {
.item1 {
/* margin: 25rpx 0; */
align-items: center;
overflow-y: auto;
margin-top:30rpx;
}
margin-top: 30rpx;
}
.questionView {
.questionView {
overflow-y: auto;
}
}
.audioBox {
.audioBox {
width: 120rpx;
height: 30rpx;
background: #b4ddfe;
......@@ -503,25 +612,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;
......@@ -533,34 +642,34 @@
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_Score {
.Exam_Score {
color: #999999;
font-size: 28rpx;
}
}
</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