<view>
  <view class="history">
    <view>历史记录</view>
  </view>
  <view class="tabs-wrap flex-align-center">
    <view class="item flex-center {{current == 0 ? 'active' : ''}}" bindtap="onTabsChange" data-id="0">
      未使用
    </view>
    <view class="item flex-center {{current == 1 ? 'active' : ''}}" bindtap="onTabsChange" data-id="1">
      已使用
    </view>
    <view class="item flex-center {{current == 2 ? 'active' : ''}}" bindtap="onTabsChange" data-id="2">
      已过期
    </view>
  </view>
  <view class="content">
    <view class="conItem" wx:for="{{list}}" wx:key="index">
      <view class="leftLine"></view>
      <view class="right">
        <view class="titleFrequency">
          <view class="title">修丽可B5补水卡</view>
          <view class="frequency">
            <text class="usedTimes">1</text>
            <text class="totalFrequency">/3</text>
          </view>
        </view>
        <view class="beOverdueToUse">
          <view class="beOverdue">
            <text class="beOverdueItem">还有</text>
            <text class="beOverdueItem tips">3天</text>
            <text class="beOverdueItem">(6月30日)过期</text>
          </view>
          <view class="toUse">去使用</view>
        </view>
      </view>
      <view class="cardBg">
        <image src="/images/cardBg.png"></image>
      </view>
    </view>
  </view>
</view>