mayiming/toutoukan_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复完成卡片单选和多选功能

Browse Source
This commit is contained in:
马懿铭
2025-09-25 01:18:30 +08:00
parent f8f5fc87dd
commit c1b7a1174d
3 changed files with 273 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
miniprogram/pages/home/home.ts
View File

@@ -1,46 +1,149 @@
Component({
data: {
// 用对象存储多个卡片的选中状态，键为卡片ID，值为选中的选项ID
selectedOptions: {} as Record<string, string>
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: {
/**
* 选择选项
* @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
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];
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 (!selected) {
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: '请先选择一个选项',
title: '请先选择至少一个选项',
icon: 'none',
duration: 2000
});
return;
}
// 可以通过triggerEvent向父组件传递投票结果
// 在这里输出你想要的信息
console.log(`正在提交卡片ID: ${card.article_id}`);
console.log('所选选项ID:', selected);
// 触发父组件的事件，并传递卡片ID和选中的选项
this.triggerEvent('voteSuccess', {
cardId: card,
selectedOption: selected,
cardId: card.article_id,
selectedOptions: selected,
timestamp: Date.now()
});
@@ -52,4 +155,3 @@ Component({
}
}
});

166
miniprogram/pages/home/home.wxml
View File

@@ -7,171 +7,77 @@
enhanced="true"
scroll-with-animation="true"
>
<!-- 卡片容器，使用纵向布局 -->
<view class="cards-container">
<!-- 第一个卡片 -->
<block wx:for="{{processedCardsData}}" wx:for-item="card" wx:key="article_id">
<view class="voting-card">
<!-- 卡片内容保持不变 -->
<view class="card-header">
<view class="user-info">
<image src="https://picsum.photos/id/64/200/200" mode="widthFix" class="avatar" alt="发起者头像"></image>
<image src="https://picsum.photos/id/100/200/200" mode="widthFix" class="avatar" alt="用户头像"></image>
<view class="user-details">
<text class="username">张小萌</text>
<text class="user-status">需要你的帮助</text>
<text class="username">{{card.publisher_id}}</text>
<text class="user-status">发起人</text>
</view>
</view>
<view class="vote-status">进行中</view>
<view class="vote-status">{{card.is_ended ? '已结束' : '进行中'}}</view>
</view>
<view class="divider"></view>
<view class="vote-title-section">
<text class="vote-title">午餐该选哪个？好纠结啊！</text>
<text class="vote-desc">大家帮我投个票吧，选择困难症又犯了...</text>
<text class="vote-title">{{card.article_title}} ({{card.vote_type === 'single' ? '单选' : '多选'}})</text>
<text class="vote-desc"></text>
</view>
<!-- 选项区域 -->
<view class="options-container">
<!-- 选项1 -->
<view class="option-item {{selectedOption1 === '1' ? 'selected' : ''}}" bindtap="selectOption" data-id="1" data-card="1">
<block wx:for="{{card.options}}" wx:for-item="option" wx:key="id">
<view
class="option-item {{option.isSelected ? 'selected' : ''}} {{card.is_ended ? 'disabled-option' : ''}}"
bindtap="selectOption"
data-card-id="{{card.article_id}}"
data-option-id="{{option.id}}">
<view class="option-info">
<view class="option-icon bg-red">
<text class="iconfont icon-cutlery"></text>
<view class="option-icon bg-gray">
<text class="iconfont icon-default"></text>
</view>
<view class="option-details">
<text class="option-name">麻辣烫</text>
<text class="option-desc">鲜香麻辣，越吃越开胃</text>
<text class="option-name">{{option.name}}</text>
<text class="option-desc"></text>
</view>
</view>
<text class="option-percent">42%</text>
<view class="option-action-btn">
AI
</view>
<text class="option-percent">{{option.percentage}}%</text>
<view class="progress-bar">
<view class="progress-value" style="width: 42%"></view>
<view class="progress-value" style="width: {{option.percentage + '%'}}"></view>
</view>
<view class="vote-indicator {{selectedOption1 === '1' ? 'show' : ''}}">
<text class="iconfont icon-check-circle"></text>
</view>
</view>
<!-- 选项2 -->
<view class="option-item {{selectedOption1 === '2' ? 'selected' : ''}}" bindtap="selectOption" data-id="2" data-card="1">
<view class="option-info">
<view class="option-icon bg-yellow">
<text class="iconfont icon-coffee"></text>
</view>
<view class="option-details">
<text class="option-name">汉堡套餐</text>
<text class="option-desc">快捷方便，配冰可乐</text>
</view>
</view>
<text class="option-percent">28%</text>
<view class="progress-bar">
<view class="progress-value" style="width: 28%"></view>
</view>
<view class="vote-indicator {{selectedOption1 === '2' ? 'show' : ''}}">
<text class="iconfont icon-check-circle"></text>
</view>
</view>
<!-- 选项3 -->
<view class="option-item {{selectedOption1 === '3' ? 'selected' : ''}}" bindtap="selectOption" data-id="3" data-card="1">
<view class="option-info">
<view class="option-icon bg-green">
<text class="iconfont icon-leaf"></text>
</view>
<view class="option-details">
<text class="option-name">沙拉轻食</text>
<text class="option-desc">健康低卡，适合减脂</text>
</view>
</view>
<text class="option-percent">30%</text>
<view class="progress-bar">
<view class="progress-value" style="width: 30%"></view>
</view>
<view class="vote-indicator {{selectedOption1 === '3' ? 'show' : ''}}">
<view class="vote-indicator {{option.isSelected ? 'show' : ''}}">
<text class="iconfont icon-check-circle"></text>
</view>
</view>
</block>
</view>
<view class="vote-stats">
<text class="stats-text">已有 126 人参与投票</text>
<text class="stats-text">剩余 23 小时结束</text>
<text class="stats-text">已有 {{card.total_voters}} 人参与投票</text>
<text class="stats-text">{{card.is_ended ? '已结束' : '剩余 ' + card.end_time}}</text>
</view>
<!-- 投票按钮 -->
<button class="vote-btn" bindtap="submitVote" data-card="1">
<button
class="vote-btn {{card.is_ended ? 'vote-btn-ended' : ''}}"
disabled="{{card.is_ended}}"
bindtap="submitVote"
data-card-id="{{card.article_id}}">
<text class="iconfont icon-thumbs-up"></text>
<text class="btn-text">投我一票</text>
</button>
</view>
<!-- 第二个卡片 -->
<view class="voting-card">
<!-- 卡片内容保持不变 -->
<view class="card-header">
<view class="user-info">
<image src="https://picsum.photos/id/91/200/200" mode="widthFix" class="avatar" alt="发起者头像"></image>
<view class="user-details">
<text class="username">李小强</text>
<text class="user-status">团队活动投票</text>
</view>
</view>
<view class="vote-status">进行中</view>
</view>
<!-- 其余内容省略（与原代码一致） -->
<view class="divider"></view>
<view class="vote-title-section">
<text class="vote-title">周末团建活动选哪个？</text>
<text class="vote-desc">大家踊跃投票，少数服从多数~</text>
</view>
<!-- 选项区域（省略） -->
<view class="vote-stats">
<text class="stats-text">已有 38 人参与投票</text>
<text class="stats-text">剩余 45 小时结束</text>
</view>
<button class="vote-btn" bindtap="submitVote" data-card="2">
<text class="iconfont icon-thumbs-up"></text>
<text class="btn-text">投我一票</text>
</button>
</view>
<!-- 第三个卡片 -->
<view class="voting-card">
<!-- 卡片内容保持不变 -->
<view class="card-header">
<view class="user-info">
<image src="https://picsum.photos/id/26/200/200" mode="widthFix" class="avatar" alt="发起者头像"></image>
<view class="user-details">
<text class="username">王小花</text>
<text class="user-status">购物选择投票</text>
</view>
</view>
<view class="vote-status">进行中</view>
</view>
<!-- 其余内容省略（与原代码一致） -->
<view class="divider"></view>
<view class="vote-title-section">
<text class="vote-title">买哪个牌子的笔记本电脑？</text>
<text class="vote-desc">主要用于办公和轻度设计</text>
</view>
<!-- 选项区域（省略） -->
<view class="vote-stats">
<text class="stats-text">已有 76 人参与投票</text>
<text class="stats-text">剩余 12 小时结束</text>
</view>
<button class="vote-btn" bindtap="submitVote" data-card="3">
<text class="iconfont icon-thumbs-up"></text>
<text class="btn-text">投我一票</text>
<text class="btn-text">{{card.is_ended ? '投票结束' : '投我一票'}}</text>
</button>
</view>
</block>
</view>
</scroll-view>
</view>

53
miniprogram/pages/home/home.wxss
View File

@@ -7,6 +7,7 @@
background-color: #f5f7fa;
padding: 20rpx;
}
/* 卡片容器使用纵向布局 */
.cards-container {
display: flex;
@@ -17,7 +18,7 @@
box-sizing: border-box;
}
/* 投票卡片卡片样式 */
/* 投票卡片样式 */
.voting-card {
width: 100%;
min-height: 400px; /* 卡片最小高度，可根据内容调整 */
@@ -28,7 +29,6 @@
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; /* 禁用光标样式 */
}