fix: order-list

pages/order-list/order-list.vue

@@ -1,13 +1,8 @@
 <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>
@@ -44,9 +39,9 @@
 							<view class="info-value amount">¥{{ formatMoney(item.total_amount) }}</view>
 						</view>
 					</view>
-					
+
 					<view class="divider"></view>
-					
+
 					<view class="package-section">
 						<view class="section-label">套餐名称</view>
 						<view class="package-list">
@@ -55,6 +50,10 @@
 							</view>
 						</view>
 					</view>
+
+					<view v-if="item.payment_status === 1" class="card-footer">
+						<button class="btn-pay" @tap="handleOrderPayment(item)">立即支付</button>
+					</view>
 				</view>
 			</view>
 
@@ -68,9 +67,17 @@
 </template>
 
 <script setup>
-	import { ref, reactive, onMounted } from 'vue';
-	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';
 
 	const userStore = useUserStore();
 
@@ -80,12 +87,26 @@
 	let page = ref(1);
 	const pageSize = 10;
 	let filterIndex = ref(0);
-	let filterOptions = [
-		{ label: '全部', value: null },
-		{ label: '待支付', value: 1 },
-		{ label: '已支付', value: 2 },
-		{ label: '已取消', value: 3 },
-		{ label: '已退款', value: 4 }
+	let filterOptions = [{
+			label: '全部',
+			value: null
+		},
+		{
+			label: '待支付',
+			value: 1
+		},
+		{
+			label: '已支付',
+			value: 2
+		},
+		{
+			label: '已取消',
+			value: 3
+		},
+		{
+			label: '已退款',
+			value: 4
+		}
 	];
 
 	const formatMoney = (amount) => {
@@ -126,7 +147,9 @@
 
 			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) : ''
 			}));
 
@@ -153,6 +176,111 @@
 		}
 	};
 
+	const handleOrderPayment = async (order) => {
+		uni.showLoading({
+			title: '处理中...',
+			mask: true
+		});
+
+		try {
+			const payData = await orderApi.pay(order.order_id, 'wechat');
+
+			uni.hideLoading();
+
+			if (!payData.pay_config || !payData.pay_config.package) {
+				uni.showToast({
+					title: '支付参数获取失败',
+					icon: 'none'
+				});
+				return;
+			}
+
+			// #ifdef H5
+			if (typeof WeixinJSBridge === 'undefined') {
+				uni.showToast({
+					title: '请在微信中打开',
+					icon: 'none'
+				});
+				return;
+			}
+
+			WeixinJSBridge.invoke('getBrandWCPayRequest', {
+				appId: payData.pay_config.app_id,
+				timeStamp: payData.pay_config.timestamp,
+				nonceStr: payData.pay_config.nonce_str,
+				package: payData.pay_config.package,
+				signType: payData.pay_config.sign_type,
+				paySign: payData.pay_config.pay_sign
+			}, function(res) {
+				if (res.err_msg === 'get_brand_wcpay_request:ok') {
+					uni.showToast({
+						title: '支付成功',
+						icon: 'success'
+					});
+					setTimeout(() => {
+						page.value = 1;
+						noMore.value = false;
+						loadOrderList();
+					}, 1500);
+				} else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
+					uni.showToast({
+						title: '已取消支付',
+						icon: 'none'
+					});
+				} else {
+					uni.showToast({
+						title: '支付失败',
+						icon: 'none'
+					});
+				}
+			});
+			// #endif
+
+			// #ifndef H5
+			uni.requestPayment({
+				timeStamp: payData.pay_config.timestamp,
+				nonceStr: payData.pay_config.nonce_str,
+				package: payData.pay_config.package,
+				signType: payData.pay_config.sign_type,
+				paySign: payData.pay_config.pay_sign,
+				success: () => {
+					uni.showToast({
+						title: '支付成功',
+						icon: 'success'
+					});
+					setTimeout(() => {
+						page.value = 1;
+						noMore.value = false;
+						loadOrderList();
+					}, 1500);
+				},
+				fail: (err) => {
+					if (err.errMsg && (err.errMsg.includes('cancel') || err.errMsg.includes('用户取消'))) {
+						uni.showToast({
+							title: '已取消支付',
+							icon: 'none'
+						});
+					} else {
+						uni.showToast({
+							title: '支付失败',
+							icon: 'none'
+						});
+					}
+				}
+			});
+			// #endif
+
+		} catch (e) {
+			uni.hideLoading();
+			console.error('支付失败', e);
+			const errorMsg = e.msg || e.message || '支付失败，请稍后重试';
+			uni.showToast({
+				title: errorMsg,
+				icon: 'none'
+			});
+		}
+	};
+
 	onMounted(() => {
 		loadOrderList();
 	});
