|
|
@@ -0,0 +1,420 @@
|
|
|
+<template>
|
|
|
+ <view class="vip-container">
|
|
|
+ <!-- 顶部会员信息 -->
|
|
|
+ <view class="vip-header">
|
|
|
+ <view class="vip-title">尊贵会员</view>
|
|
|
+ <view class="vip-expire" v-if="userInfo.isVip">VIP到期时间: {{userInfo.vipExpireDate}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 会员价格选择 -->
|
|
|
+ <view class="vip-price-options">
|
|
|
+ <view class="price-option" v-for="(item, index) in priceOptions" :key="index"
|
|
|
+ :class="{active: selectedPrice === index}" @tap="selectPrice(index)">
|
|
|
+ <view class="price-tag" v-if="item.tag">{{item.tag}}</view>
|
|
|
+ <view class="price">¥{{item.price}}</view>
|
|
|
+ <view class="duration">{{item.name}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 会员特权列表 -->
|
|
|
+ <view class="vip-privileges">
|
|
|
+ <view class="privileges-title">尊享特权</view>
|
|
|
+ <view class="privileges-list">
|
|
|
+ <view class="privilege-item" v-for="(item, index) in privileges" :key="index">
|
|
|
+ <image class="privilege-icon" :src="item.icon" mode="aspectFit"></image>
|
|
|
+ <view class="privilege-info">
|
|
|
+ <view class="privilege-name">{{item.name}}</view>
|
|
|
+ <view class="privilege-desc">{{item.desc}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 底部支付按钮 -->
|
|
|
+ <view class="bottom-pay-btn">
|
|
|
+ <view class="total-price">合计: <text class="price-value">¥{{priceOptions[selectedPrice].price}}</text></view>
|
|
|
+ <view class="pay-button" @tap="showPaymentOptions">立即续费</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 支付方式选择弹窗 -->
|
|
|
+ <uni-popup ref="paymentPopup" type="bottom">
|
|
|
+ <view class="payment-popup">
|
|
|
+ <view class="popup-header">
|
|
|
+ <view class="popup-title">选择支付方式</view>
|
|
|
+ <view class="popup-close" @tap="closePaymentPopup">×</view>
|
|
|
+ </view>
|
|
|
+ <view class="payment-options">
|
|
|
+ <view class="payment-option" @tap="selectPayment('alipay')">
|
|
|
+ <image class="payment-icon" src="../../static/icon/pay_ali.png" mode="aspectFit"></image>
|
|
|
+ <view class="payment-name">支付宝支付</view>
|
|
|
+ <image class="payment-select"
|
|
|
+ :src="paymentMethod === 'alipay' ? 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMTgiIGZpbGw9IiM3RjI4REUiIHN0cm9rZT0iIzk3NThERSIgc3Ryb2tlLXdpZHRoPSIyIiAvPgogIDxwYXRoIGQ9Ik0xMCAyMCBMMTcgMjcgTDMwIDE0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPgo8L3N2Zz4=' : 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMTgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzk5OTk5OSIgc3Ryb2tlLXdpZHRoPSIyIiAvPgo8L3N2Zz4='"
|
|
|
+ mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ <view class="payment-option" @tap="selectPayment('wechat')">
|
|
|
+ <image class="payment-icon" src="../../static/icon/pay_wx.png" mode="aspectFit"></image>
|
|
|
+ <view class="payment-name">微信支付</view>
|
|
|
+ <image class="payment-select"
|
|
|
+ :src="paymentMethod === 'wechat' ? 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMTgiIGZpbGw9IiM3RjI4REUiIHN0cm9rZT0iIzk3NThERSIgc3Ryb2tlLXdpZHRoPSIyIiAvPgogIDxwYXRoIGQ9Ik0xMCAyMCBMMTcgMjcgTDMwIDE0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPgo8L3N2Zz4=' : 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMTgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzk5OTk5OSIgc3Ryb2tlLXdpZHRoPSIyIiAvPgo8L3N2Zz4='"
|
|
|
+ mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="confirm-payment" @tap="confirmPayment">确认支付 ¥{{priceOptions[selectedPrice].price}}</view>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ userInfo: {
|
|
|
+ isVip: false,
|
|
|
+ vipExpireDate: '2023-10-23'
|
|
|
+ },
|
|
|
+ priceOptions: [{
|
|
|
+ name: '月度VIP',
|
|
|
+ price: '98.00',
|
|
|
+ tag: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '季度VIP',
|
|
|
+ price: '198.00',
|
|
|
+ tag: '推荐'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '年度VIP',
|
|
|
+ price: '398.00',
|
|
|
+ tag: ''
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ selectedPrice: 1, // 默认选中的价格选项索引
|
|
|
+ privileges: [{
|
|
|
+ name: '无限AI生成',
|
|
|
+ icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHJlY3Qgd2lkdGg9IjYwIiBoZWlnaHQ9IjYwIiByeD0iMTUiIGZpbGw9IiM1RjE3REQiIC8+CiAgPHBhdGggZD0iTTMwIDE1IEw0MCAyMCBMNDAgNDAgTDMwIDQ1IEwyMCA0MCBMMjAgMjAgWiIgZmlsbD0iIzk3NThERSIgLz4KICA8cGF0aCBkPSJNMzAgMjUgTDM1IDI3LjUgTDM1IDM3LjUgTDMwIDQwIEwyNSAzNy41IEwyNSAyNy41IFoiIGZpbGw9IiNmZmZmZmYiIC8+CiAgPHBhdGggZD0iTTE1IDIyIEwxOCAyNCBMMTggMjggTDE1IDMwIEwxMiAyOCBMMTIgMjQgWiIgZmlsbD0iI2ZmZmZmZiIgLz4KICA8cGF0aCBkPSJNNDUgMjIgTDQ4IDI0IEw0OCAyOCBMNDUgMzAgTDQyIDI4IEw0MiAyNCBaIiBmaWxsPSIjZmZmZmZmIiAvPgo8L3N2Zz4=',
|
|
|
+ desc: '无限次使用AI创作功能'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '高级模型使用',
|
|
|
+ icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHJlY3Qgd2lkdGg9IjYwIiBoZWlnaHQ9IjYwIiByeD0iMTUiIGZpbGw9IiM1RjE3REQiIC8+CiAgPGNpcmNsZSBjeD0iMzAiIGN5PSIzMCIgcj0iMTUiIGZpbGw9IiM5NzU4REUiIC8+CiAgPGNpcmNsZSBjeD0iMzAiIGN5PSIzMCIgcj0iOCIgZmlsbD0iI2ZmZmZmZiIgLz4KICA8cGF0aCBkPSJNMTUgMTUgTDIwIDIwIE00NSAxNSBMNDAgMjAgTTE1IDQ1IEwyMCA0MCBNNDUgNDUgTDQwIDQwIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMyIgLz4KPC9zdmc+',
|
|
|
+ desc: '使用更高级的AI模型创作'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '优先创作队列',
|
|
|
+ icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHJlY3Qgd2lkdGg9IjYwIiBoZWlnaHQ9IjYwIiByeD0iMTUiIGZpbGw9IiM1RjE3REQiIC8+CiAgPHBhdGggZD0iTTE1IDIwIEg0NSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgLz4KICA8cGF0aCBkPSJNMTUgMzAgSDM1IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiAvPgogIDxwYXRoIGQ9Ik0xNSA0MCBIMjUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIC8+CiAgPHBhdGggZD0iTTQwIDM1IEw1MCA0NSIgc3Ryb2tlPSIjOTc1OERFIiBzdHJva2Utd2lkdGg9IjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgLz4KICA8cGF0aCBkPSJNNTAgMzUgTDQwIDQ1IiBzdHJva2U9IiM5NzU4REUiIHN0cm9rZS13aWR0aD0iNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiAvPgo8L3N2Zz4=',
|
|
|
+ desc: '创作请求优先处理'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'VIP专属客服',
|
|
|
+ icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHJlY3Qgd2lkdGg9IjYwIiBoZWlnaHQ9IjYwIiByeD0iMTUiIGZpbGw9IiM1RjE3REQiIC8+CiAgPGNpcmNsZSBjeD0iMzAiIGN5PSIyNSIgcj0iMTIiIGZpbGw9IiNmZmZmZmYiIC8+CiAgPHBhdGggZD0iTTE4IDQyIEMxOCAzNSwgMjQgMzIsIDMwIDMyIEMzNiAzMiwgNDIgMzUsIDQyIDQyIiBmaWxsPSIjOTc1OERFIiAvPgogIDxyZWN0IHg9IjIyIiB5PSIxNSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjQiIHJ4PSIyIiBmaWxsPSIjNUYxN0REIiAvPgogIDxwYXRoIGQ9Ik0xOCA0MiBINDIiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIzIiAvPgo8L3N2Zz4=',
|
|
|
+ desc: '专人解答任何问题'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '尊贵身份标识',
|
|
|
+ icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHJlY3Qgd2lkdGg9IjYwIiBoZWlnaHQ9IjYwIiByeD0iMTUiIGZpbGw9IiM1RjE3REQiIC8+CiAgPHBhdGggZD0iTTMwIDEwIEwzNyAyNCBMNTIgMjYgTDQxIDM3IEw0NCA1MiBMMzAgNDUgTDE2IDUyIEwxOSAzNyBMOCAyNiBMMjMgMjQgWiIgZmlsbD0iI2ZmZmZmZiIgLz4KICA8cGF0aCBkPSJNMjUgMjUgTDMwIDM1IEwzNSAyNSBMMjUgMjUgWiIgZmlsbD0iIzk3NThERSIgLz4KPC9zdmc+',
|
|
|
+ desc: '展示您的VIP身份'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '高级内容访问',
|
|
|
+ icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHJlY3Qgd2lkdGg9IjYwIiBoZWlnaHQ9IjYwIiByeD0iMTUiIGZpbGw9IiM1RjE3REQiIC8+CiAgPHJlY3QgeD0iMTUiIHk9IjE1IiB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHJ4PSI1IiBmaWxsPSIjOTc1OERFIiAvPgogIDxwYXRoIGQ9Ik0yMCAyNSBINDAgTTIwIDM1IEg0MCIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgLz4KICA8dGV4dCB4PSIzMCIgeT0iMzAiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxMiIgZmlsbD0iI2ZmZmZmZiIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+VklQPC90ZXh0Pgo8L3N2Zz4=',
|
|
|
+ desc: '专享更多高级内容'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ paymentMethod: 'alipay', // 默认支付方式
|
|
|
+ privilegesHeight: 0, // 添加存储特权区域高度的变量
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ // 获取用户信息，检查是否为VIP
|
|
|
+ this.getUserInfo();
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ // 页面渲染完成后获取vip-privileges的高度
|
|
|
+ this.getPrivilegesHeight();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 获取用户信息
|
|
|
+ getUserInfo() {
|
|
|
+ // 这里添加获取用户信息的API调用
|
|
|
+ // 示例数据
|
|
|
+ this.userInfo = {
|
|
|
+ isVip: true,
|
|
|
+ vipExpireDate: '2023-10-23'
|
|
|
+ };
|
|
|
+ },
|
|
|
+ // 选择价格选项
|
|
|
+ selectPrice(index) {
|
|
|
+ this.selectedPrice = index;
|
|
|
+ },
|
|
|
+ // 显示支付方式选择弹窗
|
|
|
+ showPaymentOptions() {
|
|
|
+ this.$refs.paymentPopup.open();
|
|
|
+ },
|
|
|
+ // 关闭支付方式选择弹窗
|
|
|
+ closePaymentPopup() {
|
|
|
+ this.$refs.paymentPopup.close();
|
|
|
+ },
|
|
|
+ // 选择支付方式
|
|
|
+ selectPayment(method) {
|
|
|
+ this.paymentMethod = method;
|
|
|
+ },
|
|
|
+ // 确认支付
|
|
|
+ confirmPayment() {
|
|
|
+ // 根据选择的支付方式进行支付
|
|
|
+ uni.showLoading({
|
|
|
+ title: '支付中...'
|
|
|
+ });
|
|
|
+
|
|
|
+ // 模拟支付过程
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ title: '支付成功',
|
|
|
+ icon: 'success'
|
|
|
+ });
|
|
|
+ this.$refs.paymentPopup.close();
|
|
|
+ }, 1500);
|
|
|
+
|
|
|
+ // 在实际应用中，这里会调用支付API
|
|
|
+ console.log('支付方式:', this.paymentMethod);
|
|
|
+ console.log('支付金额:', this.priceOptions[this.selectedPrice].price);
|
|
|
+ },
|
|
|
+ // 获取特权列表区域的高度
|
|
|
+ getPrivilegesHeight() {
|
|
|
+ const query = uni.createSelectorQuery().in(this);
|
|
|
+ query.select('.vip-privileges').boundingClientRect(data => {
|
|
|
+ if (data) {
|
|
|
+ this.privilegesHeight = data.height;
|
|
|
+ console.log('特权区域高度:', this.privilegesHeight);
|
|
|
+ } else {
|
|
|
+ console.log('未能获取到特权区域元素');
|
|
|
+ // 如果首次获取失败，可以添加延迟重试
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getPrivilegesHeight();
|
|
|
+ }, 100);
|
|
|
+ }
|
|
|
+ }).exec();
|
|
|
+ },
|
|
|
+ // 如果需要在某些数据变化后重新获取高度
|
|
|
+ updatePrivilegesHeight() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.getPrivilegesHeight();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .vip-container {
|
|
|
+ min-height: 100vh;
|
|
|
+ background-color: #161616;
|
|
|
+ padding-bottom: 120rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .vip-header {
|
|
|
+ background: linear-gradient(to right, #7F28DE, #5F17DD);
|
|
|
+ padding: 80rpx 40rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ border-radius: 0 0 30rpx 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .vip-title {
|
|
|
+ font-size: 48rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .vip-expire {
|
|
|
+ font-size: 28rpx;
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .vip-price-options {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 40rpx;
|
|
|
+ margin-top: -60rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-option {
|
|
|
+ width: 210rpx;
|
|
|
+ height: 240rpx;
|
|
|
+ background-color: #242424;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ transition: all 0.3s;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background: linear-gradient(to bottom, #9758DE, #5F17DD);
|
|
|
+ transform: scale(1.05);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-tag {
|
|
|
+ position: absolute;
|
|
|
+ top: -20rpx;
|
|
|
+ padding: 6rpx 20rpx;
|
|
|
+ background-color: #FF6B00;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 24rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-size: 48rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .duration {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #cccccc;
|
|
|
+ }
|
|
|
+
|
|
|
+ .vip-privileges {
|
|
|
+ padding: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .privileges-title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .privileges-list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .privilege-item {
|
|
|
+ width: 48%;
|
|
|
+ background-color: #242424;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .privilege-icon {
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .privilege-name {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .privilege-desc {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-pay-btn {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ background-color: #242424;
|
|
|
+ padding: 30rpx 40rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .total-price {
|
|
|
+ color: #cccccc;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-value {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pay-button {
|
|
|
+ background: linear-gradient(to right, #9758DE, #5F17DD);
|
|
|
+ color: #ffffff;
|
|
|
+ padding: 20rpx 60rpx;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 支付方式选择弹窗样式 */
|
|
|
+ .payment-popup {
|
|
|
+ background-color: #242424;
|
|
|
+ border-radius: 30rpx 30rpx 0 0;
|
|
|
+ padding: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup-title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup-close {
|
|
|
+ font-size: 48rpx;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .payment-options {
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .payment-option {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 30rpx 0;
|
|
|
+ border-bottom: 1px solid #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .payment-icon {
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .payment-name {
|
|
|
+ flex: 1;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .payment-select {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .confirm-payment {
|
|
|
+ background: linear-gradient(to right, #9758DE, #5F17DD);
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ padding: 30rpx 0;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ margin-top: 60rpx;
|
|
|
+ }
|
|
|
+</style>
|
