微信小程序原生JS：会员服务列表

会员服务列表

效果：

WXML代码

<!--pages/myInfo/vipServer/index.wxml-->

<view class='search-bg' wx:if="{{welcome}}">
  <image mode='aspectFit' src='https://file.baimipay.cn/miniappsite-search.png' class='search-img'></image>
  <view class='text'>暂无服务</view>
</view>

<view class='page' wx:else>
  <view class='vipChoose'>
    <scroll-view scroll-x enable-flex bindscroll='bindcroll' style="position:relative;">
      <view wx:for="{{listData}}" wx:key='{{item.id}}' bindtap="chooseVip" data-id='{{item.id}}' data-index='{{index}}' class='{{item.choose?"vipbgChoose vip":"vipbgNoChoose vip"}}'>
        <view class='vipTitle ellipsis'>
          <text style='line-height: 20rpx;height: 80rpx;margin-top: 10rpx;'>{{we.brWord(item.packageName)}}</text>
        </view>
        <view class='vipPrice'>
          <text>￥</text>
          <text class='fs35'>{{we.toFixed2(item.packagePrice)}}</text>
          <text>{{we.toFixed3(item.packagePrice)}}</text>
        </view>
        <view class='vipMarket'>市场价￥{{we.toFixed(item.marketPrice)}}</view>
      </view>

    </scroll-view>
    <view class='scrollbg'></view>
    <view class='scroll' style='margin-left:{{scroll}}%;'></view>
  </view>

  <view class='list'>
    <view class='quanyi'>会员权益</view>
    <view class='item' wx:if='{{isDelivery==1}}'>
      <view class='item-l'>
        <image class='image' src='https://file.baimipay.cn/daipeisong2x.png'></image>
        <text style='font-size:30rpx;width:600rpx;'>{{deliveryName}}</text>
      </view>
    </view>
    <view class='item' wx:if='{{isIntegral==1}}'>
      <view class='item-l'>
        <image class='image' src='https://file.baimipay.cn/liwu@2x.png'></image>
        <view class='item-m'>
          <view style='width:580rpx;'>{{integralName}}</view>
          <view>消费{{we.toFixe(consumePrice)}}元获得{{integral}}积分</view>
        </view>
      </view>
    </view>
    <view class='item' wx:if='{{isCoupon==1}}'>
      <view class='item-l item-ll'>
        <view class='item-n'>
          <image src='https://file.baimipay.cn/quan2x.png'></image>
          <text style='color:#333;font-size:30rpx;width:600rpx;'>{{couponName}}</text>
        </view>
        <view class='item-q'>
          <view class='quan' wx:for="{{coupunList}}" wx:key='{{item.id}}'>
            <image wx:if='{{item.couponType==1}}' src='https://file.baimipay.cn/jijianquan2x.png'></image>
            <image wx:if='{{item.couponType==2}}' src='https://file.baimipay.cn/qusongquan@2x.png'></image>
            <image wx:if='{{item.couponType==3}}' src='https://file.baimipay.cn/maiquan@2x.png'></image>
            <view class='quan-title'>
              <view>{{item.couponName}}
                <text>{{item.couponNum}}张</text>
              </view>
              <view>
                <rich-text nodes="限{{fixedDays}}天内使用，过期作废"></rich-text>
              </view>
            </view>
            <image src='https://file.baimipay.cn/line@2x.png' class='line'></image>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class='agreement'>
    <image src='https://file.baimipay.cn/{{isAgreement?"radio_c2x":"radio2x"}}.png' bindtap="agreement" />
    <text bindtap="miniPageChange" data-miniPath='/pages/myInfo/vipServer/detail/index'>VIP会员服务协议</text>
  </view>
</view>

<view class="submit" wx:if="{{isPaying&&!welcome}}">
  <view class='bevip pad23'>
    <van-loading type="spinner" color="#333" size="18px" /> 结算中
  </view>
</view>

<form class="submit" report-submit="true" bindsubmit="submit" wx:if="{{!isPaying&&!welcome}}">
  <button class="bevip" formType="submit">
    立即开通
  </button>
</form>



