<!--pages/badges/badges.wxml-->
<view class="page">

  <!-- 顶部积分卡片 -->
  <view class="header-card">
    <view class="header-label">我的总积分</view>
    <view class="header-points">
      <text class="points-num">{{points}}</text>
      <text class="points-unit"> 分</text>
    </view>
  </view>

  <!-- 徽章墙标题 -->
  <view class="section-title">
    <text>徽章墙</text>
    <text class="section-count">共 {{badges.length}} 枚</text>
  </view>

  <!-- 徽章网格 -->
  <block wx:if="{{badges.length > 0}}">
    <view class="badge-grid">
      <view class="badge-item" wx:for="{{badges}}" wx:key="name">
        <view class="badge-icon">{{item.icon}}</view>
        <view class="badge-name">{{item.name}}</view>
        <view class="badge-time">{{item.obtainedAtText}}</view>
      </view>
    </view>
  </block>

  <!-- 空状态 -->
  <view class="empty" wx:else>
    <view class="empty-icon">🎖️</view>
    <view class="empty-text">还没有获得徽章</view>
    <view class="empty-tip">去景点打卡，赢取你的第一枚徽章吧～</view>
  </view>

</view>
