Skip to content

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

1

parent 702d38ae
Hide whitespace changes
Inline Side-by-side
Showing with 178 additions and 54 deletions
src/components/subject/ListenTopic.vue
View file @ f4c36505
<template>
<!-- 听力题 -->
<!-- 单选题 -->
<view>
<view class="item" style="padding: 0 20px">
<view class="name">
......@@ -19,50 +19,112 @@
: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="item1.id"
>
<swiper-item></swiper-item>
<swiper-item v-for="(item1, index1) in data.DetailsList" :key="index1">
<view class="item1">
<view class="flex flex_start_center">
<view class="num" v-html="item1.Title"></view>
<!-- <view>{{ item1.Title }}</view> -->
<!-- <view class="num" v-html="item1.Title"></view> -->
<view
class="audioBox flex flex_center_center"
@click="audioManage(item1.Src)"
>
<image
style="width: 26rpx; height: 22rpx"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/horn.png"
/>
10:50
</view>
</view>
<view
v-for="(item2, index2, index3) in item1.QuestionContentObj"
:key="index2"
class="flex item2 flex_wrap flex_start_center"
v-if="index2 === 0"
>
<view class="questionView">
<view
v-for="(item3, index3) in item2"
:key="index3"
class="flex item3 flex_start_center"
v-for="(item2, index2) in item1.QuestionContentObj"
:key="index2"
class="item2"
>
<view
class="chooseNum"
:class="{
myAnswer: item1.myAnswer.find((e) => e == item3.Name),
}"
@click="change(index1, index2, index3)"
>{{ item3.Name }}
<view class="flex questionTitle">
<view
>{{ index2 + 1 }}、({{ item2.QuestionName }},{{
item2.SubScore
}}分)</view
>
<view v-html="item2.SubTitle"></view>
</view>
<view
class="chooseName"
@click="change(index1, index2, index3)"
v-html="item3.Content"
>
<view v-for="(item3, index3) in item2.SubAnwser" :key="index3">
<!-- 单选 、判断-->
<view
class="flex flex_start_center item3"
v-if="
item2.QuestionKey === 'single' ||
item2.QuestionKey === 'judge'
"
>
<view
class="chooseNum"
:class="{ myAnswer: item2.myAnswer === item3.Name }"
@click="singerChange(index1, index2, index3)"
>{{ item3.Name }}
</view>
<view
class="chooseName"
@click="singerChange(index1, index2, index3)"
v-html="item3.Content"
></view>
</view>
<!-- 多选 -->
<view
class="flex flex_start_center item3"
v-if="item2.QuestionKey === 'multiple'"
>
<view
class="chooseNum"
:class="{
myAnswer: item2.myAnswer.find((e) => e == item3.Name),
}"
@click="multipleChange(index1, index2, index3)"
>{{ item3.Name }}
</view>
<view
class="chooseName"
@click="multipleChange(index1, index2, index3)"
v-html="item3.Content"
></view>
</view>
<!-- 填空 -->
<view
class="flex flex_start_center item3"
v-if="item2.QuestionKey === 'fill-in'"
>
<view class="chooseNum">{{ index3 + 1 }} </view>
<input
type="text"
v-model="item2.myAnswer"
class="chooseName chooseName2"
placeholder="请填写答案"
/>
</view>
<!-- 简答 -->
<view
class="flex flex_start_center item3"
v-if="item2.QuestionKey === 'short-answer'"
>
<textarea
type="text"
v-model="item2.myAnswer"
class="chooseName chooseName2"
placeholder="请填写答案"
/>
</view>
</view>
</view>
</view>
</view>
</swiper-item>
<swiper-item v-if="sortIndex != sortTotal"></swiper-item>
<swiper-item v-if="sortIndex != sortTotal">最后一页</swiper-item>
</swiper>
<van-toast id="van-toast" />
</view>
<van-toast id="van-toast" />
</view>
</template>
......@@ -87,18 +149,30 @@ export default {
},
setup(props, context) {
let { ctx } = getCurrentInstance();
props.paperData.DetailsList.forEach((item, index) => {
item.myAnswer = [];
});
let data = reactive({
data: props.paperData,
sortIndex: props.sort + 1,
sortTotal: props.sortTotal,
autoplay: false,
sortIndex: props.sort + 1, //大题序号
sortTotal: props.sortTotal, //总共多少道大题
data: props.paperData,
current: 1, //默认从第几个开始-用于从快捷菜单点入
ExamIndex: 1, //第几题
});
data.data.DetailsList.map((item) => {
let arr = item.Title.split(" "); //按空格分段
arr.map((e) => {
if (e.indexOf("src") != -1) {
item.Src = decodeURIComponent(e.split("url=")[1].slice(0, -1));
console.log(164, item.Src);
}
});
item.QuestionContentObj.map((_item) => {
if (_item.QuestionKey === "multiple") {
_item.myAnswer = [];
} else {
_item.myAnswer = "嘻嘻";
}
});
});
let methods = {
changeNumToHan,
jumpPage() {
......@@ -109,11 +183,38 @@ export default {
back() {
uni.navigateBack();
},
//选题
change(index1, index2, index3) {
let myAnswer = data.data.DetailsList[index1].myAnswer;
audioManage(url) {
const innerAudioContext = uni.createInnerAudioContext();
// innerAudioContext.autoplay = true;
innerAudioContext.src = url;
console.log(188, innerAudioContext, innerAudioContext.duration);
innerAudioContext.onPlay(() => {
console.log("开始播放");
});
innerAudioContext.onError((res) => {
console.log(res.errMsg);
console.log(res.errCode);
});
},
//----------------------------------------选题----------------------------------
// 单选or判断
singerChange(index1, index2, index3) {
data.data.DetailsList[index1].QuestionContentObj[index2].myAnswer =
data.data.DetailsList[index1].QuestionContentObj[index2].SubAnwser[
index3
].Name;
},
// 多选
multipleChange(index1, index2, index3) {
let myAnswer = data.data.DetailsList[index1].QuestionContentObj[index2]
.myAnswer
? data.data.DetailsList[index1].QuestionContentObj[index2].myAnswer
: [];
let res =
data.data.DetailsList[index1].QuestionContentObj[index2][index3].Name;
data.data.DetailsList[index1].QuestionContentObj[index2].SubAnwser[
index3
].Name;
let find = myAnswer.indexOf(res);
if (find == -1) {
myAnswer.push(res);
......@@ -123,13 +224,11 @@ export default {
},
onchange(e) {
data.ExamIndex = e.detail.current;
console.log(data.ExamIndex, "data.ExamIndex");
console.log(data.data.DetailsList.length + 1, "length");
if (data.ExamIndex === data.data.DetailsList.length + 1) {
console.log("进入翻页");
console.log("听力", e.detail);
this.$emit("getAfterTopic");
}
if (e.detail.current == 0) {
if (e.detail.current == 0 && data.sortIndex != 1) {
this.$emit("getBeforeTopic");
}
},
......@@ -139,6 +238,7 @@ export default {
data.current = props.paperData.DetailsList.length;
}
});
let that = methods;
return {
...toRefs(data),
...methods,
......@@ -157,19 +257,23 @@ export default {
align-items: center;
justify-content: space-between;
}
.Single_Before {
font-size: 28rpx;
font-weight: bold;
color: #da7878;
}
.Exam_Total {
font-size: 25rpx;
color: gray;
}
.swiper-box {
height: calc(100vh - 270rpx);
box-sizing: border-box;
}
.num {
font-size: 26rpx;
font-family: PingFang SC;
......@@ -178,25 +282,34 @@ export default {
}
.item {
margin-bottom: 40rpx;
/* margin-bottom: 40rpx; */
position: relative;
}
.item1 {
margin: 25rpx 0;
/* margin: 25rpx 0; */
align-items: center;
}
.audioBox {
width: 120rpx;
height: 30rpx;
background: #b4ddfe;
border: 1px solid #35b4fb;
border-radius: 4rpx;
font-size: 22rpx;
font-family: PingFang SC;
font-weight: 500;
color: #00acf9;
}
.item2 {
/* padding-left: 25rpx;
margin: 30rpx 0; */
box-sizing: border-box;
margin: 30rpx 0;
/* padding: 0 30rpx; */
}
.item3 {
width: 100%;
padding-left: 25rpx;
margin: 20rpx 0;
}
.myAnswer {
background-color: #00acf9 !important;
color: #ffffff !important;
......@@ -222,4 +335,15 @@ export default {
font-weight: 500;
color: #111111;
}
.chooseName2 {
flex-grow: 1;
border-bottom: 1px solid #111;
}
.questionTitle {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: bold;
color: #111111;
}
</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