iap3

pages/vip/M_purchase.vue

@@ -366,17 +366,21 @@
 							this.sel = 1;
 							this.money = this.list[1]["money"];
 
-							let SpecArr = [];
-							for (let i = 0; i < this.list.length; i++) {
-								SpecArr.push(this.list[i].spec)
+							const systemInfo = uni.getSystemInfoSync();
+							if (systemInfo.platform === 'ios') {
+								let SpecArr = [];
+								for (let i = 0; i < this.list.length; i++) {
+									SpecArr.push(this.list[i].spec)
+								}
+								// 创建示例
+								console.log("start iap init", SpecArr);
+								this._iap = new Iap({
+									products: SpecArr // 苹果开发者中心创建
+								})
+								this.initApple();
+								// 充值列表已加载完成
+
 							}
-							// 创建示例
-							console.log("start iap init",SpecArr);
-							this._iap = new Iap({
-								products: SpecArr // 苹果开发者中心创建
-							})
-							this.initApple();
-							// 充值列表已加载完成
 						}
 					},
 				});
@@ -390,9 +394,9 @@
 					await this._iap.init();
 
 					// 从苹果服务器获取产品列表
-							console.log("start iap initApple1");
+					console.log("start iap initApple1");
 					this.productList = await this._iap.getProduct();
-							console.log("start iap initApple2",this.productList);
+					console.log("start iap initApple2", this.productList);
 					this.productList[0].checked = true;
 					this.productId = this.productList[0].productid;
 
@@ -408,7 +412,7 @@
 					uni.hideLoading();
 				}
 				if (this._iap.ready) {
-					this.restoreComplateRequest();
+					// this.restoreComplateRequest();
 				}
 			},
 			handleDropdownSelect(item) {
@@ -505,10 +509,10 @@
 						// uni.hideLoading();
 					},
 					fail: (err) => {
-            console.log("完整错误信息:", JSON.stringify(err));
+						console.log("完整错误信息:", JSON.stringify(err));
 						console.log("错误消息:", err.errMsg);
 						console.log("状态码:", err.statusCode);
-						
+
 						let errorMessage = "网络错误，请重试";
 						if (err.errMsg) {
 							if (err.errMsg.includes('timeout')) {

pages/vip/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="vip-container" >
+	<view class="vip-container">
 		<view class="heard-box" :class="`active${selectedPrice}`">
 			<!-- 自定义头部 -->
 			<PageHeader title="" class="PageHeader" :class="{ 'whitePhageHeader': headerOpacity > 0.2 }"
@@ -10,9 +10,11 @@
 				</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/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>
+						<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">
@@ -137,1240 +139,1292 @@
 </template>
 
 <script>
-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,
-			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) => {
+	import {
+		Iap,
+		IapTransactionState
+	} from "../../common/iap.js"
+	import {
+		mapState
+	} from 'vuex'
+	export default {
+		data() {
+			return {
+				userInfo: {
+					is_vip: false,
+					vip_date: '2023-10-23'
 				},
-				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);
-
-				},
-			});
+				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
+			}
 		},
-		// 选择价格选项
-		selectPrice(index) {
-			this.selectedPrice = index;
+		computed: {
+			...mapState('hideModule', ['isWeChatPay'])
 		},
-		// 显示支付方式选择弹窗
-		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();
+		onShow() {
 			this.isSubmitting = false;
+			this.checkPlatform(); // 检查平台类型
 		},
-		// 关闭支付方式选择弹窗
-		closePaymentPopup() {
-			this.$refs.paymentPopup.close();
+		onLoad() {
+			// 获取用户信息，检查是否为VIP
+			this.getUserInfo();
+			this.checkPlatform(); // 检查平台类型
 		},
-		// 选择支付方式
-		selectPayment(method) {
-			this.paymentMethod = method;
+		onReady() {
+			// 页面渲染完成后获取vip-privileges的高度
+			this.getPrivilegesHeight();
 		},
-		// 确认支付
-		confirmPayment() {
-			if (!this.priceOptions || !this.priceOptions[this.selectedPrice]) {
-				uni.showToast({
-					title: '请选择会员套餐',
-					icon: 'none'
-				});
-				return;
+		onPageScroll(e) {
+			console.log(e.scrollTop, "滚动高度");
+			var scrollTop = e.scrollTop - 10;
+			if (scrollTop > 0) {
+				this.headerOpacity = Math.min(scrollTop / 100, 1);
 			}
-			if (this.is_agree == 0) {
-				uni.showToast({
-					title: "请确认并选择协议",
-					icon: "none",
-				});
-				return;
+			if (e.scrollTop == 0) {
+				this.headerOpacity = 0;
 			}
-			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'
-									});
-								}
+		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,
+								})
 							});
-						} 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'
-									});
+							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"
 							});
 						}
