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> <template>
<!-- 听力题 --> <!-- 单选题 -->
<view> <view>
<view class="item" style="padding: 0 20px"> <view class="item" style="padding: 0 20px">
<view class="name"> <view class="name">
...@@ -19,50 +19,112 @@ ...@@ -19,50 +19,112 @@
:autoplay="autoplay" :autoplay="autoplay"
:current="current" :current="current"
@change="onchange" @change="onchange"
:skip-hidden-item-layout="true"
> >
<swiper-item v-if="sortIndex != 1"></swiper-item> <swiper-item></swiper-item>
<swiper-item <swiper-item v-for="(item1, index1) in data.DetailsList" :key="index1">
v-for="(item1, index1) in data.DetailsList"
:key="item1.id"
>
<view class="item1"> <view class="item1">
<view class="flex flex_start_center"> <view class="flex flex_start_center">
<view class="num" v-html="item1.Title"></view> <!-- <view class="num" v-html="item1.Title"></view> -->
<!-- <view>{{ 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>
<view <view class="questionView">
v-for="(item2, index2, index3) in item1.QuestionContentObj"
:key="index2"
class="flex item2 flex_wrap flex_start_center"
v-if="index2 === 0"
>
<view <view
v-for="(item3, index3) in item2" v-for="(item2, index2) in item1.QuestionContentObj"
:key="index3" :key="index2"
class="flex item3 flex_start_center" class="item2"
> >
<view <view class="flex questionTitle">
class="chooseNum" <view
:class="{ >{{ index2 + 1 }}、({{ item2.QuestionName }},{{
myAnswer: item1.myAnswer.find((e) => e == item3.Name), item2.SubScore
}" }}分)</view
@click="change(index1, index2, index3)" >
>{{ item3.Name }} <view v-html="item2.SubTitle"></view>
</view> </view>
<view <view v-for="(item3, index3) in item2.SubAnwser" :key="index3">
class="chooseName" <!-- 单选 、判断-->
@click="change(index1, index2, index3)" <view
v-html="item3.Content" 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>
</view> </view>
</view> </view>
</swiper-item> </swiper-item>
<swiper-item v-if="sortIndex != sortTotal"></swiper-item> <swiper-item v-if="sortIndex != sortTotal">最后一页</swiper-item>
</swiper> </swiper>
<van-toast id="van-toast" />
</view> </view>
<van-toast id="van-toast" />
</view> </view>
</template> </template>
...@@ -87,18 +149,30 @@ export default { ...@@ -87,18 +149,30 @@ export default {
}, },
setup(props, context) { setup(props, context) {
let { ctx } = getCurrentInstance(); let { ctx } = getCurrentInstance();
props.paperData.DetailsList.forEach((item, index) => {
item.myAnswer = [];
});
let data = reactive({ let data = reactive({
data: props.paperData,
sortIndex: props.sort + 1,
sortTotal: props.sortTotal,
autoplay: false, autoplay: false,
sortIndex: props.sort + 1, //大题序号
sortTotal: props.sortTotal, //总共多少道大题
data: props.paperData,
current: 1, //默认从第几个开始-用于从快捷菜单点入 current: 1, //默认从第几个开始-用于从快捷菜单点入
ExamIndex: 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 = { let methods = {
changeNumToHan, changeNumToHan,
jumpPage() { jumpPage() {
...@@ -109,11 +183,38 @@ export default { ...@@ -109,11 +183,38 @@ export default {
back() { back() {
uni.navigateBack(); uni.navigateBack();
}, },
//选题 audioManage(url) {
change(index1, index2, index3) { const innerAudioContext = uni.createInnerAudioContext();
let myAnswer = data.data.DetailsList[index1].myAnswer;
// 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 = let res =
data.data.DetailsList[index1].QuestionContentObj[index2][index3].Name; data.data.DetailsList[index1].QuestionContentObj[index2].SubAnwser[
index3
].Name;
let find = myAnswer.indexOf(res); let find = myAnswer.indexOf(res);
if (find == -1) { if (find == -1) {
myAnswer.push(res); myAnswer.push(res);
...@@ -123,13 +224,11 @@ export default { ...@@ -123,13 +224,11 @@ export default {
}, },
onchange(e) { onchange(e) {
data.ExamIndex = e.detail.current; 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) { if (data.ExamIndex === data.data.DetailsList.length + 1) {
console.log("进入翻页"); console.log("听力", e.detail);
this.$emit("getAfterTopic"); this.$emit("getAfterTopic");
} }
if (e.detail.current == 0) { if (e.detail.current == 0 && data.sortIndex != 1) {
this.$emit("getBeforeTopic"); this.$emit("getBeforeTopic");
} }
}, },
...@@ -139,6 +238,7 @@ export default { ...@@ -139,6 +238,7 @@ export default {
data.current = props.paperData.DetailsList.length; data.current = props.paperData.DetailsList.length;
} }
}); });
let that = methods;
return { return {
...toRefs(data), ...toRefs(data),
...methods, ...methods,
...@@ -157,19 +257,23 @@ export default { ...@@ -157,19 +257,23 @@ export default {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.Single_Before { .Single_Before {
font-size: 28rpx; font-size: 28rpx;
font-weight: bold; font-weight: bold;
color: #da7878; color: #da7878;
} }
.Exam_Total { .Exam_Total {
font-size: 25rpx; font-size: 25rpx;
color: gray; color: gray;
} }
.swiper-box { .swiper-box {
height: calc(100vh - 270rpx); height: calc(100vh - 270rpx);
box-sizing: border-box; box-sizing: border-box;
} }
.num { .num {
font-size: 26rpx; font-size: 26rpx;
font-family: PingFang SC; font-family: PingFang SC;
...@@ -178,25 +282,34 @@ export default { ...@@ -178,25 +282,34 @@ export default {
} }
.item { .item {
margin-bottom: 40rpx; /* margin-bottom: 40rpx; */
position: relative;
} }
.item1 { .item1 {
margin: 25rpx 0; /* margin: 25rpx 0; */
align-items: center; 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 { .item2 {
/* padding-left: 25rpx; box-sizing: border-box;
margin: 30rpx 0; */ margin: 30rpx 0;
/* padding: 0 30rpx; */
} }
.item3 { .item3 {
width: 100%;
padding-left: 25rpx; padding-left: 25rpx;
margin: 20rpx 0; margin: 20rpx 0;
} }
.myAnswer { .myAnswer {
background-color: #00acf9 !important; background-color: #00acf9 !important;
color: #ffffff !important; color: #ffffff !important;
...@@ -222,4 +335,15 @@ export default { ...@@ -222,4 +335,15 @@ export default {
font-weight: 500; font-weight: 500;
color: #111111; 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> </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