157 lines
5.4 KiB
TypeScript
157 lines
5.4 KiB
TypeScript
Component({
|
||
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[]
|
||
};
|
||
});
|
||
},
|
||
|
||
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);
|
||
});
|
||
},
|
||
|
||
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;
|
||
}
|
||
|
||
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.article_id,
|
||
selectedOptions: selected,
|
||
timestamp: Date.now()
|
||
});
|
||
|
||
wx.showToast({
|
||
title: '投票成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
});
|
||
}
|
||
}
|
||
}); |