Commit 31ab18fe authored by 李维's avatar 李维

完成文字选项多选

parent 370448c0
...@@ -10,13 +10,16 @@ const {ccclass, property} = cc._decorator; ...@@ -10,13 +10,16 @@ const {ccclass, property} = cc._decorator;
@ccclass @ccclass
export default class NewClass extends cc.Component { export default class NewClass extends cc.Component {
@property({displayName: "标题内容", }) @property({displayName: "标题内容", })
titleName: string = "请选择答案"; titleName: string = "请选择答案(可能有多个选项)";
@property({type: cc.Float, displayName: "窗口宽度", }) @property({type: cc.Float, displayName: "窗口宽度", })
width: number = 1000; width: number = 1000;
@property({type: cc.Float, displayName: "标题高度", }) @property({type: cc.Float, displayName: "标题高度", })
headerHeight: number = 150; headerHeight: number = 120;
@property({type: cc.Float, displayName: "底栏高度", })
footerHeight: number = 120;
@property({type: cc.Float, displayName: "选项高度", }) @property({type: cc.Float, displayName: "选项高度", })
optionHeight: number = 120; optionHeight: number = 120;
...@@ -40,9 +43,11 @@ export default class NewClass extends cc.Component { ...@@ -40,9 +43,11 @@ export default class NewClass extends cc.Component {
const center = cc.find("center", this.node); const center = cc.find("center", this.node);
const header = cc.find("center/header", this.node); const header = cc.find("center/header", this.node);
const list = cc.find("center/list", this.node); const list = cc.find("center/list", this.node);
const footer = cc.find("center/footer", this.node);
center.width = this.width; center.width = this.width;
header.width = this.width; header.width = this.width;
footer.width = this.width;
list.width = this.width; list.width = this.width;
this.node.x = 0; this.node.x = 0;
...@@ -91,13 +96,15 @@ export default class NewClass extends cc.Component { ...@@ -91,13 +96,15 @@ export default class NewClass extends cc.Component {
const list = cc.find("center/list", this.node); const list = cc.find("center/list", this.node);
if(type == "textList") { if(type == "textList") {
this.initTitle("请选择答案"); this.initTitle("请选择答案(可能有多个选项)");
const listLayout = cc.find("center/list/layout_options", this.node); const listLayout = cc.find("center/list/layout_options", this.node);
const itemTemplate = cc.find("center/list/layout_options/item_tempate", this.node); const itemTemplate = cc.find("center/list/layout_options/item_tempate", this.node);
const buttonOK = cc.find("center/footer/btn_ok", this.node);
listLayout.active = true; listLayout.active = true;
option.forEach((item, index) => { option.forEach((item, index) => {
const optionNode = cc.instantiate(itemTemplate); const optionNode = cc.instantiate(itemTemplate);
const check = cc.find("icon_check", optionNode)
// 第一个选项不显示顶部分隔条 // 第一个选项不显示顶部分隔条
if(index == 0) { if(index == 0) {
cc.find("line_top", optionNode).active = false; cc.find("line_top", optionNode).active = false;
...@@ -105,17 +112,23 @@ export default class NewClass extends cc.Component { ...@@ -105,17 +112,23 @@ export default class NewClass extends cc.Component {
optionNode.name = `option_${index}` optionNode.name = `option_${index}`
const text = cc.find("text", optionNode); const text = cc.find("text", optionNode);
text.getComponent(cc.Label).string = item.label; text.getComponent(cc.Label).string = item.label;
check.active = item.selected;
optionNode.on("click", ()=>{ optionNode.on("click", ()=>{
this.node.emit("onSelected", item); item.selected = item.selected ? false : true;
this.hide(); check.active = item.selected;
}) })
optionNode.active = true; optionNode.active = true;
listLayout.addChild(optionNode); listLayout.addChild(optionNode);
}); });
center.height = option.length * this.optionHeight + this.headerHeight + this.footerHeight;
center.height = option.length * this.optionHeight + this.headerHeight;
list.height = option.length * this.optionHeight; list.height = option.length * this.optionHeight;
listLayout.height = option.length * this.optionHeight; listLayout.height = option.length * this.optionHeight;
buttonOK.off("click")
buttonOK.on("click", ()=>{
this.node.emit("onSelected", option);
this.hide();
})
} else { } else {
const rightWrongLayout = cc.find("center/list/layout_right_wrong", this.node); const rightWrongLayout = cc.find("center/list/layout_right_wrong", this.node);
const rightIcon = cc.find("right/icon_right", rightWrongLayout); const rightIcon = cc.find("right/icon_right", rightWrongLayout);
......
This diff is collapsed.
...@@ -2873,6 +2873,7 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -2873,6 +2873,7 @@ export default class SceneComponent extends MyCocosSceneComponent {
return validater return validater
} }
// 设置文字选项 多选
setTextOptionListMultiple(contentData, debugMode=false) { setTextOptionListMultiple(contentData, debugMode=false) {
// 存放子校验器 // 存放子校验器
const subValidater = []; const subValidater = [];
...@@ -2909,6 +2910,8 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -2909,6 +2910,8 @@ export default class SceneComponent extends MyCocosSceneComponent {
index: index, index: index,
label: option.optionShowText ? option.optionShowText : option.text, label: option.optionShowText ? option.optionShowText : option.text,
value: option.text, value: option.text,
selected: false,
selectedLabel: "",
strikeOutNode: null strikeOutNode: null
}) })
}); });
...@@ -2919,7 +2922,7 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -2919,7 +2922,7 @@ export default class SceneComponent extends MyCocosSceneComponent {
const resultRect = this.newRectNode(hotZoneItemData, layer_2, debugMode); const resultRect = this.newRectNode(hotZoneItemData, layer_2, debugMode);
this.newDecorativeFrame(hotZoneItemData, layer_1, "#FFFFFF", "#6dbef6", debugMode); this.newDecorativeFrame(hotZoneItemData, layer_1, "#FFFFFF", "#6dbef6", debugMode);
const rect = this.newRectNode(hotZoneItemData, layer_4, debugMode); const rect = this.newRectNode(hotZoneItemData, layer_4, debugMode);
let selectData = JSON.parse(JSON.stringify(optionList))
resultRects.push({ resultRects.push({
detail: { detail: {
contentType: TEXT_SELECT, contentType: TEXT_SELECT,
...@@ -2950,10 +2953,27 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -2950,10 +2953,27 @@ export default class SceneComponent extends MyCocosSceneComponent {
lastText = rect.cleanLast() lastText = rect.cleanLast()
} }
let selectData = await this.asyncShowMultipleSelectModal(optionList, "textList"); const _selectData = await this.asyncShowMultipleSelectModal(selectData, "textList");
// 如果点击了取消 则还原上次显示 // 如果点击了取消 则还原上次显示
// TODO:selectData.label 为显示的文本,比如用户选择了A、B、D三个选项,那么selectData.label的值就是 A/B/D if(_selectData) {
const inputLabel = this.newInputTextNode(selectData?selectData.label:lastText, 0); selectData = _selectData
}
let selectedLabels = [];
selectData.forEach(opItem => {
if(opItem.selected) {
selectedLabels.push(opItem.label)
}
});
let showLabel = ""
if(selectData.length > 0) {
showLabel = selectedLabels.join("/");
} else {
showLabel = lastText;
}
const inputLabel = this.newInputTextNode(showLabel, 0);
inputLabel.x = rect.width / 2; inputLabel.x = rect.width / 2;
inputLabel.y = rect.height / 2; inputLabel.y = rect.height / 2;
...@@ -2961,7 +2981,7 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -2961,7 +2981,7 @@ export default class SceneComponent extends MyCocosSceneComponent {
rect.cleanLast = () => { rect.cleanLast = () => {
inputLabel.destroy(); inputLabel.destroy();
if(selectData) { if(selectData) {
return selectData.label; return showLabel;
} else { } else {
return lastText return lastText
} }
...@@ -2977,9 +2997,9 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -2977,9 +2997,9 @@ export default class SceneComponent extends MyCocosSceneComponent {
contentType: TEXT_SELECT, contentType: TEXT_SELECT,
configIndex: contentData.index, configIndex: contentData.index,
contentIndex: index, contentIndex: index,
currentSelectIndex: selectData.indexArr, currentSelectIndex: [],
currentSelectText: selectData.label, currentSelectText: showLabel,
correctSelectIndex: index, correctSelectIndex: option.selectOptionListIndexArr,
correctSelectText: option.text, correctSelectText: option.text,
right: true right: true
}, },
...@@ -2988,6 +3008,8 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -2988,6 +3008,8 @@ export default class SceneComponent extends MyCocosSceneComponent {
allRight: true, allRight: true,
score: 0 score: 0
} }
const currentSelectIndexArr = [];
const correctSelectTextArr = [];
let right = false; let right = false;
if(contentData.useSelectOptionList) { if(contentData.useSelectOptionList) {
...@@ -2996,10 +3018,31 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -2996,10 +3018,31 @@ export default class SceneComponent extends MyCocosSceneComponent {
// selectData.indexArr - 当前用户选择的序号数组 // selectData.indexArr - 当前用户选择的序号数组
// 需要修改线面的这行代码的逻辑,判断两个数组的元素完全相同 right = true // 需要修改线面的这行代码的逻辑,判断两个数组的元素完全相同 right = true
// right = selectData.indexArr == option.selectOptionListIndexArr; // right = selectData.indexArr == option.selectOptionListIndexArr;
let allRight = true;
option.selectOptionListIndexArr.forEach(opIndex => {
if(selectData[opIndex]) {
if(!selectData[opIndex].selected) {
allRight = false;
}
correctSelectTextArr.push(selectData[opIndex].label)
}
});
selectData.forEach((selItem, index) => {
if(selItem.selected) {
currentSelectIndexArr.push(index)
}
});
right = allRight;
} else { } else {
right = selectData.index == index right = selectData.index == index
} }
result.detail.currentSelectIndex = currentSelectIndexArr;
result.detail.correctSelectText = correctSelectTextArr.join("/");
// 选择数据的索引 和 当前索引是否相等 判断是否选择正确 // 选择数据的索引 和 当前索引是否相等 判断是否选择正确
if(right) { if(right) {
// 正确 返回分数 // 正确 返回分数
......
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment