fix: pay

2026-05-22 15:16:22 +08:00
parent 874ff41ce3
commit 427b211295
11 changed files with 1458 additions and 738 deletions
--- a/pages/order-list/order-list.vue
+++ b/pages/order-list/order-list.vue
@@ -1,73 +1,66 @@
 <template>
 	<view class="container">
 		<view class="filter-tabs">
-			<view v-for="(item, index) in filterOptions" :key="index" class="tab-item"
-				:class="{ active: filterIndex === index }" @tap="onFilterChange(index)">
+			<view
+				v-for="(item, index) in filterOptions"
+				:key="index"
+				class="tab-item"
+				:class="{ active: filterIndex === index }"
+				@tap="onFilterChange(index)"
+			>
 				{{ item.label }}
 				<view v-if="filterIndex === index" class="tab-line"></view>
 			</view>
 		</view>

 		<scroll-view scroll-y class="scroll-container" @scrolltolower="loadMore">
-
 			<view v-if="orderList.length === 0 && !loading" class="empty-state">
-				<view class="empty-icon">📋</view>
+				<view class="empty-icon">ORD</view>
 				<view class="empty-title">暂无订单</view>
 				<view class="empty-desc">当前账号下暂无订单信息</view>
 			</view>

 			<view v-else class="order-list">
-				<view class="order-card" v-for="(item, index) in orderList" :key="index">
-				<view class="card-header">
-					<view class="header-left">
-						<view class="header-row">
-							<text class="field-tag">订单号</text>
-							<text class="order-no">{{ item.order_no }}</text>
+				<view class="order-card" v-for="item in orderList" :key="item.order_id">
+					<view class="card-header">
+						<view class="header-left">
+							<view class="header-row">
+								<text class="field-tag">订单号</text>
+								<text class="order-no">{{ item.order_no }}</text>
+							</view>
+						</view>
+						<view class="status-badge" :class="getStatusClass(item.payment_status)">
+							{{ item.payment_status_name }}
 						</view>
 					</view>
-					<view class="status-badge" :class="getStatusClass(item.payment_status)">
-						{{ item.payment_status_name }}
-					</view>
-				</view>

-				<view class="card-body">
-					<view class="info-grid">
-						<view class="info-item">
-							<view class="info-label">套餐名称</view>
-							<view class="info-value">
-								<view class="package-item" v-for="(pkgName, pIndex) in item.package_names" :key="pIndex">
-									<text class="package-name">{{ pkgName }}</text>
+					<view class="card-body">
+						<view class="info-grid">
+							<view class="info-item">
+								<view class="info-label">套餐名称</view>
+								<view class="info-value">
+									<view class="package-item" v-for="(pkgName, pkgIndex) in item.package_names" :key="pkgIndex">
+										<text class="package-name">{{ pkgName }}</text>
+									</view>
 								</view>
 							</view>
-						</view>
-						<view class="info-item">
-							<view class="info-label">订单金额</view>
-							<view class="info-value amount">¥{{ formatMoney(item.total_amount) }}</view>
-						</view>
-						<view class="info-item">
-							<view class="info-label">下单时间</view>
-							<view class="info-value">{{ item.created_at }}</view>
-						</view>
-					</view>
-
-					<!-- <view class="divider"></view>
-
-					<view class="package-section">
-						<view class="section-label">套餐名称</view>
-						<view class="package-list">
-							<view class="package-item" v-for="(pkgName, pIndex) in item.package_names" :key="pIndex">
-								<text class="package-name">{{ pkgName }}</text>
+							<view class="info-item">
+								<view class="info-label">订单金额</view>
+								<view class="info-value amount">¥{{ formatMoney(item.total_amount) }}</view>
+							</view>
+							<view class="info-item">
+								<view class="info-label">下单时间</view>
+								<view class="info-value">{{ item.created_at }}</view>
 							</view>
 						</view>
-					</view> -->

-					<view v-if="item.payment_status === 1" class="card-footer">
-						<button class="btn-pay" :disabled="orderPayingId !== null" @tap="handleOrderPayment(item)">
-							{{ isOrderPaying(item) ? '处理中...' : '立即支付' }}
-						</button>
+						<view v-if="item.payment_status === 1" class="card-footer">
+							<button class="btn-pay" :disabled="orderPayingId !== null" @tap="showOrderPaymentMethods(item)">
+								{{ isOrderPaying(item) ? '处理中...' : '立即支付' }}
+							</button>
+						</view>
 					</view>
 				</view>
-			</view>

 				<view class="load-more" v-if="orderList.length > 0">
 					<text v-if="loading">加载中...</text>
@@ -80,48 +73,40 @@
 </template>

 <script setup>
