ufutx_love_mp/src/pages/users/upgradeVIP.wpy

<template>
  <cuCustom  :bgColor="bgVip"  isCustom="{{true}}">
    <view slot="backText">返回</view>
    <view slot="content">会员中心</view>
  </cuCustom>
  <view class="_bc-user animation-slide-top">
    <image class="userinfo-avatar flo_l" src="{{user.photo}}" mode="aspectFill"/>
    <view class="white flo_l font_32 userinfo-name">
      <span class="bold">{{user.nickname}} </span>
      <block v-if="user.rank_id > 0">
        <image class="icon" src="https://images.ufutx.com/202004/09/ce3522d17ae95986b88a1e6d07b12c4e.png" mode="aspectFill"/>
        <span class="orange font_22">超级会员</span>
      </block>
      <block v-else>
        <image class="icon" src="https://images.ufutx.com/202004/10/eb8b12c7330f16b732d47baef2012906.png" mode="aspectFill"/>
        <span class="white font_22">普通会员</span>
      </block>
    </view>
    <view class="font_24 white flo_l" style="color: #f7e4ad;width: 70%; ">
      {{user.rank_deadline?user.rank_deadline+'到期':'未激活'}}
    </view>
    <swiper class="card-swiper" circular="true"  bindchange="cardSwiper">
      <swiper-item v-for="(item,index) in rankList" :key="index" class="{{cardCur==index?'cur':''}}"  @tap="showFn(index)">
        <view class="swiper-item radius shadow margin-top bg-grey {{item.id?'':'bg-grey'}}">
          <image src="{{item.pic}}" mode="aspectFill"></image>
          <!--<video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" v-if="item.type=='video'}}"></video>-->
        </view>
      </swiper-item>
    </swiper>
  </view>
  <view class="mainWrapper animation-slide-bottom">
    <view class="font_30 bold color-333 title">会员套餐权益：</view>
    <view class="scroll-wrapper">
      <scroll-view scroll-x="{{true}}" scroll-with-animation style="height: 264rpx;">
        <view class="inline-block text-center scroll-item" v-for="(item,index) in specialVIP.feature_arr" :key="index">
          <image :src="item.icon" mode="aspectFit" class="featureIcon"></image>
          <view class="font_22">{{item.text}}</view>
          <view class="font_22" style="color: #B15E00">{{item.sub_text}}</view>
        </view>
      </scroll-view>
    </view>
  </view>
  <view class="mainWrapper">
    <view class="font_30 bold color-333 title">会员说明：</view>
    <view class="ruleBox">
      <block v-if="specialVIP">
        <view class="font_24 color-666" v-for="(item,index) in (specialVIP.explain_arr || specialVIP.discount_desc)"  :key="index">{{item}}</view>
      </block>
      <block v-else>
        <view class="font_24 color-666 placeholderStyle" v-for="item in 5"  :key="item" style="width:{{100/index}}%"></view>
      </block>
    </view>
  </view>
  <view class="payBtn" v-if="system != 'iOS'" @tap="showFn()">
    <view class="l_text">
      <span class="font_32 bold">
        <span>￥</span>{{payData.discount_price}}
      </span>
    </view>
    <view class="r_text">
      <span class="font_32" >
        立即购买
      </span>
    </view>
  </view>
  <view class="cu-modal {{modalName=='Modal'?'show':''}}">
    <view class="cu-dialog">
      <view class="cu-bar bg-white justify-end">
        <view class="content">提示</view>
        <view class="action" bindtap="hideModal">
          <text class="cuIcon-close text-red"></text>
        </view>
      </view>
      <view class="padding-xl">
        由于相关规范，ios小程序此功能暂不可用
      </view>
    </view>
  </view>
  <!--  弹框-->
  <view class="cu-modal bottom-modal {{modalName=='DialogModal'?'show':''}}">
    <view class="cu-dialog bg-white" style="border-radius: 24rpx 24rpx 0px 0px;">
      <view class="cu-bar justify-end">
        <view class="content color333 bold">支付信息</view>
        <view class="action" bindtap="hideModal">
          <text class="cuIcon-close" style="color:#C2C2C2;font-size: 44rpx !important;"></text>
        </view>
      </view>
      <view class="" style="background-color: white;padding: 20rpx 0 0 0;">
        <view class="text-left f-fcc">
          <span class="value color-999 font_24" style="text-decoration: line-through;" >原价：￥{{payData.price}}</span>
        </view>
        <view class="item-xl text-left f-fcc">
          <span class="value bold color333" style="font-size: 52rpx;line-height: 52rpx;" v-if="wxPayShow == 'cash'">￥{{payData.discount_price}}</span>
          <span class="value bold color333" style="font-size: 52rpx;line-height: 52rpx;" v-else>￥{{deductionPrice>0?deductionPrice:'0.00'}}</span>
        </view>
        <view class="item-xl text-left f-fcc">
          <span class="value color-999 font_24">{{payData.title}}</span>
        </view>
        <view class="m_payData f-fbc" @tap="payChoice('cash')">
          <view class="f-fc">
            <image class="u_payData_img" src="https://images.ufutx.com/202106/23/886f1118c820849fae35b3412930a5a2.png" mode="aspectFit" lazy-load="true"></image>
            <view class="font_28 color333">微信支付</view>
          </view>
          <image src="https://images.ufutx.com/202106/23/9dd9dc41e3689d92a280740bc99f3c32.png" mode="aspectFit" class="iconV2"></image>
          <!-- <view class="u_pay_unc" wx:else></view> -->
        </view>
      </view>
      <view class="m_pay_bu f-fcc">
        <view class="u_pay_bu f-fcc font_32 white bold" bindtap="conversion">立即支付</view>
      </view>
    </view>
  </view>
  <view style="height: 120rpx;"></view>

