challengeFamily/pages/account/vip/index/score.wxml

<view class='bar-bottom buttons-row'>
  <navigator open-type="switchTab" url="/pages/home/index" hover-class='none' class='button button-warn'>{{info.role.level == 0 ? '赚取积分':'立即使用'}}</navigator>
</view>
<view class='content'>
  <view class="vip-box">
    <view class='vip-rule-text'><navigator url="../rule/index">积分规则</navigator></view>
    <scroll-view class="group-sheet" scroll-x="true" scroll-left="{{scrollLeft}}" scroll-with-animation="true">
      <view class="container">
        <view class="sheet">
          <view class="li{{info.role.level == 0 ? ' current':''}}">
            <view class="ball-scale-multiple"></view>
            <view class="linear"></view>
            <view class="linear-mask{{width[0] > 0 ? ' animate':''}}" style="width:{{width[0]}}%;"></view>
            <view class="info">
                <text class="level"></text>
                <text class="point"></text>
            </view>
          </view>
          <view class="li{{info.role.level == 1 ? ' current':''}}">
            <view class="ball-scale-multiple">
              <image src="{{config.imgUrl}}/img/vip_level_1.png" class='img'></image>
            </view>
            <view class="linear"></view>
            <view class="linear-mask{{width[1] > 0 ? ' animate':''}}" style="width:{{width[1]}}%;"></view>
            <view class="info">
                <text class="level">青铜</text>
                <text class="point">500</text>
            </view>
          </view>
          <view class="li{{info.role.level == 2 ? ' current':''}}">
            <view class="ball-scale-multiple">
              <image src="{{config.imgUrl}}/img/vip_level_2.png" class='img'></image>
            </view>
            <view class="linear"></view>
            <view class="linear-mask{{width[2] > 0 ? ' animate':''}}" style="width:{{width[2]}}%;"></view>
            <view class="info">
                <text class="level">白银</text>
                <text class="point">1000</text>
            </view>
          </view>
          <view class="li{{info.role.level == 3 ? ' current':''}}">
            <view class="ball-scale-multiple">
              <image src="{{config.imgUrl}}/img/vip_level_3.png" class='img'></image>
            </view>
            <view class="linear"></view>
            <view class="linear-mask{{width[3] > 0 ? ' animate':''}}" style="width:{{width[3]}}%;"></view>
            <view class="info">
                <text class="level">黄金</text>
                <text class="point">3000</text>
            </view>
          </view>
          <view class="li{{info.role.level == 4 ? ' current':''}}">
            <view class="ball-scale-multiple">
              <image src="{{config.imgUrl}}/img/vip_level_4.png" class='img'></image>
            </view>
            <view class="linear"></view>
            <view class="linear-mask{{width[4] > 0 ? ' animate':''}}" style="width:{{width[4]}}%;"></view>
            <view class="info">
                <text class="level">铂金</text>
                <text class="point">5000</text>
            </view>
          </view>
          <view class="li{{info.role.level == 5 ? ' current':''}}">
            <view class="ball-scale-multiple">
              <image src="{{config.imgUrl}}/img/vip_level_5.png" class='img'></image>
            </view>
            <view class="linear"></view>
            <view class="linear-mask{{width[5] > 0 ? ' animate':''}}" style="width:{{width[5]}}%;"></view>
            <view class="info">
                <text class="level">钻石</text>
                <text class="point">10000</text>
            </view>
          </view>
          <view class="li{{info.role.level == 6 ? ' current':''}} last">
            <view class="ball-scale-multiple">
              <image src="{{config.imgUrl}}/img/vip_level_6.png" class='img'></image>
            </view>
            <view class="linear"></view>
            <view class="linear-mask{{width[6] > 0 ? ' animate':''}}" style="width:{{width[6]}}%;"></view>
            <view class="info">
                <text class="level">星耀</text>
                <text class="point">30000以上</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="group-text">当前积分 <text>{{info.score}}</text><block wx:if="{{info.role.level < 6}}">，升级到{{info.nextLevel.levelName}}段还需 <text>{{info.nextLevel.nextscore}}</text> 积分</block></view>
  </view>
  <view wx:if="{{info.role.level == 0}}" class='noDataText'>
    <text>您当前积分为<text class="font16">{{info.score}}</text>，\n暂时还没有可享受的优惠哦，\n你可购买线路赚取积分。</text>
  </view>
  <view wx:else class='content-block'>
    <view class='subtitleColor font14'>我的优惠</view>
    <view class="grids vip-safe-box mTop5">
      <view class="wgrid" wx:if="{{info.role.days}}">
          <view class="VS-box"><view class="VS-box-text">{{info.role.days}}</view><text>折</text></view>
          常规半日/单日线
      </view>
      <view class="wgrid" wx:if="{{info.role.mini}}">
          <view class="VS-box"><view class="VS-box-text">{{info.role.mini}}</view><text>折</text></view>
          迷你营
      </view>
      <view class="wgrid" wx:if="{{info.role.camp}}">
          <view class="VS-box"><view class="VS-box-text">{{info.role.camp}}</view><text>折</text></view>
          冬夏令营
      </view>
    </view>
    <view class='gray font12 mTop5'>注：迷你营指：2天1夜、3天2夜的线路</view>
    <view class='font14 vip-childs' wx:if="{{info.child}}">
      以上优惠限<text class="blue">{{info.child}}</text>使用。
    </view>
    <view class='font14 vip-childs' wx:else>
      以上优惠限绑定儿童使用。
      <view class='vip-childs-button'><navigator url="../childs/index" class="button button-radius button-subtitle">去绑定</navigator></view>
    </view>
  </view>

  <block wx:if="{{info.role.level > 1}}">
  <view class='vip-privilege'>
    <view class='content-block'>
      <view class='subtitleColor font14'>我的特权</view>
      <view class="grids vip-safe-box mTop5">
          <view class="wgrid time">
              <text class="icon icon-time"></text>
              <text>任意线路\n提前{{info.role.time}}分钟购买</text>
          </view>
      </view>
    </view>
  </view>
  </block>
</view>