925 lines
20 KiB
Vue
925 lines
20 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="tab_box">
|
||
<view class="tab_icon" @click="back">
|
||
<uni-icons type="back" color="#fff" size="30"></uni-icons>
|
||
</view>
|
||
<view class="tab_name">
|
||
会员中心
|
||
</view>
|
||
<view style="width: 30px;">
|
||
|
||
</view>
|
||
</view>
|
||
<view class="vip_tabber">
|
||
|
||
<swiper class="swiper" previous-margin="60rpx" next-margin="40rpx" :autoplay="false"
|
||
@change="swiper_change">
|
||
<swiper-item v-for="(item, index) in tabber_vip" :key="index">
|
||
<view class="vip_image" :style="'background-image: url(' + item.imgurl.image + ');'">
|
||
<view class="vip_top_left"
|
||
:style="'background-image: url(' + item.imgurl.imagelft + ');color:' + item.imgurl.color + ';'">
|
||
{{
|
||
item.pay_name }}
|
||
</view>
|
||
<view class="price">
|
||
<text class="text1" :style="'color:' + item.imgurl.txt_color + ';'">￥</text>
|
||
<text class="text2"
|
||
:style="'color:' + item.imgurl.txt_color + ';'">{{ item.pay_money }}</text>
|
||
</view>
|
||
<text class="vip_text" :style="'color:' + item.imgurl.color + ';'">{{ item.pay_tab }}</text>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
|
||
</view>
|
||
|
||
<view class="tabber_box">
|
||
<view class="vip_tag_tabber">
|
||
<view class="tag_list" v-for="(item, index) in tag_tabList" :key="index">
|
||
<!-- <transition name="fade"> -->
|
||
<image :src="item.images" v-if="tag_index == index"
|
||
:class="tag_index == 0 || tag_index == 3 ? 'tag0' : 'tag'"></image>
|
||
|
||
<view class="item" v-else>
|
||
|
||
<view class="item_tag"></view>
|
||
</view>
|
||
<!-- </transition> -->
|
||
</view>
|
||
</view>
|
||
|
||
<view class="tag_tab_text">
|
||
<text v-for="(item, index) in tag_tabList" :key="index"
|
||
:class="tag_index == index ? 'text1' : 'text2'">{{ item.name }}</text>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view class="main">
|
||
<view class="main_box">
|
||
<view class="main_title">
|
||
<image src="https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/left_vip.png"></image>
|
||
<text>会员特权</text>
|
||
<image src="https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/right_vip.png"></image>
|
||
</view>
|
||
<view class="privilege_box">
|
||
<view class="privilege_list" v-for="(item, index) in equitylist" :key="index">
|
||
<view class="privilege_image">
|
||
<image :src="item.image"></image>
|
||
</view>
|
||
<view class="privilege_name">
|
||
{{ item.name }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="main_content">
|
||
<scroll-view scroll-y="true" style="height: 340rpx;">
|
||
<view class="privilege">
|
||
<view class="privilege_title">
|
||
<view class="title_left"></view>
|
||
<view class="title_name">会员特权</view>
|
||
<view class="title_right"></view>
|
||
</view>
|
||
</view>
|
||
<view class="text-group_3 flex-col">
|
||
<text class="text_5">购买会员有什么优势？</text>
|
||
<view class="paragraph_1">1、全剧无广告:免除广告的激励视频</view>
|
||
<view class="paragraph_1">2、新剧抢先看:最新免费短剧抢先看!</view>
|
||
<view class="paragraph_1">3、新剧抢先看:最新免费短剧抢先看!</view>
|
||
<view class="paragraph_1">4、新剧抢先看:最新免费短剧抢先看!</view>
|
||
<view class="paragraph_1">5、新剧抢先看:最新免费短剧抢先看!</view>
|
||
</view>
|
||
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="btn_box">
|
||
<view class="pay_text" @click="huiyuanxieyi">
|
||
<text class="text1">支付即表示同意：</text>
|
||
<text class="text2">《会员服务协议》</text>
|
||
</view>
|
||
<!-- @click="payment" -->
|
||
<view class="btn_class" @click="changeClick">
|
||
<view class="btn_text">
|
||
<text class="text1">¥{{ present.pay_money }}</text>
|
||
<text class="text2">开通会员</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
|
||
<scroll-view scroll-y="true" class="scroll-Y">
|
||
<!-- @scrolltolower="lower" @scroll="scroll":scroll-top="scrollTop" @scrolltoupper="upper"-->
|
||
<view style="padding: 34rpx 24rpx;border-radius: 12rpx 12rpx 0 0; background: #fff;">
|
||
<view v-html="tishi"></view>
|
||
</view>
|
||
</scroll-view>
|
||
</uni-popup>
|
||
|
||
<uni-popup ref="payselect" type="bottom" :safe-area="false">
|
||
<view class="popupbox">
|
||
<view class="popuptop">
|
||
<view class="popuptop_lft">支付</view>
|
||
<view class="popuptop_right" @click="paymentCancel">取消</view>
|
||
</view>
|
||
<!-- <view class="methodsList">
|
||
<view class="methodItem" v-for="method in payMethodList" :key="method.type"
|
||
@click="changeMethod(method)">
|
||
<view class="payCont">
|
||
<image class="payIcon" :src="method.img" mode="heightFix"></image>
|
||
<view class="payText">{{method.title}}</view>
|
||
</view>
|
||
<view class="payCheck">
|
||
<image class="checkRadio" v-if="payMethodCheck.type == method.type"
|
||
src="/static/icon/radio_check_icon.png" mode="scaleToFill"></image>
|
||
<view class="defaultDom" v-else></view>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
<radio-group @change="changeType">
|
||
<view class="pt16 pb16 flex alcenter space">
|
||
<view class="flex alcenter">
|
||
<text class="iconfont iconicon_pay_balance ft32 cl-green"></text>
|
||
<text class="ml15 ft14 ftw500 " style="color: #fff;">微信支付</text>
|
||
</view>
|
||
<view>
|
||
<radio value="weixin" :checked="payType == 'weixin'" />
|
||
</view>
|
||
</view>
|
||
<view class="bd-line"></view>
|
||
</radio-group>
|
||
|
||
<view class="paymoney">{{present.pay_money}}</view>
|
||
<view class="paysFooter">
|
||
<view class="payBtn" @click="okTap">去支付</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import PAY from "@/utils/pay";
|
||
export default {
|
||
data() {
|
||
return {
|
||
tabber_vip: [],
|
||
present: {},
|
||
tag_tabList: [{
|
||
name: '周卡会员',
|
||
imgdata: {
|
||
image: 'https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/weeks_vip.png',
|
||
imagelft: 'https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/weeks_lefttop.png',
|
||
color: "#3B3761",
|
||
txt_color: "#3B3761",
|
||
},
|
||
images: 'https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/tag_tab0.png'
|
||
},
|
||
{
|
||
name: '月卡会员',
|
||
imgdata: {
|
||
image: 'https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/month_vip.png',
|
||
imagelft: 'https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/month_lefttop.png',
|
||
color: "#E6A058",
|
||
txt_color: "#240A00",
|
||
},
|
||
images: 'https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/tag_tab.png'
|
||
},
|
||
{
|
||
name: '季卡会员',
|
||
imgdata: {
|
||
image: 'https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/season_vip.png',
|
||
imagelft: 'https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/season_lefttop.png',
|
||
color: "#30597A",
|
||
txt_color: "#30597A",
|
||
},
|
||
images: 'https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/tag_tab.png'
|
||
},
|
||
{
|
||
name: '年卡会员',
|
||
imgdata: {
|
||
image: 'https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/years_vip.png',
|
||
imagelft: 'https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/years_lefttop.png',
|
||
color: "#FFFFFF",
|
||
txt_color: "#FFDB8A",
|
||
},
|
||
images: 'https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/tag_tab1.png'
|
||
}
|
||
],
|
||
tag_index: 0,
|
||
tishi: '',
|
||
equitylist: [],
|
||
privilegeList: [{
|
||
name: '新剧抢先看',
|
||
image: 'https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/Fast.png'
|
||
},
|
||
{
|
||
name: '会员免广告',
|
||
image: 'https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/exempt.png'
|
||
},
|
||
{
|
||
name: '全站免费看',
|
||
image: 'https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/video.png'
|
||
},
|
||
{
|
||
name: '专属客服',
|
||
image: 'https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/artificial.png'
|
||
}
|
||
],
|
||
weeksprivilegeList: [{
|
||
name: '全站免费看',
|
||
image: 'https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/video.png'
|
||
},
|
||
{
|
||
name: '会员免广告',
|
||
image: 'https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/exempt.png'
|
||
},
|
||
{
|
||
name: '7*18H客服',
|
||
image: 'https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/artificial.png'
|
||
}
|
||
],
|
||
osName: "",
|
||
language: "en",
|
||
payMethodList: [],
|
||
payMethodCheck: {},
|
||
payType: 'weixin',
|
||
|
||
//支付
|
||
buyType: '微信',
|
||
wxlx: 'wxh5',
|
||
openid: "",
|
||
userInfo: "",
|
||
system: ""
|
||
|
||
|
||
};
|
||
},
|
||
onShow() {
|
||
this.vipList()
|
||
this.equitylist = this.weeksprivilegeList
|
||
},
|
||
onLoad() {
|
||
this.system = uni.getSystemInfoSync().osName
|
||
//#ifdef MP-WEIXIN
|
||
this.wxlx = 'wxxcx'
|
||
this.openid = uni.getStorageSync("openid")
|
||
console.log(this.openid);
|
||
this.userInfo = uni.getStorageSync("userinfo");
|
||
//#endif
|
||
},
|
||
mounted() {
|
||
|
||
},
|
||
methods: {
|
||
back() {
|
||
uni.navigateBack(1)
|
||
},
|
||
changeMethod(item) {
|
||
console.log(item)
|
||
this.payMethodCheck = item;
|
||
},
|
||
//取消支付
|
||
paymentCancel() {
|
||
this.$refs.payselect.close()
|
||
},
|
||
|
||
vipList() {
|
||
this.$httpRequest({
|
||
isLoading: true,
|
||
url: '/api/beans/vipList',
|
||
method: "GET",
|
||
data: {}
|
||
}).then(res => {
|
||
res.data.forEach(item => {
|
||
if (item.pay_type == 1) {
|
||
this.tabber_vip.push(item)
|
||
|
||
}
|
||
})
|
||
this.tabber_vip[0].imgurl = this.tag_tabList[0].imgdata
|
||
this.tabber_vip[1].imgurl = this.tag_tabList[1].imgdata
|
||
this.tabber_vip[2].imgurl = this.tag_tabList[2].imgdata
|
||
this.tabber_vip[3].imgurl = this.tag_tabList[3].imgdata
|
||
console.log(this.tabber_vip);
|
||
|
||
this.present = this.tabber_vip[0]
|
||
this.payCheckItem = this.tabber_vip[0]
|
||
}).catch(eer => {
|
||
console.log('fail' + JSON.stringify(eer));
|
||
})
|
||
},
|
||
huiyuanxieyi() {
|
||
console.log('000000')
|
||
this.$httpRequest({
|
||
url: '/api/index/noticeInfo',
|
||
method: "GET",
|
||
data: {
|
||
id: 7
|
||
},
|
||
}).then(res => {
|
||
this.tishi = res.data.data.content
|
||
this.$refs.popup.open()
|
||
}).catch(eer => {
|
||
console.log('fail' + JSON.stringify(data));
|
||
})
|
||
},
|
||
swiper_change(e) {
|
||
this.payCheckItem = this.tabber_vip[e.target.current]
|
||
this.present = this.tabber_vip[e.target.current]
|
||
if (this.present.pay_name == "周卡会员") {
|
||
this.equitylist = this.weeksprivilegeList
|
||
} else {
|
||
this.equitylist = this.privilegeList
|
||
}
|
||
this.tag_index = e.target.current;
|
||
},
|
||
|
||
|
||
|
||
okTap() {
|
||
var that = this
|
||
let defaultData = {
|
||
sum: 1,
|
||
buyType: that.buyType,
|
||
pricebuy: that.present.pay_money,
|
||
token: uni.getStorageSync("userinfo").token,
|
||
uid: uni.getStorageSync("userinfo").id,
|
||
wxlx: that.wxlx,
|
||
id: that.id,
|
||
openid: that.openid,
|
||
info: [],
|
||
};
|
||
// #ifdef MP-WEIXIN
|
||
this.weiChartPay(defaultData)
|
||
// #endif
|
||
// #ifdef H5
|
||
this.H5Pay();
|
||
// #endif
|
||
},
|
||
|
||
weiChartPay(defaultData) {
|
||
|
||
var that = this
|
||
if (this.system == 'android') {
|
||
uni.login({
|
||
timeout: 10000,
|
||
provider: 'weixin', //如果是uniapp，在这里需要标明平台的类型，支持的参数请查阅uniapp官网的uni.login()文档
|
||
success: (res) => {
|
||
PAY.pays.serverCreatOrder({
|
||
id: that.payCheckItem.id,
|
||
pay_type: 1,
|
||
code: res.code,
|
||
ad_code: uni.getStorageSync('get_ad_code'),
|
||
openid: that.openid,
|
||
}).then(creatRes => {
|
||
console.log('creat order success', creatRes)
|
||
return
|
||
PAY.pays.wxAppletAndroidPay(creatRes.data).then(payRes => {
|
||
console.log('pay order success', payRes)
|
||
that.getUserDel()
|
||
})
|
||
}).catch(err => {
|
||
console.log(err)
|
||
})
|
||
|
||
},
|
||
})
|
||
} else {
|
||
PAY.pays.wxIosCreatOrder({
|
||
sum: defaultData.sum,
|
||
buytype: defaultData.buyType,
|
||
pricebuy: defaultData.pricebuy,
|
||
token: defaultData.token,
|
||
uid: defaultData.uid,
|
||
wxlx: defaultData.wxlx,
|
||
id: defaultData.id,
|
||
openid: defaultData.openid,
|
||
info: defaultData.info,
|
||
ad_code: uni.getStorageSync('get_ad_code')
|
||
}).then(res => {
|
||
if (res.code == 1) {
|
||
PAY.pays.wxAppletIosPay(res.data).then(payRes => {
|
||
console.log('pay order success', payRes)
|
||
that.getUserDel()
|
||
})
|
||
}
|
||
}).catch(err => {
|
||
console.log(err)
|
||
})
|
||
}
|
||
},
|
||
|
||
H5Pay() {
|
||
let that = this;
|
||
that.$httpRequest({
|
||
url: "/api/pay/payInfo",
|
||
method: "GET",
|
||
data: {
|
||
id: that.id,
|
||
pay_type: 21,
|
||
token: uni.getStorageSync("userinfo").token,
|
||
uid: uni.getStorageSync("userinfo").id,
|
||
ad_code: uni.getStorageSync('get_ad_code')
|
||
}
|
||
}).then(res => {
|
||
console.log(res)
|
||
// #ifdef H5
|
||
window.open(res.data.return_url, "_self")
|
||
// #endif
|
||
// #ifdef APP
|
||
uni.navigateTo({
|
||
url: "/pagesA/myCenter/wallet/webPay?url=" + encodeURIComponent(res.data
|
||
.return_url)
|
||
})
|
||
// #endif
|
||
}).catch(err => {
|
||
console.log(err)
|
||
})
|
||
},
|
||
|
||
|
||
getPayList() {
|
||
this.$httpRequest({
|
||
url: "/api/beans/payList",
|
||
method: "GET"
|
||
}).then(res => {
|
||
if (res.code == 1) {
|
||
if (res.data.length > 0) {
|
||
let lists = [];
|
||
res.data.forEach((item) => {
|
||
if (item.pay_type != 3) {
|
||
lists.push(item)
|
||
}
|
||
})
|
||
this.list = lists
|
||
}
|
||
} else if (res.data.code == 50) {
|
||
this.is_check = true;
|
||
} else {
|
||
console.log(res)
|
||
}
|
||
|
||
}).catch(err => {
|
||
console.log(err)
|
||
})
|
||
},
|
||
|
||
|
||
changeClick(item) {
|
||
this.$refs.payselect.open()
|
||
},
|
||
|
||
|
||
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.content {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-color: #272733;
|
||
}
|
||
|
||
.tab_box {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 40px 32rpx 32rpx;
|
||
}
|
||
|
||
.tab_icon {}
|
||
|
||
.tab_name {
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.swiper {
|
||
width: 100vw;
|
||
height: 304rpx;
|
||
}
|
||
|
||
.vip_tabber {
|
||
// display: flex;
|
||
// align-items: center;
|
||
}
|
||
|
||
.vip_image {
|
||
width: 630rpx;
|
||
height: 304rpx;
|
||
background-size: 630rpx 304rpx;
|
||
display: inline-block;
|
||
position: relative;
|
||
|
||
.vip_top_left {
|
||
width: 120rpx;
|
||
height: 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-size: 120rpx 40rpx;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
.price {
|
||
position: absolute;
|
||
top: 76rpx;
|
||
left: 42rpx;
|
||
|
||
.text1 {
|
||
font-size: 56rpx;
|
||
}
|
||
|
||
.text2 {
|
||
font-size: 80rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.vip_text {
|
||
position: absolute;
|
||
font-size: 22rpx;
|
||
left: 50rpx;
|
||
top: 242rpx;
|
||
}
|
||
}
|
||
|
||
.tag_tab_text {
|
||
width: 450rpx;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-direction: row;
|
||
margin-top: 10rpx;
|
||
|
||
.text1 {
|
||
color: #e7e6ec;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.text2 {
|
||
color: #a2a0aa;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.vip_tag_tabber {
|
||
width: 418rpx;
|
||
height: 8rpx;
|
||
background-image: linear-gradient(to right, #3c3c43, #3c3c43);
|
||
background-size: 400rpx 8rpx;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
margin: 0 auto;
|
||
margin-top: 38rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.tag_list {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
// justify-content: space-between;
|
||
.tag0 {
|
||
width: 58rpx;
|
||
height: 24rpx;
|
||
}
|
||
|
||
.tag {
|
||
width: 96rpx;
|
||
height: 24rpx;
|
||
}
|
||
}
|
||
|
||
.tag_list:nth-child(2) {
|
||
width: 96rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.item_tag {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
background-color: #a2a0aa;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
.tag_list:nth-child(3) {
|
||
width: 96rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.item_tag {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
background-color: #a2a0aa;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
.tag_list:first-child {
|
||
/* Your styles here */
|
||
width: 58rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
|
||
.item_tag {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
background-color: #a2a0aa;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
.tag_list:last-child {
|
||
/* Your styles here */
|
||
width: 58rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
|
||
.item_tag {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
background-color: #a2a0aa;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.main {
|
||
margin-top: 28rpx;
|
||
|
||
.main_box {
|
||
width: 702rpx;
|
||
padding: 32rpx 0;
|
||
box-sizing: border-box;
|
||
background: #34343b;
|
||
border-radius: 16rpx;
|
||
margin: 0 auto;
|
||
|
||
.main_title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
image {
|
||
width: 68rpx;
|
||
height: 12rpx;
|
||
}
|
||
|
||
text {
|
||
font-size: 32rpx;
|
||
color: #f5cfbd;
|
||
font-weight: bold;
|
||
margin-left: 20rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.main_content {
|
||
padding: 28rpx 24rpx 0 24rpx;
|
||
|
||
view {
|
||
color: #a2a0aa;
|
||
}
|
||
}
|
||
|
||
.main_list {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
/* 创建三列 */
|
||
grid-gap: 10px;
|
||
/* 设置列之间的间距 */
|
||
padding: 0 32rpx;
|
||
box-sizing: border-box;
|
||
|
||
.main_item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-top: 26rpx;
|
||
|
||
image {
|
||
width: 76rpx;
|
||
height: 76rpx;
|
||
border-radius: 50%;
|
||
margin-bottom: 6rpx;
|
||
}
|
||
|
||
text {
|
||
font-size: 24rpx;
|
||
color: #a2a0aa;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn_box {
|
||
width: 750rpx;
|
||
height: 190rpx;
|
||
background: #3c3c43;
|
||
border-radius: 24rpx 24rpx 0rpx 0rpx;
|
||
overflow: hidden;
|
||
position: absolute;
|
||
bottom: 0;
|
||
|
||
.pay_text {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 14rpx;
|
||
|
||
.text1 {
|
||
font-size: 22rpx;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
}
|
||
|
||
.text2 {
|
||
font-size: 22rpx;
|
||
color: rgba(255, 200, 160, 1);
|
||
}
|
||
}
|
||
|
||
.btn_class {
|
||
width: 664rpx;
|
||
height: 80rpx;
|
||
background: linear-gradient(90deg, #ffe1c5 0%, #ffc69c 100%);
|
||
border-radius: 12rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto;
|
||
margin-top: 24rpx;
|
||
|
||
.btn_text {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.text1 {
|
||
font-size: 32rpx;
|
||
color: rgba(236, 23, 56, 1);
|
||
font-weight: bold;
|
||
margin-right: 14rpx;
|
||
}
|
||
|
||
.text2 {
|
||
font-size: 32rpx;
|
||
color: rgba(39, 39, 51, 1);
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.scroll-Y {
|
||
max-height: 1200rpx;
|
||
}
|
||
|
||
.privilege_box {
|
||
display: flex;
|
||
padding-bottom: 34rpx;
|
||
padding-top: 20rpx;
|
||
|
||
.privilege_list {
|
||
text-align: center;
|
||
padding: 0 30rpx;
|
||
|
||
.privilege_image {
|
||
text-align: center;
|
||
|
||
image {
|
||
width: 76rpx;
|
||
height: 76rpx;
|
||
}
|
||
}
|
||
|
||
.privilege_name {
|
||
color: #A2A0AA;
|
||
margin-top: 6rpx;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #A2A0AA;
|
||
line-height: 34rpx;
|
||
}
|
||
|
||
.privilege_txt {
|
||
font-size: 22rpx;
|
||
color: #898995;
|
||
margin-top: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.popupbox {
|
||
background-color: #1C1C1D;
|
||
padding: 0 32rpx;
|
||
|
||
.methodsList {
|
||
border-radius: 12rpx;
|
||
overflow: hidden;
|
||
|
||
.methodItem {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 140rpx;
|
||
padding: 0 36rpx;
|
||
border-bottom: 2rpx solid #363636;
|
||
|
||
.payCont {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.payIcon {
|
||
width: 138rpx;
|
||
height: 60rpx;
|
||
}
|
||
|
||
.payText {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: rgba(255, 255, 255, 0.87);
|
||
padding-left: 12rpx;
|
||
}
|
||
|
||
.defaultDom {
|
||
border: 2rpx solid #77777C;
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.checkRadio {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.paymoney {
|
||
font-weight: 500;
|
||
font-size: 40rpx;
|
||
color: #DDAF8F;
|
||
text-align: center;
|
||
margin: 40rpx 0 46rpx 0;
|
||
}
|
||
|
||
.popuptop {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-top: 22rpx;
|
||
padding-bottom: 40rpx;
|
||
|
||
.popuptop_lft {
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.popuptop_right {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.paysFooter {
|
||
margin-top: 48rpx;
|
||
padding-bottom: 60rpx;
|
||
|
||
.payBtn {
|
||
width: 440rpx;
|
||
line-height: 80rpx;
|
||
background: #E83A57;
|
||
border-radius: 12rpx;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: rgba(255, 255, 255, 0.87);
|
||
}
|
||
}
|
||
</style> |