</template>

<script>
    import wepy from '@wepy/core'
  import https from '../../mixins/https'
  import base from '../../mixins/base'
  import { service } from '../../config.js'

    const app = getApp().$wepy.$options

   wepy.page({
    mixins: [base, https],
    data: {
      user: {},
      is_vip: false,
      init: false,
      date: 0,
      activeV2: false,
      swiperList: [],
      cardCur: 0,
      specialVIP: [],
      payData: {
          coin: '',
          discount_price: '',
          pay_type: '',
          price: '',
          remain_amount: '',
          title: ''
      }, // 支付信息
      rank: [],
      rankData: [],
      price: 0,
      score: 0,
      rankList: [],
      modalName: '', // 弹框支付
      chat_user_id: '',
      trade_no: '', // 订单号
      system: '', // 机型
      share_type: '',
      shareId: '',
      timeID: -1,
      wxPayShow: 'cash',
      paymentAmount: 0,
      coinMoney: 0,
      deductionPrice: 0,
        bgVip: 'background: #333333;\ncolor: white'
    },
    computed: {
      residue() {
        return (this.score - (this.price - this.my_rank_price)).toFixed(2)
      }
    },

    onShow() {
      // 初始化页面数据
      // this.$parent.getTracker(this.$root.$name, this.config.navigationBarTitleText)
    },

    onLoad(e) {
      if (e.share_type) {
        this.share_type = e.share_type
      }
      if (e.chat_user_id) {
        this.chat_user_id = e.chat_user_id
      }
      this.rankList = []
      this.system = app.globalData.systemInfo.system.split(' ')[0]
      console.log(this.system, '2224')
      if (this.system == 'iOS') {
        this.$redirectTo(`/pages/users/upgradeVIP2?chat_user_id=${this.chat_user_id}`)
        return
      }
        // share_type
      console.log(this.system)
      this.getPageData()
      // this.getUserData()
    },

    onPullDownRefresh() {},

    onShareAppMessage(res) {
      let that = this
      let openid = wx.getStorageSync('openid')
      let fromUserID = wx.getStorageSync('user_id')
      let url = `/pages/users/upgradeVIP?from_openid=${openid}&share_user_id=${that.id}&share_type=share&from_user_id=${fromUserID}`
      console.log(url)
      return {
        title: '会员中心',
        path: url,
        imageUrl: 'https://images.ufutx.com/202004/10/9d3829a6ad06cf95b32806fbc4f7dd94.png',
        success: function(res) {
          wx.showToast({
            title: '转发成功',
            icon: 'success',
            duration: 1500
          })
          var shareTickets = res.shareTickets
          if (shareTickets.length == 0) {
            return false
          }
        },
        fail: function(res) {
          // 转发失败
        }
      }
    },

    watch: {

      cardCur() {
          this.payData.title = `超级会员（${this.rankList[this.cardCur].name}）`
          this.payData.price = this.rankList[this.cardCur].price
          this.payData.discount_price = this.rankList[this.cardCur].discount_price
            console.log(this.payData.discount_price, 'this.payData.discount_price')
      }
    },

    methods: {
      gotoApp(item) {
        let URL = `https://love.ufutx.com/h5/#/serviceAgreementV3?title=${item}`
        wx.navigateTo({url: '/pages/books/bookDetail?url=' + encodeURIComponent(URL)})
      },
        getPageData() {
            let vm = this
            vm.$showLoading('加载中')
            vm.$get({url: `${service.host}/rank/list`}).then(({code, data}) => {
                vm.user = data.rank_info
                let {type, is_subscribe} = wx.getStorageSync('userInfo')
                let userInfo = {
                    nickName: vm.user.nickname,
                    avatarUrl: vm.user.avatar,
                    type,
                    id: vm.user.id,
                    is_subscribe,
                    rank_id: vm.user.rank_id
                }
                wx.setStorageSync('userInfo', userInfo)
                vm.specialVIP = data.ranks
                console.log(data, 'aaaaaaaa')
                vm.rankList = []
                data.ranks.sub_ranks.forEach((item, index) => {
                    if (index <= 2) {
                        vm.rankList.push(item)
                    }
                })
                if (vm.system == 'iOS') {
                    vm.rankList = [
                        {pic: 'https://images.ufutx.com/202004/11/3ccfd5478ea792e8793c7eebbf152511.png'},
                        {pic: 'https://images.ufutx.com/202004/11/cbc6bdbbbee7881f9c6e97f36aad4639.png'},
                        {pic: 'https://images.ufutx.com/202004/11/684d70c9b43dab6e9c83e0a53bf8029f.png'}
                    ]
                }
                vm.payData.title = `超级会员（${vm.rankList[0].name}）`
                vm.payData.price = `${vm.rankList[0].price}`
                vm.payData.discount_price = `${vm.rankList[0].discount_price}`
                vm.payData.pay_type = data.pay_type
                console.log(vm.rankList, vm.specialVIP)
                console.log(vm.payData, 'payData')
                vm.shareId = vm.rankList[vm.cardCur].id
                if (wx.getStorageSync('from_user_id')) {
                    vm.worthShare()
                }
                wx.hideLoading()
                console.log('eeee---')
            }).finally(() => {
                this.loaded = false
                this.init = true
            })
        },
        worthShare() {
            let vm = this,
              data = {
                  from_user_id: wx.getStorageSync('from_user_id'),
                  channel: 'rank',
                  product_id: vm.shareId
              }
            vm.$post({url: `${service.host}/worth/shares`, data}).then(({code, data}) => {
                console.log('2f')
            })
        },
      cardSwiper(e) {
        this.cardCur = e.$wx.detail.current
        clearTimeout(this.timeID)
        this.timeID = setTimeout(() => {
          this.shareId = this.rankList[this.cardCur].id
          console.log(this.shareId)
          if (wx.getStorageSync('from_user_id')) {
            this.worthShare()
          }
        }, 800)
      },
      showFn (index) { // 弹框支付
        this.wxPayShow = 'cash'
        this.coinMoney = (this.payData.coin / 10).toFixed(2)
        this.deductionPrice = this.payData.coin >= this.specialVIP.can_coin_amount ? (this.payData.discount_price - this.specialVIP.can_cash_amount).toFixed(2) : (this.payData.discount_price - this.coinMoney).toFixed(2)
        if (this.rankList[this.cardCur].id) {
          this.modalName = 'DialogModal'
          let monay = 0
          if (this.payData.discount_price < this.payData.coin / 10) {
            monay = 0
          } else {
            monay = (this.payData.discount_price - this.payData.coin / 10).toFixed(2)
          }
          this.payData.monay = Math.abs(monay).toFixed(2)
          this.payData.payId = this.rankList[this.cardCur].id
        } else {
          this.modalName = 'Modal'
        }
      },
      hideModal () {
        this.modalName = ''
      },
      copyWechat(data) {
        let vm = this
        wx.setClipboardData({
          data: data,
          success(res) {
            vm.$showToast('复制成功，赶紧去加《小恋》为好友吧！')
          }
        })
      },
      showToast(title) {
        this.$showToast(title)
      },
      goto(url) {
        wx.navigateTo({url: url})
      },
      showTost() {
        this.$showToast('请同意《福恋服务协议》')
      },
      conversion(item) {
        console.log(this.payData.payId)
        let that = this,
          url = `${service.host}/rank/buy`
        that.modalName = ''
        that.$showLoading('支付中...')
        let data = {}
          data = {
            sub_rank_id: this.payData.payId,
            chat_user_id: this.chat_user_id,
            share_type: this.share_type,
            pay_type: this.wxPayShow
          }
        that.$post({url: url, data}).then(({code, data}) => {
            that.trade_no = data.trade_no
            if (data.wx_pay.length == 0) {
              that.$post({url: `${service.host}/order/${that.trade_no}/callback`}).then(({code, data}) => {
                  that.getUserData()
                  that.$Toast_success('支付成功')
              })
            } else {
              let wxconfig = data.wx_pay.config
              // wx.config(JSON.parse(response.data.data.order.wx_pay.js));
              if (wxconfig.payment_debug) {
                return that.$post({url: `${service.host}/order/${that.trade_no}/callback`}).then(({code, data}) => {
                    that.getUserData()
                    that.$Toast_success('支付成功')
                })
              }
              wx.requestPayment({
                timeStamp: wxconfig.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                nonceStr: wxconfig.nonceStr, // 支付签名随机串，不长于 32 位
                package: wxconfig.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
                signType: wxconfig.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                paySign: wxconfig.paySign, // 支付签名
                success: function (res) {
                  that.$post({url: `${service.host}/order/${that.trade_no}/callback`}).then(({code, data}) => {
                      that.getUserData()
                      that.$Toast_success('支付成功')
                  })
                },
                fail: function (res) {
                  wx.showToast({
                    title: '已取消支付',
                    icon: 'none',
                    duration: 2000
                  })
                }
              })
            }
        })
      },
      payChoice(e) {
        this.wxPayShow = this.wxPayShow == 'coin' ? 'cash' : e
      }
    }
  })
