修复完成卡片单选和多选功能
This commit is contained in:
@@ -1,55 +1,157 @@
|
||||
Component({
|
||||
data: {
|
||||
// 用对象存储多个卡片的选中状态，键为卡片ID，值为选中的选项ID
|
||||
selectedOptions: {} as Record<string, string>
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 选择选项
|
||||
* @param e 事件对象，包含卡片ID和选项ID
|
||||
*/
|
||||
selectOption(e: WechatMiniprogram.TouchEvent) {
|
||||
const { card, id } = e.currentTarget.dataset as { card: string; id: string };
|
||||
|
||||
// 更新选中状态（使用对象展开语法保持响应式）
|
||||
this.setData({
|
||||
selectedOptions: {
|
||||
...this.data.selectedOptions,
|
||||
[card]: id
|
||||
}
|
||||
});
|
||||
data: {
|
||||
rawCardData: [
|
||||
{
|
||||
"article_id": 123123148,
|
||||
"article_title": "多选测试",
|
||||
"vote_type": "multiple",
|
||||
"total_voters": 3,
|
||||
"end_time": "2025-10-22 00:59:59",
|
||||
"is_ended": false,
|
||||
"publisher_id": "xlsisanasifknfdg",
|
||||
"create_time": "2025-09-24 23:10:22",
|
||||
"options": [
|
||||
{ "id": 69, "name": "Go", "votes": 1, "is_voted": false },
|
||||
{ "id": 70, "name": "Python", "votes": 1, "is_voted": false },
|
||||
{ "id": 71, "name": "Rust", "votes": 1, "is_voted": false }
|
||||
],
|
||||
"user_has_voted": false,
|
||||
"user_voted_option_ids": null
|
||||
},
|
||||
{
|
||||
"article_id": 123123149,
|
||||
"article_title": "单选测试",
|
||||
"vote_type": "single",
|
||||
"total_voters": 5,
|
||||
"end_time": "2025-10-25 12:00:00",
|
||||
"is_ended": false,
|
||||
"publisher_id": "another_user_id",
|
||||
"create_time": "2025-09-25 10:00:00",
|
||||
"options": [
|
||||
{ "id": 72, "name": "JavaScript", "votes": 3, "is_voted": false },
|
||||
{ "id": 73, "name": "TypeScript", "votes": 2, "is_voted": false },
|
||||
{ "id": 74, "name": "Java", "votes": 0, "is_voted": false }
|
||||
],
|
||||
"user_has_voted": false,
|
||||
"user_voted_option_ids": null
|
||||
}
|
||||
],
|
||||
processedCardsData: [] as any[]
|
||||
},
|
||||
lifetimes: {
|
||||
attached() {
|
||||
const processedData = this.processVoteData(this.data.rawCardData);
|
||||
this.setData({
|
||||
processedCardsData: processedData
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
processVoteData(cards: any[]): any[] {
|
||||
return cards.map(card => {
|
||||
const totalVoters = card.total_voters;
|
||||
const optionsWithPercentage = card.options.map((option: any) => {
|
||||
let percentage: number;
|
||||
if (totalVoters === 0) {
|
||||
percentage = 0;
|
||||
} else {
|
||||
percentage = Number((option.votes / totalVoters * 100).toFixed(0));
|
||||
}
|
||||
return {
|
||||
...option,
|
||||
percentage: percentage,
|
||||
isSelected: false
|
||||
};
|
||||
});
|
||||
return {
|
||||
...card,
|
||||
options: optionsWithPercentage,
|
||||
// 在每个卡片对象内部维护自己的选中状态数组
|
||||
selectedOptions: [] as number[]
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 提交投票
|
||||
* @param e 事件对象，包含卡片ID
|
||||
*/
|
||||
submitVote(e: WechatMiniprogram.TouchEvent) {
|
||||
const { card } = e.currentTarget.dataset as { card: string };
|
||||
const selected = this.data.selectedOptions[card];
|
||||
|
||||
if (!selected) {
|
||||
wx.showToast({
|
||||
title: '请先选择一个选项',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
selectOption(e: WechatMiniprogram.TouchEvent) {
|
||||
const { optionId, cardId } = e.currentTarget.dataset as { optionId: number; cardId: number };
|
||||
const cardIndex = this.data.processedCardsData.findIndex(card => card.article_id === cardId);
|
||||
|
||||
if (cardIndex === -1) {
|
||||
return;
|
||||
}
|
||||
|
||||
const card = this.data.processedCardsData[cardIndex];
|
||||
|
||||
if (card.is_ended) {
|
||||
return;
|
||||
}
|
||||
|
||||
const newProcessedCardsData = [...this.data.processedCardsData];
|
||||
const currentCard = newProcessedCardsData[cardIndex];
|
||||
|
||||
if (currentCard.vote_type === 'multiple') {
|
||||
// 多选逻辑
|
||||
const option = currentCard.options.find((o: any) => o.id === optionId);
|
||||
if (option) {
|
||||
option.isSelected = !option.isSelected;
|
||||
}
|
||||
currentCard.selectedOptions = currentCard.options
|
||||
.filter((o: any) => o.isSelected)
|
||||
.map((o: any) => o.id);
|
||||
|
||||
} else if (currentCard.vote_type === 'single') {
|
||||
// 单选逻辑
|
||||
currentCard.options.forEach((option: any) => {
|
||||
option.isSelected = (option.id === optionId);
|
||||
});
|
||||
currentCard.selectedOptions = currentCard.options
|
||||
.filter((o: any) => o.isSelected)
|
||||
.map((o: any) => o.id);
|
||||
}
|
||||
|
||||
this.setData({
|
||||
processedCardsData: newProcessedCardsData
|
||||
}, () => {
|
||||
console.log(`卡片 ${cardId} 当前选中项:`, currentCard.selectedOptions);
|
||||
});
|
||||
return;
|
||||
},
|
||||
|
||||
submitVote(e: WechatMiniprogram.TouchEvent) {
|
||||
const { cardId } = e.currentTarget.dataset as { cardId: number };
|
||||
const card = this.data.processedCardsData.find(c => c.article_id === cardId);
|
||||
|
||||
if (!card) {
|
||||
console.error('未找到对应的卡片数据');
|
||||
return;
|
||||
}
|
||||
|
||||
// 可以通过triggerEvent向父组件传递投票结果
|
||||
|
||||
const selected = card.selectedOptions;
|
||||
|
||||
if (!selected || selected.length === 0) {
|
||||
wx.showToast({
|
||||
title: '请先选择至少一个选项',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 在这里输出你想要的信息
|
||||
console.log(`正在提交卡片ID: ${card.article_id}`);
|
||||
console.log('所选选项ID:', selected);
|
||||
|
||||
// 触发父组件的事件，并传递卡片ID和选中的选项
|
||||
this.triggerEvent('voteSuccess', {
|
||||
cardId: card,
|
||||
selectedOption: selected,
|
||||
timestamp: Date.now()
|
||||
cardId: card.article_id,
|
||||
selectedOptions: selected,
|
||||
timestamp: Date.now()
|
||||
});
|
||||
|
||||
|
||||
wx.showToast({
|
||||
title: '投票成功',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
title: '投票成功',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user