支付优化

hdh5/admin/ghs/pay.vue

@@ -1,10 +1,5 @@
 <template>
 	<view class="pay-container">
-		<!-- 顶部导航栏 -->
-		<view class="nav-bar">
-			<view class="nav-title">付款</view>
-		</view>
-
 		<!-- 支付金额区域 -->
 		<view class="amount-section">
 			<view class="amount-label">支付金额</view>
@@ -80,6 +75,7 @@
 				<view class="dialog-header">
 					<text class="dialog-title">提示</text>
 					<view class="close-btn" @click="hideConfirmDialog">
+						<text class="iconfont icon-close">×</text>
 					</view>
 				</view>
 				
@@ -432,13 +428,13 @@ export default {
 	display: flex;
 	align-items: center;
 	justify-content: center; /* Changed to center the title */
-	padding: 20rpx 30rpx;
+	padding: 20upx 30upx;
 	background: rgba(255, 255, 255, 0.1);
 	backdrop-filter: blur(10px);
 	
 	.nav-back {
-		width: 80rpx;
-		height: 80rpx;
+		width: 80upx;
+		height: 80upx;
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -453,7 +449,7 @@ export default {
 		}
 		
 		.iconfont {
-			font-size: 40rpx;
+			font-size: 40upx;
 			color: #fff;
 			font-weight: bold;
 		}
@@ -461,41 +457,41 @@ export default {
 	
 	.nav-title {
 		color: #fff;
-		font-size: 36rpx;
+		font-size: 36upx;
 		font-weight: 600;
 	}
 	
 	.nav-placeholder {
-		width: 80rpx; /* Placeholder for back button */
+		width: 80upx; /* Placeholder for back button */
 	}
 }
 
 .amount-section {
-	padding: 60rpx 40rpx;
+	padding: 60upx 40upx;
 	text-align: center;
 	
 	.amount-label {
 		color: rgba(255, 255, 255, 0.8);
-		font-size: 28rpx;
-		margin-bottom: 20rpx;
+		font-size: 28upx;
+		margin-bottom: 20upx;
 	}
 	
 	.amount-display {
 		display: flex;
 		align-items: baseline;
 		justify-content: center;
-		margin-bottom: 20rpx;
+		margin-bottom: 20upx;
 		
 		.currency {
 			color: #fff;
-			font-size: 48rpx;
+			font-size: 48upx;
 			font-weight: 600;
-			margin-right: 10rpx;
+			margin-right: 10upx;
 		}
 		
 		.amount {
 			color: #fff;
-			font-size: 80rpx;
+			font-size: 80upx;
 			font-weight: 700;
 			font-family: 'Arial', sans-serif;
 		}
@@ -503,16 +499,16 @@ export default {
 	
 	.amount-tip {
 		color: rgba(255, 255, 255, 0.6);
-		font-size: 24rpx;
+		font-size: 24upx;
 	}
 }
 
 .customer-info-card {
 	background: #fff; /* Changed to white */
-	margin: 0 30rpx 20rpx;
-	border-radius: 20rpx;
-	padding: 30rpx;
-	box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.08);
+	margin: 0 30upx 20upx;
+	border-radius: 20upx;
+	padding: 30upx;
+	box-shadow: 0 8upx 30upx rgba(0, 0, 0, 0.08);
 	position: relative;
 	overflow: hidden;
 	
@@ -522,36 +518,36 @@ export default {
 		top: 0;
 		left: 0;
 		right: 0;
-		height: 8rpx;
+		height: 8upx;
 		background: #fff; /* Changed to white */
-		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+		box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.1);
 	}
 	
 	.card-header {
 		display: flex;
 		align-items: center;
-		margin-bottom: 20rpx;
-		margin-top: 8rpx;
+		margin-bottom: 20upx;
+		margin-top: 8upx;
 		
 		.customer-avatar {
-			width: 90rpx;
-			height: 90rpx;
+			width: 90upx;
+			height: 90upx;
 			border-radius: 50%;
 			background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			margin-right: 25rpx;
-			box-shadow: 0 6rpx 20rpx rgba(22, 119, 255, 0.3);
+			margin-right: 25upx;
+			box-shadow: 0 6upx 20upx rgba(22, 119, 255, 0.3);
 			position: relative;
 			
 			&::after {
 				content: '';
 				position: absolute;
-				top: -2rpx;
-				left: -2rpx;
-				right: -2rpx;
-				bottom: -2rpx;
+				top: -2upx;
+				left: -2upx;
+				right: -2upx;
+				bottom: -2upx;
 				border-radius: 50%;
 				background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
 				z-index: -1;
@@ -560,7 +556,7 @@ export default {
 			
 			.avatar-text {
 				color: #fff;
-				font-size: 44rpx;
+				font-size: 44upx;
 				font-weight: 600;
 			}
 		}
@@ -573,25 +569,25 @@ export default {
 			
 			.customer-name {
 				display: block;
-				font-size: 34rpx;
+				font-size: 34upx;
 				font-weight: 600;
 				color: #333;
 			}
 			
 			.customer-status {
 				display: inline-block;
-				font-size: 24rpx;
+				font-size: 24upx;
 				color: #999;
-				padding: 4rpx 12rpx;
-				border-radius: 20rpx;
+				padding: 4upx 12upx;
+				border-radius: 20upx;
 				background: #f8f9fa;
-				border: 1rpx solid #e9ecef;
+				border: 1upx solid #e9ecef;
 				
 				&.has-debt {
 					color: #fff;
 					background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
 					border-color: #ff6b6b;
-					box-shadow: 0 2rpx 10rpx rgba(255, 107, 107, 0.3);
+					box-shadow: 0 2upx 10upx rgba(255, 107, 107, 0.3);
 				}
 			}
 		}
@@ -599,10 +595,10 @@ export default {
 	
 	.debt-info {
 		background: linear-gradient(135deg, #fff5f5 0%, #fef2f2 100%);
-		border-radius: 15rpx;
-		padding: 20rpx 25rpx;
-		margin-top: 20rpx;
-		border: 1rpx solid rgba(255, 107, 107, 0.2);
+		border-radius: 15upx;
+		padding: 20upx 25upx;
+		margin-top: 20upx;
+		border: 1upx solid rgba(255, 107, 107, 0.2);
 		position: relative;
 		
 		&::before {
@@ -613,34 +609,34 @@ export default {
 			right: 0;
 			bottom: 0;
 			background: linear-gradient(135deg, rgba(255, 107, 107, 0.05) 0%, rgba(255, 107, 107, 0.02) 100%);
-			border-radius: 15rpx;
+			border-radius: 15upx;
 		}
 		
 		.debt-amount {
 			display: flex;
 			align-items: baseline;
 			justify-content: space-between;
-			margin-bottom: 10rpx;
+			margin-bottom: 10upx;
 			position: relative;
 			z-index: 1;
 			
 			.debt-label {
-				font-size: 28rpx;
+				font-size: 28upx;
 				color: #666;
 				font-weight: 500;
 			}
 			
 			.debt-value {
-				font-size: 40rpx;
+				font-size: 40upx;
 				font-weight: 700;
 				color: #ff6b6b;
 				font-family: 'Arial', sans-serif;
-				text-shadow: 0 2rpx 10rpx rgba(255, 107, 107, 0.2);
+				text-shadow: 0 2upx 10upx rgba(255, 107, 107, 0.2);
 			}
 		}
 		
 		.debt-tip {
-			font-size: 22rpx;
+			font-size: 22upx;
 			color: #999;
 			text-align: right;
 			position: relative;
@@ -652,18 +648,18 @@ export default {
 
 .keyboard-section {
 	position: fixed;
-	bottom: 160rpx;
+	bottom: 160upx;
 	left: 0;
 	right: 0;
 	background: rgba(255, 255, 255, 0.98);
 	backdrop-filter: blur(20px);
-	padding: 30rpx;
-	border-top: 1rpx solid rgba(0, 0, 0, 0.05);
+	padding: 30upx;
+	border-top: 1upx solid rgba(0, 0, 0, 0.05);
 	
 	.keyboard {
 		.keyboard-row {
 			display: flex;
-			margin-bottom: 20rpx;
+			margin-bottom: 20upx;
 			
 			&:last-child {
 				margin-bottom: 0;
@@ -671,13 +667,13 @@ export default {
 			
 			.key-item {
 				flex: 1;
-				height: 120rpx;
-				margin: 0 10rpx;
-				border-radius: 20rpx;
+				height: 120upx;
+				margin: 0 10upx;
+				border-radius: 20upx;
 				display: flex;
 				align-items: center;
 				justify-content: center;
-				font-size: 40rpx;
+				font-size: 40upx;
 				font-weight: 600;
 				transition: all 0.15s ease;
 				user-select: none;
@@ -706,27 +702,27 @@ export default {
 				&.key-number {
 					background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
 					color: #333;
-					box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
-					border: 1rpx solid rgba(0, 0, 0, 0.05);
+					box-shadow: 0 4upx 20upx rgba(0, 0, 0, 0.08);
+					border: 1upx solid rgba(0, 0, 0, 0.05);
 				}
 				
 				&.key-delete {
 					background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
 					color: #fff;
-					box-shadow: 0 4rpx 20rpx rgba(255, 107, 107, 0.3);
+					box-shadow: 0 4upx 20upx rgba(255, 107, 107, 0.3);
 				}
 				
 				&.key-dot {
 					background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
 					color: #333;
-					box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
-					border: 1rpx solid rgba(0, 0, 0, 0.05);
+					box-shadow: 0 4upx 20upx rgba(0, 0, 0, 0.08);
+					border: 1upx solid rgba(0, 0, 0, 0.05);
 				}
 				
 				&.key-confirm {
 					background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 					color: #fff;
-					box-shadow: 0 4rpx 20rpx rgba(102, 126, 234, 0.3);
+					box-shadow: 0 4upx 20upx rgba(102, 126, 234, 0.3);
 				}
 			}
 		}
@@ -738,19 +734,19 @@ export default {
 	bottom: 0;
 	left: 0;
 	right: 0;
-	padding: 30rpx;
+	padding: 30upx;
 	background: rgba(255, 255, 255, 0.98);
 	backdrop-filter: blur(20px);
-	border-top: 1rpx solid rgba(0, 0, 0, 0.05);
+	border-top: 1upx solid rgba(0, 0, 0, 0.05);
 	
 	.pay-button {
 		width: 100%;
-		height: 100rpx;
+		height: 100upx;
 		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 		color: #fff;
-		font-size: 36rpx;
+		font-size: 36upx;
 		font-weight: 600;
-		border-radius: 50rpx;
+		border-radius: 50upx;
 		border: none;
 		transition: all 0.3s ease;
 		position: relative;
@@ -786,15 +782,15 @@ export default {
 			position: absolute;
 			left: 50%;
 			transform: translateX(-50%);
-			font-size: 36rpx;
+			font-size: 36upx;
 			font-weight: 600;
 			color: #fff;
 		}
 		
 		.button-amount {
 			position: absolute;
-			right: 30rpx;
-			font-size: 36rpx;
+			right: 30upx;
+			font-size: 36upx;
 			font-weight: 700;
 			color: #fff;
 			font-family: 'Arial', sans-serif;
@@ -818,30 +814,30 @@ export default {
 	
 	.dialog-content {
 		width: 85%;
-		max-width: 700rpx;
+		max-width: 700upx;
 		background: #fff;
-		border-radius: 25rpx;
+		border-radius: 25upx;
 		overflow: hidden;
 		animation: slideUp 0.3s ease;
-		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.2);
+		box-shadow: 0 20upx 60upx rgba(0, 0, 0, 0.2);
 		
 		.dialog-header {
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
-			padding: 40rpx 40rpx 30rpx;
-			border-bottom: 1rpx solid #f0f0f0;
+			padding: 40upx 40upx 30upx;
+			border-bottom: 1upx solid #f0f0f0;
 			background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
 			
 			.dialog-title {
-				font-size: 36rpx;
+				font-size: 36upx;
 				font-weight: 600;
 				color: #333;
 			}
 			
 			.close-btn {
-				width: 60rpx;
-				height: 60rpx;
+				width: 60upx;
+				height: 60upx;
 				display: flex;
 				align-items: center;
 				justify-content: center;
@@ -856,7 +852,7 @@ export default {
 				}
 				
 				.iconfont {
-					font-size: 32rpx;
+					font-size: 32upx;
 					color: #666;
 					font-weight: bold;
 				}
@@ -864,17 +860,17 @@ export default {
 		}
 		
 		.dialog-body {
-			padding: 50rpx 40rpx;
+			padding: 50upx 40upx;
 			
 			.confirm-amount-section {
 				text-align: center;
-				margin-bottom: 40rpx;
+				margin-bottom: 40upx;
 				
 				.confirm-label {
 					display: block;
-					font-size: 28rpx;
+					font-size: 28upx;
 					color: #666;
-					margin-bottom: 25rpx;
+					margin-bottom: 25upx;
 					font-weight: 500;
 				}
 				
@@ -884,31 +880,31 @@ export default {
 					justify-content: center;
 					
 					.confirm-currency {
-						font-size: 60rpx;
+						font-size: 60upx;
 						font-weight: 600;
 						color: #ff6b6b;
-						margin-right: 10rpx;
+						margin-right: 10upx;
 					}
 					
 					.confirm-amount {
-						font-size: 100rpx;
+						font-size: 100upx;
 						font-weight: 700;
 						color: #ff6b6b;
 						font-family: 'Arial', sans-serif;
-						text-shadow: 0 2rpx 10rpx rgba(255, 107, 107, 0.3);
+						text-shadow: 0 2upx 10upx rgba(255, 107, 107, 0.3);
 					}
 				}
 			}
 			
 			.confirm-tips {
 				text-align: center;
-				padding: 20rpx 30rpx;
+				padding: 20upx 30upx;
 				background: rgba(255, 107, 107, 0.1);
-				border-radius: 15rpx;
-				border-left: 4rpx solid #ff6b6b;
+				border-radius: 15upx;
+				border-left: 4upx solid #ff6b6b;
 				
 				.tip-text {
-					font-size: 26rpx;
+					font-size: 26upx;
 					color: #666;
 					line-height: 1.5;
 				}
@@ -917,18 +913,18 @@ export default {
 		
 		.dialog-footer {
 			display: flex;
-			border-top: 1rpx solid #f0f0f0;
-			padding: 30rpx 40rpx;
-			gap: 20rpx;
+			border-top: 1upx solid #f0f0f0;
+			padding: 30upx 40upx;
+			gap: 20upx;
 			
 			.cancel-btn, .confirm-btn {
 				flex: 1;
-				height: 100rpx;
+				height: 100upx;
 				border: none;
-				font-size: 32rpx;
+				font-size: 32upx;
 				font-weight: 600;
 				transition: all 0.2s ease;
-				border-radius: 50rpx;
+				border-radius: 50upx;
 				display: flex;
 				align-items: center;
 				justify-content: center;
@@ -959,22 +955,24 @@ export default {
 			.cancel-btn {
 				background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
 				color: #666;
-				border: 2rpx solid #dee2e6;
+				border: 2upx solid #dee2e6;
+				box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.1);
 				
 				&:active {
 					background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
 					border-color: #ced4da;
+					box-shadow: 0 1upx 4upx rgba(0, 0, 0, 0.15);
 				}
 			}
 			
 			.confirm-btn {
 				background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
 				color: #fff;
-				box-shadow: 0 4rpx 20rpx rgba(255, 107, 107, 0.3);
+				box-shadow: 0 4upx 20upx rgba(255, 107, 107, 0.3);
 				
 				&:active {
 					background: linear-gradient(135deg, #ff5252 0%, #ff4444 100%);
-					box-shadow: 0 2rpx 10rpx rgba(255, 107, 107, 0.4);
+					box-shadow: 0 2upx 10upx rgba(255, 107, 107, 0.4);
 				}
 			}
 		}
@@ -994,7 +992,7 @@ export default {
 @keyframes slideUp {
 	from {
 		opacity: 0;
-		transform: translateY(50rpx) scale(0.9);
+		transform: translateY(50upx) scale(0.9);
 	}
 	to {
 		opacity: 1;