fix: pay

pages/package-order/package-order.vue

@@ -1,8 +1,8 @@
 <template>
 	<view class="container">
 		<view v-if="packageList.length === 0 && !loading" class="empty-state">
-			<view class="empty-icon">📦</view>
-			<view class="empty-title">暂无可购套餐,请联系客服</view>
+			<view class="empty-icon">PKG</view>
+			<view class="empty-title">暂无可购套餐，请联系客服</view>
 			<view class="empty-desc">当前资产暂无适用的套餐</view>
 		</view>
 
@@ -10,7 +10,7 @@
 			<view class="package-header flex-row-sb">
 				<view class="package-name">{{ item.package_name }}</view>
 				<view class="header-right">
-					<view class="validity-tag">有效期{{ item.validity_days }}天</view>
+					<view class="validity-tag">有效期 {{ item.validity_days }} 天</view>
 					<view class="tag-apple" :class="item.is_addon ? 'tag-warning' : 'tag-primary'">
 						{{ item.is_addon ? '加油包' : '正式套餐' }}
 					</view>
@@ -26,12 +26,11 @@
 			</view>
 		</view>
 
-		<!-- 支付方式选择弹窗 -->
-		<up-popup :show="showModal" mode="center" @close="showModal=false">
+		<up-popup :show="showModal" mode="center" @close="showModal = false">
 			<view class="payment-popup">
 				<view class="popup-header">
 					<view class="popup-title">选择支付方式</view>
-					<view class="popup-close" @tap="showModal=false">×</view>
+					<view class="popup-close" @tap="showModal = false">×</view>
 				</view>
 
 				<view class="package-summary">
@@ -45,7 +44,7 @@
 						<view class="detail-divider"></view>
 						<view class="detail-item">
 							<text class="detail-label">有效期</text>
-							<text class="detail-value">{{ currentPackage?.validity_days }}天</text>
+							<text class="detail-value">{{ currentPackage?.validity_days }} 天</text>
 						</view>
 					</view>
 				</view>
@@ -59,6 +58,14 @@
 						<view class="method-radio" :class="{ checked: paymentMethod === 'wechat' }"></view>
 					</view>
 
+					<view class="method-item" :class="{ active: paymentMethod === 'alipay' }" @tap="selectPaymentMethod('alipay')">
+						<view class="method-left">
+							<view class="method-icon method-badge method-badge-alipay">支</view>
+							<text class="method-name">支付宝支付</text>
+						</view>
+						<view class="method-radio" :class="{ checked: paymentMethod === 'alipay' }"></view>
+					</view>
+
 					<view class="method-item" :class="{ active: paymentMethod === 'wallet' }" @tap="selectPaymentMethod('wallet')">
 						<view class="method-left">
 							<image class="method-icon" src="/static/wallet.png" mode="aspectFit"></image>
@@ -69,7 +76,7 @@
 				</view>
 
 				<view class="popup-footer">
-					<button class="btn-apple btn-secondary" @tap="showModal=false">取消</button>
+					<button class="btn-apple btn-secondary" @tap="showModal = false">取消</button>
 					<button class="btn-apple btn-primary" :disabled="paySubmitting" @tap="confirmPay">
 						{{ paySubmitting ? '处理中...' : '确认支付' }}
 					</button>
@@ -81,19 +88,29 @@
 
 <script setup>
 	import { ref, reactive, onMounted } from 'vue';
+	import { onShow } from '@dcloudio/uni-app';
 	import { assetApi, orderApi, walletApi } from '@/api/index.js';
 	import { useUserStore } from '@/store/index.js';
-	import { wechatH5Pay, handlePaymentError, showPaymentToast } from '@/utils/payment.js';
+	import {
+		consumePendingPaymentRefresh,
+		handlePaymentError,
+		isValidAlipayPaymentLink,
+		isValidWechatPayConfig,
+		openAlipayPayment,
+		PAYMENT_REFRESH_TARGETS,
+		showPaymentToast,
+		wechatH5Pay
+	} from '@/utils/payment.js';
 
 	const userStore = useUserStore();
 