@@ -173,6 +301,7 @@
 		top: 0;
 		border-radius: 10rpx;
 		z-index: 10;
+
 		.tab-item {
 			position: relative;
 			flex: 1;
@@ -181,11 +310,13 @@
 			color: #999;
 			padding: 28rpx 0;
 			transition: all 0.2s;
+
 			&.active {
 				color: #333;
 				font-weight: 600;
 				font-size: 30rpx;
 			}
+
 			.tab-line {
 				position: absolute;
 				bottom: 0;
@@ -209,9 +340,25 @@
 		align-items: center;
 		justify-content: center;
 		padding: 200rpx 40rpx;
-		.empty-icon { font-size: 120rpx; margin-bottom: 30rpx; opacity: 0.6; }
-		.empty-title { font-size: 32rpx; font-weight: 600; color: #333; margin-bottom: 16rpx; }
-		.empty-desc { font-size: 26rpx; color: #999; text-align: center; }
+
+		.empty-icon {
+			font-size: 120rpx;
+			margin-bottom: 30rpx;
+			opacity: 0.6;
+		}
+
+		.empty-title {
+			font-size: 32rpx;
+			font-weight: 600;
+			color: #333;
+			margin-bottom: 16rpx;
+		}
+
+		.empty-desc {
+			font-size: 26rpx;
+			color: #999;
+			text-align: center;
+		}
 	}
 
 	.order-card {
@@ -227,19 +374,19 @@
 			align-items: flex-start;
 			padding: 28rpx 28rpx 24rpx;
 			border-bottom: 1rpx solid #f0f0f0;
-			
+
 			.header-left {
 				display: flex;
 				flex-direction: column;
 				gap: 10rpx;
 			}
-			
+
 			.header-row {
 				display: flex;
 				align-items: center;
 				gap: 12rpx;
 			}
-			
+
 			.field-tag {
 				font-size: 20rpx;
 				color: #999;
@@ -247,14 +394,14 @@
 				padding: 2rpx 10rpx;
 				border-radius: 4rpx;
 			}
-			
+
 			.order-no {
 				font-size: 26rpx;
 				font-weight: 600;
 				color: #333;
 				font-family: monospace;
 			}
-			
+
 			.order-id {
 				font-size: 24rpx;
 				color: #666;
@@ -264,21 +411,23 @@
 
 		.card-body {
 			padding: 24rpx 28rpx;
-			
+
 			.info-grid {
 				display: grid;
 				grid-template-columns: 1fr 1fr;
 				gap: 20rpx;
-				
+
 				.info-item {
 					.info-label {
 						font-size: 22rpx;
 						color: #999;
 						margin-bottom: 8rpx;
 					}
+
 					.info-value {
 						font-size: 26rpx;
 						color: #333;
+
 						&.amount {
 							color: #ff6b6b;
 							font-weight: 700;
@@ -300,13 +449,14 @@
 					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;
@@ -314,6 +464,28 @@
 					}
 				}
 			}
+
+			.card-footer {
+				margin-top: 24rpx;
+				padding-top: 24rpx;
+				border-top: 1rpx solid #f0f0f0;
+				display: flex;
+				justify-content: flex-end;
+
+				.btn-pay {
+					background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+					color: #fff;
+					border: none;
+					border-radius: 40rpx;
+					padding: 16rpx 40rpx;
+					font-size: 26rpx;
+					font-weight: 500;
+
+					&::after {
+						border: none;
+					}
+				}
+			}
 		}
 	}
 
@@ -322,19 +494,22 @@
 		border-radius: 30rpx;
 		font-size: 22rpx;
 		font-weight: 500;
-		
+
 		&.tag-warning {
 			background: #fff7e6;
 			color: #fa8c16;
 		}
+
 		&.tag-success {
 			background: #e6f7ff;
 			color: #1890ff;
 		}
+
 		&.tag-secondary {
 			background: #f5f5f5;
 			color: #999;
 		}
+
 		&.tag-info {
 			background: #f0f0f0;
 			color: #666;