582 lines
19 KiB
Plaintext
582 lines
19 KiB
Plaintext
<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.deadline?user.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>
|