ruo-shan-cloud-pharmacy/miniprogram/pages/tab-bar/medicine-box/index.wxml

<view class="page">
  <navigation-bar title="电子药箱" back="{{false}}" color="white" background="#07C160" />

  <!-- Tab switch -->
  <view class="header">
    <view class="tab-switch">
      <view class="tab-btn {{activeTab === 0 ? 'on' : ''}}" data-tab="0" bindtap="switchTab">我的药箱</view>
      <view class="tab-btn {{activeTab === 1 ? 'on' : ''}}" data-tab="1" bindtap="switchTab">今日打卡</view>
    </view>
  </view>

  <!-- ==================== 我的药箱 ==================== -->
  <view class="content" wx:if="{{activeTab === 0}}">
    <view class="stats-row">
      <view class="stat-card">
        <view class="stat-num">{{totalCount}}</view>
        <view class="stat-label">药品总数</view>
      </view>
      <view class="stat-card warn">
        <view class="stat-num">{{expiringCount}}</view>
        <view class="stat-label">即将过期</view>
      </view>
      <view class="stat-card alert">
        <view class="stat-num">{{lowStockCount}}</view>
        <view class="stat-label">库存不足</view>
      </view>
    </view>

    <view class="expire-alert" wx:if="{{expiringCount > 0}}">
      <view class="alert-icon">⚠️</view>
      <view class="alert-text">即将过期：{{expiringItems.join('、')}}</view>
    </view>

    <view class="med-list" wx:if="{{medicines.length > 0}}">
      <view wx:for="{{medicines}}" wx:key="id" class="med-card" data-id="{{item.id}}" bindtap="goEdit">
        <view class="med-icon">{{item.category === '抗生素' ? '💊' : item.category === '心血管' ? '❤️' : item.category === '降糖药' ? '💉' : item.category === '维生素' ? '🍊' : item.category === '中成药' ? '🌿' : '💊'}}</view>
        <view class="med-info">
          <view class="med-name">{{item.name}}</view>
          <view class="med-meta">{{item.dosage}} · {{item.frequency}}</view>
          <view class="med-tags">
            <view class="med-tag">{{item.category}}</view>
            <!-- <view class="med-tag slots">{{item.slots.join('·')}}</view> -->
          </view>
        </view>
        <view class="med-right">
          <view class="med-qty">×{{item.quantity}}{{item.unit}}</view>
          <view class="med-expiry">{{item.expiryDate ? '至 ' + item.expiryDate : ''}}</view>
        </view>
        <view class="med-del" data-id="{{item.id}}" data-name="{{item.name}}" catchtap="deleteMedicine">🗑</view>
      </view>
    </view>

    <view class="empty-state" wx:else>
      <view class="empty-icon">📦</view>
      <view class="empty-title">药箱是空的</view>
      <view class="empty-desc">点击右下角按钮添加您的第一个药品</view>
    </view>
  </view>

  <!-- ==================== 今日打卡 ==================== -->
  <view class="checkin-content" wx:else>
    <view class="checkin-header">
      <view class="date-label">{{todayStr}}</view>
      <view class="progress-section">
        <view class="progress-ring {{checkProgress === 100 ? 'full' : checkProgress >= 50 ? 'half' : ''}}">
          <view class="ring-text">{{checkProgress}}%</view>
        </view>
        <view class="progress-info">
          <view class="progress-detail">已完成 {{checkDone}}/{{checkTotal}}</view>
          <view class="progress-hint" wx:if="{{checkProgress === 100}}">🎉 今日全部完成！</view>
          <view class="progress-hint" wx:else>继续加油～</view>
        </view>
      </view>
    </view>

    <view class="week-row">
      <view wx:for="{{weekDays}}" wx:key="date" class="week-day {{item.isToday ? 'is-today' : ''}}">
        <view class="wd-day">{{item.day}}</view>
        <view class="wd-dot" wx:if="{{item.total > 0}}">
          <view class="wd-bar-bg"><view class="wd-bar-fill" style="width: {{item.total > 0 ? item.done / item.total * 100 : 0}}%"></view></view>
        </view>
        <view class="wd-none" wx:else>-</view>
      </view>
    </view>

    <view class="slot-list" wx:if="{{checkTotal > 0}}">
      <view wx:for="{{checkSlots}}" wx:key="label" class="slot-group">
        <view class="slot-header">
          <view class="slot-label">{{item.label === '早' ? '☀️' : item.label === '中' ? '🌤️' : item.label === '晚' ? '🌙' : '💤'}} {{item.label}} · <text class="slot-time">{{item.time}}</text></view>
          <view class="slot-badge" wx:if="{{item.allChecked}}">✅</view>
        </view>
        <view class="slot-meds" wx:if="{{item.medicines.length > 0}}">
          <view wx:for="{{item.medicines}}" wx:key="id" wx:for-item="med" class="slot-med {{med.checked ? 'done' : ''}}" data-mid="{{med.id}}" data-slot="{{item.label}}" bindtap="toggleCheck">
            <view class="sm-check {{med.checked ? 'checked' : ''}}">{{med.checked ? '✓' : ''}}</view>
            <view class="sm-info">
              <view class="sm-name">{{med.name}}</view>
              <view class="sm-dosage">{{med.dosage}}</view>
            </view>
            <view class="sm-cat">{{med.category}}</view>
          </view>
        </view>
        <view class="slot-empty" wx:else>
          <view class="se-text">该时段无需服药</view>
        </view>
      </view>
    </view>

    <view class="checkin-empty" wx:if="{{checkTotal === 0}}">
      <view class="empty-icon">📋</view>
      <view class="empty-title">暂无用药计划</view>
      <view class="empty-desc">先在「我的药箱」中添加药品并设置服用时段</view>
      <view class="go-add-btn" bindtap="goAdd">+ 添加药品</view>
    </view>
  </view>

  <!-- FAB -->
  <view class="fab" bindtap="goAdd" wx:if="{{activeTab === 0}}">+</view>
</view>