292 lines
7.1 KiB
Vue
292 lines
7.1 KiB
Vue
<template>
|
||
<!-- 听力 -->
|
||
<view>
|
||
<!-- 外层循环 -->
|
||
<view v-for="(item,index) in listHearing" :key="item.id">
|
||
<!-- 听力标题渲染 -->
|
||
<view class="view_bages">
|
||
<view>{{item.title}}</view>
|
||
</view>
|
||
<view class="substance">
|
||
<!-- 渲染Text -->
|
||
<text :class="{ 'active': itemActive[item.id] === TextIndex }"
|
||
v-for="(TextItem,TextIndex) in item.tests" :key="TextIndex"
|
||
@click="Bages_addActive(TextIndex,item.id) ">
|
||
{{TextItem.name}}
|
||
</text>
|
||
</view>
|
||
<!-- 渲染part -->
|
||
<view v-for="(TextItem,TextIndex) in item.tests" :key="TextIndex">
|
||
<view v-for="(partitem,partindex) in TextItem.parts" :key="partindex"
|
||
v-if="itemActive[item.id] === TextIndex">
|
||
<view>
|
||
<view class="Part1">
|
||
<view class="imaflex" @click="icon(partitem.id)">
|
||
<!-- part前面的图表 -->
|
||
<view class="image">
|
||
<image src="http://tmp/IFVuR12hLLNO034931f24322ab271b1f57fdf626bcbf.png" mode=""
|
||
v-if="image"></image>
|
||
<image src="http://tmp/8OOgvfEpdnT2e4e421b97006c70b30a9df99e51a6df1.png" mode=""
|
||
v-else></image>
|
||
</view>
|
||
<view>{{partitem.name}}</view>
|
||
</view>
|
||
<!-- part的多选框 -->
|
||
<view>
|
||
<u-checkbox @change="checkboxChange(partitem,$event)" v-model="partitem.checked"
|
||
shape="circle"></u-checkbox>
|
||
</view>
|
||
</view>
|
||
<view class="partshow" v-if="tk==partitem.id">
|
||
<view class="Part2" v-for="(quesitem,quesindex) in partitem.modules" :key="quesindex">
|
||
<view class="imaflex">
|
||
<view>{{quesitem.number}}{{quesitem.typeText}}</view>
|
||
</view>
|
||
<view>
|
||
<u-checkbox @change="handleCheckboxChange(quesitem)"
|
||
v-model="quesitem.subsets"></u-checkbox>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
listHearing: [],
|
||
checked: [],
|
||
subsets: [],
|
||
itemActive: {},
|
||
image: true,
|
||
tk: null,
|
||
selectwrite: [],
|
||
|
||
}
|
||
},
|
||
created() {
|
||
this.hearing()
|
||
},
|
||
methods: {
|
||
updatawrite(data){
|
||
this.selectwrite=data
|
||
|
||
},
|
||
// 听力调取接口渲染
|
||
hearing() {
|
||
this.$u.get('https://api.admin-v2.langsi.online/admin-api/ielts/paper/list', {
|
||
classify: 2
|
||
}).then(res => {
|
||
this.listHearing = res.data
|
||
let activeindex = {}
|
||
let arr = res.data
|
||
for (let parper of arr) {
|
||
let test = parper.tests[0]
|
||
activeindex[parper.id] = 0
|
||
}
|
||
this.itemActive = activeindex
|
||
this.updateSubsetsInListHearing()
|
||
})
|
||
},
|
||
// 听力test点击事件
|
||
Bages_addActive(TextIndex, id) {
|
||
this.itemActive[id] = TextIndex
|
||
this.$forceUpdate()
|
||
},
|
||
// 点击变化图表
|
||
icon(id) {
|
||
this.image = !this.image
|
||
this.tk = id
|
||
if (this.image == false) {
|
||
this.tk = id
|
||
} else {
|
||
this.tk = null
|
||
}
|
||
},
|
||
checkboxChange(partitem, e) {
|
||
if (e.value) {
|
||
this.listHearing.forEach((paper) => {
|
||
paper.tests.forEach((test, testIndex) => {
|
||
test.parts.forEach((part) => {
|
||
if (part.id === partitem.id) {
|
||
part.modules.forEach((quesitem, quesIndex) => {
|
||
this.addToSelectWrite(
|
||
quesitem,
|
||
partitem.id,
|
||
testIndex + 1,
|
||
paper.title
|
||
);
|
||
});
|
||
}
|
||
});
|
||
});
|
||
});
|
||
} else {
|
||
partitem.modules.forEach((quesitem) => {
|
||
this.removeFromSelectWrite(quesitem.id);
|
||
});
|
||
}
|
||
this.$forceUpdate();
|
||
|
||
|
||
// 在这里执行额外的操作，遍历 selectwrite 中的每一项，更新 listHearing 中的 subsets
|
||
this.updateSubsetsInListHearing();
|
||
this.$parent.updataread(this.selectwrite)
|
||
},
|
||
handleCheckboxChange(quesitems) {
|
||
const existingIndex = this.selectwrite.findIndex(item => item.id === quesitems.id);
|
||
|
||
if (existingIndex !== -1) {
|
||
// 如果已存在，将 subsets 设为 false，并清除该项
|
||
this.selectwrite.splice(existingIndex, 1);
|
||
quesitems.subsets = false;
|
||
} else {
|
||
// 如果不存在，添加该项，并将 subsets 设为 true
|
||
this.listHearing.forEach((paper) => {
|
||
paper.tests.forEach((test, testIndex) => {
|
||
test.parts.forEach((part) => {
|
||
part.modules.forEach((quesitem, quesIndex) => {
|
||
if (quesitem.id == quesitems.id) {
|
||
this.addToSelectWrite(
|
||
quesitems,
|
||
quesitems.id, // 使用 quesitem 的 id
|
||
testIndex + 1, // 使用内层循环的 testIndex
|
||
paper.title // 使用 quesitem 的 paperTitle
|
||
);
|
||
}
|
||
});
|
||
});
|
||
});
|
||
});
|
||
quesitems.subsets = true;
|
||
}
|
||
|
||
console.log(this.selectwrite, 'selectwriteselectwrite');
|
||
this.updateSubsetsInListHearing()
|
||
this.$parent.updataread(this.selectwrite)
|
||
},
|
||
|
||
|
||
|
||
// 在这里添加一个新的方法，用于更新 listHearing 中的 subsets
|
||
updateSubsetsInListHearing() {
|
||
this.listHearing.forEach((paper) => {
|
||
paper.tests.forEach((test) => {
|
||
test.parts.forEach((part) => {
|
||
part.modules.forEach((quesitem) => {
|
||
const selected = this.selectwrite.find((item) => {
|
||
return item.id === quesitem.id;
|
||
});
|
||
if (selected) {
|
||
quesitem.subsets = true;
|
||
} else {
|
||
quesitem.subsets = false;
|
||
}
|
||
});
|
||
});
|
||
});
|
||
});
|
||
|
||
// 额外的逻辑，遍历 listHearing 中的每一个 part，判断是否全部 modules 的 subsets 都为 true
|
||
this.listHearing.forEach((paper) => {
|
||
paper.tests.forEach((test) => {
|
||
test.parts.forEach((part) => {
|
||
part.checked = part.modules.every((quesitem) => quesitem.subsets);
|
||
});
|
||
});
|
||
});
|
||
},
|
||
|
||
// 添加信息到selectwrite数组
|
||
addToSelectWrite(quesitem, partId, testIndex, paperTitle) {
|
||
// Split the guideText into words
|
||
|
||
const item = {
|
||
id: quesitem.id,
|
||
paperId: quesitem.paperId,
|
||
papername: paperTitle,
|
||
partId: partId,
|
||
testId: quesitem.testId,
|
||
testname: `Test ${testIndex}`,
|
||
typeName: quesitem.typeText,
|
||
questionname: quesitem.number,
|
||
};
|
||
|
||
this.selectwrite.push(item);
|
||
},
|
||
|
||
removeFromSelectWrite(itemId) {
|
||
const index = this.selectwrite.findIndex((item) => item.id === itemId);
|
||
if (index !== -1) {
|
||
this.selectwrite.splice(index, 1);
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.view_bages {
|
||
font-size: 40rpx;
|
||
font-weight: 400;
|
||
color: #2E4975;
|
||
}
|
||
|
||
.substance {
|
||
margin: 20rpx 0;
|
||
|
||
text {
|
||
padding: 10rpx 30rpx;
|
||
margin-right: 20rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
|
||
.Part1 {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 24rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.Part2 {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 24rpx 0;
|
||
border-bottom: 2rpx solid #F2F2F2;
|
||
}
|
||
|
||
.partshow {
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
margin-top: 15rpx;
|
||
padding: 15rpx 30rpx;
|
||
}
|
||
|
||
.substance .active {
|
||
background: #2D7CE6;
|
||
color: #fff;
|
||
}
|
||
|
||
.imaflex {
|
||
display: flex;
|
||
}
|
||
|
||
.image {
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
</style> |