-	let showModal = ref(false);
-	let currentPackage = ref(null);
-	let packageList = reactive([]);
-	let loading = ref(false);
-	let paymentMethod = ref('wechat');
-	let walletBalance = ref(0);
-	let paySubmitting = ref(false);
+	const showModal = ref(false);
+	const currentPackage = ref(null);
+	const packageList = reactive([]);
+	const loading = ref(false);
+	const paymentMethod = ref('wechat');
+	const walletBalance = ref(0);
+	const paySubmitting = ref(false);
 
 	const formatMoney = (amount) => {
 		if (!amount && amount !== 0) return '0.00';
@@ -102,9 +119,9 @@
 
 	const formatData = (allowance, unit) => {
 		if (unit === 'MB') {
-			return allowance >= 1024 ? (allowance / 1024).toFixed(0) + ' GB' : allowance + ' MB';
+			return allowance >= 1024 ? `${(allowance / 1024).toFixed(0)} GB` : `${allowance} MB`;
 		}
-		return allowance + ' ' + unit;
+		return `${allowance} ${unit}`;
 	};
 
 	const loadPackages = async () => {
@@ -112,8 +129,8 @@
 		try {
 			const data = await assetApi.getPackages(userStore.state.identifier);
 			packageList.splice(0, packageList.length, ...(data.packages || []));
-		} catch (e) {
-			console.error('加载套餐列表失败', e);
+		} catch (error) {
+			console.error('加载套餐列表失败', error);
 		}
 		loading.value = false;
 	};
@@ -122,11 +139,16 @@
 		try {
 			const data = await walletApi.getDetail(userStore.state.identifier);
 			walletBalance.value = data.balance || 0;
-		} catch (e) {
-			console.error('加载钱包余额失败', e);
+		} catch (error) {
+			console.error('加载钱包余额失败', error);
 		}
 	};
 
+	const syncPackagePageState = () => {
+		loadPackages();
+		loadWalletBalance();
+	};
+
 	const buyPackage = (item) => {
 		currentPackage.value = item;
 		paymentMethod.value = 'wechat';
@@ -137,27 +159,66 @@
 		paymentMethod.value = method;
 	};
 
