渲染 页面 数据处理 结构解析
This commit is contained in:
parent
5b50cad2fc
commit
f805ef513e
|
|
@ -5,7 +5,7 @@
|
|||
:background="bgc"
|
||||
title-color='#2E4975'
|
||||
title-size='36'
|
||||
height='36'></u-navbar>
|
||||
height='36' :custom-back="addclassinfo"></u-navbar>
|
||||
<view class="serchbox">
|
||||
<view class="serchimg">
|
||||
<image src="https://file.langsi.online/yasiimg/web/static/uVMACkynkipOxuTYDqm0">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<view class="searchpage">
|
||||
<u-navbar title="添加学生" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
|
||||
height='36'></u-navbar>
|
||||
height='36' :custom-back="addstu"></u-navbar>
|
||||
<u-toast ref="uToast" />
|
||||
<view class="serchbox">
|
||||
<view class="serchimg">
|
||||
|
|
@ -71,6 +71,7 @@
|
|||
},
|
||||
methods: {
|
||||
addstu() {
|
||||
console.log('调用了');
|
||||
uni.setStorageSync('selectedStuInfo', this.selectedIds);
|
||||
|
||||
// Navigate back to the previous page
|
||||
|
|
|
|||
|
|
@ -1,153 +1,210 @@
|
|||
<template>
|
||||
<!-- 外层循环 -->
|
||||
<view>
|
||||
<view v-for="(item,index) in transformedData" :key="index">
|
||||
<view v-for="(item, index) in transformedData"
|
||||
:key="index">
|
||||
<!-- 剑18循环 -->
|
||||
<view>
|
||||
<view class="view_bages">
|
||||
<view>{{item.examName}}</view>
|
||||
<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>
|
||||
<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 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>{{ Task }}</view>
|
||||
<view>
|
||||
<text class="fickle">{{item[text][Task].caption}}</text>
|
||||
<text class="fickle2">{{item[text][Task].themeCaption}}</text>
|
||||
<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>
|
||||
<u-checkbox @change="checkboxChange(item, text, Task, $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
|
||||
},
|
||||
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
|
||||
},
|
||||
orgtransformedData: [],
|
||||
selectwrite: [],
|
||||
}
|
||||
},
|
||||
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
|
||||
this.orgtransformedData = JSON.parse(JSON.stringify(arr));
|
||||
// let json = JSON.stringify(this.transformedData)
|
||||
console.log(this.transformedData, 'this.transformedData');
|
||||
})
|
||||
},
|
||||
textClick(item, text) {
|
||||
item.active = text
|
||||
this.$forceUpdate()
|
||||
},
|
||||
checkboxChange(item, text, Task, event) {
|
||||
const examName = item.examName;
|
||||
const test = text; // text 就是 test 字段的内容
|
||||
const taskId = Task; // Task 就是 task 字段的内容
|
||||
const id = String(item[test][taskId].id);
|
||||
|
||||
// 构建对象
|
||||
const newObject = {
|
||||
examName: examName,
|
||||
test: test,
|
||||
task: taskId,
|
||||
id: id,
|
||||
};
|
||||
|
||||
// 查找数组中是否已存在相应的对象
|
||||
const existingObjectIndex = this.findIndexByFields(this.selectwrite, newObject);
|
||||
|
||||
if (existingObjectIndex === -1) {
|
||||
// 如果不存在，添加到数组
|
||||
this.selectwrite.push(newObject);
|
||||
} else {
|
||||
// 如果存在，根据索引删除对象
|
||||
this.selectwrite.splice(existingObjectIndex, 1);
|
||||
}
|
||||
|
||||
this.$parent.updatawrite(this.selectwrite)
|
||||
// 更新其他状态...
|
||||
},
|
||||
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);
|
||||
findIndexByFields(array, fields) {
|
||||
// 根据指定字段值查找对象在数组中的索引
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
let isEqual = true;
|
||||
for (const key in fields) {
|
||||
if (fields[key] !== array[i][key]) {
|
||||
isEqual = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
console.log(this.subsetArr)
|
||||
if (isEqual) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
}
|
||||
return -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;
|
||||
}
|
||||
}
|
||||
.compose_bodys{
|
||||
margin: 30rpx 0;
|
||||
.view_bages {
|
||||
font-size: 40rpx;
|
||||
font-weight: 400;
|
||||
color: #2E4975;
|
||||
}
|
||||
.compose_body {
|
||||
display: flex;
|
||||
|
||||
.substance {
|
||||
margin: 20rpx 0;
|
||||
|
||||
text {
|
||||
padding: 10rpx 30rpx;
|
||||
margin-right: 20rpx;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user