<!-- js过滤器 -->
<wxs module="we">
  var toFixe = function(value) {
    if (value) {
      return parseFloat(value / 100).toFixed(2)
    }
  }
  var toFixed = function(value) {
    if (value) {
      var val = parseFloat(value / 100).toFixed(2)
      var price = val.split('.');
      var price1 = price[1]
      if (price1 == 00) {
        return parseFloat(value / 100)
      } else if (price1.substring(price1.length - 1) == 0) {
        return parseFloat(value / 100).toFixed(1)
      } else {
        return parseFloat(value / 100).toFixed(2)
      }

    } else {
      return "未填写"
    }

  }
  var toFixed2 = function(value) {
    if (value) {
      var val = parseFloat(value / 100).toFixed(2).split('.')[0]
      return val
    } else {
      return ""
    }
  }

  var toFixed3 = function(value) {
    if (value) {
      var val2 = parseFloat(value / 100).toFixed(2).split('.')[1]
      if (val2 == 00) {
        return ''
      } else if (val2.substring(val2.length - 1) == 0) {
        return '.' + val2 / 10
      } else {
        return '.' + val2
      }
    }
  }

  var brWord = function(value) {
    if (value) {
      if (value.length > 5) {
        var b = ''
        var c = ''
        var d = ''
        if(value.length < 11){
        for (var i = 0; i < value.length; i += 5) {
          b += value.substring(i, 5) + "\n";
        }
          d = value.substring(5);
          return b+d
        }else if(value.length >= 11){
          b = value.substring(0,5) + "\n\n";
          c = value.substring(5,8);
          return b+c+'...'
        }
        
      } else if (value.length <= 5) {
        return value
      }
    }
  }
                                  
  module.exports = {
    toFixed: toFixed,
    toFixed2: toFixed2,
    toFixed3: toFixed3,
    toFixe: toFixe,
    brWord: brWord
  }
</wxs>

WXSS代码

/* pages/myInfo/vipServer/index.wxss */
.list {
  width: 100vw;
  margin-top: 20rpx;
  background-color: #fff;
  box-sizing: border-box;
}

.quanyi {
  color: #333;
  font-size: 28rpx;
  padding-top: 20rpx;
  font-weight: 550;
  margin-left: 32rpx;
}

.list image {
  max-width: 100%;
  max-height: 100%;
}

.list .item {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 32rpx;
  box-sizing: border-box;
  border-bottom: 1rpx solid #e8e9ea;
  height: 120rpx;
}

.item .item-l {
  width: 100%;
  display: flex;
  align-items: center;
}

.item .item-l .image {
  width: 70rpx;
  height: 70rpx;
  margin-right: 38rpx;
}

.item .item-l text {
 color:#333;
}

.item .item-l .item-m view:first-child{
  color:#333;
  font-size:30rpx;
}

.item .item-l .item-m view:last-child{
  color:#999;
  font-size:24rpx;
}

.item .item-ll {
  display: block;
}

.list .item:last-child {
  border: none;
  height: auto;
  display: block;
}

.item-l .item-n {
  display: flex;
  align-items: center;
}

.item-l .item-n image {
  width: 70rpx;
  height: 70rpx;
  margin-right: 38rpx;
}

.item .item-ll .item-q {
  padding: 0 32rpx 0 58rpx;
}

.item .item-ll .item-q .quan {
  align-items: center;
  display: flex;
  padding: 20rpx 0;
  position: relative;
}

.quan .line {
  width: 90% !important; 
  height: 1rpx !important;
  margin-right: 0px !important;
  position: absolute !important;
  top: 100% !important;
  left: 10% !important;
}

.quan image {
  width: 90rpx;
  height: 70rpx;
  margin-right: 27rpx;
}

.quan .quan-title{
  max-width:480rpx;
}

.quan .quan-title view {
  color: #333;
  font-size: 28rpx;
  height: 65rpx;
  line-height: 30rpx;
}

.quan .quan-title view:last-child {
  color: #999;
  font-size: 24rpx;
  height: 24rpx;
  line-height: 24rpx;
  margin-top: 9rpx;
}

.quan .quan-title text {
  margin-left: 10rpx;
  font-weight: 550;
}

.item-l_icon {
  width: 44rpx;
  height: 44rpx;
  margin-right: 16rpx;
}

.item-r {
  width: 44rpx;
  height: 44rpx;
}

.item-def {
  font-size: 30rpx;
  color: #ccc;
}

.item-text .item-text_up {
  font-size: 32rpx;
  color: #333;
  font-weight: 400;
}

.item-text .item-text_d {
  font-size: 26rpx;
  color: #999;
}

.vipChoose {
  display: flex;
  white-space: nowrap;
  width: 100%;
  height: 340rpx;
  background-color: #fff;
}

