cfc/miniprogram/pages/achievements/achievements.wxml

<!--pages/achievements/achievements.wxml-->
<view class="container">
  <view class="loading" wx:if="{{loading}}">
    <text>加载中...</text>
  </view>

  <view class="achievements-content" wx:else>
    <!-- 统计信息 -->
    <view class="stats-card">
      <view class="stats-grid">
        <view class="stat-item">
          <text class="stat-value">{{stats.totalTasks}}</text>
          <text class="stat-label">总任务</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{stats.completedTasks}}</text>
          <text class="stat-label">已完成</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{stats.totalPoints}}</text>
          <text class="stat-label">总积分</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{stats.streakDays}}</text>
          <text class="stat-label">连续天数</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{stats.achievementsUnlocked}}</text>
          <text class="stat-label">已解锁</text>
        </view>
      </view>
    </view>

    <!-- 成就列表 -->
    <view class="achievements-list">
      <view class="list-title">成就徽章</view>
      
      <view class="achievement-grid">
        <view 
          class="achievement-item {{item.unlocked ? 'unlocked' : 'locked'}}"
          wx:for="{{achievements}}"
          wx:key="id"
          data-id="{{item.id}}"
          bindtap="onAchievementTap"
        >
          <view class="achievement-icon">{{item.icon}}</view>
          <view class="achievement-info">
            <text class="achievement-name">{{item.name}}</text>
            <text class="achievement-desc">{{item.description}}</text>
          </view>
          <view class="achievement-status">
            <text class="status-text">{{item.unlocked ? '已解锁' : '未解锁'}}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 提示信息 -->
    <view class="tips-card">
      <text class="tips-title">解锁技巧</text>
      <view class="tips-content">
        <text class="tip-item">✅ 每天按时完成任务可以获得连续打卡</text>
        <text class="tip-item">✅ 提前完成任务可以解锁精准打击徽章</text>
        <text class="tip-item">✅ 完成专注训练可以解锁专注大师徽章</text>
        <text class="tip-item">✅ 积攒积分可以解锁积分富豪徽章</text>
      </view>
    </view>
  </view>
</view>