</script>

<style lang="less">
  page{
    background: #F6F6F6;
    .bg-vip{
      background: #333333;
      color: white;
    }
    .mainTab{
      padding: 12rpx;
      .itemText {
        width: 38%;
        margin-bottom: 26rpx;
        position: relative;
      }
      .active{
        font-size: 32rpx;
        font-weight: bold;
        &:before{
          content: " ";
          position: absolute;
          bottom: -8rpx;
          left: 14vw;
          height: 2px;
          width: 26px;
          border-radius: 6rpx;
          background: #F8EAB8;
        }
      }
    }
    ._bc-user{
      width: 100%;
      background: url('https://images.ufutx.com/202004/09/5fd9264a4da7c310d1e086a92be7195a.png');
      background-size: cover;
      background-repeat: no-repeat;
      position: relative;
      /*position: fixed;*/
      height: 70vw;
      padding-top: 6vw;
      /*z-index: 9999;*/
      .userinfo-avatar {
        width: 110rpx;
        height: 110rpx;
        border-radius: 50%;
        margin-left: 34rpx;
        margin-right: 22rpx;
        border: 4rpx solid #fff;
      }
      .userinfo-name{
        margin-top: 12rpx;
        .icon{
          width: 28rpx;
          height: 28rpx;
          vertical-align: middle;
          margin:0 2px;
        }
      }
    }
    .item-xl{
      margin-bottom: 16rpx;
      // .title{
      // }
    }
    .m_payData {
      padding: 30rpx 30rpx;
      .u_payData_img {
        width: 48rpx;
        height: 42rpx;
        margin-right: 12rpx;
      }
      .u_pay_unc {
        width: 32rpx;
        height: 32rpx;
        border-radius: 50%;
        border: 2rpx solid #C2C2C2;
      }
      .m_payData_coinImg {
        width: 48rpx;
        height: 48rpx;
        margin-right: 12rpx;
      }
    }
    .iconV2{
      height: 32rpx;
      width: 32rpx;
    }
    .mainWrapper{
      padding-left: 34rpx;
      .title{
        margin-top: 32rpx;
        margin-bottom: 12rpx;
      }
      .ruleBox{
        background: white;
        padding: 22rpx;
        margin-right: 34rpx;
        box-shadow: 1rpx 1rpx 12rpx #f0f0f0;
        border-radius: 10rpx;
        line-height: 46rpx;
      }
      .scroll-wrapper{
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        .scroll-item{
          width: 200rpx;
          height: 268rpx;
          margin-left: -22rpx;
          background-image: url("https://images.ufutx.com/202004/09/1da12829a23a841d5f490302873152c3.png");
          background-size: cover;
          background-repeat: no-repeat;
        }
        .featureIcon{
          width: 62rpx;
          height: 62rpx;
          margin-top: 62rpx;
          margin-bottom: 12rpx;
        }
      }
    }
    .card-swiper{
      .swiper-item{
        border-radius: 14rpx;
      }
    }
    .iconV2{
      height: 36rpx;
      width: 36rpx;
      margin-right: 6rpx;
      vertical-align: middle;
      margin-bottom: 8rpx;
    }
    .payBtn{
      position: relative;
      position: fixed;
      bottom: 0;
      left: 18vw;
      width: 64vw;
      height: 60px;
      background-image: url("https://images.ufutx.com/202007/17/fb7b8b1cd0d1b289d1e029257a97e949.png");
      background-size: contain;
      background-repeat: no-repeat;
      .l_text{
        position: absolute;
        left: 60rpx;
        top: 12rpx;
      }
      .r_text{
        color: #f8e8b2;
        position: absolute;
        right: 56rpx;
        top: 12rpx;
      }
    }
  }
  .m_pay_bu {
    padding: 20rpx 0 40rpx;
    .u_pay_bu {
      margin-bottom: constant(safe-area-inset-bottom);
      margin-bottom: env(safe-area-inset-bottom);
      width: 480rpx;
      height: 80rpx;
      border-radius: 100rpx;
      background-image: linear-gradient(to left,#FF85A5,#FF5380);
    }
  }
</style>
<config>
    {
    navigationBarTitleText: 'VIP服务',
    navigationStyle: 'custom',
    enablePullDownRefresh: false,
    backgroundColorTop: '#f2f2f2',
    backgroundColorBottom: '#f2f2f2',
    usingComponents: {
    cuCustom: '~@/components/cu-custom'
    }
    }
</config>