R524809
92 lines
2.8 KiB
TypeScript
92 lines
2.8 KiB
TypeScript
Page({
|
|
data: {
|
|
// 选中字卡列表，复用 index 页的结构 [{ word, color }]
|
|
cardList: [] as { word: string; color: string }[],
|
|
showSelectWordPopup: false,
|
|
|
|
// 田字格配置
|
|
rows: 10,
|
|
cols: 12,
|
|
rowsArray: [] as number[],
|
|
colsArray: [] as number[],
|
|
rowHeaderWords: [] as string[],
|
|
},
|
|
|
|
onLoad() {
|
|
this.initGrid();
|
|
},
|
|
|
|
// 输入组件回调
|
|
onConfirmInput(e: any) {
|
|
const value: string = (e && e.detail && e.detail.value) || '';
|
|
const text = (value || '').trim();
|
|
if (!text) return;
|
|
|
|
if (!this.isChineseText(text)) {
|
|
wx.showToast({ title: '请输入汉字', icon: 'none' });
|
|
return;
|
|
}
|
|
|
|
const chars = this.splitToSingleChars(text);
|
|
const { cardList } = this.data as any;
|
|
const exists = new Set(cardList.map((c: any) => c.word));
|
|
const newList = [...cardList];
|
|
chars.forEach((ch) => {
|
|
if (!exists.has(ch)) {
|
|
newList.push({ word: ch, color: '#141414' });
|
|
}
|
|
});
|
|
this.setData({ cardList: newList }, () => this.updateRowHeaderWords());
|
|
},
|
|
|
|
// 选择面板
|
|
openSelectWordPopup() {
|
|
this.setData({ showSelectWordPopup: true });
|
|
},
|
|
closeSelectWordPopup() {
|
|
this.setData({ showSelectWordPopup: false });
|
|
},
|
|
onChangeWord(e: any) {
|
|
const { cardList } = e.detail || {};
|
|
this.setData({ cardList }, () => this.updateRowHeaderWords());
|
|
},
|
|
|
|
// 删除与颜色
|
|
deleteWordCard(e: any) {
|
|
const index = e.detail && e.detail.index;
|
|
const { cardList } = this.data as any;
|
|
const next = cardList.filter((_: any, i: number) => i !== index);
|
|
this.setData({ cardList: next }, () => this.updateRowHeaderWords());
|
|
},
|
|
onColorTap() { },
|
|
|
|
// 校验 & 分割
|
|
isChineseText(text: string): boolean {
|
|
const chineseRegex = /^[\u4e00-\u9fff]+$/;
|
|
return chineseRegex.test(text);
|
|
},
|
|
splitToSingleChars(text: string): string[] {
|
|
const chineseRegex = /[\u4e00-\u9fff]/g;
|
|
const matches = text.match(chineseRegex);
|
|
return matches || [];
|
|
},
|
|
|
|
// 田字格
|
|
initGrid() {
|
|
const { rows, cols } = this.data as any;
|
|
const rowsArray = Array.from({ length: rows }, (_, i) => i);
|
|
const colsArray = Array.from({ length: cols }, (_, i) => i);
|
|
this.setData({ rowsArray, colsArray });
|
|
},
|
|
updateRowHeaderWords() {
|
|
const { rows, cardList } = this.data as any;
|
|
const rowHeaderWords: string[] = [];
|
|
for (let i = 0; i < rows; i++) {
|
|
rowHeaderWords.push((cardList[i] && cardList[i].word) || '');
|
|
}
|
|
this.setData({ rowHeaderWords });
|
|
},
|
|
});
|
|
|
|
|