smartmeter-app/pages_teacher/teacher_teachers/components/audiology.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 , '': 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 || TextIndex==0">
					<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 class="image">
										<image src="http://tmp/IFVuR12hLLNO034931f24322ab271b1f57fdf626bcbf.png" mode="">
									</view>
									<view>{{quesitem.typeText}}</view>
								</view>
								<view>
									<u-checkbox @change="checkoutzj(quesitem,$event)" v-model="quesitem.subsets"></u-checkbox>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selepad: [],
				listHearing: [],
				checked: [],
				subsets: [],
				itemActive: {},
				firstActive:true,
				image: true,
				tk: null,
				list2: [{
					value: '选项1',
					id: '1'
				}],

			}
		},
		created() {
			this.hearing()
		},
		methods: {
			// 听力调取接口渲染
			hearing() {
				this.$u.get('https://api.admin-v2.langsi.online/admin-api/ielts/paper/list', {
					classify: 1
				}).then(res => {
					this.listHearing = res.data
				})
			},
			// 听力test点击事件
			Bages_addActive(idex, id) {
				this.itemActive[id] = idex
				this.$forceUpdate()

			},
			// 点击变化图表
			icon(id) {
				this.image = !this.image
				this.tk = id
				if (this.image == false) {
					this.tk = null
				}
			},
			checkboxChange(parat, e) {
				if (e.value) {
					this.checked.push(parat.id)
				} else {
					let index = this.checked.indexOf(parat.id);
					if (index !== -1) {
						this.checked.splice(index, 1);
					}

				}
				console.log(this.checked)
				this.$forceUpdate()

			},
			checkoutzj(quesitem, id) {
				if (id.value) {
					this.subsets.push(quesitem.id)
				} else {
					let index2 = this.subsets.indexOf(quesitem.id);
					if (index2 !== -1) {
						this.subsets.splice(index2, 1);
					}
				}
				console.log(this.subsets)
			}
		}
	}
</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>