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

<!--pages/account/vip/index/score.wxml-->
<view class="score">
    <view class="header publicview">
      <view class="score_userInfo">
        <view class="head">
          <!-- <van-image :src="info.avatar" fit="cover">
            <template v-slot:error
              ><image src="../../static/image/default_logo.jpg"
            /></template>
          </van-image> -->
          <image src="{{userInfo.avatar}}"></image>
        </view>
      </view>
      <view class="userInfo">
        <text class="user_name font16">{{userInfo.nickname}}</text>
        <text class="user_level font16" wx:if="{{info.score<500}}">{{info.role.levelName}}用户</text>
        <text class="user_level font16" wx:else>{{info.role.levelName}}会员</text>
      </view>
      <view class="score_userNum">
        <span class="Integral"></span>
        <view class="Integral_num font18">{{score || 0}}</view>
      </view>
    </view>
    <!-- <view class="footer publicview ">
      <view><text>会员停用说明</text></view>
      <text>（一）什么时候停用</text>
      <text>为了给用户们提供更好的服务体验，2022年2月21日后将停用现有会员，2月21日前会员积分将继续累积计算。</text>
      <text>（二）停用后补偿</text>
      <text>根据停用时的会员等级补偿10次提前抢购特权。例如：星耀用户将补偿10次提前20分钟购买特权</text>
      <text style="margin-top: 10rpx;">注：补偿的次数有效期1年，超过会失效。</text>
      <text style="margin-top: 10rpx;">感谢您对于我们工作的理解与支持，后续我们将会推出新的积分体系，新的积分更好玩，敬请期待~</text>
    </view> -->
    <view class="content publicview">
      <view class="content_top">
        <view class="left_level font14">等级特权</view>
        <view class="right_instruct"></view>
      </view>
      <scroll-view class="body showBottom}}" scroll-y="true" scroll-top="{{scrollTop}}" scroll-with-animation="true">
        <view class="progressBar">
          <view class="leftBox"></view>
          <view class="progressline">
            <view class="arrive" :style="{'height':progressLine}"></view>
          </view>
        </view>
        <view class="allLevel">
          <!-- 青铜 -->
          <view class="body_Rank {{info.role.level==1?'active':''}}">
            <view class="left_level">
              <image class="score-image" src="{{config.imgUrl}}/img/vip_level_1.png" alt=""></image>
            </view>
            <view class="right_instruct">
              <text>等级：青铜</text>
              <text>所需积分：500</text>
            </view>
          </view>
          <!-- 白银 -->
          <view class="body_Rank {{info.role.level==2?'active':''}}">
            <view class="left_level">
              <image class="score-image" src="{{config.imgUrl}}/img/vip_level_2.png" alt=""></image>
            </view>
            <view class="right_instruct">
              <text>等级：白银</text>
              <text>所需积分：1000</text>
              <text>享受特权：任意线路提前2分钟购买</text>
            </view>
          </view>
          <!-- 黄金 -->
          <view class="body_Rank {{info.role.level==3?'active':''}}">
            <view class="left_level">
              <image class="score-image" src="{{config.imgUrl}}/img/vip_level_3.png" alt=""></image>
            </view>
            <view class="right_instruct">
              <text>等级：黄金</text>
              <text>所需积分：3000</text>
              <text>享受特权：任意线路提前5分钟购买</text>
            </view>
          </view>
          <!-- 铂金 -->
          <view class="body_Rank {{info.role.level==4?'active':''}}">
            <view class="left_level">
              <image class="score-image" src="{{config.imgUrl}}/img/vip_level_4.png" alt=""></image>
            </view>
            <view class="right_instruct">
              <text>等级：铂金</text>
              <text>所需积分：5000</text>
              <text>享受特权：任意线路提前10分钟购买</text>
            </view>
          </view>
          <!-- 钻石 -->
          <view class="body_Rank {{info.role.level==5?'active':''}}">
            <view class="left_level">
              <image class="score-image" src="{{config.imgUrl}}/img/vip_level_5.png" alt=""></image>
            </view>
            <view class="right_instruct">
              <text>等级：钻石</text>
              <text>所需积分：10000</text>
              <text>享受特权：任意线路提前15分钟购买</text>
            </view>
          </view>
          <!-- 荣耀 -->
          <view class="body_Rank {{info.role.level==6?'active':''}}">
            <view class="left_level">
              <image class="score-image" src="{{config.imgUrl}}/img/vip_level_6.png" alt=""></image>
            </view>
            <view class="right_instruct">
              <text>等级：星耀</text>
              <text>所需积分：30000</text>
              <text>享受特权：任意线路提前20分钟购买</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="footer pad-bot">
      <view><text>积分介绍</text></view>
      <text>（一）积分是什么</text>
      <text>积分是用户购买并参与活动后的评分，是会员等级判断的依据。消费每满1元累积1个积分。</text>
      <text>（二）如何获得积分</text>
      <text>购买并成功参与宝贝走天下的活动之后，系统会自动发放积分。</text>
      <text>（三）积分统计规则</text>
      <text>2021年01月01日 00:00:00起，积分只会统计近两年的已验票活动的积分。</text>
    </view>
    <view class="fixedButton" bindtap="jumpPage">
      <view>
        <text class="font16">立即获取积分</text>
        <text class="font10">(购买并参与活动即可获得积分)</text>
      </view>
    </view>
  </view>