757 lines
26 KiB
Plaintext
757 lines
26 KiB
Plaintext
<template>
|
||
<cuCustom :bgColor="bgVip" isCustom="{{true}}">
|
||
<view slot="backText">返回</view>
|
||
<view slot="content">服务套餐</view>
|
||
</cuCustom>
|
||
<view class="_bc-user animation-slide-top">
|
||
<!-- <view class="mainTab text-center font_30">-->
|
||
<!-- <view class="white itemText inline-block {{active == 0?'active':''}}" @tap="activeFn('0')">超级会员</view>-->
|
||
<!-- <view class="white itemText inline-block {{active == 1?'active':''}}" @tap="activeFn('1')">会员套餐</view>-->
|
||
<!-- </view>-->
|
||
<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" 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 scroll-x="{{true}}" scroll-with-animation style="height: 264rpx;">
|
||
<view class="inline-block text-center scroll-item" wx:for="{{specialVIP.feature}}" wx: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> -->
|
||
<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" v-if="system != 'iOS' || active == '1'" @tap="showFn()">
|
||
<view class="l_text">
|
||
<span class="font_32 bold">
|
||
<span>￥</span>{{specialVIP.discount_price}}
|
||
</span>
|
||
<!-- <span style="text-decoration: line-through;" class="font_22">{{specialVIP.price}}</span>-->
|
||
</view>
|
||
<view class="r_text">
|
||
<span class="font_32">
|
||
立即购买
|
||
</span>
|
||
</view>
|
||
</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>
|
||
<!-- <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">
|
||
<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 v-if="specialVIP.pay_type == 'coin' && specialVIP.can_coin_amount > 0 && specialVIP.can_cash_amount > 0 && payData.coin > 0" class="m_payData" @tap="payChoice('coin')">-->
|
||
<!-- <view class="f-fbc">-->
|
||
<!-- <view class="f-fc">-->
|
||
<!-- <image class="m_payData_coinImg" src="https://images.ufutx.com/202106/07/3f64bcbd68b94e5435afc16237b6a40d.png" mode="aspectFit"></image>-->
|
||
<!-- <view class="font_28 color333" v-if="deductionPrice<=0">可用{{payData.discount_price*10}}福币抵扣{{payData.discount_price}}元</view>-->
|
||
<!-- <view class="font_28 color333" v-else>可用{{(payData.coin >= specialVIP.can_coin_amount)?specialVIP.can_coin_amount:payData.coin}}福币抵扣{{payData.coin >= specialVIP.can_coin_amount?specialVIP.can_cash_amount:coinMoney}}元</view>-->
|
||
<!-- </view>-->
|
||
<!-- <image src="https://images.ufutx.com/202106/23/9dd9dc41e3689d92a280740bc99f3c32.png" mode="aspectFit" class="iconV2" v-if="wxPayShow == 'coin'"></image>-->
|
||
<!-- <view class="u_pay_unc" v-else></view>-->
|
||
<!-- </view>-->
|
||
<!-- <view class="font_24 color999" style="padding-left: 60rpx;text-align: left;">当前拥有{{payData.coin}}福币</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 modalUp from '../../components/modal-up'
|
||
// import cuCustom from '../../components/cu-custom'
|
||
// import ShareMessage from '../../mixins/ShareMessage'
|
||
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'
|
||
},
|
||
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
|
||
}
|
||
// this.$parent.getTracker(this.$root.$name, this.config.navigationBarTitleText)
|
||
},
|
||
|
||
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
|
||
console.log(this.other_user_id, 'this.other_user_id')
|
||
}
|
||
if (e.chat_user_id) {
|
||
this.chat_user_id = e.chat_user_id
|
||
}
|
||
console.log(this.chat_user_id, '99999')
|
||
this.rankList = []
|
||
this.system = wx.getStorageSync('system')
|
||
console.log(this.system)
|
||
this.initPageData()
|
||
// this.getUserData()
|
||
},
|
||
|
||
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}`
|
||
console.log(url)
|
||
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() {
|
||
console.log('payData', this.cardCur)
|
||
// if (this.active == 1) {
|
||
console.log(this.rankList[this.cardCur])
|
||
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: {
|
||
// getPageData() {
|
||
// let vm = this
|
||
// vm.$showLoading('加载中')
|
||
// vm.$get({url: `${service.host}/super/rank`}).then(({code, data}) => {
|
||
// vm.specialVIP = data
|
||
// vm.rankList = data.sub_ranks
|
||
// vm.payData.title = `超级会员（${vm.rankList[0].name}）`
|
||
// vm.payData.price = `${vm.rankList[0].price}`
|
||
// vm.payData.discount_price = `${vm.rankList[0].discount_price}`
|
||
// console.log(vm.rankList, 'rankList===')
|
||
// wx.hideLoading()
|
||
// }).finally(() => {
|
||
// this.loaded = false
|
||
// this.init = true
|
||
// })
|
||
// },
|
||
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)
|
||
console.log(data)
|
||
})
|
||
},
|
||
// 判断是否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
|
||
// vm.payData.remain_amount = data.remain_amount
|
||
// vm.payData.coin = data.coin
|
||
let {type, is_subscribe} = wx.getStorageSync('userInfo')
|
||
let userInfo = {
|
||
nickName: that.user.nickname,
|
||
avatarUrl: that.user.avatar,
|
||
type,
|
||
id: that.user.id,
|
||
is_subscribe,
|
||
rank_id: that.user.rank_id
|
||
}
|
||
try {
|
||
data.services.forEach(item => {
|
||
if (item.discount_desc_type == 'text') {
|
||
item.discount_desc = item.discount_desc.replace(/↵/g, '\n')
|
||
}
|
||
})
|
||
} catch (e) {}
|
||
that.rankList = data.services.map(item => {
|
||
if (that.isValidJSON(item.feature)) {
|
||
item.feature = JSON.parse(item.feature)
|
||
}
|
||
return item
|
||
})
|
||
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()
|
||
}
|
||
wx.hideLoading()
|
||
console.log(that.payData, 'rankList')
|
||
console.log(that.rankList, 'rankList')
|
||
})
|
||
},
|
||
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)})
|
||
},
|
||
// activeFnV2() {
|
||
// this.activeV2 = !this.activeV2
|
||
// },
|
||
cardSwiper(e) {
|
||
console.log(e, '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) {
|
||
console.log(this.cardCur)
|
||
this.specialVIP = this.rankList[this.cardCur]
|
||
}
|
||
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) {
|
||
// 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)
|
||
// }
|
||
// console.log(monay, 'monay=')
|
||
// this.payData.monay = Math.abs(monay).toFixed(2)
|
||
this.payData.payId = this.rankList[this.cardCur].id
|
||
this.modalName = 'DialogModal'
|
||
} else {
|
||
this.modalName = 'Modal'
|
||
}
|
||
// this.payData = JSON.stringify(this.payData)
|
||
console.log(this.payData, '===')
|
||
},
|
||
hideModal () {
|
||
this.modalName = ''
|
||
},
|
||
// activeFn(code) {
|
||
// this.active = code
|
||
// if (code == 1) {
|
||
// this.initPageData()
|
||
// } else {
|
||
// this.getPageData()
|
||
// }
|
||
// },
|
||
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/service/${this.payData.payId}/buy`
|
||
that.modalName = ''
|
||
that.$showLoading('支付中...')
|
||
let data = {}
|
||
if (that.active == 1) {
|
||
data = {
|
||
chat_user_id: this.chat_user_id,
|
||
other_user_id: this.other_user_id,
|
||
pay_type: this.wxPayShow
|
||
}
|
||
} else {
|
||
data = {
|
||
sub_rank_id: this.payData.payId,
|
||
chat_user_id: this.chat_user_id,
|
||
other_user_id: this.other_user_id,
|
||
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.cardCur_1 = 0
|
||
that.getUserData()
|
||
that.initPageData()
|
||
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
|
||
})
|
||
}
|
||
})
|
||
}
|
||
}).finally(() => {
|
||
setTimeout(() => {
|
||
wx.hideLoading()
|
||
}, 1200)
|
||
})
|
||
},
|
||
payChoice(e) {
|
||
this.wxPayShow = this.wxPayShow == 'coin' ? 'cash' : e
|
||
}
|
||
}
|
||
})
|
||
</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-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: relative;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translate(-50%);
|
||
width: 480rpx;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
.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'
|
||
}
|
||
}
|
||
</config>
|