MoeNovaClient/pages/vip/index.vue

<template>
	<view class="vip-container">
		<view class="heard-box" :class="`active${selectedPrice}`">
			<!-- 自定义头部 -->
			<PageHeader title="" class="PageHeader">
				<template v-slot:right>
					<view class="more-options" @tap="toggleDropdown">
						<text class="fa fa-ellipsis-h"></text>
						<view class="dropdown-menu" v-if="showDropdown">
							<view class="dropdown-item" @tap="handleOption('vipRecord')">VIP记录</view>
							<view class="dropdown-item" @tap="handleOption('contact')">联系客服</view>
						</view>
					</view>
				</template>
			</PageHeader>
			<view class="reserveASeat"></view>

			<view class="vip-card-box">
				<!-- 顶部会员信息 -->
				<view class="vip-header">
					<view class="vip-info">
						<CircleAvatar class="vip-info-left" v-if="userInfo.avator" :src="userInfo.avator">
						</CircleAvatar>
						<view class="vip-info-right">
							<view class="vip-nickname">{{ userInfo.nickname }}</view>
							<view class="vip-expire" v-if="userInfo.is_vip">VIP到期时间: {{ userInfo.vip_date }}</view>
							<view class="vip-expire" v-else>暂未开通</view>
						</view>

					</view>
				</view>
			</view>
		</view>

		<view class="vip-content">
			<!-- 会员价格选择 -->
			<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-left-img" v-if="item.limitedTimeGift">
						<!-- 限时优惠M币{{ item.limitedTimeGift }} -->
						限时优惠
					</view>
					<view class="price-tag" v-if="item.tag">{{ item.tag }}</view>


					<view class="duration">{{ item.name }}</view>
					<view class="price"><text style="font-size: 40rpx;">¥</text>{{ item.price }}</view>
					<view class="originalPrice">¥{{ item.originalPrice }}</view>


				</view>
			</view>

			<uv-notice-bar direction="column" speed="250" color="#333"
				:text="memberInformation"></uv-notice-bar>

			<!-- 会员特权列表 -->
			<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" v-if="item.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="agree">
				<view class="agree2" @click="agreeChk()">
					<image mode="widthFix" src="../../static/icon/wd_icon_gouxuan04.png" v-if="is_agree == 0"></image>
					<image mode="widthFix" src="../../static/icon/wd_icon_gouxuan05.png" v-if="is_agree == 1"></image>
				</view>
				<view>
					同意
					<text class="xy" @click="goPage('/pages/AboutUs/pay_xy')">
						《充值服务协议》
					</text>，充值M币仅【萌创星球】使用点击查看
					<text class="xy" @click="goPage('/pages/vip/record?type=vip')">
						充值记录
					</text>
				</view>
			</view>
			<view class="bottom-pay-btn-bottom" 
				v-if="priceOptions && priceOptions[selectedPrice] && priceOptions[selectedPrice].price"
				:class="{'btn-loading': isSubmitting}" 
				@tap="showPaymentOptions">
				<text v-if="!isSubmitting">¥{{ priceOptions[selectedPrice].price }}</text>
				<text v-if="!isSubmitting">立即购买</text>
				<view v-if="isSubmitting" class="loading-spinner"></view>
			</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' ? '../../static/icon/wd_icon_gouxuan05.png' : '../../static/icon/wd_icon_gouxuan04.png'"
							mode="aspectFit"></image>
					</view>
					<view v-if="isWeChatPay" 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' ? '../../static/icon/wd_icon_gouxuan05.png' : '../../static/icon/wd_icon_gouxuan04.png'"
							mode="aspectFit"></image>
					</view>
				</view>
				<view class="confirm-payment" @tap="confirmPayment">立即支付</view>

			</view>
		</uni-popup>
		<CustomerServicePopup ref="customerServicePopup"></CustomerServicePopup>
	</view>
</template>

