yimei_spa/pages/vip/vip.wxml

<import src="/components/local/wxParse/wxParse.wxml" />
<!-- <view class="user-info flex">
  <image class="icon-left" src="{{ userInfo ? userInfo.avatar_url : '/images/my/header.png' }}"></image>
  <view class="info flex-column active">
    <text class="{{userInfo.is_vip == 1 ? 'name' : ''}}">{{userInfo.nickname || '微信用户'}}</text>
    <text class="time" wx:if="{{userInfo.is_vip == 1}}">会员有效期时间：{{userInfo.vip_ex_time}}</text>
  </view>
  <image class="icon-right" src="/images/my/right.png"></image>
</view> -->
<view class="vip-box">
  <view class="vip-power radius {{ userInfo.is_vip == 1 ? 'active' : '' }}">
    <!-- <view class="vip-time flex-center" wx:if="{{ userInfo.is_vip == 1 }}">
      <image src="/images/icon_vip_04.png"></image>
      <text style="color: #fff;">{{userInfo.vip.card_name}}（到店时间：{{userInfo.vip.store_time}})</text>
    </view> -->
    <view class="top flex-align-center" bindtap="onPay">
      <image class="icon-left" src="{{ userInfo ? userInfo.avatar_url : '/images/my/header.png' }}"></image>
      <view class="info flex1 flex-column ellipsis">
        <text class="text ellipsis">{{userInfo.nickname || '微信用户'}}</text>
        <view class="intro flex-align-center">
          <view class="gender flex-center" style="margin-right: 14rpx;" wx:if="{{ userInfo.sex == 1 || userInfo.sex == 2 }}">
            <image src="/images/icon_gender_{{userInfo.sex}}.png"></image>
          </view>
          <!-- <view class="city flex-center" style="margin-right: 16rpx;">深圳</view> -->
        </view>
        <text style="color: #666;font-size: 24rpx;" wx:if="{{userInfo.is_vip == 1}}">会员有效期时间：{{userInfo.vip.valid_time}}</text>
        <text style="color: #666;font-size: 24rpx;" wx:if="{{userInfo.is_vip == 0}}">您还没有开通会员哦～</text>
        <text style="color: #666;font-size: 24rpx;" wx:if="{{userInfo.is_vip == 2}}">已失去VIP特权{{userInfo.ex_days}}天</text>
      </view>
      <view class="btn flex-center" wx:if="{{ userInfo.is_vip == 0 || userInfo.is_vip == 2 }}">
        <text>{{userInfo.is_vip == 0 ? '立即开通' : '立即续费'}}</text>
        <!-- <image class="icon-right" src="/images/my/right.png"></image> -->
      </view>
      <view class="expire flex-center" wx:if="{{ userInfo.is_vip == 2 }}">已过期</view>
    </view>
    <view class="content flex-align-center">
      <view class="item flex-column line">
        <image src="/images/icon_vip_01.png"></image>
        <text>点亮身份</text>
      </view>
      <view class="item flex-column line">
        <image src="/images/icon_vip_02.png"></image>
        <text>专属服务</text>
      </view>
      <view class="item flex-column">
        <image src="/images/icon_vip_03.png"></image>
        <text>会员回馈</text>
      </view>
    </view>
  </view>
  <view class="vip-toast radius flex-center" style="margin: 20rpx 0;" wx:if="{{ activity.expire_time_seconds && activity.expire_time_seconds > 0 }}">
    <image src="/images/icon_avatar_02.png" class="left-image"></image>
    <view class="right flex1">
      <text>初次到店体验后福利，立即开卡享</text>
      <text style="font-size: 40rpx;color:#FF6CB2;">{{activity.discount}}</text>
      <text>折！错过不再有，速领！</text>
    </view>
    <view class="count-down flex-align-center">福利活动剩余时间 {{activity.currentTime}}</view>
  </view>
  <view class="vip-use radius">
    <!-- <view class="item flex line">
      <view class="use-btn flex-align-center" style="margin-right:64rpx">
        <image src="/images/my/select_ok.png"></image>
        <text>立即激活</text>
      </view>
      <view class="use-btn flex-align-center" >
        <image src="/images/my/select_no.png"></image>
        <text>暂不激活</text>
      </view>
    </view> -->
    <!-- <view class="item flex-align-center line">
      <view class="left flex-column">
        <text>日卡/体验卡</text>
        <text>可任选店内项目体验一次</text>
      </view>
      <view class="right flex-align-center">
        <view class="right-box flex-column" style="text-align:center;">
          <text class="min-price">￥68</text>
          <text class="market-price">￥38</text>
        </view>
        <image src="/images/my/right.png"></image>
      </view>
    </view> -->
    <view class="item flex-align-center {{current == index ? 'red' : ''}} changeVip" wx:for="{{list}}" wx:key="index" bindtap="onChangeVip" data-index="{{index}}">
      <view class="left flex-column ellipsis">
        <view class="left-box flex-align-center" wx:if="{{ current == index }}">
          <image src="/images/icon_vip_04.png" style="width:70rpx;height:40rpx;margin-top: -2rpx;"></image>
          <text>{{ item.name }}</text>
        </view>
        <text class="left-title ellipsis" wx:else>{{ item.name }}</text>
        <text class="left-text ellipsis">{{ item.desc }}</text>
      </view>
      <view class="right flex-align-center">
        <view class="right-box flex-column" style="text-align:right;">
          <text class="min-price">￥{{ item.price }}</text>
          <text class="market-price" wx:if="{{ item.original_price }}">￥{{ item.original_price }}</text>
        </view>
        <!-- <image src="/images/my/right.png"></image> -->
      </view>
    </view>
    <!-- <view class="item flex-align-center">
      <view class="left flex-column">
        <text>日卡/体验卡</text>
        <text>开通立即赠300钻石</text>
      </view>
      <view class="right flex-align-center">
        <view class="right-box flex-column" style="text-align:center;">
          <text class="min-price">￥3880</text>
          <text class="market-price">￥6880</text>
        </view>
        <image src="/images/my/right.png"></image>
      </view>
    </view> -->
  </view>
  <view class="vip-rule radius">
    <view class="title">会员规则</view>
    <view class="content flex-column">
      <template is="wxParse" data="{{wxParseData:article.nodes}}" />
    </view>
  </view>
  <view style="height:170rpx"></view>