.vipbgChoose {
  width: 198rpx;
  height: 294rpx;
  background-image: url("https://file.baimipay.cn/chose2x.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  align-items: center;
  position: relative;
}

.vipbgNoChoose {
  width: 198rpx;
  height: 294rpx;
  background-image: url("https://file.baimipay.cn/nochoose2x.png");
  background-repeat: no-repeat;
  background-size: 87% 89%;
  display: inline-block;
  align-items: center;
  background-position: 50% 35%;
  position: relative;
}

.vip view {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

.vip .vipTitle {
  color: #514b38;
  top: 40rpx;
  width: 150rpx;
  font-size: 30rpx;
  height: 80rpx;
  display: block;
  font-family: DIN-Bold;
  font-weight: 550;

}

.vip .vipTitle text {
  display: block;
  font-family: DIN-Bold;
  font-weight: 550;
}

.vip .vipPrice {
  color: #f3cb3c;
  font-size: 30rpx;
  top: 128rpx;
  font-family: DIN-Bold;
}

.fs35 {
  font-size: 55rpx;
}

.vip .vipMarket {
  color: #a9a598;
  font-size: 20rpx;
  top: 203rpx;
  text-decoration: line-through;
}

.agreement{
  align-items: center;
  display: flex;
  margin: 17rpx 26rpx;
  padding-bottom: 120rpx;
}

.agreement image{
  margin-right:5rpx;
  width:44rpx;
  height:44rpx;
 
}

.agreement text{
color:#333;
font-size:26rpx;
text-decoration:underline;
}

.submit{
  width: 100vw;
  left: 0;
  bottom: 0;
  position: fixed;
  display: flex;
  height: 120rpx;
  background: #fff;
  padding: 0 32rpx;
  margin-top: 30rpx;
  align-items: center;
  justify-content:center;
  box-sizing: border-box;
  z-index: 9;
  box-shadow: 0px -3px 5px 0px rgba(0, 0, 0, 0.1);
}

.bevip{
  padding:0rpx 236rpx;
  background-color: #F3CB3C;
  border-radius: 48rpx;
  font-size:36rpx;
  color:#333;
  box-sizing:border-box;
}

.pad23{
  padding:23rpx 230rpx;
}

.scrollbg{
  width:100rpx;
  height:8rpx;
  background-color:#E8E9EA;
  margin:0 auto;
  margin-top: 41%;
  left:44.5%;
  position:absolute;
  z-index:5;
  border-radius: 4rpx;
}

.scroll{
  width:80rpx;
  height:8rpx;
  background-color:#F3CB3C;
  margin-top: 41%;
  z-index:10;
  position:absolute;
  border-radius: 4rpx;
}
::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}

.search-bg .text {
  margin-top: 51rpx;
}
.search-img {
  display: block;
  font-size: 0;
  width: 366rpx;
  height: 256rpx;
}

.search-bg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-70%);
  text-align: center;
  color: #999;
}

.search-bg .text {
  margin-top: 51rpx;
}

JS代码

