gather/packageMemberIntegral/pages/buyVip/buyVip.wxml

<!--pages/buyVip/buyVip.wxml-->
<!-- 购买会员页面 -->
<view class="buy-vip-container">
  <!-- 用户信息 -->
  <view class="top-bg">
    <view class="member-info">
      <view class="head-portrait">
        <image src="{{userInfo.pic?userInfo.pic:'../../../images/icon/head04.png'}}" />
      </view>
      <view class="text-box">
        <view class="name-box">
          <text class="name">{{userInfo.nickName}}</text>
          <view class="level">
            <image class="l-bg" src="{{userLevelInfo.levelType==1?'../../../images/icon/integral-icon.png':'../../../images/icon/normal-icon.png'}}" role="img"></image>
            <view class="text">{{userLevelInfo.levelType==1?'付费会员':'普通会员'}}</view>
          </view>
        </view>
        <view class="date">
          {{userLevelInfo.levelType==1? wxs.spliceDate(userLevelInfo.endTime)+' 到期':'您还不是付费会员~'}}
        </view>
      </view>
    </view>
  </view>
  <!-- /用户信息 -->

  <!-- swiper-会员套餐 -->
  <view class="vip-card-wrapper">
    <swiper class='pic-swiper' duration="{{duration}}" previous-margin='20rpx' next-margin='70rpx' bindchange="selectVip">
      <block wx:for='{{premiumVipList}}' wx:key='id'>
        <swiper-item class="banner-item">
          <view class='card-box'>
            <view class='banner'>
              <view class="card-face">
                <image class="vip-pic" src="{{item.img}}"></image>
                <view class="level-mark  {{currentLevelId==item.id? '':'white-bg' }}">{{currentLevelId==item.id?'当前':'未购买'}}</view>
                <view class="vip-info">
                  <view class="vip-level">{{item.levelName}}</view>
                  <view class="vip-price">￥
                    <text class="amount">{{item.needAmount}}</text>/{{item.trem}}{{['','日','周','月','季','年'][item.termType]}}</view>
                </view>
                <view class="vip-level-progress">
                  <view class="level-tips">
                    <text>成长值达 {{item.needGrowth}} 即可购买</text>
                    <progress class="level-progress" percent="{{item.needGrowth>0 ? (userLevelInfo.growth/item.needGrowth) *100 : 0}}" backgroundColor="#feeee0" activeColor="#9e642e" active="{{true}}" border-radius="8" stroke-width="4"></progress>
                    <view class="level-span">
                      <text wx:if="{{userLevelInfo.levelType==1 && userLevelInfo.userLevel.level<=selectPremiumVip.level}}">{{userLevelInfo.userLevel.levelName}}</text>
                      <text>{{item.levelName}}</text>
                    </view>
                  </view>
                  <view class="level-text">当前成长值 {{userLevelInfo.growth}}</view>
                </view>
              </view>
            </view>
          </view>
        </swiper-item>
      </block>
    </swiper>
    <!-- /swiper-会员套餐 -->

    <!-- 会员权益 -->
    <view class="vip-rights-container">
      <view class="member-tit">
        <view class="text">VIP等级权益</view>
      </view>
      <view class="rights-item-con">
        <block wx:for="{{selectPremiumVip.userRights}}" wx:key="rightsId">
          <view class="rights-item">
            <view class="rights-img">
              <image mode="heightFix" src="{{item.icon}}"></image>
            </view>
            <view class="rights-tit">{{item.rightsName}}</view>
            <view class="rights-desc">{{item.description}}</view>
          </view>
        </block>
      </view>
    </view>
    <!-- /会员权益 -->
  </view>

  <!-- 底部按钮 -->
  <view class="bottom">
    <view class="bottom-item">
      <view class="vip-price">
        <text class="vip-total-balck">总价：</text>
        <text class="symbol">￥</text>
        <text class="amount pay-amount">{{selectPremiumVip.needAmount}}</text>/{{selectPremiumVip.trem}}{{['','日','周','月','季','年'][selectPremiumVip.termType]}}</view>
    </view>
    <view class="bottom-item {{currentGrowth >= selectPremiumVip.needGrowth && userLevelInfo.userLevel.level <= selectPremiumVip.level?'btn':'btn-gray'}}" bindtap="buyNow">立即购买</view>
  </view>
</view>

<wxs module="wxs" src="../../../wxs/number.wxs" />