Blizzard
106 lines
5.0 KiB
Plaintext
106 lines
5.0 KiB
Plaintext
<!--pages/tasks/index.wxml-->
|
|
<view class="tasks-page">
|
|
|
|
<!-- Progress Card -->
|
|
<view class="progress-section">
|
|
<view class="progress-card">
|
|
<view class="progress-info">
|
|
<text class="progress-card-title">今日完成进度</text>
|
|
<text class="progress-card-desc">{{progress}}% - 继续保持！🌿</text>
|
|
</view>
|
|
<view class="progress-circle">
|
|
<view class="progress-ring" style="--progress-deg: calc({{progress}} * 3.6deg);"></view>
|
|
<text class="percentage">{{progress}}%</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Tasks Container -->
|
|
<view class="tasks-container">
|
|
<text class="section-title">今日待办</text>
|
|
|
|
<view wx:if="{{tasks.length === 0}}" class="empty-state">
|
|
<text>太棒了！所有任务都已完成 🎉</text>
|
|
</view>
|
|
|
|
<scroll-view wx:else scroll-y class="task-list" enhanced show-scrollbar="{{false}}">
|
|
<view wx:for="{{groupedTasks}}" wx:key="plantName" class="plant-task-card {{item.hasOverdue ? 'has-overdue' : ''}}">
|
|
<view class="card-header-row">
|
|
<view class="plant-info-brief">
|
|
<view class="plant-thumb-small">
|
|
<image wx:if="{{item.plantImage}}" src="/assets/{{item.plantImage}}" mode="aspectFill"></image>
|
|
<view wx:else class="thumb-placeholder">{{item.plantName[0]}}</view>
|
|
</view>
|
|
<text class="plant-name-title">{{item.plantName}}</text>
|
|
</view>
|
|
<text wx:if="{{item.hasOverdue}}" class="group-overdue-badge">有任务逾期</text>
|
|
</view>
|
|
|
|
<view class="plant-tasks-list">
|
|
<view wx:for="{{item.tasks}}" wx:key="id" wx:for-item="task" class="mini-task-row">
|
|
<view class="mini-task-left">
|
|
<!-- Task Icon with dynamic colors from backend -->
|
|
<view class="task-type-icon-circle" style="background: {{task.taskIcon ? task.taskIcon.bgColor : '#f5f5f5'}};">
|
|
<t-icon wx:if="{{task.taskIcon}}" name="{{task.taskIcon.icon}}" size="36rpx" color="{{task.taskIcon.color}}" />
|
|
<t-icon wx:else name="calendar-1" size="36rpx" color="#999" />
|
|
</view>
|
|
<view class="mini-task-text">
|
|
<!-- Use taskType name from taskIcon or fallback to computed name -->
|
|
<text class="task-label">{{task.taskIcon ? task.taskIcon.name : (task.taskType === 'water'?'浇水':(task.taskType==='fertilize'?'施肥':(task.taskType==='prune'?'修剪':(task.taskType==='repot'?'换盆':'任务'))))}}</text>
|
|
<text wx:if="{{task.isOverdue}}" class="task-overdue-text">{{task.overdueDays}}天前</text>
|
|
</view>
|
|
</view>
|
|
<view class="mini-check-btn {{task.isOverdue ? 'btn-urgent' : ''}}" bindtap="handleTaskClick" data-task="{{task}}">
|
|
<t-icon name="check" size="32rpx" color="{{task.isOverdue ? '#EF5350' : '#E0E0E0'}}" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="height: 120rpx;"></view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<!-- Complete Task Popup -->
|
|
<t-popup visible="{{completingTask}}" bind:visible-change="onPopupVisibleChange" placement="center">
|
|
<view class="modal-card">
|
|
<view class="modal-header">
|
|
<text class="modal-title">确认完成任务</text>
|
|
<view class="close-btn" bindtap="onPopupVisibleChange" data-visible="{{false}}">
|
|
<t-icon name="close" size="40rpx" color="#90A4AE" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="task-confirm-content" wx:if="{{completingTask}}">
|
|
<view class="confirm-plant-info">
|
|
<view class="confirm-icon" style="background: {{completingTask.taskIcon ? completingTask.taskIcon.bgColor : '#f5f5f5'}};">
|
|
<t-icon wx:if="{{completingTask.taskIcon}}" name="{{completingTask.taskIcon.icon}}" size="48rpx" color="{{completingTask.taskIcon.color}}" />
|
|
<t-icon wx:else name="calendar-1" size="48rpx" color="#999" />
|
|
</view>
|
|
<view class="confirm-text">
|
|
<text class="cp-name">{{completingTask.plantName}}</text>
|
|
<text class="cp-task">{{completingTask.taskIcon ? completingTask.taskIcon.name : (completingTask.taskType === 'water'?'浇水':(completingTask.taskType==='fertilize'?'施肥':(completingTask.taskType==='prune'?'修剪':(completingTask.taskType==='repot'?'换盆':'日常任务'))))}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="remark-section">
|
|
<text class="remark-label">添加记录备注 (可选)</text>
|
|
<textarea
|
|
class="remark-input"
|
|
placeholder="例如：浇了500ml水..."
|
|
value="{{remark}}"
|
|
bindinput="onRemarkInput"
|
|
fixed="{{true}}"
|
|
/>
|
|
</view>
|
|
|
|
<view class="confirm-btn-wrap">
|
|
<view class="confirm-complete-btn" bindtap="handleConfirmComplete">
|
|
<t-icon name="check" size="36rpx" color="#FFF" style="margin-right: 12rpx;" />
|
|
<text>确认完成并记录</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</t-popup>
|
|
</view>
|