-					} else {
+					},
+					fail: (err) => {
+						console.log("创建订单失败:", err);
 						uni.hideLoading();
 						that.isSubmitting = false;
 						uni.hideLoading()
 						uni.showToast({
-							title: res.data.msg || '创建订单失败',
+							title: '网络错误，请稍后重试',
 							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") {
+				});
+			},
+			// 检查支付状态
+			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",
+							title: "网络错误，请重试",
+							icon: "none"
 						});
-						// 支付成功后刷新用户信息
-						this.getUserInfo();
+					}
+				});
+			},
+			// 获取特权列表区域的高度
+			getPrivilegesHeight() {
+				const query = uni.createSelectorQuery().in(this);
+				query.select('.vip-privileges').boundingClientRect(data => {
+					if (data) {
+						this.privilegesHeight = data.height;
+						console.log('特权区域高度:', this.privilegesHeight);
 					} else {
-						setTimeout(function () {
-							that.checkPayStatus();
-						}, 1000);
+						console.log('未能获取到特权区域元素');
+						// 如果首次获取失败，可以添加延迟重试
+						setTimeout(() => {
+							this.getPrivilegesHeight();
+						}, 100);
 					}
-				},
-				fail: (err) => {
-					console.log("检查支付状态失败:", err);
-					uni.hideLoading();
-					uni.showToast({
-						title: "网络错误，请重试",
-						icon: "none"
-					});
+				}).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;
 				}
-			});
-		},
-		// 获取特权列表区域的高度
-		getPrivilegesHeight() {
-			const query = uni.createSelectorQuery().in(this);
-			query.select('.vip-privileges').boundingClientRect(data => {
-				if (data) {
-					this.privilegesHeight = data.height;
-					console.log('特权区域高度:', this.privilegesHeight);
+			},
+			openCustomPopup() {
+				this.$refs.customerServicePopup.open();
+			},
+			goPage(page) {
+				uni.navigateTo({
+					url: page,
+				})
+			},
+			agreeChk() {
+				if (this.is_agree == 0) {
+					this.is_agree = 1;
 				} else {
-					console.log('未能获取到特权区域元素');
-					// 如果首次获取失败，可以添加延迟重试
-					setTimeout(() => {
-						this.getPrivilegesHeight();
-					}, 100);
+					this.is_agree = 0;
 				}
-			}).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':
+			},
+			// 检查平台类型
+			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
+					}
+				});
 
-					this.openCustomPopup();
+				// 请求苹果内购
+				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));
+							}
+						}
 
-					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",
+							title: errorMessage,
+							icon: 'none',
+							duration: 3000
 						});
 						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 = '网络错误，请检查网络连接';
+				});
+			},
+			// 验证苹果收据
+			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 {
-							errorMessage = '支付失败: ' + (err.errMsg || JSON.stringify(err));
+							uni.showToast({
+								title: res.data.msg || "验证失败",
+								icon: "none",
+							});
 						}
-					}
-					
-					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 {
+						that.isSubmitting = false;
+					},
+					fail: (err) => {
+						console.log("验证苹果VIP收据失败:", err);
 						uni.showToast({
-							title: res.data.msg || "验证失败",
-							icon: "none",
+							title: "验证失败，请联系客服",
+							icon: "none"
 						});
+						that.isSubmitting = false;
 					}
-					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;
-			}
+<style lang="scss">
+	.vip-container {
+		min-height: 100vh;
+		padding-bottom: 360rpx;
+		position: relative;
+		left: 0;
+		top: 0;
 
-			&.whitePhageHeader {
-				background-image: none !important;
-				background: #fff;
-				.center-title {
-					color: #1f1f1f !important;
-				}
+		.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: #000 !important;
+					color: #fff !important;
 				}
-			}
-		}
 
