<!--pages/userCenter.axml-->
<view class="page-coupons">
  <view class="swiper-tab">
    <view
      class="swiper-tab-item {{currentTab==0?'active':''}}"
      data-current="0"
      onTap="clickTab"
    >可使用 ({{totalElements}})</view>
    <view
      class="swiper-tab-item {{currentTab==1?'active':''}}"
      data-current="1"
      onTap="clickTab"
    >已失效 ({{invalidTotalElements}})</view>
  </view>
  <!--bindchange="swiperTab"-->
  <swiper
    current="{{currentTab}}"
    duration="300"
    onChange="swiperTab"
  >
    <swiper-item>
      <scroll-view scroll-y a:if="{{couponList.length}}">
        <view class="coupon-wrap">
          <view
            class="coupon-list"
            a:for="{{couponList}}"
            a:for-item="item"
            a:for-index="k"
            a:key="{{k}}"
          >
            <view
              data-title="{{item.title}}"
              data-cardNo="{{item.cardNo}}"
              data-id="{{item.couponId}}"
              catchTap="handelPresentCouponDetail"
            >
              <image class="coupon-bg" src="/assets/imgs/coupon-bg.png"/>
              <view class="coupon-img">
                <image
                  a:if="{{item.takeCouponBgimg}}"
                  class="coupon-bg"
                  src="{{item.takeCouponBgimg}}"
                />
                <image a:else src="/assets/imgs/qr-code.png"/>
              </view>
              <view class="coupon-info">
                <view class="coupon-name fs-28">{{item.title}}</view>
                <view class="coupon-time fs-24">{{item.startTime}} 至 {{item.endTime}}</view>
                <!-- <view class='coupon-desc fs-24'>{{item.notice}}</view> -->
              </view>
              <view
                class="coupon-code fs-24"
                data-cardNo="{{item.cardNo}}"
                catchTap="handelPresentCouponCode"
              >出示劵码</view>
            </view>
          </view>
        </view>
        <no-more a:if="{{noMoreCoupon}}"/>
      </scroll-view>
      <view class="empty-wrap" a:if="{{!couponList.length}}">
        <view class="empty-info">
          <image class="empty-img" src="/assets/imgs/empty-coupon.png"/>
          <view class="empty-text">没有任何卡劵</view>
        </view>
      </view>
    </swiper-item>
    <swiper-item>
      <scroll-view scroll-y a:if="{{invalidCouponList.length}}">
        <view class="coupon-wrap">
          <view
            class="coupon-list"
            a:for="{{invalidCouponList}}"
            a:for-item="item"
            a:for-index="k"
            a:key="{{k}}"
          >
            <view class="invalid-coupon"/>
            <!--5 已使用  !5 过期-->
            <image
              a:if="{{item.status == 5}}"
              src="/assets/imgs/invalid.png"
              class="invalid-img"
            />
            <image
              a:else
              src="/assets/imgs/expired.png"
              class="invalid-img"
            />
            <image class="coupon-bg" src="/assets/imgs/coupon-bg.png"/>
            <view class="coupon-img">
              <image
                a:if="{{item.takeCouponBgimg}}"
                class="coupon-bg"
                src="{{item.takeCouponBgimg}}"
              />
              <image a:else src="/assets/imgs/qr-code.png"/>
            </view>
            <view class="coupon-info">
              <view class="coupon-name fs-28">{{item.title}}</view>
              <view class="coupon-time fs-24">{{item.startTime}} 至 {{item.endTime}}</view>
              <!-- <view class='coupon-desc fs-24'>{{item.notice}}</view> -->
            </view>
            <view class="coupon-code fs-24">出示劵码</view>
          </view>
        </view>
        <no-more a:if="{{noMoreCouponInvalid}}"/>
      </scroll-view>
      <view class="empty-wrap" a:if="{{!invalidCouponList.length}}">
        <view class="empty-info">
          <image class="empty-img" src="/assets/imgs/empty-coupon.png"/>
          <view class="empty-text">没有任何卡劵</view>
        </view>
      </view>
    </swiper-item>
  </swiper>

77777777777
</view>
