如图:选中了,但是颜色没有高亮,打印的数据也都有获取到。
<!--pages/relase/certificate/certificate.wxml-->
<view class="content">
<view class="select-group">
<view class="position-title">{{positionselect}}</view>
<view class="position-number">
<view class="count">6/</view>
<view class="total">20</view>
</view>
</view>
<view class="container">
<!-- 证书类型 -->
<scroll-view class="first-column" scroll-y scroll-with-animation>
<view wx:for="{{grades}}" wx:key="id" class="first-item {{currentGrade.id === item.id ? 'greenColor':''}}" bindtap="selectGrade" data-item="{{item}}">
<view class="first-float-carvit {{currentGrade.id === item.id ? 'greenBg':''}}"></view>
<view class="first-float-title">{{item.name}}</view>
<view class="first-float-count" wx:if="{{currentGrade.id === item.id}}">{{selectedStudents.length}}</view>
</view>
</scroll-view>
<!-- 第二列证书名称 -->
<scroll-view class="second-column" scroll-y scroll-with-animation>
<view wx:for="{{classes}}" wx:key="id" class="second-item {{currentClass.id ? 'active':''}}" bindtap="selectClass" data-item="{{item}}" data-index="{{index}}">{{item.name}}</view>
</scroll-view>
<!-- 证书等级 -->
<scroll-view class="third-column" scroll-y scroll-with-animation>
<view wx:for="{{students}}" wx:key="id" class="second-item {{currentStudent.id === item.id ? 'active':''}}" bindtap="selectStudent" data-item="{{item}}">{{item.name}}</view>
</scroll-view>
</view>
<view class="add-group" >
<view class="add-title">已添加:</view>
<scroll-view scroll-x="true" class="add-srcooll" show-scrollbar="{{false}}" enhanced="{{true}}" enable-flex>
<view class="text-list" bindtap="removeBenefit" wx:for="{{selectedStudents}}" wx:key="name" data-catindex="{{item.catindex}}" data-subindex="{{item.subindex}}" data-posindex="{{item.posindex}}">
<text class="text">{{item.name}}</text>
<view class="close">×</view>
</view>
</scroll-view>
</view>
<view class="btn-group">
<button bindtap="confirmSelection" type="primary" class="sunbmit-btn" disabled="{{selectedStudents.length === 0}}">确定(已选 <view class="position-number">
<view class="count">{{selectedStudents.length}}/</view>
<view class="total">5</view>
</view>项) </button>
</view>
</view>
Page({
data: {
positionselect: "资格证书",
list :certificateList,
// 证书类型
grades:[{id:1,name:'外语类'},{id:2,name:'英语类'},{id:3,name:'普通话类'},{id:4,name:'IT类'},{id:5,name:'生产制造类'},{id:6,name:'技工类'},{id:7,name:'人力行政类'},{id:8,name:'会计类'},{id:9,name:'审计类'},{id:10,name:'统计类'}],
// 证书名称
classData:{
1:[{id:101,name:'日语等级考试'},
{id:102,name:'日语专业四级'},
{id:103,name:'日语专业八级'}],
2:[{id:201,name:'大学英语四级'},{id:202,name:'大学英语六级'}],
3:[{id:301,name:'普通话水平测试'}],
4:[{id:401,name:'计算机等级考试'},{id:402,name:'计算机初级专业技术资格'}]},
// 证书等级
studentData:{
101:[{id:10101,name:'日语N1'},{id:10102,name:'日语N2'}],
102:[{id:10201,name:'日语专业四级'}],
103:[{id:10301,name:'日语专业八级'}],
120:[{id:12001,name:'DELF法语学习A1级文凭'},{id:12002,name:'DELF法语学习A2级文凭'}],
121:[{id:12101,name:'CATTI法语一级口译'},{id:12102,name:'CATTI法语二级口译'}],
122:[{id:12201,name:'俄语专业四级'}],
123:[{id:12301,name:'俄语专业八级'}],
124:[{id:12401,name:'TPKN对外俄语一级'},{id:12402,name:'TPKN对外俄语二级'}],
201:[{id:20101,name:'大学英语四级'}],
202:[{id:20201,name:'大学英语六级'}],
203:[{id:20301,name:'英语专业四级'}],
204:[{id:20401,name:'英语专业八级'}],
301:[{id:30101,name:'普通话一级甲等'},{id:30102,name:'普通话一级乙等'}],
401:[{id:40101,name:'计算机一级'},{id:40102,name:'计算机二级'},{id:40103,name:'计算机三级'}],
402:[{id:40201,name:'程序员技术资格'},{id:40202,name:'网络管理员'},{id:40203,name:'信息系统运行管理员'},{id:40204,name:'网页制作员'},{id:40205,name:'信息处理技术员'},{id:40206,name:'多媒体应该制作技术员'},{id:40207,name:'电子商务技术员'}],
403:[{id:40301,name:'软件评测师'},{id:40302,name:'软件设计师'},{id:40303,name:'软件过程能力评估师'},{id:40304,name:'网络工程师'},{id:40305,name:'多媒体应用设计师'},{id:40306,name:'嵌入式系统设计师'},{id:40307,name:'计算机辅助设计师'},{id:40308,name:'电子商务设计师'},{id:40309,name:'系统集成项目管理工程师'},{id:403010,name:'信息系统监理师'},{id:403011,name:'数据库系统工程师'},{id:403012,name:'信息系统管理工程师'},{id:403013,name:'信息安全工程师'},{id:403014,name:'计算机硬件工程师'},{id:403015,name:'信息技术支持工程师'}],},
// 当前选中的证书类型,证书名称,证书等级
currentGrade: {}, // 第一列当前选中的
currentClass: {}, // 第二列当前选中的
currentStudent: {}, // 第三列当前选中的
// 当前显示的证书名称,证书等级列表
classes: [],
students: [],
// 已选中的证书名称,证书等级
selectedClasses: [],
selectedStudents: [],
},
onLoad: function (options) {
// 初始化默认选中证书类型,证书名称的证书等级
const defaultGrade = this.data.grades[0];
console.log(defaultGrade)
const defaultClass = this.data.classData[defaultGrade.id][0];
console.log(defaultClass)
// const defaultStudent = this.data.studentData[defaultClass.id][0];
this.setData({
currentGrade: defaultGrade,
// currentClass: defaultClass,
// currentStudent: defaultStudent,
classes: this.data.classData[defaultGrade.id],
students: this.data.studentData[defaultClass.id]
})
},
//选择证书类型
selectGrade(e) {
console.log(e)
const grade = e.currentTarget.dataset.item;
console.log(grade)
const classes = this.data.classData[grade.id] || [];
console.log(classes)
this.setData({
currentGrade: grade,
classes: classes,
// 重置证书名称的证书等级
currentClass: {},
currentStudent: {},
students: []
})
},
// 选择证书名称
selectClass(e) {
// 获取当前选中的证书名称
let classItem = e.currentTarget.dataset.item;
console.log(classItem); // 打印结果是当前选中项的值
// 获取第三列的内容
const students = this.data.studentData[classItem.id] || [];
console.log(students); // 打印了该项目下的内容列表
// 获取第二列的index
const index = e.currentTarget.dataset.index;
console.log(index); // 打印了indx的值
// 确保 currentClass 是一个数组
if (!Array.isArray(this.data.currentClass)) {
this.data.currentClass = [];
}
let currentClass = this.data.currentClass.includes(classItem.id);
console.log(currentClass); // 当没有选中时点击选中打印结果是false,有选中的内容再次点击选中的内容为true
// 检查当前项是否已选中
if (currentClass) {
// 已选中,则取消选中
currentClass = this.data.currentClass.filter(id => id !== classItem.id);
console.log(currentClass);
} else {
// 未选中,则添加到选中列表
currentClass = [...this.data.currentClass, classItem.id];
console.log(currentClass); // 打印结果是,选中的id。比如选中了第一个,id:101
}
this.setData({
currentClass: currentClass,
students: students,
currentStudent: {}
});
},
// 选择证书等级
selectStudent(e) {
console.log(e)
const student = e.currentTarget.dataset.item;
const selectedStudents = this.data.selectedStudents;
const index = selectedStudents.findIndex(item => item.id === student.id);
if (index === -1) {
selectedStudents.push(student);
} else {
selectedStudents.splice(index, 1);
}
this.setData({
currentStudent: student,
selectedStudents: selectedStudents
});
},
// 移除已添加的证书
removeBenefit(e) {
const index = e.currentTarget.dataset.index;
const selectedStudents = this.data.selectedStudents;
selectedStudents.splice(index, 1);
this.setData({
selectedStudents: selectedStudents
});
},
// 确认选择
confirmSelection() {
// 在这里处理已选中的证书
console.log('已选中的证书:', this.data.selectedStudents);
},
})