<script>
import { mapState } from 'vuex'
export default {
	data() {
		return {
			userInfo: {
				is_vip: false,
				vip_date: '2023-10-23'
			},
			memberInformation:[
			'墨色** 于10分钟前开通了月会员',
			'雾散时** 于24分钟前开通了季会员',
			'Jox** 于17分钟前开通了月会员',
			'漂亮的** 于19分钟前开通了年会员',
			'Ri** 于30分钟前开通了季会员',
			'山桃** 于15分钟前开通了月会员',
			'zx** 于19分钟前开通了年会员',
			'** 于13分钟前开通了年会员',
			'CarrollSo** 于21分钟前开通了季会员',
			'Nanng** 于17分钟前开通了月会员',
			'芭比B** 于9分钟前开通了年会员',
			'小周不是** 于29分钟前开通了季会员',
			'落雪_** 于26分钟前开通了月会员',
			'雾岛听蝉9** 于19分钟前开通了年会员',
			'如** 于19分钟前开通了季会员',
			'言川Art** 于25分钟前开通了月会员',
			'兔子君mrbun** 于30分钟前开通了月会员',
			'呼哧Hac** 于6分钟前开通了年会员',
			'alxe_不爱吹** 于17分钟前开通了季会员',
			'飞清** 于25分钟前开通了月会员',
		],
		// 	memberInformation:[
		// 	'墨色轨迹于10分钟前开通了月会员',
		// 	'雾散时见山于24分钟前开通了季会员',
		// 	'Joxin于17分钟前开通了月会员',
		// 	'漂亮的倾城于19分钟前开通了年会员',
		// 	'Rick于30分钟前开通了季会员',
		// 	'山桃始华于15分钟前开通了月会员',
		// 	'zx浊酒于19分钟前开通了年会员',
		// 	'桥九于13分钟前开通了年会员',
		// 	'CarrollSong于21分钟前开通了季会员',
		// 	'Nanngua于17分钟前开通了月会员',
		// 	'芭比Box于9分钟前开通了年会员',
		// 	'小周不是小粥于29分钟前开通了季会员',
		// 	'落雪_桃桃于26分钟前开通了月会员',
		// 	'雾岛听蝉999于19分钟前开通了年会员',
		// 	'如青稞于19分钟前开通了季会员',
		// 	'言川Artie于25分钟前开通了月会员',
		// 	'兔子君mrbunny于30分钟前开通了月会员',
		// 	'呼哧Hachi于6分钟前开通了年会员',
		// 	'alxe_不爱吹泡泡于17分钟前开通了季会员',
		// 	'飞清云淡于25分钟前开通了月会员',
		// ],
			priceOptions: [
			],
			selectedPrice: 1, // 默认选中的价格选项索引
			privileges: [{
				name: 'VIP专属通道',
				icon: '../../static/vip/hy_icon_quanyi01.png',
				desc: '创作加速，更快生成'
			},
			{
				name: '专属星源礼包',
				icon: '../../static/vip/hy_icon_quanyi02.png',
				desc: '每日登录领更多星源'
			},
			{
				name: '记忆增强',
				icon: '../../static/vip/hy_icon_quanyi03.png',
				desc: '创作加速，更快生成'
			},
			{
				name: '升级语言模型',
				icon: '../../static/vip/hy_icon_quanyi04.png',
				desc: '深度思考，提升50%'
			},
			// {
			// 	name: 'VIP专属通道',
			// 	icon: '../../static/vip/hy_icon_quanyi05.png',
			// 	desc: '创作加速，更快生成'
			// },
			// {
			// 	name: '免广告',
			// 	icon: '../../static/vip/hy_icon_quanyi06.png',
			// 	desc: '无广告免费体验'
			// }
			],
			paymentMethod: 'alipay', // 默认支付方式
			privilegesHeight: 0, // 添加存储特权区域高度的变量
			showDropdown: false, // 控制下拉菜单显示状态 
			is_agree: 0,
			linkid: '',
			lastClickTime: 0,
			isSubmitting: false,
		}
	},
	computed: {
		...mapState('hideModule', ['isWeChatPay'])
	},
	onLoad() {
		// 获取用户信息，检查是否为VIP
		this.getUserInfo();
	},
	onReady() {
		// 页面渲染完成后获取vip-privileges的高度
		this.getPrivilegesHeight();
	},
	methods: {
		// 获取用户信息
		getUserInfo() {
			// 这里添加获取用户信息的API调用

			uni.request({
				url: this.$apiHost + "/User/getinfo",
				data: {
					uuid: getApp().globalData.uuid,
					skey: getApp().globalData.skey,
				},
				header: {
					"content-type": "application/json",
					sign: getApp().globalData.headerSign,
				},
				success: (res) => {
					if (res) {
						console.log("获取到用户信息", res.data);

						this.userInfo = res.data
					}
				},
				complete: (com) => {
				},
				fail: (e) => {
					console.log("----e:", e);
				},
			});
			uni.request({
				url: this.$apiHost + "/Member/vipList",
				data: {
					uuid: getApp().globalData.uuid,
					skey: getApp().globalData.skey,
				},
				header: {
					"content-type": "application/json",
					sign: getApp().globalData.headerSign,
				},
				success: (res) => {
					console.log("作品列表数据:", res.data);
					// 确保在任何情况下都完成加载
					if (
						res.data.success == "yes" &&
						res.data.list &&
						res.data.list.length > 0
					) {
						console.log(res.data.list, "会员列表数据");
						this.priceOptions=[]
						res.data.list.reverse()
						res.data.list.forEach(v => {
							this.priceOptions.push({
								id: v.id,
								limitedTimeGift: v.price_market - v.price,
								name: v.name,
								price: v.price,
								originalPrice: v.price_market,
								tag: v.tag,
								numDay: v.num_day,
								numSong: v.num_song,
							})
						});
						this.priceOptions[1].tag = "推荐"
						console.log(this.priceOptions, "会员列表数据");

					} else {
						// priceOptions: [{
						// 	name: '月度VIP',
						// 	price: '98',
						// 	originalPrice: '168',
						// 	tag: '',
						// 	limitedTimeGift: ""
						// },
						// {
						// 	name: '季度VIP',
						// 	price: '198',
						// 	originalPrice: '268',
						// 	tag: '推荐',
						// 	limitedTimeGift: "100"
						// },
						// {
						// 	name: '年度VIP',
						// 	price: '398',
						// 	originalPrice: '498',
						// 	tag: '',
						// 	limitedTimeGift: "1500"
						// }
						// ],
					}


				},
				complete: () => {

				},
				fail: (e) => {
					console.log("请求关注列表失败:", e);

				},
			});
		},
		// 选择价格选项
		selectPrice(index) {
			this.selectedPrice = index;
		},
		// 显示支付方式选择弹窗
		showPaymentOptions() {
			const now = Date.now();
			if (now - this.lastClickTime < 3000) {
				uni.showToast({
					title: "请勿频繁点击",
					icon: "none"
				});
				return;
			}
			this.lastClickTime = now;
			
			if (this.isSubmitting) return;
			
			if (this.is_agree == 0) {
				uni.showToast({
					title: "请确认并选择协议",
					icon: "none",
				});
				return;
			}
			this.isSubmitting = true;
			this.$refs.paymentPopup.open();
			this.isSubmitting = false;
		},
		// 关闭支付方式选择弹窗
		closePaymentPopup() {
			this.$refs.paymentPopup.close();
		},
		// 选择支付方式
		selectPayment(method) {
			this.paymentMethod = method;
		},
		// 确认支付
		confirmPayment() {
			if (!this.priceOptions || !this.priceOptions[this.selectedPrice]) {
				uni.showToast({
					title: '请选择会员套餐',
					icon: 'none'
				});
				return;
			}
			if (this.is_agree == 0) {
				uni.showToast({
					title: "请确认并选择协议",
					icon: "none",
				});
				return;
			}
			this.isSubmitting = true;
			this.submitPayment();
		},
		// 提交支付
		submitPayment() {
			let that = this;
			uni.showLoading({
				title: '创建订单中...'
			});
			uni.request({
				url: this.$apiHost + '/Order/submit',
				data: {
					uuid: getApp().globalData.uuid,
					skey: getApp().globalData.skey,
					product_id: this.priceOptions[this.selectedPrice].id,
					type: 'buyVip',
					payType: this.paymentMethod
				},
				header: {
					'content-type': 'application/json',
					sign: getApp().globalData.headerSign
				},
				success: (res) => {
					console.log("支付订单创建结果:", res.data);
					if (res.data.success == 'yes') {
						this.linkid = res.data.linkid;
						this.$refs.paymentPopup.close();

						// 根据支付方式调用不同的支付接口
						if (this.paymentMethod === 'wechat') {
							uni.requestPayment({
								provider: "wxpay",
								orderInfo: {
									appid: res.data.wepay.appid,
									partnerid: res.data.wepay.partnerid,
									prepayid: res.data.wepay.prepayid,
									package: "Sign=WXPay",
									noncestr: res.data.wepay.noncestr,
									timestamp: res.data.wepay.timestamp,
									sign: res.data.wepay.sign
								},
								success: (payRes) => {
									console.log("微信支付成功:", payRes);
									that.checkPayStatus();
								},
								fail: (err) => {
									console.log("微信支付失败:", err);
									uni.hideLoading();
									that.isSubmitting = false;
									uni.hideLoading()
									uni.showToast({
										title: '支付取消',
										icon: 'none'
									});
								}
							});
						} else if (this.paymentMethod === 'alipay') {
							uni.requestPayment({
								provider: "alipay",
								orderInfo: res.data.ali_pay,
								success: (payRes) => {
									console.log("支付宝支付成功:", payRes);
									that.checkPayStatus();
								},
								fail: (err) => {
									console.log("支付宝支付失败:", err);
									uni.hideLoading();
									that.isSubmitting = false;
									uni.hideLoading()
									uni.showToast({
										title: '支付取消',
										icon: 'none'
									});
								}
							});
						}
					} else {
						uni.hideLoading();
						that.isSubmitting = false;
						uni.hideLoading()
						uni.showToast({
							title: res.data.msg || '创建订单失败',
							icon: "error"
						});
					}
				},
				fail: (err) => {
					console.log("创建订单失败:", err);
					uni.hideLoading();
					that.isSubmitting = false;
					uni.hideLoading()
					uni.showToast({
						title: '网络错误，请稍后重试',
						icon: "error"
					});
				}
			});
		},
		// 检查支付状态
		checkPayStatus() {
			let that = this;
			uni.request({
				url: this.$apiHost + "/Order/getstatus",
				data: {
					uuid: getApp().globalData.uuid,
					linkid: this.linkid,
				},
				header: {
					"content-type": "application/json",
					'sign': getApp().globalData.headerSign
				},
				success: (res) => {
					if (res.data.success == "yes") {
						uni.hideLoading();
						uni.showToast({
							title: "充值成功",
							icon: "none",
						});
						// 支付成功后刷新用户信息
						this.getUserInfo();
					} else {
						setTimeout(function () {
							that.checkPayStatus();
						}, 1000);
					}
				},
				fail: (err) => {
					console.log("检查支付状态失败:", err);
					uni.hideLoading();
					uni.showToast({
						title: "网络错误，请重试",
						icon: "none"
					});
				}
			});
		},
		// 获取特权列表区域的高度
		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();
			});
		},
		// 切换下拉菜单显示状态
		toggleDropdown() {
			this.showDropdown = !this.showDropdown;
		},
		// 处理下拉菜单选项点击
		handleOption(type) {
			this.showDropdown = false;
			switch (type) {
				case 'vipRecord':
					uni.navigateTo({
						url: '/pages/vip/record?type=vip'
					});
					break;
				case 'help':
					uni.navigateTo({
						url: '/pages/help/index'
					});
					break;
				case 'contact':
					 
				this.openCustomPopup();

					break;
			}
		},
		openCustomPopup() {
      this.$refs.customerServicePopup.open();
    },
		goPage(page) {
			uni.navigateTo({
				url: page,
			})
		}, agreeChk() {
			if (this.is_agree == 0) {
				this.is_agree = 1;
			} else {
				this.is_agree = 0;
			}
		},
	}
}
</script>

