smartmeter-app/pages_teacher/teacher_teachers/components/compose.vue

<template>
	<!-- 外层循环 -->
	<view>
		<view v-for="(item,index) in transformedData" :key="index">
			<!-- 剑18循环 -->
			<view>
				<view class="view_bages">
					<view>{{item.examName}}</view>
				</view>
			</view>
			<!-- 渲染Text -->
			<view class="substance">
				<text v-for="text in textArr" :key="text" @click="textClick(item,text)" :class="{active: item.active == text}">{{text}}</text>
			</view>
			<!-- 内容 -->
			<view class="compose_bodys">
				<view v-for="text in textArr" :key="text" class="zz">
					<view class="compose_body" v-for="Task in taskArr" :key="Task" v-if="item.active == text">
						<view class="compose_left">
							<view>{{Task}}</view>
							<view>
								<text class="fickle">{{item[text][Task].caption}}</text>
								<text class="fickle2">{{item[text][Task].themeCaption}}</text>
							</view>
						</view>

						<view>
							<u-checkbox @change="checkboxChange(item[text][Task].id,$event)" v-model="item[text][Task].subsetArr">{{item.name}}</u-checkbox>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				transformedData: [],
				// 复选框
				subsetArr:[],
				textArr:['test1','test2','test3','test4'],
				taskArr:['task1','task2'],
				// 接口参数
				comsapi: {
					"key": "",
					"mode": "home",
					"exam": "",
					"caption": "0",
					"themeCaption": "",
					"type": "",
					"isStudy": 0,
					"isEval": 0
				},
			}
		},
		created() {
			this.getCompose()
		},
		methods: {
			//写作接口	
			getCompose() {
				this.$u.post('https://api.admin-v2.langsi.online/admin-api/writing/all/search', this.comsapi).then(res => {
					let arr =  res.data
					for(let a of arr) {
						a.active = 'test1'
					}
					this.transformedData =arr
				})
			},
			textClick(item, text) {
				item.active = text
				this.$forceUpdate()
			},
			checkboxChange(e,id){
				if(id.value) {
					this.subsetArr.push(e)
				}else {
				let  index=this.subsetArr.indexOf(e);
					if(e!==-1) {
						this.subsetArr.splice(index, 1);
					}
				}
				console.log(this.subsetArr)
			}
		}
	}
</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;
		}
	}
.compose_bodys{
	margin: 30rpx 0;
}
	.compose_body {
		display: flex;
		background: #FFFFFF;
		align-items: center;
		justify-content: space-between;
		margin: 0rpx 20rpx;
		border-bottom: 2rpx solid #F2F2F2;
	}
	.compose_body:last-child {
		border: none;
	}
	.zz{
		background: #ffff;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}
	.compose_left {
		display: flex;
		padding: 24rpx 0;
		margin: 0 24rpx;
	}
	.fickle {
		padding: 4rpx 22rpx;
		font-size: 20rpx;
		font-weight: 500;
		color: #2D7CE6;
		margin-left: 12rpx;
		background: #E1EEFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}
	.fickle2 {
		padding: 4rpx 32rpx;
		font-size: 20rpx;
		font-weight: 500;
		color: #FB9734;
		margin-left: 12rpx;
		background: #FFEBD7;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}
	.active {
		color: #fff;
		background: #007AFF !important;
	}
</style>