-		.vip-card-box {
-			width: 100%;
-			padding: 0 36rpx;
-			height: 300rpx;
-			padding-top: 40rpx;
+				.fa {
+					color: #fff;
+				}
 
-			.vip-header {
-				width: 100%;
-				height: 210rpx;
-				padding-left: 28rpx;
-				padding-top: 110rpx;
+				&.whitePhageHeader {
+					background-image: none !important;
+					background: #fff;
 
-				.vip-info {
-					padding-top: 10rpx;
-					padding-left: 4rpx;
-					display: flex;
+					.center-title {
+						color: #1f1f1f !important;
+					}
 
-					.vip-info-left {
-						width: 60rpx;
-						height: 60rpx;
-						border: #fff solid 2rpx;
-						margin-right: 10rpx;
+					::v-deep .uni-icons {
+						color: #000 !important;
 					}
+				}
+			}
+
+			.vip-card-box {
+				width: 100%;
+				padding: 0 36rpx;
+				height: 300rpx;
+				padding-top: 40rpx;
 
-					.vip-info-right {
-						.vip-nickname {
-							font-size: 26rpx;
-							font-weight: 400;
-							font-family: 'PingFang SC-Bold';
+				.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-expire {
-							font-size: 22rpx;
-							font-family: 'PingFang SC-Medium';
+						.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;
+			&.active0 {
+				background: url("@/static/vip/hy_bg_01.png") center/100% 100% no-repeat;
 
-			.PageHeader {
-				background-image: url("@/static/vip/hy_bg_01.png");
-			}
+				.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-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-info {
+							.vip-nickname {
+								color: #1f1f1f;
+							}
 
-						.vip-expire {
-							color: rgba(31, 31, 31, 0.7);
+							.vip-expire {
+								color: rgba(31, 31, 31, 0.7);
+							}
 						}
 					}
 				}
 			}
-		}
 
-		&.active1 {
-			background: url("@/static/vip/hy_bg_02.png") center/100% 100% no-repeat;
+			&.active1 {
+				background: url("@/static/vip/hy_bg_02.png") center/100% 100% no-repeat;
 
-			.PageHeader {
-				background-image: url("@/static/vip/hy_bg_02.png");
-			}
+				.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-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-info {
+							.vip-nickname {
+								color: #FFE590;
+							}
 
-						.vip-expire {
-							color: rgba(255, 229, 144, 0.35);
+							.vip-expire {
+								color: rgba(255, 229, 144, 0.35);
+							}
 						}
 					}
 				}
 			}
-		}
 
-		&.active2 {
-			background: url("@/static/vip/hy_bg_03.png") center/100% 100% no-repeat;
+			&.active2 {
+				background: url("@/static/vip/hy_bg_03.png") center/100% 100% no-repeat;
 
-			.PageHeader {
-				background-image: url("@/static/vip/hy_bg_03.png");
-			}
+				.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-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-info {
+							.vip-nickname {
+								color: #FFFFFF;
+							}
 
-						.vip-expire {
-							color: rgba(255, 255, 255, 0.35);
+							.vip-expire {
+								color: rgba(255, 255, 255, 0.35);
+							}
 						}
 					}
 				}
 			}
-		}
 
-		.reserveASeat {
-			width: 100%;
-			background: transparent;
-			height: calc(var(--status-bar-height) + 90rpx);
-		}
+			.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-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;
+			.vip-price-options {
 				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;
+				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;
-					align-items: center;
+					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;
+
+						}
+					}
 				}
 
-				.price-tag {
-					position: absolute;
-					bottom: -4rpx;
-					right: -4rpx;
+			}
+
+
+
+			.vip-privileges {
+				padding: 0 30rpx;
+
+				.privileges-title {
 					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;
+					font-size: 16px;
+					color: #1F1F1F;
+					padding-top: 36rpx;
+					padding-bottom: 22rpx;
+				}
+
+				.privileges-list {
 					display: flex;
-					align-items: center;
-					justify-content: center;
+					flex-wrap: wrap;
+					justify-content: space-between;
 				}
 
-				.duration {
-					font-family: 'PingFang SC-Bold';
-					font-weight: 400;
-					font-size: 32rpx;
-					color: #1F1F1F;
+				.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;
 				}
 
-				.price {
-					font-size: 68rpx;
-					font-weight: bold;
-					color: #4A4A4A;
-					// padding-top: -10rpx;
-					line-height: 1;
-					padding-top: 8rpx;
-					padding-bottom: 2rpx;
+				.privilege-icon {
+					width: 84rpx;
+					height: 84rpx;
+					margin-right: 20rpx;
 				}
 
-				.originalPrice {
+				.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;
-					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;
-					}
+		.uv-notice-bar {
+			background-color: #F2F6F2 !important;
+			border-radius: 108rpx;
+			width: calc(100% - 64rpx);
+			margin: 0 auto;
 
-					.price {
-						color: #7CCB00;
-
-					}
-				}
+			::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;
+			}
 
-		.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;
+			.price-value {
+				color: #ffffff;
+				font-size: 40rpx;
+				font-weight: bold;
 			}
 
-			.privileges-list {
-				display: flex;
-				flex-wrap: wrap;
-				justify-content: space-between;
+			.pay-button {
+				background: linear-gradient(to right, #9758DE, #5F17DD);
+				color: #ffffff;
+				padding: 20rpx 60rpx;
+				border-radius: 50rpx;
+				font-size: 32rpx;
 			}
+		}
+
+
 
-			.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;
+		/* 支付方式选择弹窗样式 */
+		.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;
 			}
 
-			.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';
+			.popup-title {
+				font-size: 32rpx;
+				color: #333;
+				font-weight: 500;
+				text-align: center;
 			}
 
-			.privilege-desc {
-				font-size: 20rpx;
+			.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;
+				}
+			}
 
-	.uv-notice-bar {
-		background-color: #F2F6F2 !important;
-		border-radius: 108rpx;
-		width: calc(100% - 64rpx);
-		margin: 0 auto;
+			.payment-icon {
+				width: 72rpx;
+				height: 72rpx;
+				margin-right: 24rpx;
+			}
 
-		::v-deep.uvicon-volume {
-			color: #333 !important;
-		}
+			.payment-name {
+				flex: 1;
+				color: #333;
+				font-size: 32rpx;
+			}
 
-	}
+			.payment-select {
+				width: 40rpx;
+				height: 40rpx;
+			}
 
-	.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;
+			.confirm-payment {
+				background: #333333;
+				color: #ACF934;
+				text-align: center;
+				padding: 28rpx 0;
+				border-radius: 76rpx;
+				font-size: 32rpx;
+				margin-top: 60rpx;
+				font-weight: 500;
+			}
 		}
 
