cfc/miniprogram/pages/task-list/task-list.wxml

<!--pages/task-list/task-list.wxml-->
<view class="container">
  <!-- 筛选栏 -->
  <view class="filter-bar">
    <view class="date-filter">
      <view 
        class="filter-item {{dateType === 'today' ? 'active' : ''}}"
        data-type="today"
        bindtap="onDateTypeChange"
      >今日</view>
      <view 
        class="filter-item {{dateType === 'week' ? 'active' : ''}}"
        data-type="week"
        bindtap="onDateTypeChange"
      >本周</view>
      <view 
        class="filter-item {{dateType === 'month' ? 'active' : ''}}"
        data-type="month"
        bindtap="onDateTypeChange"
      >本月</view>
    </view>
    
    <view class="status-filter">
      <view 
        class="filter-item {{statusFilter === 'all' ? 'active' : ''}}"
        data-status="all"
        bindtap="onStatusFilterChange"
      >全部</view>
      <view 
        class="filter-item {{statusFilter === 'pending' ? 'active' : ''}}"
        data-status="pending"
        bindtap="onStatusFilterChange"
      >进行中</view>
      <view 
        class="filter-item {{statusFilter === 'completed' ? 'active' : ''}}"
        data-status="completed"
        bindtap="onStatusFilterChange"
      >已完成</view>
      <view 
        class="filter-item {{statusFilter === 'overdue' ? 'active' : ''}}"
        data-status="overdue"
        bindtap="onStatusFilterChange"
      >已逾期</view>
    </view>
  </view>

  <!-- 任务列表 -->
  <view class="task-list">
    <block wx:if="{{filteredTasks.length > 0}}">
      <view 
        class="task-item {{item.status}}"
        wx:for="{{filteredTasks}}"
        wx:key="id"
        data-id="{{item.id}}"
        bindtap="onTaskTap"
      >
        <view class="task-status-indicator">
          <view class="status-dot {{item.status}}"></view>
        </view>
        
        <view class="task-content">
          <view class="task-header">
            <text class="task-title">{{item.title}}</text>
            <text class="task-points">+{{item.points}}分</text>
          </view>
          
          <text class="task-desc">{{item.description}}</text>
          
          <view class="task-footer">
            <text class="task-category">{{item.category}}</text>
            <text class="task-deadline">截止: {{item.deadline}}</text>
            <text class="task-review" wx:if="{{item.needReview}}">需要审核</text>
          </view>
        </view>
        
        <view class="task-arrow">
          <text class="arrow-icon">></text>
        </view>
      </view>
    </block>
    
    <!-- 空状态 -->
    <view class="empty-state" wx:else>
      <image class="empty-icon" src="/images/empty-task.svg" mode="aspectFit"></image>
      <text class="empty-text">暂无任务</text>
      <text class="empty-desc">点击下方按钮创建第一个任务</text>
    </view>
  </view>

  <!-- 加载状态 -->
  <view class="loading-state" wx:if="{{loading}}">
    <text>加载中...</text>
  </view>

  <!-- 创建任务按钮 -->
  <view class="create-btn" bindtap="onCreateTask">
    <text class="create-icon">+</text>
    <text class="create-text">创建任务</text>
  </view>
</view>