|
|
@@ -0,0 +1,929 @@
|
|
|
+<template>
|
|
|
+ <view class="conter">
|
|
|
+ <view class="top">
|
|
|
+ <view class="bg">
|
|
|
+ <view class="bg-item">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="card">
|
|
|
+ <view class="opennow">
|
|
|
+ 立即开通
|
|
|
+ </view>
|
|
|
+ <view class="card-top flex">
|
|
|
+ <view class="avtur"><image :src="userInfo.avatar || '/static/error/missing-face.png'" mode=""></image></view>
|
|
|
+ <view class="main">
|
|
|
+ <view class="name">{{ userInfo.nickname }}</view>
|
|
|
+ <view class="tip" v-if="userInfo.pay_valid_time == null">尚未开通会员</view>
|
|
|
+ <view class="tip" v-else>
|
|
|
+ <text v-if="type">离会员到期仅剩{{ day }}天</text>
|
|
|
+ <text else>会员已过期</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom flex" style="z-index: 9; margin-top: 94rpx;">
|
|
|
+ <view class="font">
|
|
|
+ <view class="font-title">会员卡</view>
|
|
|
+ <view class="font-tip">¥500/永久 终身付费会员</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="vip">
|
|
|
+ <view class="system-title">
|
|
|
+ <view class="img" style="margin-right: 45rpx;"><image class="img" src="../../static/img/vip-left.png"></image></view>
|
|
|
+ <view class="title">会员特权</view>
|
|
|
+ <view class="img" style="margin-left: 45rpx;"><image class="img" src="../../static/img/vip-right.png"></image></view>
|
|
|
+ </view>
|
|
|
+ <view class="item-box flex">
|
|
|
+ <view class="item" v-for="(item, index) in viplist" :key="index">
|
|
|
+ <image :src="item.pic" mode=""></image>
|
|
|
+ <view class="item-title">{{ item.title }}</view>
|
|
|
+ <view class="item-tip">{{ item.tip }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="vip">
|
|
|
+ <view class="system-title">
|
|
|
+ <view class="img" style="margin-right: 45rpx;"><image class="img" src="../../static/img/vip-left.png"></image></view>
|
|
|
+ <view class="title">会员特权</view>
|
|
|
+ <view class="img" style="margin-left: 45rpx;"><image class="img" src="../../static/img/vip-right.png"></image></view>
|
|
|
+ </view>
|
|
|
+ <view class="money-box flex">
|
|
|
+ <view class="money" v-for="(item, index) in 3" @click="changevip(item, index)" :class="{ current: index == choose }">
|
|
|
+ <view class="money-name">会员</view>
|
|
|
+ <view class="now-money">
|
|
|
+ ￥
|
|
|
+ <text>500</text>
|
|
|
+ </view>
|
|
|
+ <view class="bf-money">￥600</view>
|
|
|
+ <view class="money-tip" :class="{ moneyc: index == choose }">
|
|
|
+ <image src="../../static/img/good.png" mode=""></image>
|
|
|
+ 专属折扣
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="box-buttom">
|
|
|
+ <view class="price-left">
|
|
|
+ <text class="entrepreneurship">
|
|
|
+ 开通前请阅读
|
|
|
+ <text>《会员服务协议》</text>
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="price-right" @click="submit">马上开通</view>
|
|
|
+ </view>
|
|
|
+ <uni-popup ref="popupPay" type="bottom">
|
|
|
+ <view class="popup-box">
|
|
|
+ <view class="popup-pay">
|
|
|
+ <view class="paybox-top flex">
|
|
|
+ <view class="type">选择支付方式</view>
|
|
|
+ <view class="image" @click="close"><image src="https://zhibo.liuniu946.com/img/x.png" mode="aspectFill"></image></view>
|
|
|
+ </view>
|
|
|
+ <!-- #ifndef APP-PLUS -->
|
|
|
+ <view class="paybox-main flex">
|
|
|
+ <view class="zftype flex">
|
|
|
+ <image src="https://zhibo.liuniu946.com/img/weixin.png" mode="aspectFill"></image>
|
|
|
+ <view class="zf">微信支付</view>
|
|
|
+ </view>
|
|
|
+ <label class="radio1" @click="changePayType(1)"><radio style="transform:scale(0.7)" value="" :checked="payType == 1" color="#FE4141"></radio></label>
|
|
|
+ </view>
|
|
|
+ <!-- #endif -->
|
|
|
+ <!-- #ifdef APP-PLUS -->
|
|
|
+ <view class="paybox-main flex">
|
|
|
+ <view class="zftype flex">
|
|
|
+ <view class="icon iconfont iconzhifubao"></view>
|
|
|
+ <view class="zf">支付宝支付</view>
|
|
|
+ </view>
|
|
|
+ <label class="radio1" @click="changePayType(3)"><radio style="transform:scale(0.7)" value="" :checked="payType == 3" color="#FE4141"></radio></label>
|
|
|
+ </view>
|
|
|
+ <!-- #endif -->
|
|
|
+ <view class="paybox-main flex">
|
|
|
+ <view class="zftype flex">
|
|
|
+ <image src="https://zhibo.liuniu946.com/img/yue.png" mode="aspectFill"></image>
|
|
|
+ <view class="zf">余额支付</view>
|
|
|
+ </view>
|
|
|
+ <label class="radio" @click="changePayType(2)">
|
|
|
+ <radio style="transform:scale(0.7)" class="rad" value="" :checked="payType == 2" color="#FE4141"></radio>
|
|
|
+ </label>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="buttom flex">
|
|
|
+ <view class="heji">
|
|
|
+ 合计：
|
|
|
+ <text>
|
|
|
+ ￥
|
|
|
+ <text class="money">{{ money }}</text>
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="zhifu" @click="readyPay()">立即支付</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapState, mapMutations } from 'vuex';
|
|
|
+import { becomeVip, getVip, setUserRed, claseauto } from '@/api/user.js';
|
|
|
+import { getUserInfo } from '@/api/user.js';
|
|
|
+import { timeComputed } from '@/utils/rocessor.js';
|
|
|
+// // #ifdef H5
|
|
|
+// import weixinObj from '@/plugin/jweixin-module/index.js';
|
|
|
+// // #endif
|
|
|
+
|
|
|
+export default {
|
|
|
+ computed: {
|
|
|
+ ...mapState(['weichatObj']),
|
|
|
+ ...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.state = option.state;
|
|
|
+ this.getVip();
|
|
|
+ this.checkedAuto = +this.userInfo.red_packet == 0 ? false : true;
|
|
|
+ if (this.userInfo.pay_valid_time != null) {
|
|
|
+ let TimeObj = timeComputed(this.userInfo.pay_valid_time * 1000);
|
|
|
+ this.type = TimeObj.type == 0 ? true : false;
|
|
|
+ this.day = TimeObj.day;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ checkedZdLoding: false, //自动拼团是否加载中
|
|
|
+ checkedAutoZd: 1, //开启关闭自动拼团
|
|
|
+ timeEnd: true, //判断会员是否超时
|
|
|
+ viplist: [
|
|
|
+ {
|
|
|
+ pic: '../../static/img/yjjl.png',
|
|
|
+ title: '佣金奖励',
|
|
|
+ tip: '更多佣金奖励'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ pic: '../../static/img/zszk.png',
|
|
|
+ title: '专属折扣',
|
|
|
+ tip: '优享会员折扣'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ pic: '../../static/img/tdjl.png',
|
|
|
+ title: '团队奖励',
|
|
|
+ tip: '更多团队奖励'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ state: '',
|
|
|
+ // #ifndef APP-PLUS
|
|
|
+ payType: 1,
|
|
|
+ payName: 'weixin',
|
|
|
+ // #endif
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ payType: 2,
|
|
|
+ payName: 'yue',
|
|
|
+ // #endif
|
|
|
+ day: '', //会员的天数
|
|
|
+ name: '',
|
|
|
+ payList: [],
|
|
|
+ froms: '',
|
|
|
+ money: 0,
|
|
|
+ explain: '',
|
|
|
+ now_money: '', // 当前余额
|
|
|
+ payLoding: false, //判断是否支付中
|
|
|
+ choose: 0,
|
|
|
+ level_id: '',
|
|
|
+ checkedAuto: false, //是否开启自动领红包
|
|
|
+ checkedLoding: false //请求自动加载设置保存中
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
|
|
|
+ // 开启关闭自动拼团
|
|
|
+ autoOut(e) {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '关闭中...',
|
|
|
+ mask: true
|
|
|
+ });
|
|
|
+ claseauto()
|
|
|
+ .then(e => {
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ title: '成功关闭！'
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ uni.hideLoading();
|
|
|
+ });
|
|
|
+ }, //自动拼团是否加载中
|
|
|
+ // 获取vip等级
|
|
|
+ getVip() {
|
|
|
+ getVip({}).then(({ data }) => {
|
|
|
+ data.forEach((sj, index) => {
|
|
|
+ sj.sq = (sj.money * 0.33).toFixed(0);
|
|
|
+ sj.yuan = (sj.sq * 1 + sj.money * 1).toFixed(2);
|
|
|
+ });
|
|
|
+ this.payList = data;
|
|
|
+ // 设置默认选中的对象
|
|
|
+ this.level_id = data[0].id;
|
|
|
+ this.money = data[0].money;
|
|
|
+ console.log(this.payList);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 开启关闭自动加载
|
|
|
+ changeAuto(e) {
|
|
|
+ console.log(e);
|
|
|
+ if (this.checkedLoding) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.checkedLoding = true;
|
|
|
+ setUserRed({
|
|
|
+ red_packet: e
|
|
|
+ })
|
|
|
+ .then(e => {
|
|
|
+ uni.showToast({
|
|
|
+ title: '设置成功！'
|
|
|
+ });
|
|
|
+ this.checkedLoding = false;
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ this.checkedAuto = false;
|
|
|
+ this.checkedLoding = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ if (this.money == 0) {
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '请选择要开通的会员'
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ console.log('打开支付弹窗');
|
|
|
+ this.$refs.popupPay.open();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ this.$refs.popupPay.close();
|
|
|
+ },
|
|
|
+ changePayType(type) {
|
|
|
+ this.payType = type;
|
|
|
+ console.log('this.payType', this.payType);
|
|
|
+ if (this.payType == 1) {
|
|
|
+ this.payName = 'weixin';
|
|
|
+ console.log('weixin', this.payName);
|
|
|
+ }
|
|
|
+ if (this.payType == 2) {
|
|
|
+ this.payName = 'yue';
|
|
|
+ console.log('yue', this.payName);
|
|
|
+ }
|
|
|
+ if (this.payType == 3) {
|
|
|
+ this.payName = 'ali';
|
|
|
+ console.log('ali', this.payName);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ readyPay() {
|
|
|
+ // this.$refs.popup.open();
|
|
|
+ this.pay();
|
|
|
+ },
|
|
|
+ changevip(item, index) {
|
|
|
+ this.level_id = item.id;
|
|
|
+ this.choose = index;
|
|
|
+ console.log(this.level_id);
|
|
|
+ this.money = item.money;
|
|
|
+ },
|
|
|
+ getUserInfoB() {
|
|
|
+ getUserInfo({})
|
|
|
+ .then(({ data }) => {
|
|
|
+ this.setUserInfo(data);
|
|
|
+ if (this.state == 1) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/vip/success'
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.navigateBack();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ pay() {
|
|
|
+ let obj = this;
|
|
|
+ console.log('点击');
|
|
|
+ try {
|
|
|
+ let obj = this;
|
|
|
+ obj.payLoding = true;
|
|
|
+ // #ifdef H5
|
|
|
+ // 获取当前是否为微信浏览器
|
|
|
+ obj.froms = uni.getStorageSync('weichatBrowser') || '';
|
|
|
+ // #endif
|
|
|
+ uni.showLoading({
|
|
|
+ title: '支付中',
|
|
|
+ mask: true
|
|
|
+ });
|
|
|
+ let data = {
|
|
|
+ pay_type: this.payName,
|
|
|
+ level_id: obj.level_id,
|
|
|
+ // #ifdef H5
|
|
|
+ from: obj.froms ? 'weixin' : 'H5', //来源
|
|
|
+ // #endif
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
+ from: 'routine', //来源
|
|
|
+ // #endif
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ from: 'app' //来源
|
|
|
+ // #endif
|
|
|
+ };
|
|
|
+ console.log(data, '传值');
|
|
|
+ becomeVip(data).then(({ data }) => {
|
|
|
+ console.log('fufei', data);
|
|
|
+ uni.hideLoading();
|
|
|
+ if (obj.payName == 'ali') {
|
|
|
+ const url = data.data;
|
|
|
+ console.log(url, 'url');
|
|
|
+ uni.requestPayment({
|
|
|
+ provider: 'alipay',
|
|
|
+ orderInfo: url,
|
|
|
+ success: res => {
|
|
|
+ console.log(res);
|
|
|
+ uni.showToast({
|
|
|
+ title: '充值成功',
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ },
|
|
|
+ fail: e => {
|
|
|
+ console.log(e);
|
|
|
+ },
|
|
|
+ complete: () => {}
|
|
|
+ });
|
|
|
+ obj.payLoding = false;
|
|
|
+ }
|
|
|
+ if (data.status == 'PAY_ERROR') {
|
|
|
+ console.log(data);
|
|
|
+ }
|
|
|
+ if (data.status == 'SUCCESS') {
|
|
|
+ obj.$refs.popupPay.close();
|
|
|
+ obj.getUserInfoB();
|
|
|
+ // getUserInfo({})
|
|
|
+ // .then(({ data }) => {
|
|
|
+ // obj.setUserInfo(data);
|
|
|
+ // if (obj.state == 1) {
|
|
|
+ // uni.navigateTo({
|
|
|
+ // url: '/pages/vip/success'
|
|
|
+ // });
|
|
|
+ // } else {
|
|
|
+ // uni.navigateBack();
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // .catch(e => {
|
|
|
+ // console.log(e);
|
|
|
+ // });
|
|
|
+ }
|
|
|
+ console.log('-----', data);
|
|
|
+ let da = data.result.jsConfig;
|
|
|
+ if (obj.payName == 'weixin' || obj.payName == 'routine') {
|
|
|
+ // let da = data.result.jsConfig;
|
|
|
+ console.log('--da--', da);
|
|
|
+ let data = {
|
|
|
+ // #ifdef H5
|
|
|
+ timestamp: da.timestamp,
|
|
|
+ // #endif
|
|
|
+ // #ifdef MP
|
|
|
+ timeStamp: da.timestamp,
|
|
|
+ // #endif
|
|
|
+ nonceStr: da.nonceStr,
|
|
|
+ package: da.package,
|
|
|
+ signType: da.signType,
|
|
|
+ paySign: da.paySign,
|
|
|
+ success: function(res) {
|
|
|
+ console.log(res);
|
|
|
+ obj.getUserInfoB();
|
|
|
+ // getUserInfo({})
|
|
|
+ // .then(({ data }) => {
|
|
|
+ // obj.setUserInfo(data);
|
|
|
+ // if (obj.state == 1) {
|
|
|
+ // uni.navigateTo({
|
|
|
+ // url: '/pages/vip/success'
|
|
|
+ // });
|
|
|
+ // } else {
|
|
|
+ // uni.navigateBack();
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // .catch(e => {
|
|
|
+ // console.log(e);
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ fail: e => {
|
|
|
+ console.log(e);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ console.log('--data--', data);
|
|
|
+ // #ifdef MP
|
|
|
+ wx.requestPayment(data);
|
|
|
+ // #endif
|
|
|
+ // #ifdef H5
|
|
|
+ if (obj.payName == 'weixin') {
|
|
|
+ weichatObj.chooseWXPay(data);
|
|
|
+ }
|
|
|
+ // #endif
|
|
|
+ }
|
|
|
+
|
|
|
+ uni.hideLoading();
|
|
|
+ // #ifdef H5
|
|
|
+ if (data.status == 'PAY_ERROR') {
|
|
|
+ console.log(data);
|
|
|
+ }
|
|
|
+ if (data.status == 'SUCCESS') {
|
|
|
+ obj.$refs.popupPay.close();
|
|
|
+ obj.getUserInfoB();
|
|
|
+ // getUserInfo({})
|
|
|
+ // .then(({ data }) => {
|
|
|
+ // obj.setUserInfo(data);
|
|
|
+ // if (obj.state == 1) {
|
|
|
+ // uni.navigateTo({
|
|
|
+ // url: '/pages/vip/success'
|
|
|
+ // });
|
|
|
+ // } else {
|
|
|
+ // uni.navigateBack();
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // .catch(e => {
|
|
|
+ // console.log(e);
|
|
|
+ // });
|
|
|
+ }
|
|
|
+ // #endif
|
|
|
+ });
|
|
|
+ } catch (e) {
|
|
|
+ console.log('fufiecw', e);
|
|
|
+ //TODO handle the exception
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.outBottom {
|
|
|
+ width: 190rpx;
|
|
|
+ height: 69rpx;
|
|
|
+ background: #3a3a3b;
|
|
|
+ border-radius: 35rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 69rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 27rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+.top {
|
|
|
+ width: 750rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ padding-top: 45rpx;
|
|
|
+ padding-bottom: 45rpx;
|
|
|
+ // height: 626rpx;
|
|
|
+ .bg {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 750rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ .bg-item {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 145rpx;
|
|
|
+ background-color: #363533;
|
|
|
+ border-radius:0 0 25% 25%;
|
|
|
+ // position: absolute;
|
|
|
+ // bottom: 0;
|
|
|
+ // top: -2200rpx;
|
|
|
+ // left: 0;
|
|
|
+ // right: 0;
|
|
|
+ // margin:0 auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ position: relative;
|
|
|
+ z-index: 10;
|
|
|
+ width: 100%;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .card {
|
|
|
+ position: relative;
|
|
|
+ margin: 0 auto 0;
|
|
|
+ z-index: 10;
|
|
|
+ width: 655rpx;
|
|
|
+ // height: 324rpx;
|
|
|
+ background: linear-gradient(225deg, #ffeed2 0%, #fed591 100%);
|
|
|
+ border-radius: 24rpx;
|
|
|
+ padding: 28rpx 25rpx 30rpx 36rpx;
|
|
|
+ .opennow {
|
|
|
+ width: 190rpx;
|
|
|
+ line-height: 69rpx;
|
|
|
+ background: #3A3A3B;
|
|
|
+ border-radius: 35rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 39rpx;
|
|
|
+ right: 25rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .card-top {
|
|
|
+ justify-content: flex-start;
|
|
|
+ .avtur {
|
|
|
+ width: 90rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ image {
|
|
|
+ background-color: #eee;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .tip {
|
|
|
+ font-size: 20rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ opacity: 0.52;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ position: absolute;
|
|
|
+ top: 40rpx;
|
|
|
+ right: 24rpx;
|
|
|
+ width: 190rpx;
|
|
|
+ height: 69rpx;
|
|
|
+ background: #3a3a3b;
|
|
|
+ border-radius: 35rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 69rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom {
|
|
|
+ margin-top: 40rpx;
|
|
|
+ .font-title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .font-tip {
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #343434;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .turn {
|
|
|
+ width: 108rpx;
|
|
|
+ height: 51rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 26rpx;
|
|
|
+ padding: 10rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .yuan {
|
|
|
+ display: inline-block;
|
|
|
+ width: 35rpx;
|
|
|
+ height: 35rpx;
|
|
|
+ background: linear-gradient(112deg, #ffe5bb, #fed591);
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 12rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.vip {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ padding-bottom: 54rpx;
|
|
|
+ .system-title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding-top: 40rpx;
|
|
|
+ .title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #1d2023;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 170rpx;
|
|
|
+ height: 2rpx;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-box {
|
|
|
+ margin-top: 40rpx;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .item {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ image {
|
|
|
+ width: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ }
|
|
|
+ .item-title {
|
|
|
+ margin-top: 14rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .item-tip {
|
|
|
+ margin-top: 10rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .money-box {
|
|
|
+ margin-top: 40rpx;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 47rpx 160rpx 25rpx;
|
|
|
+ .current {
|
|
|
+ border: 1rpx solid #fed591 !important;
|
|
|
+ background: #fff8ec !important;
|
|
|
+ }
|
|
|
+ .money {
|
|
|
+ margin-left: 22rpx;
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ width: 204rpx;
|
|
|
+ height: 296rpx;
|
|
|
+ background: #f5f5f5;
|
|
|
+ border: 1rpx solid #ffffff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ position: relative;
|
|
|
+ .tj {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 90rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 44rpx;
|
|
|
+ font-size: 25rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ffffff;
|
|
|
+ .tj-bg {
|
|
|
+ width: 90rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ }
|
|
|
+ text {
|
|
|
+ display: inline-block;
|
|
|
+ position: relative;
|
|
|
+ top: -56rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .money-name {
|
|
|
+ margin-top: 58rpx;
|
|
|
+ font-size: 33rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #644931;
|
|
|
+ }
|
|
|
+ .now-money {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: FZCuHeiSongS-B-GB;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #f7cf9c;
|
|
|
+ text {
|
|
|
+ font-size: 50rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bf-money {
|
|
|
+ font-size: 33rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ text-decoration: line-through;
|
|
|
+ color: #9a5a12;
|
|
|
+ opacity: 0.35;
|
|
|
+ }
|
|
|
+ .moneyc {
|
|
|
+ background: #f7cf9c !important;
|
|
|
+ color: #ffffff !important;
|
|
|
+ }
|
|
|
+ .money-tip {
|
|
|
+ margin-top: 10rpx;
|
|
|
+ width: 158rpx;
|
|
|
+ height: 45rpx;
|
|
|
+ background: #f5f5f5;
|
|
|
+ border: 1px solid #f7cf9c;
|
|
|
+ border-radius: 23rpx;
|
|
|
+ padding: 5rpx 10rpx;
|
|
|
+ font-size: 25rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #f7cf9c;
|
|
|
+ image {
|
|
|
+ position: relative;
|
|
|
+ top: 2rpx;
|
|
|
+ width: 23rpx;
|
|
|
+ height: 23rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.box-buttom {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 98rpx;
|
|
|
+
|
|
|
+ // position: absolute;
|
|
|
+ // buttom:0;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ // position: absolute;
|
|
|
+ // buttom:100rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background: #34332f;
|
|
|
+ .price-left {
|
|
|
+ display: flex;
|
|
|
+ .entrepreneurship {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #bbbbbb;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ text {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .price-right {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ // position: fixed;
|
|
|
+ // buttom: 0;
|
|
|
+ // right: 0;
|
|
|
+ width: 280rpx;
|
|
|
+ height: 108rpx;
|
|
|
+ background: #fed591;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .price-right1 {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ // position: fixed;
|
|
|
+ // buttom: 0;
|
|
|
+ // right: 0;
|
|
|
+ width: 280rpx;
|
|
|
+ height: 108rpx;
|
|
|
+ background: #b5b5b5;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+.popup-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 450rpx;
|
|
|
+ background: #ffffff;
|
|
|
+}
|
|
|
+.popup-pay {
|
|
|
+ position: relative;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0rpx 25rpx 32rpx 25rpx;
|
|
|
+ .paybox-top {
|
|
|
+ padding-top: 38rpx;
|
|
|
+ width: 100%;
|
|
|
+ .type {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .image {
|
|
|
+ padding-right: 24rpx;
|
|
|
+ padding-bottom: 10rpx;
|
|
|
+ image {
|
|
|
+ width: 16rpx;
|
|
|
+ height: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .paybox-main {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 54rpx;
|
|
|
+ .zftype {
|
|
|
+ padding-left: 5rpx;
|
|
|
+ image {
|
|
|
+ width: 38rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+ .zf {
|
|
|
+ padding-left: 18rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #3f454b;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.buttom {
|
|
|
+ width: 100%;
|
|
|
+ height: 113rpx;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ align-items: center;
|
|
|
+ .heji {
|
|
|
+ height: 100%;
|
|
|
+ width: 50%;
|
|
|
+ padding-left: 23rpx;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #3f454b;
|
|
|
+ text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ff0000;
|
|
|
+ .money {
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .zhifu {
|
|
|
+ width: 50%;
|
|
|
+ height: 92rpx;
|
|
|
+ background: linear-gradient(180deg, #fd4646, #ff3535);
|
|
|
+ text-align: center;
|
|
|
+ line-height: 92rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+}
|
|
|
+.ling-box {
|
|
|
+ position: relative;
|
|
|
+ z-index: 10;
|
|
|
+ width: 654rpx;
|
|
|
+ height: auto;
|
|
|
+ background: #fff8ec;
|
|
|
+ border: 1px solid #fed591;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ margin: 20rpx auto 0;
|
|
|
+ padding: 20rpx 24rpx 15rpx 42rpx;
|
|
|
+ .ling-title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #644931;
|
|
|
+ }
|
|
|
+ .ling-tip {
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #644931;
|
|
|
+ line-height: 24px;
|
|
|
+ opacity: 0.67;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