</view>
<view class="buy flex-align-center">
  <text style="font-family: PingFangSC-Semibold;font-size: 36rpx;">总计：</text>
  <text class="flex1" style="font-family: PingFangSC-Semibold;font-size: 36rpx;color: #E95564;" wx:if="{{activity.expire_time_seconds && activity.expire_time_seconds > 0}}">￥{{list.length > 0 ? list[current].price * activity.discount/10  : '0'}}</text>
  <text class="flex1" style="font-family: PingFangSC-Semibold;font-size: 36rpx;color: #FF3007;" wx:else>￥{{list.length > 0 ? list[current].price : '0'}}</text>
  <view class="buy-btn flex-center" bindtap="onPay" id="payVip">去支付</view>
</view>
<wux-landscape visible="{{ visible }}" maskClosable="{{ true }}" closable="{{ false }}">
  <view class="use-popup flex-column">
    <text style="font-size: 36rpx;">激活会员卡</text>
    <text style="color: #666666;">请选择是否立即激活会员卡</text>
    <view class="tips flex-column">
      <text class="red">[温馨提示]</text>
      <text class="red">确认激活后，该会员卡将立即生效；</text>
      <text class="red">如暂不激活，可在“已购会员卡”中去选择激活。</text>
    </view>
    <view class="use-btn">
      <view class="btn cancel flex-center" bindtap="onCancelUse">暂不激活</view>
      <view class="btn confirm flex-center" bindtap="onConfirmUse" id="useVip">确认激活</view>
    </view>
    <!-- [温馨提示] 确认激活后，该会员卡将立即生效； 如暂不激活，可在“已购会员卡”中去选择激活。 -->
  </view>
</wux-landscape>

<wux-popup class="popup-radius" position="bottom" catchtouchmove="true" visible="{{ payNow }}" bind:close="onClosePay">
  <view class="coupon-popup payType">
    <view class="top flex-align-center">
      <text style="text-align: center;"></text>
      <image src="/images/icon_20.png" class="close-img" bindtap="onClosePay" />
    </view>

    <view class="moneyShow" wx:if="{{activity.expire_time_seconds && activity.expire_time_seconds > 0}}"><text>¥</text>{{list.length > 0 ? list[current].price * activity.discount/10  : '0'}}</view>
    <view class="moneyShow" wx:else><text>¥</text>{{list.length > 0 ? list[current].price : '0'}}</view>

    <view class="select-pay-methon" catchtap="pay_methonw">
      <image class="pay-img" src="/images/wx_pay.png"></image>
      <view class="pay-title">微信支付</view>
      <!-- <view class="pay-money"><text>￥</text>800</view> -->
      <image class="select-activity" src="{{pay_methon==1?'/images/icon_13.png':'/images/icon_12.png'}}"></image>
    </view>

    <view class="select-pay-methon" catchtap="pay_methonc">
      <image class="pay-img" src="/images/joli_pay.png"></image>
      <view class="pay-title">储值支付</view>
      <view class="pay-money"><text>￥</text>{{inserllAmount}}</view>
      <image class="select-activity" src="{{pay_methon==2?'/images/icon_13.png':'/images/icon_12.png'}}"></image>
    </view>

    <view class="coupon-popup-btm flex-center">
      <view class="coupon-popup-btm-btn flex-center" bindtap="payNow">支付</view>
    </view>
  </view>
</wux-popup>