MoeNovaClient/pages/vip/index.vue

<template>
	<view class="vip-container">
		<view class="heard-box" :class="`active${selectedPrice}`">
			<!-- 自定义头部 -->
			<PageHeader title="" class="PageHeader" :class="{ 'whitePhageHeader': headerOpacity > 0.2 }"
				:style="{ opacity: headerOpacity < 0.2 ? 1 : headerOpacity }">
				<template v-slot:center>
					<view class="center-title" style="font-size: 32rpx;color: #fff;">会员中心</view>

				</template>
				<template v-slot:right>
					<view class="more-options" @tap="toggleDropdown">
						<image src="@/static/icon/more3.png" v-if="headerOpacity < 0.2"
							style="width: 64rpx;height: 64rpx;  margin-top: 15rpx;" mode="widthFix"></image>

						<image src="@/static/icon/more2.png" v-else
							style="width: 64rpx;height: 64rpx;  margin-top: 15rpx;" mode="widthFix"></image>


						<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>
		<view class="agree">
			<view class="agree2" @click="agreeChk()">
				<image style="width: 32rpx;height: 32rpx;" src="../../static/icon/wd_icon_gouxuan04.png"
					v-if="is_agree == 0">
				</image>
				<image style="width: 32rpx;height: 32rpx;" 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 class="price-value" v-if="!isSubmitting">¥{{ priceOptions[selectedPrice].price }}</text>
			<text v-if="!isSubmitting">立即购买</text>
			<view v-if="isSubmitting" class="loading-spinner"></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 {
		Iap,
		IapTransactionState
	} from "../../common/iap.js"
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				userInfo: {
					is_vip: false,
					vip_date: '2023-10-23'
				},
				headerOpacity: 0,
				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: '成长加成',
						icon: '../../static/vip/hy_icon_quanyi05.png',
						desc: '设计达人等级加速'
					},
					// {
					// 	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,
				productId: "",
				productList: [],
				isIOS: false, // 是否为iOS系统
				currentOrderId: "", // 当前苹果内购订单ID
			}
		},
		computed: {
			...mapState('hideModule', ['isWeChatPay'])
		},
		onShow() {
			this.isSubmitting = false;
			this.checkPlatform(); // 检查平台类型
		},
		onLoad() {
			// 获取用户信息，检查是否为VIP
			this.getUserInfo();
			this.checkPlatform(); // 检查平台类型
		},
		onReady() {
			// 页面渲染完成后获取vip-privileges的高度
			this.getPrivilegesHeight();
		},
		onPageScroll(e) {
			console.log(e.scrollTop, "滚动高度");
			var scrollTop = e.scrollTop - 10;
			if (scrollTop > 0) {
				this.headerOpacity = Math.min(scrollTop / 100, 1);
			}
			if (e.scrollTop == 0) {
				this.headerOpacity = 0;
			}
		},
		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, "会员列表数据");

							const systemInfo = uni.getSystemInfoSync();
							if (systemInfo.platform === 'ios') {
								let SpecArr = [];
								for (let i = 0; i < res.data.list.length; i++) {
									SpecArr.push(res.data.list[i].spec)
								}
								// 创建示例
								console.log("start iap init", SpecArr);
								this._iap = new Iap({
									products: SpecArr // 苹果开发者中心创建
								})
								this.initApple();
								// 充值列表已加载完成
							}
						} 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);

					},
				});
			},
			async initApple() {
				uni.showLoading({
					title: '检测支付环境...'
				});
				try {
					// 初始化，获取iap支付通道
					await this._iap.init();

					// 从苹果服务器获取产品列表
					console.log("start iap initApple1");
					this.productList = await this._iap.getProduct();
					console.log("start iap initApple2", this.productList);
					this.productList[0].checked = true;
					this.productId = this.productList[0].productid;

					// 填充产品列表，启用界面
					this.disabled = false;
				} catch (e) {
					uni.showModal({
						title: "init",
						content: e.message,
						showCancel: false
					});
				} finally {
					uni.hideLoading();
				}
				if (this._iap.ready) {
					// this.restoreComplateRequest();
				}
			},
			// 选择价格选项
			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;

				// iOS系统直接使用苹果内购
				if (this.isIOS) {
					this.submitAppleIap();
					return;
				}

				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;
				}
			},
			// 检查平台类型
			checkPlatform() {
				const systemInfo = uni.getSystemInfoSync();
				this.isIOS = systemInfo.platform === 'ios';
				console.log('当前平台:', systemInfo.platform, '是否为iOS:', this.isIOS);
			},
			// 苹果内购提交
			submitAppleIap() {
				let that = this;

				// 先创建订单
				uni.request({
					url: this.$apiHost + "/AppleIap/submit",
					data: {
						uuid: getApp().globalData.uuid,
						product_id: this.priceOptions[this.selectedPrice].id,
						type: "buyVip",
					},
					header: {
						"content-type": "application/json",
					},
					success: (res) => {
						console.log("苹果内购VIP订单创建:", res.data);
						if (res.data.success == "yes") {
							that.currentOrderId = res.data.order_id;
							// 调用苹果内购
							that.requestApplePayment(res.data.apple_product_id);
						} else {
							uni.showToast({
								title: res.data.msg || "创建订单失败",
								icon: "none",
							});
							that.isSubmitting = false;
						}
					},
					fail: (err) => {
						console.log("创建苹果内购VIP订单失败:", err);
						uni.showToast({
							title: "网络错误，请重试",
							icon: "none"
						});
						that.isSubmitting = false;
					}
				});
			},
			// 调用苹果内购
			requestApplePayment(productId) {
				let that = this;

				console.log('开始苹果内购VIP，产品ID:', productId);
				console.log('苹果内购VIP参数:', {
					provider: 'appleiap',
					orderInfo: {
						productid: productId
					}
				});

				// 请求苹果内购
				uni.requestPayment({
					provider: 'appleiap',
					orderInfo: {
						productid: productId
					},
					success: function(res) {
						console.log('苹果内购VIP支付成功:', res);
						// 验证收据
						that.verifyAppleReceipt(res.transactionReceipt, res.transactionIdentifier);
					},
					fail: function(err) {
						console.log('苹果内购VIP支付失败详情:', err);
						let errorMessage = '支付失败';

						// 根据错误类型给出更具体的提示
						if (err.errMsg) {
							if (err.errMsg.includes('cancel')) {
								errorMessage = '支付已取消';
							} else if (err.errMsg.includes('订单的ID不存在') || err.errMsg.includes('product')) {
								errorMessage = '产品ID不存在，请检查App Store Connect配置';
								console.error('VIP产品ID配置错误 - 当前产品ID:', productId);
								console.error('请确认以下事项:');
								console.error('1. App Store Connect中是否已创建此产品ID');
								console.error('2. 产品状态是否为"Ready for Sale"');
								console.error('3. Bundle ID是否匹配');
								console.error('4. 是否在正确的环境（沙盒/生产）');
							} else if (err.errMsg.includes('network')) {
								errorMessage = '网络错误，请检查网络连接';
							} else {
								errorMessage = '支付失败: ' + (err.errMsg || JSON.stringify(err));
							}
						}

						uni.showToast({
							title: errorMessage,
							icon: 'none',
							duration: 3000
						});
						that.isSubmitting = false;
					}
				});
			},
			// 验证苹果收据
			verifyAppleReceipt(receiptData, transactionId) {
				let that = this;

				uni.request({
					url: that.$apiHost + "/AppleIap/verify",
					method: 'POST',
					data: {
						uuid: getApp().globalData.uuid,
						order_id: that.currentOrderId,
						receipt_data: receiptData,
						transaction_id: transactionId
					},
					header: {
						"content-type": "application/json",
					},
					success: (res) => {
						console.log("苹果VIP收据验证结果:", res.data);
						if (res.data.success == "yes") {
							uni.showToast({
								title: "开通成功",
								icon: "success",
							});
							// 刷新用户信息
							that.getUserInfo();
						} else {
							uni.showToast({
								title: res.data.msg || "验证失败",
								icon: "none",
							});
						}
						that.isSubmitting = false;
					},
					fail: (err) => {
						console.log("验证苹果VIP收据失败:", err);
						uni.showToast({
							title: "验证失败，请联系客服",
							icon: "none"
						});
						that.isSubmitting = false;
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.vip-container {
		min-height: 100vh;
		padding-bottom: 360rpx;
		position: relative;
		left: 0;
		top: 0;

		.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;
				}

				&.whitePhageHeader {
					background-image: none !important;
					background: #fff;

					.center-title {
						color: #1f1f1f !important;
					}

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

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

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

					.vip-info {
						padding-top: 10rpx;
						padding-left: 4rpx;
						display: flex;

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

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

							}

							.vip-expire {
								font-size: 22rpx;
								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;
				padding-bottom: 24rpx;
				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: 6rpx solid #E9E9E9;
					padding-top: 48rpx;
					padding-bottom: 34rpx;

					.price-left-img {
						min-width: 160rpx;
						height: 48rpx;
						padding: 6rpx 12rpx 14rpx 12rpx;
						position: absolute;
						left: -11rpx;
						top: -6rpx;
						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;
						line-height: 1;
						padding-top: 8rpx;
						padding-bottom: 2rpx;
					}

					.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-tag {
							background: #1f1f1f;
						}

						.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: 20rpx;
					display: flex;
					align-items: center;
				}

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

				.privilege-name {
					font-size: 28rpx;
					font-weight: 400;
					color: #1f1f1f;
					margin-bottom: 10rpx;
					font-family: 'PingFang SC-Bold';
				}

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


		}


		.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;
				overflow: hidden;

				.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;
		position: absolute;
		bottom: 210rpx;
		left: 50%;
		transform: translateX(-50%);

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

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

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.bottom-pay-btn-bottom {
		width: 626rpx;
		height: 88rpx;
		background: linear-gradient(to left, #1F1F1F, #444444);
		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;
		position: absolute;
		bottom: 100rpx;
		left: 50%;
		transform: translateX(-50%);

		.price-value {
			font-size: 44rpx;
			font-family: 'CustomFont';
		}

		&.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 {
			display: inline-block;
			margin-right: 10rpx;
		}
	}
</style>