const app = getApp();
// 导包
import Serve from '../../../api/my.js'
import Common from '../../../api/common.js'
import Pay from '../../../api/pay.js'
Page({
  /**
   * 页面的初始数据
   */
  data: {
    listData: [], //会员列表
    coupunList: [],
    isDelivery: 0, //是开通否订单优先配送 
    deliveryName: '', //优先配送标题
    isIntegral: 0, //是否开通积分兑换
    integralName: '', //积分兑换标题
    consumePrice: 0, //积分消费金额
    integral: 0, //积分
    isCoupon: 0, //是否开通优惠券服务
    couponName: '', //优惠券标题
    agreement: '', //会员协议
    isAgreement: false, //是否同意会员协议
    isPaying: false,
    packageId: '',//套餐id
    actualAmount: '',//套餐金额
    orderId: '',//订单号
    scroll: 44,//滚动条距离页面的位置百分比
    percent: 0,
    fixedDays: '',//天数
    welcome:false
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.loadFontFace({ // 引入数字字体
      family: 'DIN-Bold',
      source: 'url("https://file.baimipay.cn/DIN-Bold.otf")',
      success: console.log
    })
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.load()
  },
  load() {
    this.getVipList()
  },

  //获取会员列表
  getVipList() {
    const listData = this.data.listData;
    const data=wx.getStorageSync('adcode') //缓存内的区域码
    Serve.getVipList(data).then(res => {
      if (res.success) {
        res.d.forEach(item => {
          item.choose = false //给每个套餐添加可选状态
        })
        this.setData({
          loaded: true,
          listData: res.d, //套餐列表
          [`listData[0].choose`]: true, //默认选中第一份套餐
          isDelivery: res.d[0].isDelivery, //是开通否订单优先配送 
          deliveryName: res.d[0].deliveryName, //优先配送标题
          isIntegral: res.d[0].isIntegral, //是否开通积分兑换
          integralName: res.d[0].integralName, //积分兑换标题
          consumePrice: res.d[0].consumePrice, //积分消费金额
          integral: res.d[0].integral, //积分
          isCoupon: res.d[0].isCoupon, //是否开通优惠券服务
          couponName: res.d[0].couponName, //优惠券标题
          agreement: res.d[0].agreement, //会员协议
          coupunList: res.d[0].couponList, //优惠券列表
          packageId: res.d[0].id, //套餐id
          actualAmount: res.d[0].packagePrice,//套餐金额
          fixedDays: res.d[0].fixedDays,//套餐天数
        })
        if (res.d.length==0){ //无套餐则显示欢迎页面
          this.setData({
            welcome: true
          })
        }
      }
      wx.hideLoading()

    }).catch(res => {
      wx.hideLoading()
      app.commonTip(res)
    })

  },

  //选择会员
  chooseVip(e) {
    var listData = this.data.listData
    var id = e.currentTarget.dataset.id
    var index = e.currentTarget.dataset.index
    for (let i in listData) {
      listData[i].choose = false
      if (listData[i].id == id) {
        listData[i].choose = true,
          this.setData({
            isDelivery: listData[i].isDelivery, //是开通否订单优先配送 
            deliveryName: listData[i].deliveryName, //优先配送标题
            isIntegral: listData[i].isIntegral, //是否开通积分兑换
            integralName: listData[i].integralName, //积分兑换标题
            consumePrice: listData[i].consumePrice, //积分消费金额
            integral: listData[i].integral, //积分
            isCoupon: listData[i].isCoupon, //是否开通优惠券服务
            couponName: listData[i].couponName, //优惠券标题
            agreement: listData[i].agreement, //会员协议
            packageId: listData[i].id, //套餐id
            actualAmount: listData[i].packagePrice,//套餐金额
            fixedDays: listData[i].fixedDays,//套餐天数
            coupunList: listData[i].couponList
          })
      }
    }
    this.setData({
      listData: listData
    })
  },
  //勾选会员协议
  agreement() {
    this.setData({
      isAgreement: !this.data.isAgreement
    })
  },
  checkMsg() {
    let msg = '';
    if (!this.data.isAgreement) msg = '请勾选会员协议';
    return msg;
  },
  //页面跳转
  miniPageChange(e) {
    var url = e.currentTarget.dataset.minipath;
    wx.navigateTo({
      url,
    })
  },
  //开通vip
  submit(e) {
    const msg = this.checkMsg();
    if (msg) {
      app.commonTip(msg);
      return false;
    }
    const weixin_form_id = e.detail.formId;
    if (weixin_form_id) {
      Common.formId(weixin_form_id);
    }
    if (this.data.isPaying) {
      return false;
    }
    const data = {
      packageId: this.data.packageId,//套餐id
      actualAmount: this.data.actualAmount,//套餐金额
    }
    this.setData({
      isPaying: true
    })
    Serve.purchaseMember(data).then(res => {
      if (res.success) {
        const data = res.d;
        const {
          orderId
        } = data;

        this.setData({
          orderId
        })
        Pay.wxPay(data).then(res => {
          this.setData({
            isPaying: false
          })
          Pay.payStatus(orderId).then(res => {
            this.linkMyVip();
          }).catch(err => {
            console.error(err);
          })
        }).catch(err => {
          this.setData({
            isPaying: false
          })
          this.load();
        })
      }
    }).catch(err => {
      this.setData({
        isPaying: false
      })
      console.log(err);
    })
  },

  linkMyVip() {
    wx.redirectTo({
      url: `/pages/myInfo/myVip/index`,
    })
  },
    //scroll-view滚动特效：随着手指右滑下面的黄条在灰条内滚动
  bindcroll(e) {
    const scrollWidth = e.detail.scrollWidth //整条内容的宽度
    const scrollLeft = e.detail.scrollLeft //内容最右到屏幕左侧的距离
    const minus = scrollWidth - scrollLeft //相减得出内容内容宽度
    const a = 3.5 * (375 / minus) //限制黄条移动范围是3.5%，算出内容距离屏幕的百分比
    this.setData({
      scroll: 44 + a //黄条距离左侧的距离
    })
  }
})