diff --git a/miniprogram/pages/home/home.ts b/miniprogram/pages/home/home.ts index 78d0c68..5c72933 100644 --- a/miniprogram/pages/home/home.ts +++ b/miniprogram/pages/home/home.ts @@ -1,55 +1,157 @@ Component({ - data: { - // 用对象存储多个卡片的选中状态,键为卡片ID,值为选中的选项ID - selectedOptions: {} as Record - }, - 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 }); - } } - }); - \ No newline at end of file + } +}); \ No newline at end of file diff --git a/miniprogram/pages/home/home.wxml b/miniprogram/pages/home/home.wxml index 1474234..92376ab 100644 --- a/miniprogram/pages/home/home.wxml +++ b/miniprogram/pages/home/home.wxml @@ -1,177 +1,83 @@ - - - - - - - - - - + + \ No newline at end of file diff --git a/miniprogram/pages/home/home.wxss b/miniprogram/pages/home/home.wxss index cf60cc3..6a3555b 100644 --- a/miniprogram/pages/home/home.wxss +++ b/miniprogram/pages/home/home.wxss @@ -7,6 +7,7 @@ background-color: #f5f7fa; padding: 20rpx; } + /* 卡片容器使用纵向布局 */ .cards-container { display: flex; @@ -17,18 +18,17 @@ box-sizing: border-box; } -/* 投票卡片卡片样式 */ +/* 投票卡片样式 */ .voting-card { width: 100%; min-height: 400px; /* 卡片最小高度,可根据内容调整 */ background: #fff; border-radius: 10px; - box-shadow: 0 2px 8px rgba(0,0,0,0.1); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); padding: 15px; box-sizing: border-box; } - /* 卡片头部样式 */ .card-header { display: flex; @@ -108,15 +108,18 @@ transition: all 0.3s; } -.option-item.selected { - border-color: #4F46E5; - background-color: rgba(79, 70, 229, 0.05); -} - +/* 移除 :hover 样式,以避免颜色冲突 */ +/* .option-item:hover { border-color: rgba(79, 70, 229, 0.3); background-color: rgba(79, 70, 229, 0.03); } +*/ + +.option-item.selected { + border-color: #4F46E5; + background-color: rgba(79, 70, 229, 0.05); +} .option-info { display: flex; @@ -278,3 +281,39 @@ .toast-text { font-size: 28rpx; } + +/* AI 操作按钮 */ +.option-action-btn { + position: absolute; + top: 8px; /* 调整距离顶部 */ + right: 8px; /* 调整距离右侧 */ + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + background-color: #e0e0e0; + border-radius: 8px; + color: #333; + font-weight: bold; + font-size: 14px; + z-index: 10; +} + +.option-action-btn .iconfont { + font-size: 18px; +} + +/* 投票按钮 - 已结束状态 */ +.vote-btn-ended { + background-color: #ccc; /* 灰色背景 */ + color: #888; /* 灰色文字 */ + cursor: not-allowed; /* 禁用光标样式 */ +} + +/* 禁用选项状态 */ +.disabled-option { + opacity: 0.6; /* 降低透明度表示禁用 */ + pointer-events: none; /* 禁止鼠标事件 */ + cursor: not-allowed; /* 禁用光标样式 */ +} \ No newline at end of file