+	const hasPreparedPaymentData = (paymentData) => {
+		return isValidWechatPayConfig(paymentData?.pay_config) ||
+			isValidAlipayPaymentLink(paymentData?.payment_link);
+	};
+
+	const handleWechatPay = async (payConfig, isForceRecharge = false) => {
+		try {
+			await wechatH5Pay(payConfig);
+			showPaymentToast(true, isForceRecharge ? '充值成功，套餐将自动购买' : '支付成功');
+			setTimeout(() => {
+				loadWalletBalance();
+			}, 1500);
+		} catch (error) {
+			handlePaymentError(error);
+		}
+	};
+
+	const handlePreparedPayment = async (paymentData, isForceRecharge = false) => {
+		if (isValidWechatPayConfig(paymentData?.pay_config)) {
+			await handleWechatPay(paymentData.pay_config, isForceRecharge);
+			return;
+		}
+
+		if (isValidAlipayPaymentLink(paymentData?.payment_link)) {
+			await openAlipayPayment(paymentData.payment_link, PAYMENT_REFRESH_TARGETS.PACKAGE_ORDER);
+			return;
+		}
+
+		uni.showToast({
+			title: '支付参数获取失败',
+			icon: 'none'
+		});
+	};
+
+	const getCreateOrderPaymentMethod = () => {
+		return paymentMethod.value === 'alipay' ? 'alipay' : undefined;
+	};
+
 	const confirmPay = async () => {
 		if (paySubmitting.value || !currentPackage.value) return;
+
 		paySubmitting.value = true;
 		let releaseInModalCallback = false;
 
-		uni.showLoading({ title: '创建订单...', mask: true });
+		uni.showLoading({
+			title: '创建订单...',
+			mask: true
+		});
 
 		try {
-			// 第一步：创建订单
 			const orderResult = await orderApi.create(
 				userStore.state.identifier,
-				[currentPackage.value.package_id]
+				[currentPackage.value.package_id],
+				getCreateOrderPaymentMethod()
 			);
 
-			// 判断是否为强充订单
 			if (orderResult.order_type === 'recharge' && orderResult.recharge) {
 				const recharge = orderResult.recharge;
 
-				// 检查充值订单状态
 				if (recharge.status === 2 || recharge.status === 3) {
-					// 已关闭或已退款的订单
 					uni.hideLoading();
 					showModal.value = false;
 					uni.showToast({
@@ -168,9 +229,7 @@
 					return;
 				}
 
-				// 检查充值订单是否已存在（待支付状态但无支付配置）
-				if (recharge.status === 1 && (!orderResult.pay_config || !orderResult.pay_config.package)) {
-					// 待支付订单已存在，引导用户跳转到订单页面
+				if (recharge.status === 1 && !hasPreparedPaymentData(orderResult)) {
 					uni.hideLoading();
 					showModal.value = false;
 					uni.showModal({
@@ -187,36 +246,33 @@
 					return;
 				}
 
-				// 检查是否有支付配置（新订单应该有）
-				if (!orderResult.pay_config || !orderResult.pay_config.package) {
+				if (!hasPreparedPaymentData(orderResult)) {
 					uni.hideLoading();
 					showModal.value = false;
-					uni.showToast({ title: '支付参数获取失败', icon: 'none' });
+					uni.showToast({
+						title: '支付参数获取失败',
+						icon: 'none'
+					});
 					return;
 				}
 
-				// 获取强充信息
 				const forceRechargeAmount = orderResult.linked_package_info?.force_recharge_amount || recharge.amount;
 				const packageNames = orderResult.linked_package_info?.package_names || [];
+				const packageNameStr = packageNames.length > 0 ? packageNames.join('、') : '套餐';
 
 				uni.hideLoading();
 				showModal.value = false;
-
-				// 提示用户需要强充
-				const packageNameStr = packageNames.length > 0 ? packageNames.join('、') : '套餐';
-				const message = `购买${packageNameStr}需要先充值 ¥${formatMoney(forceRechargeAmount)}，充值成功后将自动购买套餐`;
 				releaseInModalCallback = true;
 
 				uni.showModal({
 					title: '需要充值',
-					content: message,
+					content: `购买${packageNameStr}需要先充值 ¥${formatMoney(forceRechargeAmount)}，充值成功后将自动购买套餐`,
 					confirmText: '去充值',
 					cancelText: '取消',
 					success: async (res) => {
 						try {
 							if (res.confirm) {
-								// 调起微信支付
-								await handleWechatPay(orderResult.pay_config, true);
+								await handlePreparedPayment(orderResult, true);
 							}
 						} finally {
 							paySubmitting.value = false;
@@ -229,47 +285,44 @@
 				return;
 			}
 
-			// 检查是否有订单信息（非强充订单）
-			if (!orderResult || !orderResult.order) {
+			if (!orderResult?.order?.order_id) {
 				uni.hideLoading();
 				showModal.value = false;
-				uni.showToast({ title: '订单创建失败', icon: 'none' });
+				uni.showToast({
+					title: '订单创建失败',
+					icon: 'none'
+				});
 				return;
 			}
 
-			const orderId = orderResult.order.order_id;
+			uni.showLoading({
+				title: '准备支付...',
+				mask: true
+			});
 
-			// 第二步：获取支付参数
-			uni.showLoading({ title: '准备支付...', mask: true });
-
-			const payResult = await orderApi.pay(orderId, paymentMethod.value);
+			const payResult = await orderApi.pay(orderResult.order.order_id, paymentMethod.value);
 
 			uni.hideLoading();
 			showModal.value = false;
 
-			// 处理不同支付方式
-			if (paymentMethod.value === 'wechat') {
-				// 微信支付
-				if (!payResult.pay_config || !payResult.pay_config.package) {
-					uni.showToast({ title: '支付参数获取失败', icon: 'none' });
-					return;
-				}
-				await handleWechatPay(payResult.pay_config);
-			} else if (paymentMethod.value === 'wallet') {
-				// 钱包支付成功
-				uni.showToast({ title: '支付成功', icon: 'success' });
+			if (paymentMethod.value === 'wallet') {
+				uni.showToast({
+					title: '支付成功',
+					icon: 'success'
+				});
 				setTimeout(() => {
 					loadWalletBalance();
 				}, 1500);
+				return;
 			}
 
-		} catch (e) {
+			await handlePreparedPayment(payResult);
+		} catch (error) {
 			uni.hideLoading();
 			showModal.value = false;
-			console.error('创建订单或支付失败', e);
+			console.error('创建订单或支付失败', error);
 
-			// 特殊错误处理：订单正在创建中
-			if (e.code === 1008) {
+			if (error.code === 1008) {
 				uni.showModal({
 					title: '提示',
 					content: '订单正在创建中，是否跳转到我的订单页面进行支付？',
@@ -283,9 +336,10 @@
 				return;
 			}
 
-			// 其他错误提示
-			const errorMsg = e.msg || e.message || '操作失败，请稍后重试';
-			uni.showToast({ title: errorMsg, icon: 'none' });
+			uni.showToast({
+				title: error.msg || error.message || '操作失败，请稍后重试',
+				icon: 'none'
+			});
 		} finally {
 			if (!releaseInModalCallback) {
 				paySubmitting.value = false;
@@ -293,24 +347,27 @@
 		}
 	};
 
-	const handleWechatPay = async (payConfig, isForceRecharge = false) => {
-		try {
-			await wechatH5Pay(payConfig);
-			// 支付成功
-			const successMsg = isForceRecharge ? '充值成功，套餐将自动购买' : '支付成功';
-			showPaymentToast(true, successMsg);
-			setTimeout(() => {
-				loadWalletBalance();
-			}, 1500);
-		} catch (error) {
-			// 支付失败或取消
-			handlePaymentError(error);
+	onShow(() => {
+		if (!consumePendingPaymentRefresh(PAYMENT_REFRESH_TARGETS.PACKAGE_ORDER)) {
+			return;
 		}
-	};
+
+		syncPackagePageState();
+		uni.showModal({
+			title: '支付状态确认',
+			content: '已返回页面，支付结果以订单状态为准。是否前往我的订单查看最新状态？',
+			confirmText: '查看订单',
+			cancelText: '稍后',
+			success: (res) => {
+				if (res.confirm) {
+					uni.navigateTo({ url: '/pages/order-list/order-list' });
+				}
+			}
+		});
+	});
 
 	onMounted(() => {
-		loadPackages();
-		loadWalletBalance();
+		syncPackagePageState();
 	});
 </script>
 
@@ -323,20 +380,45 @@
 			justify-content: center;
 			padding: 120rpx 40rpx;
 			min-height: 400rpx;
-			.empty-icon { font-size: 120rpx; margin-bottom: 30rpx; opacity: 0.6; }
-			.empty-title { font-size: 32rpx; font-weight: 600; color: var(--text-primary); margin-bottom: 16rpx; }
-			.empty-desc { font-size: 26rpx; color: var(--text-tertiary); text-align: center; }
+
+			.empty-icon {
+				font-size: 60rpx;
+				margin-bottom: 30rpx;
+				opacity: 0.6;
+				letter-spacing: 4rpx;
+			}
+
+			.empty-title {
+				font-size: 32rpx;
+				font-weight: 600;
+				color: var(--text-primary);
+				margin-bottom: 16rpx;
+			}
+
+			.empty-desc {
+				font-size: 26rpx;
+				color: var(--text-tertiary);
+				text-align: center;
+			}
 		}
 
 		.package-card {
 			margin-bottom: var(--space-md);
+
 			.package-header {
 				margin-bottom: var(--space-sm);
-				.package-name { font-size: 32rpx; font-weight: 600; color: var(--text-primary); }
+
+				.package-name {
+					font-size: 32rpx;
+					font-weight: 600;
+					color: var(--text-primary);
+				}
+
 				.header-right {
 					display: flex;
 					align-items: center;
 					gap: 12rpx;
+
 					.validity-tag {
 						font-size: 24rpx;
 						color: var(--text-secondary);
@@ -346,6 +428,7 @@
 					}
 				}
 			}
+
 			.package-data {
 				font-size: 48rpx;
 				font-weight: 700;
@@ -353,18 +436,22 @@
 				margin-bottom: var(--space-sm);
 				letter-spacing: -1rpx;
 			}
+
 			.package-desc {
 				font-size: 26rpx;
 				color: var(--text-secondary);
 				margin-bottom: var(--space-md);
 			}
+
 			.package-footer {
 				align-items: center;
+
 				.package-price {
 					font-size: 40rpx;
 					font-weight: 700;
 					color: var(--warning);
 				}
+
 				.btn {
 					flex-shrink: 0;
 				}
@@ -492,6 +579,21 @@
 						height: 64rpx;
 					}
 
+					.method-badge {
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						border-radius: 18rpx;
+						font-size: 32rpx;
+						font-weight: 700;
+						color: #fff;
+					}
+
+					.method-badge-alipay {
+						background: linear-gradient(135deg, #1677ff 0%, #45a5ff 100%);
+						box-shadow: 0 8rpx 20rpx rgba(22, 119, 255, 0.2);
+					}
+
 					.method-name {
 						font-size: 28rpx;
 						font-weight: 500;
@@ -532,24 +634,24 @@
 			padding: 30rpx;
 			border-top: 1rpx solid var(--border-light);
 
-				.btn-apple {
-					flex: 1;
-					height: 88rpx;
-					display: flex;
+			.btn-apple {
+				flex: 1;
+				height: 88rpx;
+				display: flex;
 				align-items: center;
 				justify-content: center;
 				border-radius: var(--radius-medium);
-					font-size: 28rpx;
-					font-weight: 500;
-					border: none;
+				font-size: 28rpx;
+				font-weight: 500;
+				border: none;
 
-					&[disabled] {
-						opacity: 0.7;
-					}
+				&[disabled] {
+					opacity: 0.7;
+				}
 
-					&.btn-secondary {
-						background: var(--gray-200);
-						color: var(--text-primary);
+				&.btn-secondary {
+					background: var(--gray-200);
+					color: var(--text-primary);
 				}
 
 				&.btn-primary {