吆喝
This commit is contained in:
蔡同学
@@ -0,0 +1,925 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user