<ep-navBar title="兑换中心" background='#fe8464' back="{{true}}" iconTheme='white' color='#fff' bindback="handlerGobackClick"/>
<view class="tabs">
  <view class='tabs-bar'>
    <view class='tabs-nav--container'>
      <view class='tabs-nav--wrap'>
        <view class='tabs-nav tabs-nav--animated'>
          <view class='tabs-link-bar tabs-link-bar-animated'></view>
          <view bindtap='tabchange' data-index='1' class='tabs-tab J-tabs-tab-key {{tab_index==1?"tabs-tab-active":""}}'
            style="{{tab_index ==1?'border-color:'+skin.color+';color:'+skin.color:''}}">
            兑换礼品
          </view>
          <view bindtap='tabchange' data-index='2' class='tabs-tab J-tabs-tab-key {{tab_index==2?"tabs-tab-active":""}}'
            style="{{tab_index ==2?'border-color:'+skin.color+';color:'+skin.color:''}}">
            兑换记录
          </view>
        </view>
      </view>
    </view>
  </view>
</view>

<view wx:if="{{tab_index==2}}" class="list u-p-l-20 u-p-r-20">
  <view class="item u-p-30 bg-f i-flex u-m-t-20 rounded i-aic" wx:for="{{list}}" wx:key="index" wx:if="{{list.length}}">
    <view class="i-flex-item">
      <view class="u-font-28 weight">{{item.code_sn}}</view>
      <view class="u-font-26 u-m-t-5">兑换金额：¥{{item.money_format}}</view>
      <view class="u-font-24 text-gray u-m-t-5">兑换时间：{{item.adddate}}</view>
    </view>
    <view class="u-font-30 red">已兑换</view>
  </view>
  <i-empty wx:if="{{list.length==0}}">暂无记录~</i-empty>
</view>
<view class="list" wx:else>
  <form catchsubmit="preFormSubmit">
    <view class="i-flex i-aic bg-f u-p-l-35 u-p-r-35 u-p-b-35 u-p-t-50">
      <input class="i-flex-item ipt rounded" name="code" placeholder="请输入兑换码"></input>
    </view>
    <button type="primary" formType="submit" class="btn text-center u-m-t-50 u-m-l-35 u-m-r-35 rounded">兑换</button>
  </form>
</view>

<view class="text-center fixed-btn bule" bindtap="handleRuleModal" wx:if="{{tab_index==1}}">兑换说明</view>

<!-- 说明弹窗 -->
<i-modal scrollUp="{{true}}" visible="{{showRulesPopup}}" bind:cancel="handleRuleModal">
  <view class="i-flex-col">
    <view class="u-p-30 u-font-32 text-center u-border-bottom">兑换说明</view>
    <scroll-view scroll-y style="height:50vh;box-sizing: border-box;" class="u-p-30">
      <parser html="{{virtcard_publish}}" />
    </scroll-view>
  </view>
</i-modal>