From af9c4a4e5b00bff3e487d64997b09afa0a155a46 Mon Sep 17 00:00:00 2001
From: Lufaneng <Lufaneng@foxmail.com>
Date: Wed, 15 Oct 2025 15:53:23 +0800
Subject: [PATCH] 1

---
 pages.json                               |    7 +
 pagesA/payment-result/payment-result.vue |  393 +++++++++
 pagesA/payment/payment.vue               | 1021 +++++++++++-----------
 3 files changed, 925 insertions(+), 496 deletions(-)
 create mode 100644 pagesA/payment-result/payment-result.vue

diff --git a/pages.json b/pages.json
index 3c7236f..fee973c 100644
--- a/pages.json
+++ b/pages.json
@@ -107,6 +107,13 @@
         	{
         		"navigationBarTitleText" : "确认支付"
         	}
+        },
+        {
+        	"path" : "payment-result/payment-result",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "支付结果"
+        	}
         }
       ]
     }
diff --git a/pagesA/payment-result/payment-result.vue b/pagesA/payment-result/payment-result.vue
new file mode 100644
index 0000000..7d9de6d
--- /dev/null
+++ b/pagesA/payment-result/payment-result.vue
@@ -0,0 +1,393 @@
+<template>
+	<view class="container">
+		<!-- 支付结果显示 -->
+		<view class="result-section">
+			<!-- 加载中状态 -->
+			<view v-if="paymentStatus === 'loading'" class="status-loading">
+				<view class="loading-icon">
+					<uv-loading-icon mode="circle" color="#4285f4" size="60"></uv-loading-icon>
+				</view>
+				<view class="status-title">支付处理中...</view>
+				<view class="status-desc">请稍候，正在确认支付结果</view>
+				<view class="countdown-text">{{ countdownText }}</view>
+			</view>
+
+			<!-- 支付成功 -->
+			<view v-else-if="paymentStatus === 'success'" class="status-success">
+				<view class="success-icon">
+					<uv-icon name="checkmark-circle-fill" color="#52c41a" size="80"></uv-icon>
+				</view>
+				<view class="status-title">支付成功</view>
+				<view class="status-desc">恭喜您，会员服务已开通</view>
+			</view>
+
+			<!-- 支付失败 -->
+			<view v-else-if="paymentStatus === 'failed'" class="status-failed">
+				<view class="failed-icon">
+					<uv-icon name="close-circle-fill" color="#ff4d4f" size="80"></uv-icon>
+				</view>
+				<view class="status-title">支付失败</view>
+				<view class="status-desc">{{ failedReason || '支付过程中出现问题，请重试' }}</view>
+			</view>
+
+			<!-- 支付取消 -->
+			<view v-else-if="paymentStatus === 'cancelled'" class="status-cancelled">
+				<view class="cancelled-icon">
+					<uv-icon name="info-circle-fill" color="#faad14" size="80"></uv-icon>
+				</view>
+				<view class="status-title">支付已取消</view>
+				<view class="status-desc">您已取消本次支付</view>
+			</view>
+
+			<!-- 超时状态 -->
+			<view v-else-if="paymentStatus === 'timeout'" class="status-timeout">
+				<view class="timeout-icon">
+					<uv-icon name="clock-fill" color="#faad14" size="80"></uv-icon>
+				</view>
+				<view class="status-title">查询超时</view>
+				<view class="status-desc">支付结果查询超时，请手动查看订单状态</view>
+			</view>
+		</view>
+
+		<!-- 订单信息 -->
+		<view class="order-info" v-if="orderInfo">
+			<view class="info-title">订单信息</view>
+			<view class="info-item">
+				<text class="label">订单号：</text>
+				<text class="value">{{ orderNo }}</text>
+			</view>
+			<view class="info-item" v-if="orderInfo.plan_name">
+				<text class="label">商品：</text>
+				<text class="value">{{ orderInfo.plan_name }}</text>
+			</view>
+			<view class="info-item" v-if="orderInfo.amount">
+				<text class="label">金额：</text>
+				<text class="value price">¥{{ orderInfo.amount }}</text>
+			</view>
+			<view class="info-item" v-if="orderInfo.pay_time">
+				<text class="label">支付时间：</text>
+				<text class="value">{{ formatTime(orderInfo.pay_time) }}</text>
+			</view>
+		</view>
+
+		<!-- 底部按钮 -->
+		<view class="bottom-section">
+			<view class="button-group">
+				<!-- 支付成功时的按钮 -->
+				<template v-if="paymentStatus === 'success'">
+					<uv-button type="primary"  @click="goToMine">
+						返回会员中心
+					</uv-button>
+				</template>
+
+				<!-- 支付失败时的按钮 -->
+				<template v-else-if="paymentStatus === 'failed'">
+					<uv-button type="primary"  @click="goToMine" customStyle="margin-right: 12px; flex: 1;">
+						返回会员中心
+					</uv-button>
+					<!-- <uv-button type="primary"  @click="retryPayment" customStyle="flex: 1;">
+						重新支付
+					</uv-button> -->
+				</template>
+
+				<!-- 其他状态的按钮 -->
+				<template v-else>
+					<uv-button type="primary"  plain  @click="goToMine">
+						返回会员中心
+					</uv-button>
+					<uv-button type="primary"  @click="checkOrderStatus" >
+						查看订单
+					</uv-button>
+				</template>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		onMounted,
+		onUnmounted
+	} from "vue";
+	import {
+		onLoad
+	} from "@dcloudio/uni-app";
+	import {
+		useUserStore
+	} from "@/store";
+	import RPC from "@/utils/request";
+	import dayjs from "dayjs";
+
+	const userStore = useUserStore();
+
+	// 页面参数
+	const orderNo = ref('');
+
+	// 响应式数据
+	const paymentStatus = ref('loading'); // loading, success, failed, cancelled, timeout
+	const failedReason = ref('');
+	const orderInfo = ref(null);
+	const countdown = ref(60); // 查询倒计时，60秒
+	const countdownText = ref('');
+
+	// 定时器
+	let queryTimer = null;
+	let countdownTimer = null;
+
+	// 页面加载时获取参数
+	onLoad((options) => {
+		orderNo.value = options.order_no || '';
+		if (orderNo.value) {
+			startQueryPaymentStatus();
+		} else {
+			paymentStatus.value = 'failed';
+			failedReason.value = '订单号参数缺失';
+		}
+	});
+
+	// 开始查询支付状态
+	const startQueryPaymentStatus = () => {
+		// 开始倒计时
+		startCountdown();
+		// 立即查询一次
+		queryPaymentStatus();
+		// 设置定时查询（每3秒查询一次）
+		queryTimer = setInterval(() => {
+			queryPaymentStatus();
+		}, 3000);
+	};
+
+	// 查询支付状态
+	const queryPaymentStatus = async () => {
+		try {
+			const res = await RPC.post('/membership/order/status', {
+				order_no: orderNo.value
+			});
+
+			orderInfo.value = res;
+
+			// 根据订单状态设置页面状态
+			if (res.status === 'paid') {
+				paymentStatus.value = 'success';
+				clearTimers();
+			} else if (res.status === 'failed') {
+				paymentStatus.value = 'failed';
+				failedReason.value = res.fail_reason || '支付失败';
+				clearTimers();
+			} else if (res.status === 'canceled' || res.status === 'cancelled') {
+				paymentStatus.value = 'cancelled';
+				clearTimers();
+			} else if (res.status === 'created' || res.status === 'pending') {
+				// 继续等待
+				paymentStatus.value = 'loading';
+			}
+		} catch (error) {
+			console.error('查询支付状态失败:', error);
+			// 如果是网络错误，继续查询；如果是其他错误，显示失败
+			if (countdown.value <= 0) {
+				paymentStatus.value = 'timeout';
+				clearTimers();
+			}
+		}
+	};
+
+	// 开始倒计时
+	const startCountdown = () => {
+		updateCountdownText();
+		countdownTimer = setInterval(() => {
+			countdown.value--;
+			updateCountdownText();
+			
+			if (countdown.value <= 0) {
+				paymentStatus.value = 'timeout';
+				clearTimers();
+			}
+		}, 1000);
+	};
+
+	// 更新倒计时文本
+	const updateCountdownText = () => {
+		countdownText.value = `查询超时倒计时：${countdown.value}秒`;
+	};
+
+	// 清除定时器
+	const clearTimers = () => {
+		if (queryTimer) {
+			clearInterval(queryTimer);
+			queryTimer = null;
+		}
+		if (countdownTimer) {
+			clearInterval(countdownTimer);
+			countdownTimer = null;
+		}
+	};
+
+	// 格式化时间
+	const formatTime = (timestamp) => {
+		if (!timestamp) return '';
+		return dayjs(timestamp * 1000).format('YYYY-MM-DD HH:mm:ss');
+	};
+
+	// 返回会员中心
+	const goToMine = () => {
+		uni.switchTab({
+			url: '/pages/mine/mine'
+		});
+	};
+
+	// 重新支付
+	const retryPayment = () => {
+		// 返回支付页面，重新发起支付
+		uni.navigateBack({
+			delta: 1
+		});
+	};
+
+	// 查看订单
+	const checkOrderStatus = () => {
+		uni.switchTab({
+			url: '/pages/order/order'
+		});
+	};
+
+	// 页面卸载时清除定时器
+	onUnmounted(() => {
+		clearTimers();
+	});
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		font-size: 14px;
+		background-color: #f8f8f8;
+		min-height: 100vh;
+		padding: 20px 16px;
+        box-sizing: border-box;
+	}
+
+	.result-section {
+		background: white;
+		border-radius: 12px;
+		padding: 40px 20px;
+		text-align: center;
+		margin-bottom: 20px;
+
+		.loading-icon,
+		.success-icon,
+		.failed-icon,
+		.cancelled-icon,
+		.timeout-icon {
+			margin-bottom: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+		}
+
+		.status-title {
+			font-size: 20px;
+			font-weight: bold;
+			color: #333;
+			margin-bottom: 8px;
+		}
+
+		.status-desc {
+			font-size: 14px;
+			color: #666;
+			margin-bottom: 16px;
+		}
+
+		.countdown-text {
+			font-size: 12px;
+			color: #999;
+		}
+
+		.status-success {
+			.status-title {
+				color: #52c41a;
+			}
+		}
+
+		.status-failed {
+			.status-title {
+				color: #ff4d4f;
+			}
+		}
+
+		.status-cancelled {
+			.status-title {
+				color: #faad14;
+			}
+		}
+
+		.status-timeout {
+			.status-title {
+				color: #faad14;
+			}
+		}
+	}
+
+	.order-info {
+		background: white;
+		border-radius: 12px;
+		padding: 16px;
+		margin-bottom: 20px;
+
+		.info-title {
+			font-size: 16px;
+			font-weight: 500;
+			color: #333;
+			margin-bottom: 16px;
+		}
+
+		.info-item {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 8px 0;
+			border-bottom: 1px solid #f0f0f0;
+
+			&:last-child {
+				border-bottom: none;
+			}
+
+			.label {
+				font-size: 14px;
+				color: #666;
+			}
+
+			.value {
+				font-size: 14px;
+				color: #333;
+
+				&.price {
+					color: #ff3333;
+					font-weight: 500;
+				}
+			}
+		}
+	}
+
+	.bottom-section {
+		// position: fixed;
+		// bottom: 0;
+		// left: 0;
+		// right: 0;
+		background: white;
+		padding: 16px;
+        border-radius: 10px;
+		// border-top: 1px solid #e5e5e5;
+
+
+		/* #ifdef H5 */
+		// bottom: 50px;
+		/* H5环境下给tabBar留出空间 */
+		/* #endif */
+
+		.button-group {
+			display: flex;
+			gap: 30px;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pagesA/payment/payment.vue b/pagesA/payment/payment.vue
index 5af5892..dd428bb 100644
--- a/pagesA/payment/payment.vue
+++ b/pagesA/payment/payment.vue
@@ -1,510 +1,539 @@
 <template>
-	<view class="container">
-		<!-- 顶部导航 -->
-		<!-- <view class="header">
+  <view class="container">
+    <!-- 顶部导航 -->
+    <!-- <view class="header">
 			<view class="header-title">确认支付</view>
 		</view> -->
 
-		<!-- 订单信息 -->
-		<view class="order-info">
-			<view class="order-title">订单详情</view>
-			<view class="order-item">
-				<view class="item-name">{{ planName }}</view>
-				<view class="item-price">¥{{ planPrice }}</view>
-			</view>
-			<!-- <view class="order-total">
+    <!-- 订单信息 -->
+    <view class="order-info">
+      <view class="order-title">订单详情</view>
+      <view class="order-item">
+        <view class="item-name">{{ planName }}</view>
+        <view class="item-price">¥{{ planPrice }}</view>
+      </view>
+      <!-- <view class="order-total">
 				<text class="total-label">合计：</text>
 				<text class="total-price">¥{{ planPrice }}</text>
 			</view> -->
-		</view>
-
-		<!-- 支付方式 -->
-		<view class="payment-section">
-			<view class="section-title">选择支付方式</view>
-			
-			<!-- 钱包支付 -->
-			<view class="payment-item" :class="{ active: selectedPayment === 'wallet' }"
-				@click="selectPayment('wallet')">
-				<view class="payment-info">
-					<uv-icon name="empty-coupon" color="#07c160" size="24"></uv-icon>
-					<view class="payment-details">
-						<text class="payment-name">钱包支付</text>
-						<text class="payment-desc">余额：¥{{ walletBalance }}</text>
-					</view>
-				</view>
-				<uv-icon name="checkmark-circle-fill" :color="selectedPayment === 'wallet' ? '#ff3333' : '#ccc'"
-					size="20"></uv-icon>
-			</view>
-
-			<!-- 微信支付 -->
-			<view class="payment-item" :class="{ active: selectedPayment === 'wxpay' }" @click="selectPayment('wxpay')">
-				<view class="payment-info">
-					<uv-icon name="weixin-fill" color="#07c160" size="24"></uv-icon>
-					<view class="payment-details">
-						<text class="payment-name">微信支付</text>
-						<text class="payment-desc">推荐使用微信支付</text>
-					</view>
-				</view>
-				<uv-icon name="checkmark-circle-fill" :color="selectedPayment === 'wxpay' ? '#ff3333' : '#ccc'"
-					size="20"></uv-icon>
-			</view>
-
-			<!-- 支付宝支付 - 仅在H5环境显示 -->
-			<view v-if="showAlipay" class="payment-item" :class="{ active: selectedPayment === 'alipay' }"
-				@click="selectPayment('alipay')">
-				<view class="payment-info">
-					<uv-icon name="/static/imgs/alipay.png" color="#1677ff" size="24"></uv-icon>
-					<view class="payment-details">
-						<text class="payment-name">支付宝</text>
-						<text class="payment-desc">安全便捷的支付方式</text>
-					</view>
-				</view>
-				<uv-icon name="checkmark-circle-fill" :color="selectedPayment === 'alipay' ? '#ff3333' : '#ccc'"
-					size="20"></uv-icon>
-			</view>
-		</view>
-
-		<!-- 底部支付按钮 -->
-		<view class="bottom-section">
-			<uv-button type="primary" size="large" @click="confirmPayment" :loading="paying">
-				立即支付 ¥{{ planPrice }}
-			</uv-button>
-			<view class="agreement">
-				支付即表示同意
-				<text class="link" @click="showAgreement">《会员服务协议》</text>
-			</view>
-		</view>
-	</view>
+    </view>
+
+    <!-- 支付方式 -->
+    <view class="payment-section">
+      <view class="section-title">选择支付方式</view>
+
+      <!-- 钱包支付 -->
+      <view
+        class="payment-item"
+        :class="{ active: selectedPayment === 'wallet' }"
+        @click="selectPayment('wallet')"
+      >
+        <view class="payment-info">
+          <uv-icon name="empty-coupon" color="#07c160" size="24"></uv-icon>
+          <view class="payment-details">
+            <text class="payment-name">钱包支付</text>
+            <text class="payment-desc">余额：¥{{ walletBalance }}</text>
+          </view>
+        </view>
+        <uv-icon
+          name="checkmark-circle-fill"
+          :color="selectedPayment === 'wallet' ? '#ff3333' : '#ccc'"
+          size="20"
+        ></uv-icon>
+      </view>
+
+      <!-- 微信支付 -->
+      <view
+        class="payment-item"
+        :class="{ active: selectedPayment === 'wxpay' }"
+        @click="selectPayment('wxpay')"
+      >
+        <view class="payment-info">
+          <uv-icon name="weixin-fill" color="#07c160" size="24"></uv-icon>
+          <view class="payment-details">
+            <text class="payment-name">微信支付</text>
+            <text class="payment-desc">推荐使用微信支付</text>
+          </view>
+        </view>
+        <uv-icon
+          name="checkmark-circle-fill"
+          :color="selectedPayment === 'wxpay' ? '#ff3333' : '#ccc'"
+          size="20"
+        ></uv-icon>
+      </view>
+
+      <!-- 支付宝支付 - 仅在H5环境显示 -->
+      <view
+        v-if="showAlipay"
+        class="payment-item"
+        :class="{ active: selectedPayment === 'alipay' }"
+        @click="selectPayment('alipay')"
+      >
+        <view class="payment-info">
+          <uv-icon
+            name="/static/imgs/alipay.png"
+            color="#1677ff"
+            size="24"
+          ></uv-icon>
+          <view class="payment-details">
+            <text class="payment-name">支付宝</text>
+            <text class="payment-desc">安全便捷的支付方式</text>
+          </view>
+        </view>
+        <uv-icon
+          name="checkmark-circle-fill"
+          :color="selectedPayment === 'alipay' ? '#ff3333' : '#ccc'"
+          size="20"
+        ></uv-icon>
+      </view>
+    </view>
+
+    <!-- 底部支付按钮 -->
+    <view class="bottom-section">
+      <uv-button
+        type="primary"
+        size="large"
+        @click="confirmPayment"
+        :loading="paying"
+      >
+        立即支付 ¥{{ planPrice }}
+      </uv-button>
+      <view class="agreement">
+        支付即表示同意
+        <text class="link" @click="showAgreement">《会员服务协议》</text>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script setup>
-	import {
-		ref,
-		onMounted
-	} from "vue";
-	import {
-		onLoad,
-		onShow
-	} from "@dcloudio/uni-app";
-	import {
-		useAuthStore,
-		useUserStore
-	} from "@/store";
-	import RPC from "@/utils/request";
-
-	const authStore = useAuthStore();
-	const userStore = useUserStore();
-
-	// 页面参数
-	const planId = ref('');
-	const planName = ref('');
-	const planPrice = ref(0);
-
-	// 响应式数据
-	const selectedPayment = ref("wxpay"); // 默认选中微信支付
-	const paying = ref(false);
-	const showAlipay = ref(true); // 控制是否显示支付宝选项
-	const walletBalance = ref(0);
-
-	// 获取钱包余额
-	const getWalletBalance = async () => {
-		try {
-			const res = await RPC.post('/membership/user/info', {
-				user_id: userStore.userInfo.id
-			});
-			walletBalance.value = res.wallet_balance || 0;
-		} catch (error) {
-			console.error('获取钱包余额失败:', error);
-		}
-	};
-
-	// 选择支付方式
-	const selectPayment = (payment) => {
-		selectedPayment.value = payment;
-	};
-
-	// 页面加载时获取参数
-	onLoad((options) => {
-		planId.value = Number(options.planId) || '';
-		planName.value = decodeURIComponent(options.planName || '');
-		planPrice.value = parseFloat(options.planPrice || 0);
-	});
-
-	onShow(() => {
-		getWalletBalance();
-	});
-
-	// 检查当前环境并设置支付选项
-	const checkEnvironment = () => {
-		// #ifdef MP-WEIXIN
-		// 微信小程序环境，隐藏支付宝选项
-		showAlipay.value = false;
-		// #endif
-
-		// #ifdef H5
-		// H5环境，显示所有支付选项
-		showAlipay.value = true;
-		// #endif
-	};
-
-	// 微信支付
-	const wechatPay = async (orderInfo) => {
-		// #ifdef MP-WEIXIN
-		// 微信小程序支付
-		try {
-			const paymentResult = await uni.requestPayment({
-				provider: "wxpay",
-				timeStamp: orderInfo.timeStamp,
-				nonceStr: orderInfo.nonceStr,
-				package: orderInfo.package,
-				signType: orderInfo.signType,
-				paySign: orderInfo.paySign,
-			});
-
-			console.log("微信支付成功:", paymentResult);
-			return {
-				success: true,
-				data: paymentResult
-			};
-		} catch (error) {
-			console.error("微信支付失败:", error);
-			if (error.errMsg === "requestPayment:fail cancel") {
-				throw new Error("用户取消支付");
-			}
-			throw new Error("微信支付失败");
-		}
-		// #endif
-
-		// #ifdef H5
-		// H5微信支付
-		const payUrl = orderInfo.mwebUrl; // 后端返回的H5支付链接
-		window.location.href = payUrl;
-		return {
-			success: true,
-			redirect: true
-		};
-		// #endif
-	};
-
-	// 支付宝支付（仅H5环境）
-	const alipayPay = async (orderInfo) => {
-		// #ifdef H5
-		// H5支付宝支付
-		const payUrl = orderInfo.pay_url; // 后端返回的支付宝H5支付链接
-		window.location.href = payUrl;
-		return {
-			success: true,
-			redirect: true
-		};
-		// #endif
-	};
-
-	function showModalAsync(options) {
-		return new Promise((resolve, reject) => {
-			uni.showModal({
-				...options,
-				success: (res) => {
-					resolve(res);
-				},
-				fail: (err) => {
-					reject(err);
-				}
-			});
-		});
-	}
-
-	// 确认支付
-	const confirmPayment = async () => {
-		if (!selectedPayment.value) {
-			uni.showToast({
-				title: "请选择支付方式",
-				icon: "none",
-			});
-			return;
-		}
-
-		paying.value = true;
-		try {
-			// 1. 创建订单参数
-			const orderParams = {
-				user_id: userStore.userInfo?.id,
-				plan_id: planId.value,
-				pay_channel: selectedPayment.value
-			};
-
-			uni.showLoading({
-				title: "正在创建订单...",
-			});
-
-			// 2. 创建订单
-			const orderNum = await RPC.post('/membership/order/create', orderParams);
-
-			uni.hideLoading();
-			let orderResult = {}
-			
-			// 3. 根据支付方式调用对应的支付方法
-			let paymentResult;
-			if (selectedPayment.value === "wxpay") {
-				// #ifdef MP-WEIXIN
-				const res = await uni.login({
-					provider: 'weixin'
-				})
-				orderResult = await RPC.post('/membership/order/pay_by_wechat_mini', {
-					code: res.code,
-					"order_no": orderNum.order_no
-				})
-				// #endif
-				
-				// #ifdef H5
-				orderResult = await RPC.post('/membership/order/pay_by_wechat_h5', {
-					"order_no": orderNum.order_no
-				})
-				// #endif
-				
-				uni.showLoading({
-					title: "正在跳转微信支付...",
-				});
-				console.log('orderResult', orderResult)
-				paymentResult = await wechatPay(orderResult);
-			} else if (selectedPayment.value === "alipay") {
-				orderResult = await RPC.post('/membership/order/pay_by_alipay', {
-					"order_no": orderNum.order_no
-				})
-				uni.showLoading({
-					title: "正在跳转支付宝...",
-				});
-				console.log('orderResult', orderResult)
-				paymentResult = await alipayPay(orderResult);
-			} else if (selectedPayment.value === 'wallet') {
-				const res = await showModalAsync({
-					title: '确认支付',
-					content: '确认使用钱包余额支付？'
-				});
-
-				if (res.confirm) {
-					paymentResult = await RPC.post('/membership/order/pay_by_wallet', {
-						order_no: orderNum.order_no
-					})
-					console.log('paymentResult', paymentResult)
-				} else if (res.cancel) {
-					console.log('用户点击了取消');
-					paymentResult = { success: false }
-				}
-			}
-
-			uni.hideLoading();
-			console.log('paymentResult', paymentResult)
-			
-			// 4. 处理支付结果
-			if (paymentResult?.success) {
-				if (paymentResult.redirect) {
-					// H5跳转支付，不需要额外处理
-					uni.showToast({
-						title: "正在跳转支付页面...",
-						icon: "loading",
-						duration: 2000,
-					});
-				} else {
-					// 支付成功
-					setTimeout(() => {
-						uni.showToast({
-							title: "支付成功",
-							icon: "success",
-						});
-						// 延迟跳转回上一页或首页
-						setTimeout(() => {
-							uni.navigateBack({
-								delta: 2 // 返回到会员页面
-							});
-						}, 1500);
-					}, 1000)
-				}
-			}
-		} catch (error) {
-			uni.hideLoading();
-			console.error("支付失败:", error);
-			let errorMessage = "支付失败，请重试";
-			if (error.message === "用户取消支付") {
-				errorMessage = "支付已取消";
-			} else if (error.message) {
-				errorMessage = error.message;
-			} else if (error) {
-				errorMessage = error
-			}
-
-			uni.showToast({
-				title: errorMessage,
-				icon: "none",
-			});
-		} finally {
-			paying.value = false;
-		}
-	};
-
-	// 显示协议
-	const showAgreement = () => {
-		uni.navigateTo({
-			url: "/pagesA/user-agreement/user-agreement",
-		});
-	};
-
-	onMounted(() => {
-		checkEnvironment();
-	});
+import { ref, onMounted } from "vue";
+import { onLoad, onShow } from "@dcloudio/uni-app";
+import { useAuthStore, useUserStore } from "@/store";
+import RPC from "@/utils/request";
+
+const authStore = useAuthStore();
+const userStore = useUserStore();
+
+// 页面参数
+const planId = ref("");
+const planName = ref("");
+const planPrice = ref(0);
+
+// 响应式数据
+const selectedPayment = ref("wxpay"); // 默认选中微信支付
+const paying = ref(false);
+const showAlipay = ref(true); // 控制是否显示支付宝选项
+const walletBalance = ref(0);
+
+// 获取钱包余额
+const getWalletBalance = async () => {
+  try {
+    const res = await RPC.post("/membership/user/info", {
+      user_id: userStore.userInfo.id,
+    });
+    walletBalance.value = res.wallet_balance || 0;
+  } catch (error) {
+    console.error("获取钱包余额失败:", error);
+  }
+};
+
+// 选择支付方式
+const selectPayment = (payment) => {
+  selectedPayment.value = payment;
+};
+
+// 页面加载时获取参数
+onLoad((options) => {
+  planId.value = Number(options.planId) || "";
+  planName.value = decodeURIComponent(options.planName || "");
+  planPrice.value = parseFloat(options.planPrice || 0);
+});
+
+onShow(() => {
+  getWalletBalance();
+});
+
+// 检查当前环境并设置支付选项
+const checkEnvironment = () => {
+  // #ifdef MP-WEIXIN
+  // 微信小程序环境，隐藏支付宝选项
+  showAlipay.value = false;
+  // #endif
+
+  // #ifdef H5
+  // H5环境，显示所有支付选项
+  showAlipay.value = true;
+  // #endif
+};
+
+// 微信支付
+const wechatPay = async (orderInfo) => {
+  // #ifdef MP-WEIXIN
+  // 微信小程序支付
+  try {
+    const paymentResult = await uni.requestPayment({
+      provider: "wxpay",
+      timeStamp: orderInfo.timeStamp,
+      nonceStr: orderInfo.nonceStr,
+      package: orderInfo.package,
+      signType: orderInfo.signType,
+      paySign: orderInfo.paySign,
+    });
+
+    console.log("微信支付成功:", paymentResult);
+    return {
+      success: true,
+      data: paymentResult,
+    };
+  } catch (error) {
+    console.error("微信支付失败:", error);
+    if (error.errMsg === "requestPayment:fail cancel") {
+      throw new Error("用户取消支付");
+    }
+    throw new Error("微信支付失败");
+  }
+  // #endif
+
+  // #ifdef H5
+  // H5微信支付
+  const payUrl = orderInfo.mwebUrl; // 后端返回的H5支付链接
+  window.location.href = payUrl;
+  return {
+    success: true,
+    redirect: true,
+  };
+  // #endif
+};
+
+// 支付宝支付（仅H5环境）
+const alipayPay = async (orderInfo) => {
+  // #ifdef H5
+  // H5支付宝支付
+  const payUrl = orderInfo.pay_url; // 后端返回的支付宝H5支付链接
+  window.location.href = payUrl;
+  return {
+    success: true,
+    redirect: true,
+  };
+  // #endif
+};
+
+function showModalAsync(options) {
+  return new Promise((resolve, reject) => {
+    uni.showModal({
+      ...options,
+      success: (res) => {
+        resolve(res);
+      },
+      fail: (err) => {
+        reject(err);
+      },
+    });
+  });
+}
+
+// 确认支付
+const confirmPayment = async () => {
+  if (!selectedPayment.value) {
+    uni.showToast({
+      title: "请选择支付方式",
+      icon: "none",
+    });
+    return;
+  }
+
+  paying.value = true;
+  try {
+    // 1. 创建订单参数
+    const orderParams = {
+      user_id: userStore.userInfo?.id,
+      plan_id: planId.value,
+      pay_channel: selectedPayment.value,
+    };
+
+    uni.showLoading({
+      title: "正在创建订单...",
+    });
+
+    // 2. 创建订单
+    const orderNum = await RPC.post("/membership/order/create", orderParams);
+
+    uni.hideLoading();
+    let orderResult = {};
+
+    // 3. 根据支付方式调用对应的支付方法
+    let paymentResult;
+    if (selectedPayment.value === "wxpay") {
+      // #ifdef MP-WEIXIN
+      const res = await uni.login({
+        provider: "weixin",
+      });
+      orderResult = await RPC.post("/membership/order/pay_by_wechat_mini", {
+        code: res.code,
+        order_no: orderNum.order_no,
+      });
+      // #endif
+
+      // #ifdef H5
+      orderResult = await RPC.post("/membership/order/pay_by_wechat_h5", {
+        order_no: orderNum.order_no,
+      });
+      // #endif
+
+      uni.showLoading({
+        title: "正在跳转微信支付...",
+      });
+      console.log("orderResult", orderResult);
+      paymentResult = await wechatPay(orderResult);
+    } else if (selectedPayment.value === "alipay") {
+      orderResult = await RPC.post("/membership/order/pay_by_alipay", {
+        order_no: orderNum.order_no,
+      });
+      uni.showLoading({
+        title: "正在跳转支付宝...",
+      });
+      console.log("orderResult", orderResult);
+    //   if (1 == 1) {
+    //     uni.redirectTo({
+    //       url: `/pagesA/payment-result/payment-result?order_no=${orderNum.order_no}`,
+    //     });
+    //     uni.hideLoading();
+    //     return;
+    //   }
+      paymentResult = await alipayPay(orderResult);
+    } else if (selectedPayment.value === "wallet") {
+      const res = await showModalAsync({
+        title: "确认支付",
+        content: "确认使用钱包余额支付？",
+      });
+
+      if (res.confirm) {
+        paymentResult = await RPC.post("/membership/order/pay_by_wallet", {
+          order_no: orderNum.order_no,
+        });
+        console.log("paymentResult", paymentResult);
+      } else if (res.cancel) {
+        console.log("用户点击了取消");
+        paymentResult = { success: false };
+      }
+    }
+
+    uni.hideLoading();
+    console.log("paymentResult", paymentResult);
+
+    // 4. 处理支付结果
+    if (paymentResult?.success) {
+      if (paymentResult.redirect) {
+        // H5跳转支付，跳转到支付结果页面查询状态
+        uni.redirectTo({
+          url: `/pagesA/payment-result/payment-result?order_no=${orderNum.order_no}`,
+        });
+      } else {
+        // 支付成功，跳转到支付结果页面
+        // 延迟跳转回上一页或首页
+        // 支付成功
+        setTimeout(() => {
+          uni.showToast({
+            title: "支付成功",
+            icon: "success",
+          });
+        });
+        setTimeout(() => {
+          uni.navigateBack();
+        }, 1000);
+      }
+    } else {
+      // 支付失败或取消，也跳转到支付结果页面
+      uni.redirectTo({
+        url: `/pagesA/payment-result/payment-result?order_no=${orderNum.order_no}`,
+      });
+    }
+  } catch (error) {
+    uni.hideLoading();
+    console.error("支付失败:", error);
+    let errorMessage = "支付失败，请重试";
+    if (error.message === "用户取消支付") {
+      errorMessage = "支付已取消";
+    } else if (error.message) {
+      errorMessage = error.message;
+    } else if (error) {
+      errorMessage = error;
+    }
+
+    uni.showToast({
+      title: errorMessage,
+      icon: "none",
+    });
+  } finally {
+    paying.value = false;
+  }
+};
+
+// 显示协议
+const showAgreement = () => {
+  uni.navigateTo({
+    url: "/pagesA/user-agreement/user-agreement",
+  });
+};
+
+onMounted(() => {
+  checkEnvironment();
+});
 </script>
 
 <style lang="scss" scoped>
-	.container {
-		font-size: 14px;
-		background-color: #f8f8f8;
-		min-height: 100vh;
-		padding-bottom: 120px;
-	}
-
-	.header {
-		background: white;
-		padding: 20px 16px;
-		border-bottom: 1px solid #f0f0f0;
-
-		.header-title {
-			font-size: 18px;
-			font-weight: 500;
-			color: #333;
-			text-align: center;
-		}
-	}
-
-	.order-info {
-		background: white;
-		margin: 16px;
-		border-radius: 12px;
-		padding: 16px;
-
-		.order-title {
-			font-size: 16px;
-			font-weight: 500;
-			color: #333;
-			margin-bottom: 16px;
-		}
-
-		.order-item {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			padding: 12px 0;
-			border-bottom: 1px solid #f0f0f0;
-
-			.item-name {
-				font-size: 14px;
-				color: #333;
-			}
-
-			.item-price {
-				font-size: 16px;
-				font-weight: 500;
-				color: #ff3333;
-			}
-		}
-
-		.order-total {
-			display: flex;
-			justify-content: flex-end;
-			align-items: center;
-			padding: 12px 0 0;
-
-			.total-label {
-				font-size: 14px;
-				color: #666;
-				margin-right: 8px;
-			}
-
-			.total-price {
-				font-size: 18px;
-				font-weight: bold;
-				color: #ff3333;
-			}
-		}
-	}
-
-	.payment-section {
-		background: white;
-		margin: 0 16px 16px;
-		border-radius: 12px;
-		padding: 16px;
-
-		.section-title {
-			font-size: 16px;
-			font-weight: 500;
-			color: #333;
-			margin-bottom: 16px;
-		}
-
-		.payment-item {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			padding: 16px;
-			margin-bottom: 8px;
-			border: 1px solid #e5e5e5;
-			border-radius: 8px;
-			transition: all 0.3s;
-
-			&.active {
-				border-color: #4285f4;
-				background-color: #f0f7ff;
-			}
-
-			&:last-child {
-				margin-bottom: 0;
-			}
-
-			.payment-info {
-				display: flex;
-				align-items: center;
-				gap: 12px;
-
-				.payment-details {
-					display: flex;
-					flex-direction: column;
-
-					.payment-name {
-						font-size: 14px;
-						color: #333;
-						margin-bottom: 2px;
-					}
-
-					.payment-desc {
-						font-size: 12px;
-						color: #999;
-					}
-				}
-			}
-		}
-	}
-
-	.bottom-section {
-		position: fixed;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		background: white;
-		padding: 16px;
-		border-top: 1px solid #e5e5e5;
-
-		/* #ifdef H5 */
-		bottom: 50px;
-		/* H5环境下给tabBar留出空间 */
-		/* #endif */
-
-		.agreement {
-			text-align: center;
-			font-size: 12px;
-			color: #999;
-			margin-top: 12px;
-
-			.link {
-				color: #4285f4;
-			}
-		}
-	}
+.container {
+  font-size: 14px;
+  background-color: #f8f8f8;
+  min-height: 100vh;
+  padding-bottom: 120px;
+}
+
+.header {
+  background: white;
+  padding: 20px 16px;
+  border-bottom: 1px solid #f0f0f0;
+
+  .header-title {
+    font-size: 18px;
+    font-weight: 500;
+    color: #333;
+    text-align: center;
+  }
+}
+
+.order-info {
+  background: white;
+  margin: 16px;
+  border-radius: 12px;
+  padding: 16px;
+
+  .order-title {
+    font-size: 16px;
+    font-weight: 500;
+    color: #333;
+    margin-bottom: 16px;
+  }
+
+  .order-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 0;
+    border-bottom: 1px solid #f0f0f0;
+
+    .item-name {
+      font-size: 14px;
+      color: #333;
+    }
+
+    .item-price {
+      font-size: 16px;
+      font-weight: 500;
+      color: #ff3333;
+    }
+  }
+
+  .order-total {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 12px 0 0;
+
+    .total-label {
+      font-size: 14px;
+      color: #666;
+      margin-right: 8px;
+    }
+
+    .total-price {
+      font-size: 18px;
+      font-weight: bold;
+      color: #ff3333;
+    }
+  }
+}
+
+.payment-section {
+  background: white;
+  margin: 0 16px 16px;
+  border-radius: 12px;
+  padding: 16px;
+
+  .section-title {
+    font-size: 16px;
+    font-weight: 500;
+    color: #333;
+    margin-bottom: 16px;
+  }
+
+  .payment-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px;
+    margin-bottom: 8px;
+    border: 1px solid #e5e5e5;
+    border-radius: 8px;
+    transition: all 0.3s;
+
+    &.active {
+      border-color: #4285f4;
+      background-color: #f0f7ff;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .payment-info {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+
+      .payment-details {
+        display: flex;
+        flex-direction: column;
+
+        .payment-name {
+          font-size: 14px;
+          color: #333;
+          margin-bottom: 2px;
+        }
+
+        .payment-desc {
+          font-size: 12px;
+          color: #999;
+        }
+      }
+    }
+  }
+}
+
+.bottom-section {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: white;
+  padding: 16px;
+  border-top: 1px solid #e5e5e5;
+
+  /* #ifdef H5 */
+  bottom: 50px;
+  /* H5环境下给tabBar留出空间 */
+  /* #endif */
+
+  .agreement {
+    text-align: center;
+    font-size: 12px;
+    color: #999;
+    margin-top: 12px;
+
+    .link {
+      color: #4285f4;
+    }
+  }
+}
 </style>
\ No newline at end of file