-		.price-value {
-			color: #ffffff;
-			font-size: 40rpx;
-			font-weight: bold;
+		::v-deep .uni-popup .uni-popup__wrapper {
+			border-radius: 24rpx 24rpx 0 0;
 		}
 
-		.pay-button {
-			background: linear-gradient(to right, #9758DE, #5F17DD);
-			color: #ffffff;
-			padding: 20rpx 60rpx;
-			border-radius: 50rpx;
-			font-size: 32rpx;
+		::v-deep .uni-popup .uni-popup__wrapper-box {
+			border-radius: 24rpx 24rpx 0 0;
 		}
-	}
 
-
-
-	/* 支付方式选择弹窗样式 */
-	.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;
+		.more-options {
 			position: relative;
-		}
+			display: inline-block;
 
-		.popup-title {
-			font-size: 32rpx;
-			color: #333;
-			font-weight: 500;
-			text-align: center;
-		}
+			.fa {
+				font-size: 40rpx;
+				padding: 0 20rpx;
+			}
 
-		.popup-close {
-			position: absolute;
-			right: 0;
-			top: 50%;
-			transform: translateY(-50%);
-			font-size: 48rpx;
-			color: #999999;
-			line-height: 1;
-		}
+			.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;
+					}
 
-		.payment-options {
-			margin-bottom: 40rpx;
+					&:active {
+						background-color: #f8f8f8;
+					}
+				}
+			}
 		}
 
-		.payment-option {
-			display: flex;
-			align-items: center;
-			padding: 32rpx 0;
-			border-bottom: 1rpx solid #EEEEEE;
+		@keyframes dropdownAnimation {
+			0% {
+				opacity: 0;
+				transform: scale(0.95) translateY(-5rpx);
+			}
 
-			&:last-child {
-				border-bottom: none;
+			100% {
+				opacity: 1;
+				transform: scale(1) translateY(0);
 			}
 		}
 
-		.payment-icon {
-			width: 72rpx;
-			height: 72rpx;
-			margin-right: 24rpx;
+		@keyframes spin {
+			to {
+				transform: rotate(360deg);
+			}
 		}
 
-		.payment-name {
-			flex: 1;
-			color: #333;
-			font-size: 32rpx;
-		}
+	}
 
-		.payment-select {
-			width: 40rpx;
-			height: 40rpx;
+	.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;
 		}
 
-		.confirm-payment {
-			background: #333333;
-			color: #ACF934;
-			text-align: center;
-			padding: 28rpx 0;
-			border-radius: 76rpx;
-			font-size: 32rpx;
-			margin-top: 60rpx;
-			font-weight: 500;
+		.xy {
+			color: #0084FF;
+			display: inline;
 		}
-	}
 
-	::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;
+		image {
+			width: 32rpx;
+			height: 32rpx;
+		}
 	}
 
-	.more-options {
+	.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;
-		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;
-				}
+		overflow: hidden;
+		transition: all 0.3s ease;
+		position: absolute;
+		bottom: 100rpx;
+		left: 50%;
+		transform: translateX(-50%);
 
-				&:active {
-					background-color: #f8f8f8;
-				}
-			}
+		.price-value {
+			font-size: 44rpx;
+			font-family: 'CustomFont';
 		}
-	}
 
-	@keyframes dropdownAnimation {
-		0% {
-			opacity: 0;
-			transform: scale(0.95) translateY(-5rpx);
+		&.btn-loading {
+			opacity: 0.7;
+			pointer-events: none;
 		}
 
-		100% {
-			opacity: 1;
-			transform: scale(1) translateY(0);
+		.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;
 		}
-	}
 
-	@keyframes spin {
-		to {
-			transform: rotate(360deg);
+		text {
+			display: inline-block;
+			margin-right: 10rpx;
 		}
 	}
-
-}
-
-.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>