sundynix-plant-mp/pages/tasks/index.wxml

<!--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-custom">
      <view class="empty-scene">
        <view class="sun-box">
            <view class="sun-core"></view>
            <view class="sun-rays"></view>
        </view>
        <view class="cloud cloud-1"></view>
        <view class="cloud cloud-2"></view>
        
        <!-- Replaced Image with Rich Icon Group -->
        <view class="empty-icon-group plant-breathing">
           <view class="icon-bg-circle"></view>
           <text class="emoji-icon">🌿</text>
           <view class="sparkle s1"></view>
           <view class="sparkle s2"></view>
        </view>
      </view>
      
      <view class="empty-text">
        <text>今天很惬意</text>
        <text class="empty-sub">植物们正在享受阳光 SPA ☀️</text>
      </view>
      <t-button theme="primary" size="large" shape="round" bind:tap="gotoGarden" class="empty-btn">去看看花园</t-button>
    </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="{{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' : ''}}" 
                  style="{{task.isCompleted ? 'background-color: #4CAF50; border-color: #4CAF50;' : ''}}"
                  bindtap="handleTaskClick" 
                  data-task="{{task}}">
              <t-icon wx:if="{{task.isCompleted}}" name="check" size="28rpx" color="#FFF" />
            </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}}"
            adjust-position="{{false}}"
            cursor-spacing="120"
            show-confirm-bar="{{false}}"
            disable-default-padding="{{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>

  <!-- Sunshine Animation Layer -->
  <view class="sunshine-layer" wx:if="{{showSunshine}}">
    <view class="sunshine-pkg">
      <view class="sun-halo"></view>
      <text class="sun-core-emoji">☀️</text>
      <text class="sun-add-text">+50 能量</text>
    </view>
  </view>
</view>