支付

hdh5/admin/ghs/pay.vue

@@ -62,12 +62,43 @@
 				class="pay-button" 
 				:class="{ disabled: !canPay }"
 				:disabled="!canPay"
-				@click="handlePay"
+				@click="showConfirmDialog"
 			>
-				立即支付
+				支付
 			</button>
 		</view>
 
+		<!-- 确认支付弹框 -->
+		<view class="confirm-dialog" v-if="showConfirm" @click="hideConfirmDialog">
+			<view class="dialog-content" @click.stop>
+				<view class="dialog-header">
+					<text class="dialog-title">提示</text>
+					<view class="close-btn" @click="hideConfirmDialog">
+						<text class="iconfont icon-close">×</text>
+					</view>
+				</view>
+				
+				<view class="dialog-body">
+					<view class="confirm-amount-section">
+						<text class="confirm-label">支付金额</text>
+						<view class="confirm-amount-display">
+							<text class="confirm-currency">¥</text>
+							<text class="confirm-amount">{{ displayAmount }}</text>
+						</view>
+					</view>
+					
+					<view class="confirm-tips">
+						<text class="tip-text">请确认金额无误</text>
+					</view>
+				</view>
+				
+				<view class="dialog-footer">
+					<button class="cancel-btn" @click="hideConfirmDialog">取消</button>
+					<button class="confirm-btn" @click="handlePay">确认</button>
+				</view>
+			</view>
+		</view>
+
 
 
 	</view>
@@ -123,7 +154,9 @@ export default {
 			orderId: null,
 			// 优化：缓存计算结果
 			_cachedCanPay: false,
-			_lastAmount: '0'
+			_lastAmount: '0',
+			// 弹框状态
+			showConfirm: false
 		}
 	},
 	computed: {
@@ -277,10 +310,23 @@ export default {
 			}
 		},
 
+		// 显示确认弹框
+		showConfirmDialog() {
+			if (!this.canPay) return;
+			this.showConfirm = true;
+		},
+
+		// 隐藏确认弹框
+		hideConfirmDialog() {
+			this.showConfirm = false;
+		},
+
 		// 处理支付
 		async handlePay() {
 			if (!this.canPay) return;
 			const amount = parseFloat(this.currentAmount);
+			// 隐藏弹框
+			this.hideConfirmDialog();
 		},
 
 		// 请求支付
@@ -523,7 +569,177 @@ export default {
 	}
 }
 
+// 确认支付弹框样式
+.confirm-dialog {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: rgba(0, 0, 0, 0.6);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 9999;
+	animation: fadeIn 0.3s ease;
+	
+	.dialog-content {
+		width: 85%;
+		max-width: 700rpx;
+		background: #fff;
+		border-radius: 20rpx;
+		overflow: hidden;
+		animation: slideUp 0.3s ease;
+		
+		.dialog-header {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 30rpx 40rpx 20rpx;
+			border-bottom: 1rpx solid #f0f0f0;
+			
+			.dialog-title {
+				font-size: 36rpx;
+				font-weight: 600;
+				color: #333;
+			}
+			
+			.close-btn {
+				width: 60rpx;
+				height: 60rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				border-radius: 50%;
+				background: #f5f5f5;
+				cursor: pointer;
+				transition: all 0.2s ease;
+				
+				&:active {
+					background: #e0e0e0;
+					transform: scale(0.95);
+				}
+				
+				.iconfont {
+					font-size: 32rpx;
+					color: #666;
+					font-weight: bold;
+				}
+			}
+		}
+		
+		.dialog-body {
+			padding: 40rpx;
+			
+			.confirm-amount-section {
+				text-align: center;
+				margin-bottom: 30rpx;
+				
+				.confirm-label {
+					display: block;
+					font-size: 28rpx;
+					color: #666;
+					margin-bottom: 20rpx;
+				}
+				
+				.confirm-amount-display {
+					display: flex;
+					align-items: baseline;
+					justify-content: center;
+					
+					.confirm-currency {
+						font-size: 60rpx;
+						font-weight: 600;
+						color: #ff6b6b;
+						margin-right: 10rpx;
+					}
+					
+					.confirm-amount {
+						font-size: 100rpx;
+						font-weight: 700;
+						color: #ff6b6b;
+						font-family: 'Arial', sans-serif;
+						text-shadow: 0 2rpx 10rpx rgba(255, 107, 107, 0.3);
+					}
+				}
+			}
+			
+			.confirm-tips {
+				text-align: center;
+				
+				.tip-text {
+					font-size: 26rpx;
+					color: #999;
+					line-height: 1.5;
+				}
+			}
+		}
+		
+		.dialog-footer {
+			display: flex;
+			border-top: 1rpx solid #f0f0f0;
+			padding: 30rpx 40rpx;
+			gap: 20rpx;
+			
+			.cancel-btn, .confirm-btn {
+				flex: 1;
+				height: 100rpx;
+				border: none;
+				font-size: 32rpx;
+				font-weight: 600;
+				transition: all 0.2s ease;
+				border-radius: 50rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				
+				&:active {
+					transform: scale(0.98);
+				}
+			}
+			
+			.cancel-btn {
+				background: #f5f5f5;
+				color: #666;
+				border: 2rpx solid #e0e0e0;
+				
+				&:active {
+					background: #e0e0e0;
+					border-color: #d0d0d0;
+				}
+			}
+			
+			.confirm-btn {
+				background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
+				color: #fff;
+				
+				&:active {
+					background: linear-gradient(135deg, #ff5252 0%, #ff4444 100%);
+				}
+			}
+		}
+	}
+}
 
+// 弹框动画
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
 
+@keyframes slideUp {
+	from {
+		opacity: 0;
+		transform: translateY(50rpx) scale(0.9);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0) scale(1);
+	}
+}
 
 </style>