<style lang="scss">
// 导入FontAwesome
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

.vip-container {
	min-height: 100vh;
	padding-bottom: 100rpx;

	.heard-box {
		.PageHeader {
			background-image: url("@/static/vip/hy_bg_01.png");
			background-size: 100% auto;
			background-repeat: no-repeat;
			background-position-y: -var(--status-bar-height);

			::v-deep .uni-icons {
				color: #fff !important;
			}

			.fa {
				color: #fff;
			}
		}

		.vip-card-box {
			width: 100%;
			padding: 0 36rpx;
			height: 300rpx;
			padding-top: 50rpx;

			.vip-header {
				width: 100%;
				height: 210rpx;
				padding-left: 28rpx;
				padding-top: 110rpx;

				.vip-info {
					display: flex;

					.vip-info-left {
						width: 60rpx;
						height: 60rpx;
						border: #fff solid 2rpx;
						margin-right: 10rpx;
					}

					.vip-info-right {
						.vip-nickname {
							font-size: 24rpx;
							font-weight: 400;
							font-family: 'PingFang SC-Bold';

						}

						.vip-expire {
							font-size: 20rpx;
							font-family: 'PingFang SC-Medium';
						}
					}
				}
			}
		}

		&.active0 {
			background: url("@/static/vip/hy_bg_01.png") center/100% 100% no-repeat;

			.PageHeader {
				background-image: url("@/static/vip/hy_bg_01.png");
			}

			.vip-card-box {
				.vip-header {
					background: url("@/static/vip/hy_card_01.png") top center/100% auto no-repeat;

					.vip-info {
						.vip-nickname {
							color: #1f1f1f;
						}

						.vip-expire {
							color: rgba(31, 31, 31, 0.7);
						}
					}
				}
			}
		}

		&.active1 {
			background: url("@/static/vip/hy_bg_02.png") center/100% 100% no-repeat;

			.PageHeader {
				background-image: url("@/static/vip/hy_bg_02.png");
			}

			.vip-card-box {
				.vip-header {
					background: url("@/static/vip/hy_card_02.png") top center/100% auto no-repeat;

					.vip-info {
						.vip-nickname {
							color: #FFE590;
						}

						.vip-expire {
							color: rgba(255, 229, 144, 0.35);
						}
					}
				}
			}
		}

		&.active2 {
			background: url("@/static/vip/hy_bg_03.png") center/100% 100% no-repeat;

			.PageHeader {
				background-image: url("@/static/vip/hy_bg_03.png");
			}

			.vip-card-box {
				.vip-header {
					background: url("@/static/vip/hy_card_03.png") top center/100% auto no-repeat;

					.vip-info {
						.vip-nickname {
							color: #FFFFFF;
						}

						.vip-expire {
							color: rgba(255, 255, 255, 0.35);
						}
					}
				}
			}
		}

		.reserveASeat {
			width: 100%;
			background: transparent;
			height: calc(var(--status-bar-height) + 90rpx);
		}



	}

	.vip-content {
		background: #fff;
		border-top-left-radius: 32rpx;
		border-top-right-radius: 32rpx;

		.vip-price-options {
			display: flex;
			justify-content: space-between;
			padding: 32rpx;
			margin-top: -60rpx;

			.price-option {
				width: 218rpx;
				height: 250rpx;
				background-color: #fff;
				border-radius: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				position: relative;
				transition: all 0.3s;
				border-radius: 20rpx;
				border: 4rpx solid #E9E9E9;
				padding-top: 48rpx;
				padding-bottom: 34rpx;

				.price-left-img {
					min-width: 160rpx;
					height: 48rpx;
					padding: 6rpx 12rpx 14rpx 12rpx;
					position: absolute;
					left: -6rpx;
					top: -4rpx;
					background: url("../../static/vip/hy_biaoqian_02.png") center/100% 100% no-repeat;
					font-weight: 400;
					font-size: 10px;
					color: #898888;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.price-tag {
					position: absolute;
					bottom: -4rpx;
					right: -4rpx;
					font-family: 'PingFang SC-Bold';
					font-weight: 400;
					background-color: #4A4A4A;
					color: #ffffff;
					font-size: 24rpx;
					width: 86rpx;
					height: 36rpx;
					border-top-left-radius: 20rpx;
					border-bottom-right-radius: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.duration {
					font-family: 'PingFang SC-Bold';
					font-weight: 400;
					font-size: 32rpx;
					color: #1F1F1F;
				}

				.price {
					font-size: 68rpx;
					font-weight: bold;
					color: #4A4A4A;
					padding-top: 10rpx;
					padding-bottom: 5rpx;
				}

				.originalPrice {
					font-size: 28rpx;
					color: #999999;
					text-decoration: line-through;
				}


				&.active {
					background: linear-gradient(to bottom, #F0FFD9, rgba(0, 0, 0, 0));
					border-color: #1f1f1f;
					transform: scale(1.05);

					.price-left-img {
						background: url("../../static/vip/hy_biaoqian_01.png") center/100% no-repeat;
						color: #ACF934;
					}

					.price {
						color: #7CCB00;

					}
				}
			}

		}



		.vip-privileges {
			padding: 0 30rpx;

			.privileges-title {
				font-family: 'PingFang SC-Bold';
				font-weight: 400;
				font-size: 16px;
				color: #1F1F1F;
				padding-top: 36rpx;
				padding-bottom: 22rpx;
			}

			.privileges-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}

			.privilege-item {
				width: 330rpx;
				height: 136rpx;
				flex-grow: 0;
				background-color: #F7F7F7;
				border-radius: 16rpx;
				padding: 26rpx;
				padding-right: 0;
				// padding-left: 20rpx;
				margin-bottom: 26rpx;
				display: flex;
				align-items: center;
			}

			.privilege-icon {
				width: 84rpx;
				height: 84rpx;
				margin-right: 20rpx;
			}

			.privilege-name {
				font-size: 28rpx;
				font-weight: 400;
				color: #1C2C00;
				margin-bottom: 10rpx;
			}

			.privilege-desc {
				font-size: 20rpx;
				color: #999999;
			}
		}

		.bottom-pay-btn-bottom {
			width: 626rpx;
			height: 88rpx;
			background: linear-gradient(90deg, #1F1F1F 0%, #444444 100%);
			border-radius: 76rpx;
			margin: 0 auto;
			margin-top: 70rpx;
			color: #ACF934;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			line-height: 0;
			position: relative;
			overflow: hidden;
			transition: all 0.3s ease;
			
			&.btn-loading {
				opacity: 0.7;
				pointer-events: none;
			}
			
			.loading-spinner {
				width: 40rpx;
				height: 40rpx;
				border: 4rpx solid rgba(255, 255, 255, 0.3);
				border-radius: 50%;
				border-top-color: #fff;
				animation: spin 1s linear infinite;
			}

			text {
				font-size: 44rpx;
				display: inline-block;
				margin-right: 10rpx;
			}
		}
	}


	.uv-notice-bar {
		background-color: #F2F6F2 !important;
		border-radius: 108rpx;
		width: calc(100% - 64rpx);
		margin: 0 auto;

		::v-deep.uvicon-volume {
			color: #333 !important;
		}

	}

	.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: #ffffff;
		border-radius: 24rpx 24rpx 0 0;
		padding: 40rpx;

		.popup-header {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 40rpx;
			position: relative;
		}

		.popup-title {
			font-size: 32rpx;
			color: #333;
			font-weight: 500;
			text-align: center;
		}

		.popup-close {
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			font-size: 48rpx;
			color: #999999;
			line-height: 1;
		}

		.payment-options {
			margin-bottom: 40rpx;
		}

		.payment-option {
			display: flex;
			align-items: center;
			padding: 32rpx 0;
			border-bottom: 1rpx solid #EEEEEE;

			&:last-child {
				border-bottom: none;
			}
		}

		.payment-icon {
			width: 72rpx;
			height: 72rpx;
			margin-right: 24rpx;
		}

		.payment-name {
			flex: 1;
			color: #333;
			font-size: 32rpx;
		}

		.payment-select {
			width: 40rpx;
			height: 40rpx;
		}

		.confirm-payment {
			background: #333333;
			color: #ACF934;
			text-align: center;
			padding: 28rpx 0;
			border-radius: 76rpx;
			font-size: 32rpx;
			margin-top: 60rpx;
			font-weight: 500;
		}
	}

	::v-deep .uni-popup .uni-popup__wrapper {
		border-radius: 24rpx 24rpx 0 0;
	}

	::v-deep .uni-popup .uni-popup__wrapper-box {
		border-radius: 24rpx 24rpx 0 0;
	}

	.more-options {
		position: relative;
		display: inline-block;

		.fa {
			font-size: 40rpx;
			padding: 0 20rpx;
		}

		.dropdown-menu {
			position: absolute;
			top: calc(100% + 10rpx);
			right: 20rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
			padding: 0;
			width: 200rpx;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
			z-index: 100;
			transform-origin: top right;
			animation: dropdownAnimation 0.2s ease-out;

			.dropdown-item {
				padding: 24rpx 0;
				color: #333333;
				font-size: 28rpx;
				position: relative;
				text-align: center;

				&:not(:last-child)::after {
					content: '';
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					height: 1rpx;
					background-color: #EEEEEE;
				}

				&:active {
					background-color: #f8f8f8;
				}
			}
		}
	}

	@keyframes dropdownAnimation {
		0% {
			opacity: 0;
			transform: scale(0.95) translateY(-5rpx);
		}

		100% {
			opacity: 1;
			transform: scale(1) translateY(0);
		}
	}

	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}

}

.agree {
	width: 90%;
	margin: 0 auto;
	color: #666666;
	font-size: 24rpx;
	margin-top: 40rpx;
	display: flex;
	align-items: center;
	text-align: left;
	line-height: 32rpx;

	.agree2 {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding-right: 8rpx;
		flex-shrink: 0;
	}

	.xy {
		color: #0084FF;
		display: inline;
	}

	image {
		width: 32rpx;
		height: 32rpx;
	}
}
</style>