<view class="page-container membership-page">
  <!-- 当前会员状态 -->
  <view class="card vip-card" wx:if="{{myMembership}}">
    <view class="vip-header">
      <text class="vip-badge">👑 {{myMembership.plan_name || '会员'}}</text>
      <text class="vip-expire">到期: {{myMembership.end_time}}</text>
    </view>
    <view class="vip-level-info" wx:if="{{level}}">
      <text class="tag tag-primary">当前等级: {{level.name}}</text>
      <text class="vip-exp">经验值 {{experience}}</text>
    </view>
  </view>

  <view class="card" wx:else>
    <view class="card-body center-text">
      <text class="tip-text">开通会员尊享专属折扣与权益</text>
    </view>
  </view>

  <!-- 套餐列表 -->
  <view class="section">
    <view class="section-header">
      <text class="section-title">会员套餐</text>
    </view>
  </view>

  <view class="plans-list">
    <view class="card plan-item" wx:for="{{plans}}" wx:key="id">
      <view class="plan-info">
        <view class="plan-name">{{item.name}}</view>
        <view class="plan-type" wx:if="{{item.type}}">类型: {{item.type}}</view>
        <view class="plan-desc" wx:if="{{item.description}}">{{item.description}}</view>
      </view>
      <view class="plan-right">
        <view class="plan-price"><text class="price-symbol">¥</text>{{item.price}}</view>
        <button class="btn btn-primary btn-small" data-id="{{item.id}}" bindtap="onBuy" disabled="{{buyLoading}}">开通</button>
      </view>
    </view>
    <empty-state wx:if="{{!loading && plans.length === 0}}" text="暂无会员套餐" />
  </view>

  <!-- 购买记录 -->
  <view class="section" wx:if="{{history.length > 0}}">
    <view class="section-header">
      <text class="section-title">购买记录</text>
    </view>
    <view class="card">
      <view class="card-body">
        <view class="history-item" wx:for="{{history}}" wx:key="id">
          <view class="his-left">
            <text>{{item.plan_name}}</text>
            <text class="his-time">{{item.created_at}}</text>
          </view>
          <view class="his-status">{{item.status}}</view>
        </view>
      </view>
    </view>
  </view>
</view>
