154 lines
3.2 KiB
Vue
154 lines
3.2 KiB
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>
|