修复完成卡片单选和多选功能
This commit is contained in:
@@ -1,177 +1,83 @@
|
||||
<view style="height: 80vh; padding-bottom: 100rpx;">
|
||||
<scroll-view
|
||||
class="scroll-container"
|
||||
scroll-y="true"
|
||||
enable-flex="true"
|
||||
show-scrollbar="true"
|
||||
enhanced="true"
|
||||
scroll-with-animation="true"
|
||||
>
|
||||
<!-- 卡片容器，使用纵向布局 -->
|
||||
<view class="cards-container">
|
||||
<!-- 第一个卡片 -->
|
||||
<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>
|
||||
<view class="user-details">
|
||||
<text class="username">张小萌</text>
|
||||
<text class="user-status">需要你的帮助</text>
|
||||
<scroll-view
|
||||
class="scroll-container"
|
||||
scroll-y="true"
|
||||
enable-flex="true"
|
||||
show-scrollbar="true"
|
||||
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/100/200/200" mode="widthFix" class="avatar" alt="用户头像"></image>
|
||||
<view class="user-details">
|
||||
<text class="username">{{card.publisher_id}}</text>
|
||||
<text class="user-status">发起人</text>
|
||||
</view>
|
||||
</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>
|
||||
</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>
|
||||
</block>
|
||||
</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>
|
||||
</scroll-view>
|
||||
</view>
|
||||
Reference in New Issue
Block a user