渲染 页面 数据处理 结构解析
This commit is contained in:
parent
5b50cad2fc
commit
f805ef513e
|
|
@ -5,7 +5,7 @@
|
||||||
:background="bgc"
|
:background="bgc"
|
||||||
title-color='#2E4975'
|
title-color='#2E4975'
|
||||||
title-size='36'
|
title-size='36'
|
||||||
height='36'></u-navbar>
|
height='36' :custom-back="addclassinfo"></u-navbar>
|
||||||
<view class="serchbox">
|
<view class="serchbox">
|
||||||
<view class="serchimg">
|
<view class="serchimg">
|
||||||
<image src="https://file.langsi.online/yasiimg/web/static/uVMACkynkipOxuTYDqm0">
|
<image src="https://file.langsi.online/yasiimg/web/static/uVMACkynkipOxuTYDqm0">
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="searchpage">
|
<view class="searchpage">
|
||||||
<u-navbar title="添加学生" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
|
<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" />
|
<u-toast ref="uToast" />
|
||||||
<view class="serchbox">
|
<view class="serchbox">
|
||||||
<view class="serchimg">
|
<view class="serchimg">
|
||||||
|
|
@ -71,6 +71,7 @@
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
addstu() {
|
addstu() {
|
||||||
|
console.log('调用了');
|
||||||
uni.setStorageSync('selectedStuInfo', this.selectedIds);
|
uni.setStorageSync('selectedStuInfo', this.selectedIds);
|
||||||
|
|
||||||
// Navigate back to the previous page
|
// Navigate back to the previous page
|
||||||
|
|
|
||||||
|
|
@ -1,153 +1,210 @@
|
||||||
<template>
|
<template>
|
||||||
<!-- 外层循环 -->
|
<!-- 外层循环 -->
|
||||||
<view>
|
<view>
|
||||||
<view v-for="(item,index) in transformedData" :key="index">
|
<view v-for="(item, index) in transformedData"
|
||||||
|
:key="index">
|
||||||
<!-- 剑18循环 -->
|
<!-- 剑18循环 -->
|
||||||
<view>
|
<view>
|
||||||
<view class="view_bages">
|
<view class="view_bages">
|
||||||
<view>{{item.examName}}</view>
|
<view>{{ item.examName }}</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 渲染Text -->
|
<!-- 渲染Text -->
|
||||||
<view class="substance">
|
<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>
|
||||||
<!-- 内容 -->
|
<!-- 内容 -->
|
||||||
<view class="compose_bodys">
|
<view class="compose_bodys">
|
||||||
<view v-for="text in textArr" :key="text" class="zz">
|
<view v-for="text in textArr"
|
||||||
<view class="compose_body" v-for="Task in taskArr" :key="Task" v-if="item.active == text">
|
: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 class="compose_left">
|
||||||
<view>{{Task}}</view>
|
<view>{{ Task }}</view>
|
||||||
<view>
|
<view>
|
||||||
<text class="fickle">{{item[text][Task].caption}}</text>
|
<text class="fickle">{{ item[text][Task].caption }}</text>
|
||||||
<text class="fickle2">{{item[text][Task].themeCaption}}</text>
|
<text class="fickle2">{{ item[text][Task].themeCaption }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</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>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
transformedData: [],
|
transformedData: [],
|
||||||
// 复选框
|
// 复选框
|
||||||
subsetArr:[],
|
subsetArr: [],
|
||||||
textArr:['test1','test2','test3','test4'],
|
textArr: ['test1', 'test2', 'test3', 'test4'],
|
||||||
taskArr:['task1','task2'],
|
taskArr: ['task1', 'task2'],
|
||||||
// 接口参数
|
// 接口参数
|
||||||
comsapi: {
|
comsapi: {
|
||||||
"key": "",
|
"key": "",
|
||||||
"mode": "home",
|
"mode": "home",
|
||||||
"exam": "",
|
"exam": "",
|
||||||
"caption": "0",
|
"caption": "0",
|
||||||
"themeCaption": "",
|
"themeCaption": "",
|
||||||
"type": "",
|
"type": "",
|
||||||
"isStudy": 0,
|
"isStudy": 0,
|
||||||
"isEval": 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() {
|
findIndexByFields(array, fields) {
|
||||||
this.getCompose()
|
// 根据指定字段值查找对象在数组中的索引
|
||||||
},
|
for (let i = 0; i < array.length; i++) {
|
||||||
methods: {
|
let isEqual = true;
|
||||||
//写作接口
|
for (const key in fields) {
|
||||||
getCompose() {
|
if (fields[key] !== array[i][key]) {
|
||||||
this.$u.post('https://api.admin-v2.langsi.online/admin-api/writing/all/search', this.comsapi).then(res => {
|
isEqual = false;
|
||||||
let arr = res.data
|
break;
|
||||||
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)
|
if (isEqual) {
|
||||||
|
return i;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
return -1;
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.view_bages {
|
.view_bages {
|
||||||
font-size: 40rpx;
|
font-size: 40rpx;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #2E4975;
|
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;
|
.substance {
|
||||||
|
margin: 20rpx 0;
|
||||||
|
|
||||||
|
text {
|
||||||
|
padding: 10rpx 30rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
background: #FFFFFF;
|
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;
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||||
}
|
}
|
||||||
.compose_left {
|
}
|
||||||
display: flex;
|
|
||||||
padding: 24rpx 0;
|
.compose_bodys {
|
||||||
margin: 0 24rpx;
|
margin: 30rpx 0;
|
||||||
}
|
}
|
||||||
.fickle {
|
|
||||||
padding: 4rpx 22rpx;
|
.compose_body {
|
||||||
font-size: 20rpx;
|
display: flex;
|
||||||
font-weight: 500;
|
background: #FFFFFF;
|
||||||
color: #2D7CE6;
|
align-items: center;
|
||||||
margin-left: 12rpx;
|
justify-content: space-between;
|
||||||
background: #E1EEFF;
|
margin: 0rpx 20rpx;
|
||||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
border-bottom: 2rpx solid #F2F2F2;
|
||||||
}
|
}
|
||||||
.fickle2 {
|
|
||||||
padding: 4rpx 32rpx;
|
.compose_body:last-child {
|
||||||
font-size: 20rpx;
|
border: none;
|
||||||
font-weight: 500;
|
}
|
||||||
color: #FB9734;
|
|
||||||
margin-left: 12rpx;
|
.zz {
|
||||||
background: #FFEBD7;
|
background: #ffff;
|
||||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||||
}
|
}
|
||||||
.active {
|
|
||||||
color: #fff;
|
.compose_left {
|
||||||
background: #007AFF !important;
|
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>
|
</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