+	import { ref, reactive, onMounted } from 'vue';
+	import { onShow } from '@dcloudio/uni-app';
+	import { orderApi } from '@/api/index.js';
+	import { useUserStore } from '@/store/index.js';
 	import {
-		ref,
-		reactive,
-		onMounted
-	} from 'vue';
-	import {
-		orderApi
-	} from '@/api/index.js';
-	import {
-		useUserStore
-	} from '@/store/index.js';
-	import { wechatH5Pay, handlePaymentError, showPaymentToast } from '@/utils/payment.js';
+		consumePendingPaymentRefresh,
+		handlePaymentError,
+		isValidAlipayPaymentLink,
+		isValidWechatPayConfig,
+		openAlipayPayment,
+		PAYMENT_REFRESH_TARGETS,
+		showPaymentToast,
+		wechatH5Pay
+	} from '@/utils/payment.js';

 	const userStore = useUserStore();

-	let orderList = reactive([]);
-	let loading = ref(false);
-	let noMore = ref(false);
-	let page = ref(1);
-	let orderPayingId = ref(null);
+	const orderList = reactive([]);
+	const loading = ref(false);
+	const noMore = ref(false);
+	const page = ref(1);
+	const orderPayingId = ref(null);
 	const pageSize = 10;
-	let filterIndex = ref(0);
-	let filterOptions = [{
-			label: '全部',
-			value: null
-		},
-		{
-			label: '待支付',
-			value: 1
-		},
-		{
-			label: '已支付',
-			value: 2
-		},
-		{
-			label: '已取消',
-			value: 3
-		},
-		{
-			label: '已退款',
-			value: 4
-		}
+	const filterIndex = ref(0);
+	const paymentMethodOptions = [
+		{ label: '微信支付', value: 'wechat' },
+		{ label: '支付宝支付', value: 'alipay' }
+	];
+	const filterOptions = [
+		{ label: '全部', value: null },
+		{ label: '待支付', value: 1 },
+		{ label: '已支付', value: 2 },
+		{ label: '已取消', value: 3 },
+		{ label: '已退款', value: 4 }
 	];

 	const formatMoney = (amount) => {
@@ -139,17 +124,35 @@
 		return classMap[status] || '';
 	};

-	const onFilterChange = (index) => {
-		filterIndex.value = index;
+	const resetOrderListAndLoad = () => {
 		page.value = 1;
 		noMore.value = false;
 		loadOrderList();
 	};

-	const loadOrderList = async (append = false) => {
-		if (loading.value || noMore.value) return;
-		loading.value = true;
+	const scheduleOrderStatusRefresh = () => {
+		uni.showToast({
+			title: '正在同步支付状态',
+			icon: 'none'
+		});
+		resetOrderListAndLoad();
+		setTimeout(() => {
+			resetOrderListAndLoad();
+		}, 1500);
+		setTimeout(() => {
+			resetOrderListAndLoad();
+		}, 3000);
+	};

+	const onFilterChange = (index) => {
+		filterIndex.value = index;
+		resetOrderListAndLoad();
+	};
+
+	const loadOrderList = async (append = false) => {
+		if (loading.value || (append && noMore.value)) return;
+
+		loading.value = true;
 		const paymentStatus = filterOptions[filterIndex.value].value;

 		try {
@@ -160,11 +163,17 @@
 				paymentStatus
 			);

-			const newData = (data.items || []).map(item => ({
+			const newData = (data.items || []).map((item) => ({
 				...item,
-				payment_status_name: item.payment_status === 1 ? '待支付' : item.payment_status === 2 ?
-					'已支付' : item.payment_status === 3 ? '已取消' : item.payment_status === 4 ? '已退款' :
-					'未知',
+				payment_status_name: item.payment_status === 1
+					? '待支付'
+					: item.payment_status === 2
+						? '已支付'
+						: item.payment_status === 3
+							? '已取消'
+							: item.payment_status === 4
+								? '已退款'
+								: '未知',
 				created_at: item.created_at ? item.created_at.split('T').join(' ').slice(0, 19) : ''
 			}));

@@ -177,11 +186,12 @@
 			if (newData.length < pageSize) {
 				noMore.value = true;
 			} else {
-				page.value++;
+				page.value += 1;
 			}
-		} catch (e) {
-			console.error('加载订单列表失败', e);
+		} catch (error) {
+			console.error('加载订单列表失败', error);
 		}
+
 		loading.value = false;
 	};

@@ -193,49 +203,68 @@

 	const isOrderPaying = (order) => orderPayingId.value === order.order_id;

-	const handleOrderPayment = async (order) => {
+	const showOrderPaymentMethods = (order) => {
 		if (orderPayingId.value !== null || !order?.order_id) return;
-		orderPayingId.value = order.order_id;

+		uni.showActionSheet({
+			itemList: paymentMethodOptions.map((item) => item.label),
+			success: ({ tapIndex }) => {
+				const selectedMethod = paymentMethodOptions[tapIndex]?.value;
+				if (selectedMethod) {
+					handleOrderPayment(order, selectedMethod);
+				}
+			}
+		});
+	};
+
+	const handleOrderPayment = async (order, paymentMethod) => {
+		if (orderPayingId.value !== null || !order?.order_id) return;
+
+		orderPayingId.value = order.order_id;
 		uni.showLoading({
 			title: '处理中...',
 			mask: true
 		});

 		try {
-			const payData = await orderApi.pay(order.order_id, 'wechat');
-
+			const payData = await orderApi.pay(order.order_id, paymentMethod);
 			uni.hideLoading();

-			if (!payData.pay_config || !payData.pay_config.package) {
+			if (paymentMethod === 'wechat') {
+				if (!isValidWechatPayConfig(payData?.pay_config)) {
+					uni.showToast({
+						title: '支付参数获取失败',
+						icon: 'none'
+					});
+					return;
+				}
+
+				try {
+					await wechatH5Pay(payData.pay_config);
+					showPaymentToast(true, '支付成功');
+					setTimeout(() => {
+						resetOrderListAndLoad();
+					}, 1500);
+				} catch (error) {
+					handlePaymentError(error);
+				}
+				return;
+			}
+
+			if (!isValidAlipayPaymentLink(payData?.payment_link)) {
 				uni.showToast({
-					title: '支付参数获取失败',
+					title: '支付链接获取失败',
 					icon: 'none'
 				});
 				return;
 			}

-			// 调起微信支付
-			try {
-				await wechatH5Pay(payData.pay_config);
-				// 支付成功
-				showPaymentToast(true, '支付成功');
-				setTimeout(() => {
-					page.value = 1;
-					noMore.value = false;
-					loadOrderList();
-				}, 1500);
-			} catch (error) {
-				// 支付失败或取消
-				handlePaymentError(error);
-			}
-
-		} catch (e) {
+			await openAlipayPayment(payData.payment_link, PAYMENT_REFRESH_TARGETS.ORDER_LIST);
+		} catch (error) {
 			uni.hideLoading();
-			console.error('支付失败', e);
-			const errorMsg = e.msg || e.message || '支付失败，请稍后重试';
+			console.error('订单支付失败', error);
 			uni.showToast({
-				title: errorMsg,
+				title: error.msg || error.message || '支付失败，请稍后重试',
 				icon: 'none'
 			});
 		} finally {
@@ -243,6 +272,14 @@
 		}
 	};

+	onShow(() => {
+		if (!consumePendingPaymentRefresh(PAYMENT_REFRESH_TARGETS.ORDER_LIST)) {
+			return;
+		}
+
+		scheduleOrderStatusRefresh();
+	});
+
 	onMounted(() => {
 		loadOrderList();
 	});
@@ -315,9 +352,10 @@
 		padding: 200rpx 40rpx;

 		.empty-icon {
-			font-size: 120rpx;
+			font-size: 56rpx;
 			margin-bottom: 30rpx;
 			opacity: 0.6;
+			letter-spacing: 4rpx;
 		}

 		.empty-title {
@@ -374,12 +412,6 @@
 				color: #333;
 				font-family: monospace;
 			}
-
-			.order-id {
-				font-size: 24rpx;
-				color: #666;
-				font-family: monospace;
-			}
 		}

 		.card-body {
@@ -410,32 +442,15 @@
 				}
 			}

-			.divider {
-				height: 1rpx;
-				background: #f5f5f5;
-				margin: 24rpx 0;
+			.package-item {
+				display: flex;
+				align-items: center;
+				padding: 8rpx 0;
 			}

-			.package-section {
-				.section-label {
-					font-size: 22rpx;
-					color: #999;
-					margin-bottom: 16rpx;
-				}
-
-				.package-list {
-					.package-item {
-						display: flex;
-						align-items: center;
-						gap: 12rpx;
-						padding: 8rpx 0;
-
-						.package-name {
-							font-size: 26rpx;
-							color: #333;
-						}
-					}
-				}
+			.package-name {
+				font-size: 26rpx;
+				color: #333;
 			}

 			.card-footer {
@@ -453,7 +468,7 @@
 					padding: 16rpx 40rpx;
 					font-size: 26rpx;
 					font-weight: 500;
-					width:100%;
+					width: 100%;

 					&[disabled] {
 						opacity: 0.7;