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

miniprogram/pages/home/home.ts

@@ -1,55 +1,157 @@
 Component({
-    data: {
+  data: {
-      // 用对象存储多个卡片的选中状态，键为卡片ID，值为选中的选项ID
+      rawCardData: [
-      selectedOptions: {} as Record<string, string>
+        {
-    },
+          "article_id": 123123148,
-    methods: {
+          "article_title": "多选测试",
-      /**
+          "vote_type": "multiple",
-       * 选择选项
+          "total_voters": 3,
-       * @param e 事件对象，包含卡片ID和选项ID
+          "end_time": "2025-10-22 00:59:59",
-       */
+          "is_ended": false,
-      selectOption(e: WechatMiniprogram.TouchEvent) {
+          "publisher_id": "xlsisanasifknfdg",
-        const { card, id } = e.currentTarget.dataset as { card: string; id: string };
+          "create_time": "2025-09-24 23:10:22",
-        
+          "options": [
-        // 更新选中状态（使用对象展开语法保持响应式）
+            { "id": 69, "name": "Go", "votes": 1, "is_voted": false },
-        this.setData({
+            { "id": 70, "name": "Python", "votes": 1, "is_voted": false },
-          selectedOptions: {
+            { "id": 71, "name": "Rust", "votes": 1, "is_voted": false }
-            ...this.data.selectedOptions,
+          ],
-            [card]: id
+          "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 };
-       * @param e 事件对象，包含卡片ID
+          const cardIndex = this.data.processedCardsData.findIndex(card => card.article_id === cardId);
-       */
-      submitVote(e: WechatMiniprogram.TouchEvent) {
-        const { card } = e.currentTarget.dataset as { card: string };
-        const selected = this.data.selectedOptions[card];
           
-        if (!selected) {
+          if (cardIndex === -1) {
-          wx.showToast({
+              return;
-            title: '请先选择一个选项',
+          }
-            icon: 'none',
+          
-            duration: 2000
+          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,
+            cardId: card.article_id,
-          selectedOption: selected,
+            selectedOptions: selected,
-          timestamp: Date.now()
+            timestamp: Date.now()
         });
     
         wx.showToast({
-          title: '投票成功',
+            title: '投票成功',
-          icon: 'success',
+            icon: 'success',
-          duration: 2000
+            duration: 2000
         });
-      }
     }
-  });
+  }
-  
+});

miniprogram/pages/home/home.wxml

@@ -1,177 +1,83 @@
 <view style="height: 80vh; padding-bottom: 100rpx;">
-<scroll-view 
+  <scroll-view  
-  class="scroll-container" 
+    class="scroll-container"  
-  scroll-y="true"  
+    scroll-y="true"    
-  enable-flex="true"
+    enable-flex="true"
-  show-scrollbar="true"
+    show-scrollbar="true"
-  enhanced="true"
+    enhanced="true"
-  scroll-with-animation="true"
+    scroll-with-animation="true"
->
+  >
-  <!-- 卡片容器，使用纵向布局 -->
+    <view class="cards-container">
-  <view class="cards-container">
+      <block wx:for="{{processedCardsData}}" wx:for-item="card" wx:key="article_id">
-    <!-- 第一个卡片 -->
+        <view class="voting-card">
-    <view class="voting-card">
+          <view class="card-header">
-      <!-- 卡片内容保持不变 -->
+            <view class="user-info">
-      <view class="card-header">
+              <image src="https://picsum.photos/id/100/200/200" mode="widthFix" class="avatar" alt="用户头像"></image>
-        <view class="user-info">
+              <view class="user-details">
-          <image src="https://picsum.photos/id/64/200/200" mode="widthFix" class="avatar" alt="发起者头像"></image>
+                <text class="username">{{card.publisher_id}}</text>
-          <view class="user-details">
+                <text class="user-status">发起人</text>
-            <text class="username">张小萌</text>
+              </view>
-            <text class="user-status">需要你的帮助</text>
+            </view>
+            <view class="vote-status">{{card.is_ended ? '已结束' : '进行中'}}</view>
           </view>
+          
+          <view class="divider"></view>
+          
+          <view class="vote-title-section">
+            <text class="vote-title">{{card.article_title}} ({{card.vote_type === 'single' ? '单选' : '多选'}})</text>
+            <text class="vote-desc"></text>
+          </view>
+          
+          <view class="options-container">
+            <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-gray">
+                    <text class="iconfont icon-default"></text>
+                  </view>
+                  <view class="option-details">
+                    <text class="option-name">{{option.name}}</text>
+                    <text class="option-desc"></text>
+                  </view>
+                </view>
+                
+                <view class="option-action-btn">
+                  AI
+                </view>
+                
+                <text class="option-percent">{{option.percentage}}%</text>
+                
+                <view class="progress-bar">
+                  <view class="progress-value" style="width: {{option.percentage + '%'}}"></view>
+                </view>
+                
+                <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">已有 {{card.total_voters}} 人参与投票</text>
+            <text class="stats-text">{{card.is_ended ? '已结束' : '剩余 ' + card.end_time}}</text>
+          </view>
+          
+          <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">{{card.is_ended ? '投票结束' : '投我一票'}}</text>
+          </button>
         </view>
-        <view class="vote-status">进行中</view>
+      </block>
-      </view>
-      
-      <view class="divider"></view>
-      
-      <view class="vote-title-section">
-        <text class="vote-title">午餐该选哪个？好纠结啊！</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">
-          <view class="option-info">
-            <view class="option-icon bg-red">
-              <text class="iconfont icon-cutlery"></text>
-            </view>
-            <view class="option-details">
-              <text class="option-name">麻辣烫</text>
-              <text class="option-desc">鲜香麻辣，越吃越开胃</text>
-            </view>
-          </view>
-          <text class="option-percent">42%</text>
-          
-          <view class="progress-bar">
-            <view class="progress-value" style="width: 42%"></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' : ''}}">
-            <text class="iconfont icon-check-circle"></text>
-          </view>
-        </view>
-      </view>
-      
-      <view class="vote-stats">
-        <text class="stats-text">已有 126 人参与投票</text>
-        <text class="stats-text">剩余 23 小时结束</text>
-      </view>
-      
-      <!-- 投票按钮 -->
-      <button class="vote-btn" bindtap="submitVote" data-card="1">
-        <text class="iconfont icon-thumbs-up"></text>
-        <text class="btn-text">投我一票</text>
-      </button>
     </view>
-
+  </scroll-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>
-      </button>
-    </view>
-  </view>
-</scroll-view>
 </view>

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 {
+/* 移除 :hover 样式，以避免颜色冲突 */
-  border-color: #4F46E5;
+/*
-  background-color: rgba(79, 70, 229, 0.05);
-}
-
 .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; /* 禁用光标样式 */
+}