590 lines
19 KiB
Plaintext
590 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_str?user.deadline_str+'到期':'未开通'}}
|
||
</view>
|
||
<swiper class="card-swiper" circular="true" previous-margin="1px" bindchange="cardSwiper" current="{{cardCur}}">
|
||
<swiper-item v-for="(item,index) in rankList" :key="index" class="{{cardCur==index?'cur':''}}" @tap="showFn(index)">
|
||
<view :class="{'bg-grey': !item.id}" class="swiper-item radius shadow margin-top">
|
||
<image :src="item.pic" mode="aspectFill" style="width: 100%"></image>
|
||
<!--<video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx: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>
|
||
<view class="scroll-wrapper">
|
||
<scroll-view class="scrollX" scroll-x="{{true}}" scroll-with-animation style="height: 264rpx;">
|
||
<view class="inline-block text-center scroll-items" v-for="(item,index) in specialVIP.feature" :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 class="mainWrapper">
|
||
<view class="font_30 bold color-333 title">套餐说明：</view>
|
||
<view class="ruleBox">
|
||
<block v-if="specialVIP.discount_desc_type == 'json'">
|
||
<view class="font_24 color-666" v-for="(item,index) in (specialVIP.explain || specialVIP.discount_desc)" :key="index">{{item}}</view>
|
||
</block>
|
||
<block :else>
|
||
<text class="font_24 color-666">{{specialVIP.discount_desc}}</text>
|
||
<!-- <view class="font_24 color-666 placeholderStyle" wx:for="{{5}}" wx:key="index" style="width:{{100/index}}%"></view> -->
|
||
</block>
|
||
</view>
|
||
</view>
|
||
<block v-if="type == 'single'">
|
||
<view class="payBtn" @tap="showFn()">单项服务暂不可购买</view>
|
||
</block>
|
||
<block v-else>
|
||
<button class="btn text-center font_30 btn-box white radius shadow bg-blue margin-top" open-type="share">分享给好友</button>
|
||
</block>
|
||
<view :class="{'show':modalName=='Modal'}" class="cu-modal">
|
||
<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 {{modalName=='holidayActivity'?'show':''}}">
|
||
<view class="holidayActivity">
|
||
<image src="https://images.ufutx.com/202105/18/bf8ae0ee07372d1752eb770ebe218089.png" mode="widthFix" class="activityIcon"></image>
|
||
</view>
|
||
</view>
|
||
<!-- 弹框-->
|
||
<view :class="{'show':modalName=='DialogModal'}" class="cu-modal bottom-modal ">
|
||
<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;">￥{{payData.discount_price}}</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">
|
||
<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>
|
||
</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>
|
||
<loginDialog :loginShow="loginShow" @hiddenLogin="hiddenLogin"></loginDialog>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import wepy from '@wepy/core'
|
||
import https from '../../mixins/https'
|
||
import base from '../../mixins/base'
|
||
|
||
import { service } from '../../config.js'
|
||
|
||
wepy.page({
|
||
mixins: [base, https],
|
||
data: {
|
||
user: {},
|
||
is_vip: false,
|
||
init: false,
|
||
date: 0,
|
||
active: 1,
|
||
activeV2: false,
|
||
swiperList: [],
|
||
cardCur: 0,
|
||
cardCur_1: 0,
|
||
sharePic: 'https://images.ufutx.com/202007/25/0db02b82c96b0da207b7d3f6ff517ffb.png',
|
||
shareText: '人工服务套餐',
|
||
specialVIP: [],
|
||
payData: {
|
||
title: '',
|
||
price: '',
|
||
discount_price: '',
|
||
padId: ''
|
||
}, // 支付信息
|
||
rank: [],
|
||
rankData: [],
|
||
type: 'single',
|
||
price: 0,
|
||
score: 0,
|
||
rankList: [],
|
||
other_user_id: '',
|
||
modalName: '', // 弹框支付
|
||
trade_no: '', // 订单号
|
||
system: '', // 机型
|
||
share_type: '',
|
||
shareId: '',
|
||
chat_user_id: '',
|
||
timeID: -1,
|
||
wxPayShow: 'cash',
|
||
coinMoney: 0,
|
||
deductionPrice: 0,
|
||
bgVip: 'background: #333333;\ncolor: white',
|
||
loginShow: false
|
||
|
||
},
|
||
computed: {
|
||
residue() {
|
||
return (this.score - (this.price - this.my_rank_price)).toFixed(2)
|
||
}
|
||
},
|
||
|
||
onShow() {
|
||
// 初始化页面数据
|
||
if (wx.getStorageSync('userInfo').type) {
|
||
this.type = wx.getStorageSync('userInfo').type
|
||
}
|
||
},
|
||
|
||
onLoad(e) {
|
||
if (e.index) {
|
||
this.cardCur_1 = e.index
|
||
}
|
||
if (e.share_type) {
|
||
this.share_type = e.share_type
|
||
}
|
||
if (e.other_user_id) {
|
||
this.other_user_id = e.other_user_id
|
||
}
|
||
if (e.chat_user_id) {
|
||
this.chat_user_id = e.chat_user_id
|
||
}
|
||
this.rankList = []
|
||
this.system = wx.getStorageSync('system')
|
||
this.initPageData()
|
||
},
|
||
|
||
onPullDownRefresh() {},
|
||
|
||
onShareAppMessage(res) {
|
||
let that = this
|
||
let openid = wx.getStorageSync('openid')
|
||
let fromUserID = wx.getStorageSync('user_id')
|
||
let url = `/pages/users/upgradeVIP2?from_openid=${openid}&share_user_id=${that.id}&share_type=share&from_user_id=${fromUserID}&index=${that.cardCur}`
|
||
return {
|
||
title: that.shareText,
|
||
path: url,
|
||
imageUrl: that.sharePic,
|
||
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() {
|
||
// if (this.active == 1) {
|
||
this.payData.title = this.rankList[this.cardCur].title
|
||
this.payData.price = this.rankList[this.cardCur].price
|
||
this.payData.discount_price = this.rankList[this.cardCur].discount_price
|
||
// } else {
|
||
// 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
|
||
// }
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
getUserData() { // 用户基本信息
|
||
let vm = this
|
||
vm.$get({url: `${service.host}/user/center`}).then(({code, data}) => {
|
||
vm.user = data.user
|
||
vm.user.rank_id = data.rank_profile.rank_id
|
||
// vm.payData.remain_amount = data.remain_amount
|
||
// vm.payData.coin = data.coin
|
||
let {type, is_subscribe} = wx.getStorageSync('userInfo')
|
||
// let userInfo = {
|
||
// nickName: data.nickname,
|
||
// avatarUrl: data.avatar,
|
||
// type,
|
||
// id: data.id,
|
||
// is_subscribe,
|
||
// rank_id: data.rank_id
|
||
// }
|
||
// wx.setStorageSync('userInfo', userInfo)
|
||
})
|
||
},
|
||
// 判断是否json
|
||
isValidJSON(str) {
|
||
try {
|
||
JSON.parse(str)
|
||
return true
|
||
} catch (e) {
|
||
return false
|
||
}
|
||
},
|
||
// 套餐会员数据
|
||
initPageData() {
|
||
let that = this
|
||
that.$showLoading('加载中')
|
||
this.$get({url: `${service.host}/rank/service/list`}).then(({code, data}) => {
|
||
that.user = data.rank_info
|
||
try {
|
||
data.services.forEach(item => {
|
||
if (item.discount_desc_type == 'text') {
|
||
item.discount_desc = item.discount_desc.replace(/↵/g, '\n')
|
||
}
|
||
})
|
||
} catch (e) {}
|
||
that.rankList = (Array.isArray(data.services) ? data.services : []).map(item => {
|
||
if (that.isValidJSON(item.feature)) {
|
||
item.feature = JSON.parse(item.feature)
|
||
}
|
||
return item
|
||
})
|
||
if (!that.rankList.length) {
|
||
that.specialVIP = {feature: [], discount_desc: '暂无可展示的服务套餐，单项服务暂不可购买'}
|
||
return
|
||
}
|
||
if (!that.rankList[that.cardCur_1]) that.cardCur_1 = 0
|
||
that.specialVIP = that.rankList[that.cardCur_1]
|
||
that.payData.title = `${that.rankList[that.cardCur_1].title}`
|
||
that.payData.price = `${that.rankList[that.cardCur_1].price}`
|
||
that.payData.discount_price = `${that.rankList[that.cardCur_1].discount_price}`
|
||
that.sharePic = that.rankList[that.cardCur_1].pic
|
||
that.cardCur = that.cardCur_1
|
||
that.shareId = that.rankList[that.cardCur].id
|
||
if (wx.getStorageSync('from_user_id')) {
|
||
// that.worthShare()
|
||
}
|
||
}).catch(() => {
|
||
that.rankList = []
|
||
that.specialVIP = {feature: [], discount_desc: '服务套餐加载失败，请稍后重试；单项服务暂不可购买'}
|
||
}).finally(() => wx.hideLoading())
|
||
},
|
||
worthShare() {
|
||
let vm = this,
|
||
data = {
|
||
from_user_id: wx.getStorageSync('from_user_id'),
|
||
channel: 'service',
|
||
product_id: vm.shareId
|
||
}
|
||
vm.$post({url: `${service.host}/worth/shares`, data}).then(({code, data}) => {
|
||
|
||
})
|
||
},
|
||
gotoApp(item) {
|
||
let URL = `https://love.ufutx.com/h5/#/serviceAgreementV3?title=${item}`
|
||
wx.navigateTo({url: '/pages/books/bookDetail?url=' + encodeURIComponent(URL)})
|
||
},
|
||
cardSwiper(e) {
|
||
this.cardCur = e.$wx.detail.current
|
||
this.shareText = this.rankList[e.$wx.detail.current].title
|
||
this.sharePic = this.rankList[e.$wx.detail.current].pic
|
||
// if (this.active == 1) {
|
||
this.specialVIP = this.rankList[this.cardCur]
|
||
// }
|
||
clearTimeout(this.timeID)
|
||
this.timeID = setTimeout(() => {
|
||
this.shareId = this.rankList[this.cardCur].id
|
||
if (wx.getStorageSync('from_user_id')) {
|
||
this.worthShare()
|
||
}
|
||
}, 800)
|
||
},
|
||
showFn() {wx.showToast({title:'单项服务暂不可购买',icon:'none'})},
|
||
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() {wx.showToast({title:'单项服务暂不可购买',icon:'none'})},
|
||
payChoice(e) {
|
||
this.wxPayShow = this.wxPayShow == 'coin' ? 'cash' : e
|
||
},
|
||
hiddenLogin() {
|
||
let vm = this
|
||
vm.loginShow = false
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style lang="less">
|
||
page{
|
||
background: #F6F6F6;
|
||
|
||
.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-color: #191919;
|
||
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: 0 34rpx;
|
||
.title{
|
||
margin-top: 32rpx;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
.ruleBox{
|
||
background: white;
|
||
padding: 22rpx;
|
||
box-shadow: 1rpx 1rpx 12rpx #f0f0f0;
|
||
border-radius: 10rpx;
|
||
line-height: 46rpx;
|
||
}
|
||
}
|
||
.scroll-wrapper{
|
||
width: 100%;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
.scrollX{
|
||
display: flex;
|
||
white-space: nowrap;
|
||
}
|
||
.scroll-items:nth-of-type(1){
|
||
margin-left: 34rpx;
|
||
}
|
||
.scroll-items:last-child{
|
||
margin-right: 34rpx;
|
||
}
|
||
.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;
|
||
}
|
||
.scroll-items{
|
||
width: 180rpx;
|
||
height: 230rpx;
|
||
margin-right: 26rpx;
|
||
background: #ffffff;
|
||
border-radius: 10rpx;
|
||
box-shadow: 5rpx 5rpx 15rpx 5rpx #ccc;
|
||
// background-image: url("https://images.ufutx.com/202004/09/1da12829a23a841d5f490302873152c3.png");
|
||
// background-size: cover;
|
||
// background-position: center;
|
||
// vertical-align: middle;
|
||
}
|
||
.featureIcon{
|
||
width: 62rpx;
|
||
height: 62rpx;
|
||
margin-top: 30rpx;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
}
|
||
.card-swiper{
|
||
.swiper-item{
|
||
border-radius: 14rpx;
|
||
}
|
||
}
|
||
.btn-box{
|
||
position: fixed;
|
||
bottom: 20rpx;
|
||
left: 50%;
|
||
transform: translate(-50%);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 460rpx;
|
||
height: 90rpx;
|
||
background-image: linear-gradient(to right, #FF85A5 0%, #FF5380 100%);
|
||
border-radius: 50rpx;
|
||
margin: 16rpx auto;
|
||
letter-spacing: 8rpx;
|
||
}
|
||
.payBtn{
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
padding: 28rpx 24rpx calc(28rpx + env(safe-area-inset-bottom));
|
||
box-sizing: border-box;
|
||
background: #fff;
|
||
color: #666;
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
z-index: 10;
|
||
}
|
||
}
|
||
|
||
.bg-vip{
|
||
background: #333333;
|
||
color: white;
|
||
}
|
||
.holidayActivity{
|
||
position: relative;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
width: 600rpx;
|
||
max-width: 100%;
|
||
border-radius: 24rpx;
|
||
overflow: hidden;
|
||
.activityIcon{
|
||
width: 606rpx;
|
||
height: 692rpx;
|
||
display: block;
|
||
}
|
||
}
|
||
.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: '服务套餐',
|
||
navigationStyle: 'custom',
|
||
enablePullDownRefresh: false,
|
||
backgroundColorTop: '#f2f2f2',
|
||
backgroundColorBottom: '#f2f2f2',
|
||
usingComponents: {
|
||
cuCustom: '~@/components/cu-custom',
|
||
loginDialog: '~@/components/loginDialog',
|
||
|
||
}
|
||
}
|
||
</config>
|