付款

hdh5/admin/ghs/pay.vue

@@ -2,7 +2,11 @@
 	<view class="pay-container">
 		<!-- 顶部导航栏 -->
 		<view class="nav-bar">
+			<view class="nav-back" @click="goBack">
+				<text class="iconfont icon-back">‹</text>
+			</view>
 			<view class="nav-title">付款</view>
+			<view class="nav-placeholder"></view>
 		</view>
 
 		<!-- 支付金额区域 -->
@@ -15,8 +19,31 @@
 			<view class="amount-tip">请输入金额</view>
 		</view>
 
+		<!-- 客户信息卡片 -->
+		<view class="customer-info-card">
+			<view class="card-header">
+				<view class="customer-avatar">
+					<text class="avatar-text">{{ customInfo.name ? customInfo.name.charAt(0) : '客' }}</text>
+				</view>
+				<view class="customer-details">
+					<text class="customer-name">{{ customInfo.name || '客户' }}</text>
+					<text class="customer-status" :class="{ 'has-debt': Number(customInfo.remainDebtAmount) > 0 }">
+						{{ Number(customInfo.remainDebtAmount) > 0 ? '待结款' : '账单已结清' }}
+					</text>
+				</view>
+			</view>
+			<view class="debt-info" v-if="Number(customInfo.remainDebtAmount) > 0">
+				<view class="debt-amount">
+					<text class="debt-label">待结金额</text>
+					<text class="debt-value">¥{{ customInfo.remainDebtAmount }}</text>
+				</view>
+				<view class="debt-tip">点击上方数字键盘可直接付款销账</view>
+			</view>
+		</view>
+
 		<!-- 支付方式展示 -->
 		<view class="payment-methods">
+			<view class="section-title">支付方式</view>
 			<view class="method-list">
 				<view class="method-item active">
 					<view class="method-icon alipay">
@@ -26,6 +53,9 @@
 						<text class="method-name">支付宝</text>
 						<text class="method-desc">安全便捷的支付方式</text>
 					</view>
+					<view class="method-check">
+						<text class="iconfont icon-check">✓</text>
+					</view>
 				</view>
 			</view>
 		</view>
@@ -48,7 +78,7 @@
 						@touchstart="handleTouchStart"
 						@touchend="handleTouchEnd"
 					>
-						<text v-if="key.type === 'delete'" class="iconfont icon-delete"></text>
+						<text v-if="key.type === 'delete'" class="iconfont icon-delete">⌫</text>
 						<text v-else-if="key.type === 'confirm'">确认</text>
 						<text v-else>{{ key.value }}</text>
 					</view>
@@ -64,7 +94,8 @@
 				:disabled="!canPay"
 				@click="showConfirmDialog"
 			>
-				支付
+				<text class="button-text">立即支付</text>
+				<text class="button-amount" v-if="canPay">¥{{ displayAmount }}</text>
 			</button>
 		</view>
 
@@ -72,7 +103,7 @@
 		<view class="confirm-dialog" v-if="showConfirm" @click="hideConfirmDialog">
 			<view class="dialog-content" @click.stop>
 				<view class="dialog-header">
-					<text class="dialog-title">提示</text>
+					<text class="dialog-title">确认支付</text>
 					<view class="close-btn" @click="hideConfirmDialog">
 						<text class="iconfont icon-close">×</text>
 					</view>
@@ -88,19 +119,16 @@
 					</view>
 					
 					<view class="confirm-tips">
-						<text class="tip-text">请确认金额无误</text>
+						<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>
+					<button class="confirm-btn" @click="handlePay">确认支付</button>
 				</view>
 			</view>
 		</view>
-
-
-
 	</view>
 </template>
 
@@ -160,7 +188,7 @@ export default {
 			id:0,
 			salt:'',
 			ghsInfo:[],
-			customInfo:[],
+			customInfo:{},
 			payWay:1
 		}
 	},
@@ -186,11 +214,12 @@ export default {
 		let that = this
 		if (this.id && this.salt) {
 			getGhsData({id:this.id,salt:this.salt}).then(res => {
-				if (res.data && res.data.ghs && !this.$util.isEmpty(res.data.ghs)){
+				if (res.data && res.data.ghs){
 					that.ghsInfo = res.data.ghs
 					that.customInfo = res.data.custom?res.data.custom:[]
+
 					if(that.customInfo.remainDebtAmount && Number(that.customInfo.remainDebtAmount)>0){
-						that.currentAmount = parseFloat(that.customInfo.remainDebtAmount)
+						that.currentAmount = parseFloat(that.customInfo.remainDebtAmount).toString()
 						that.updateDisplay()
 					}
 				}
@@ -307,7 +336,12 @@ export default {
 
 		// 优化：更高效的显示更新逻辑
 		updateDisplay() {
-			const amount = this.currentAmount;
+			let amount = this.currentAmount;
+			
+			// 确保 amount 是字符串类型
+			if (typeof amount !== 'string') {
+				amount = amount.toString();
+			}
 			
 			// 快速路径：如果是0，直接显示
 			if (amount === '0') {
@@ -401,6 +435,13 @@ export default {
 				})
 			})
 
+		},
+
+		// 返回上一页
+		goBack() {
+			uni.navigateBack({
+				delta: 1
+			});
 		}
 	}
 }
@@ -416,16 +457,43 @@ export default {
 .nav-bar {
 	display: flex;
 	align-items: center;
-	justify-content: center;
+	justify-content: space-between; /* Added for back button and placeholder */
 	padding: 20rpx 30rpx;
 	background: rgba(255, 255, 255, 0.1);
 	backdrop-filter: blur(10px);
 	
+	.nav-back {
+		width: 80rpx;
+		height: 80rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 50%;
+		background: rgba(255, 255, 255, 0.2);
+		cursor: pointer;
+		transition: all 0.2s ease;
+		
+		&:active {
+			background: rgba(255, 255, 255, 0.3);
+			transform: scale(0.9);
+		}
+		
+		.iconfont {
+			font-size: 40rpx;
+			color: #fff;
+			font-weight: bold;
+		}
+	}
+	
 	.nav-title {
 		color: #fff;
 		font-size: 36rpx;
 		font-weight: 600;
 	}
+	
+	.nav-placeholder {
+		width: 80rpx; /* Placeholder for back button */
+	}
 }
 
 .amount-section {
@@ -465,59 +533,242 @@ export default {
 	}
 }
 
+.customer-info-card {
+	background: rgba(255, 255, 255, 0.95);
+	margin: 0 30rpx 20rpx;
+	border-radius: 20rpx;
+	padding: 30rpx;
+	box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.08);
+	position: relative;
+	overflow: hidden;
+	
+	&::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		height: 6rpx;
+		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	}
+	
+	.card-header {
+		display: flex;
+		align-items: center;
+		margin-bottom: 20rpx;
+		
+		.customer-avatar {
+			width: 90rpx;
+			height: 90rpx;
+			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);
+			position: relative;
+			
+			&::after {
+				content: '';
+				position: absolute;
+				top: -2rpx;
+				left: -2rpx;
+				right: -2rpx;
+				bottom: -2rpx;
+				border-radius: 50%;
+				background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
+				z-index: -1;
+				opacity: 0.3;
+			}
+			
+			.avatar-text {
+				color: #fff;
+				font-size: 44rpx;
+				font-weight: 600;
+			}
+		}
+		
+		.customer-details {
+			flex: 1;
+			
+			.customer-name {
+				display: block;
+				font-size: 34rpx;
+				font-weight: 600;
+				color: #333;
+				margin-bottom: 6rpx;
+			}
+			
+			.customer-status {
+				display: inline-block;
+				font-size: 24rpx;
+				color: #999;
+				padding: 4rpx 12rpx;
+				border-radius: 20rpx;
+				background: #f8f9fa;
+				border: 1rpx 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);
+				}
+			}
+		}
+	}
+	
+	.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);
+		position: relative;
+		
+		&::before {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 0;
+			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;
+		}
+		
+		.debt-amount {
+			display: flex;
+			align-items: baseline;
+			justify-content: space-between;
+			margin-bottom: 10rpx;
+			position: relative;
+			z-index: 1;
+			
+			.debt-label {
+				font-size: 28rpx;
+				color: #666;
+				font-weight: 500;
+			}
+			
+			.debt-value {
+				font-size: 40rpx;
+				font-weight: 700;
+				color: #ff6b6b;
+				font-family: 'Arial', sans-serif;
+				text-shadow: 0 2rpx 10rpx rgba(255, 107, 107, 0.2);
+			}
+		}
+		
+		.debt-tip {
+			font-size: 22rpx;
+			color: #999;
+			text-align: right;
+			position: relative;
+			z-index: 1;
+			font-style: italic;
+		}
+	}
+}
+
 .payment-methods {
 	background: rgba(255, 255, 255, 0.95);
 	margin: 0 30rpx 20rpx;
-	border-radius: 15rpx;
-	padding: 20rpx 30rpx;
+	border-radius: 20rpx;
+	padding: 30rpx;
+	box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.08);
+	
+	.section-title {
+		font-size: 28rpx;
+		font-weight: 600;
+		color: #333;
+		margin-bottom: 20rpx;
+		padding-left: 10rpx;
+		position: relative;
+		
+		&::before {
+			content: '';
+			position: absolute;
+			left: 0;
+			top: 50%;
+			transform: translateY(-50%);
+			width: 6rpx;
+			height: 24rpx;
+			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+			border-radius: 3rpx;
+		}
+	}
 	
 	.method-list {
 		.method-item {
 			display: flex;
 			align-items: center;
-			padding: 20rpx 0;
+			padding: 25rpx 20rpx;
 			transition: all 0.3s ease;
+			border-radius: 15rpx;
+			position: relative;
+			overflow: hidden;
+			
+			&::before {
+				content: '';
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+				opacity: 0;
+				transition: opacity 0.3s ease;
+			}
 			
 			&.active {
-				background: rgba(102, 126, 234, 0.1);
-				border-radius: 12rpx;
-				padding: 20rpx 15rpx;
-				margin: 0 -15rpx;
+				background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+				border: 2rpx solid rgba(102, 126, 234, 0.3);
+				
+				&::before {
+					opacity: 1;
+				}
 			}
 			
 			.method-icon {
-				width: 60rpx;
-				height: 60rpx;
-				border-radius: 12rpx;
+				width: 70rpx;
+				height: 70rpx;
+				border-radius: 15rpx;
 				display: flex;
 				align-items: center;
 				justify-content: center;
-				margin-right: 20rpx;
+				margin-right: 25rpx;
+				position: relative;
+				z-index: 1;
 				
 				&.alipay {
 					background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
+					box-shadow: 0 4rpx 20rpx rgba(22, 119, 255, 0.3);
 				}
 				
 				.iconfont {
 					color: #fff;
-					font-size: 32rpx;
+					font-size: 36rpx;
 				}
 			}
 			
 			.method-info {
 				flex: 1;
+				position: relative;
+				z-index: 1;
 				
 				.method-name {
 					display: block;
-					font-size: 28rpx;
+					font-size: 30rpx;
 					font-weight: 600;
 					color: #333;
-					margin-bottom: 4rpx;
+					margin-bottom: 6rpx;
 				}
 				
 				.method-desc {
 					display: block;
-					font-size: 22rpx;
+					font-size: 24rpx;
 					color: #999;
 				}
 			}
@@ -528,10 +779,13 @@ export default {
 				display: flex;
 				align-items: center;
 				justify-content: center;
+				position: relative;
+				z-index: 1;
 				
 				.iconfont {
 					color: #1677ff;
 					font-size: 32rpx;
+					font-weight: bold;
 				}
 			}
 		}
@@ -545,9 +799,10 @@ export default {
 	bottom: 160rpx;
 	left: 0;
 	right: 0;
-	background: rgba(255, 255, 255, 0.95);
-	backdrop-filter: blur(10px);
+	background: rgba(255, 255, 255, 0.98);
+	backdrop-filter: blur(20px);
 	padding: 30rpx;
+	border-top: 1rpx solid rgba(0, 0, 0, 0.05);
 	
 	.keyboard {
 		.keyboard-row {
@@ -568,32 +823,54 @@ export default {
 				justify-content: center;
 				font-size: 40rpx;
 				font-weight: 600;
-				transition: transform 0.08s ease;
+				transition: all 0.15s ease;
 				user-select: none;
 				-webkit-user-select: none;
 				cursor: pointer;
 				will-change: transform;
+				position: relative;
+				overflow: hidden;
+				
+				&::before {
+					content: '';
+					position: absolute;
+					top: 0;
+					left: 0;
+					right: 0;
+					bottom: 0;
+					background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
+					opacity: 0;
+					transition: opacity 0.15s ease;
+				}
+				
+				&:active::before {
+					opacity: 1;
+				}
 				
 				&.key-number {
-					background: #fff;
+					background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
 					color: #333;
-					box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+					box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
+					border: 1rpx solid rgba(0, 0, 0, 0.05);
 				}
 				
 				&.key-delete {
-					background: #ff6b6b;
+					background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
 					color: #fff;
+					box-shadow: 0 4rpx 20rpx rgba(255, 107, 107, 0.3);
 				}
 				
 				&.key-dot {
-					background: #fff;
+					background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
 					color: #333;
-					box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+					box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
+					border: 1rpx solid rgba(0, 0, 0, 0.05);
 				}
 				
 				&.key-confirm {
-					background: #667eea;
+					background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 					color: #fff;
+					box-shadow: 0 4rpx 20rpx rgba(102, 126, 234, 0.3);
 				}
 			}
 		}
@@ -606,8 +883,9 @@ export default {
 	left: 0;
 	right: 0;
 	padding: 30rpx;
-	background: rgba(255, 255, 255, 0.95);
-	backdrop-filter: blur(10px);
+	background: rgba(255, 255, 255, 0.98);
+	backdrop-filter: blur(20px);
+	border-top: 1rpx solid rgba(0, 0, 0, 0.05);
 	
 	.pay-button {
 		width: 100%;
@@ -619,15 +897,52 @@ export default {
 		border-radius: 50rpx;
 		border: none;
 		transition: all 0.3s ease;
+		position: relative;
+		overflow: hidden;
+		
+		&::before {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
+			opacity: 0;
+			transition: opacity 0.3s ease;
+		}
+		
+		&:active::before {
+			opacity: 1;
+		}
 		
 		&.disabled {
-			background: #ccc;
-			color: #999;
+			background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
+			color: #adb5bd;
+			box-shadow: none;
 		}
 		
 		&:not(.disabled):active {
 			transform: scale(0.98);
 		}
+		
+		.button-text {
+			position: absolute;
+			left: 50%;
+			transform: translateX(-50%);
+			font-size: 36rpx;
+			font-weight: 600;
+			color: #fff;
+		}
+		
+		.button-amount {
+			position: absolute;
+			right: 30rpx;
+			font-size: 36rpx;
+			font-weight: 700;
+			color: #fff;
+			font-family: 'Arial', sans-serif;
+		}
 	}
 }
 
@@ -649,16 +964,18 @@ export default {
 		width: 85%;
 		max-width: 700rpx;
 		background: #fff;
-		border-radius: 20rpx;
+		border-radius: 25rpx;
 		overflow: hidden;
 		animation: slideUp 0.3s ease;
+		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.2);
 		
 		.dialog-header {
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
-			padding: 30rpx 40rpx 20rpx;
+			padding: 40rpx 40rpx 30rpx;
 			border-bottom: 1rpx solid #f0f0f0;
+			background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
 			
 			.dialog-title {
 				font-size: 36rpx;
@@ -673,12 +990,12 @@ export default {
 				align-items: center;
 				justify-content: center;
 				border-radius: 50%;
-				background: #f5f5f5;
+				background: rgba(0, 0, 0, 0.1);
 				cursor: pointer;
 				transition: all 0.2s ease;
 				
 				&:active {
-					background: #e0e0e0;
+					background: rgba(0, 0, 0, 0.2);
 					transform: scale(0.95);
 				}
 				
@@ -691,17 +1008,18 @@ export default {
 		}
 		
 		.dialog-body {
-			padding: 40rpx;
+			padding: 50rpx 40rpx;
 			
 			.confirm-amount-section {
 				text-align: center;
-				margin-bottom: 30rpx;
+				margin-bottom: 40rpx;
 				
 				.confirm-label {
 					display: block;
 					font-size: 28rpx;
 					color: #666;
-					margin-bottom: 20rpx;
+					margin-bottom: 25rpx;
+					font-weight: 500;
 				}
 				
 				.confirm-amount-display {
@@ -728,10 +1046,14 @@ export default {
 			
 			.confirm-tips {
 				text-align: center;
+				padding: 20rpx 30rpx;
+				background: rgba(255, 107, 107, 0.1);
+				border-radius: 15rpx;
+				border-left: 4rpx solid #ff6b6b;
 				
 				.tip-text {
 					font-size: 26rpx;
-					color: #999;
+					color: #666;
 					line-height: 1.5;
 				}
 			}
@@ -754,6 +1076,24 @@ export default {
 				display: flex;
 				align-items: center;
 				justify-content: center;
+				position: relative;
+				overflow: hidden;
+				
+				&::before {
+					content: '';
+					position: absolute;
+					top: 0;
+					left: 0;
+					right: 0;
+					bottom: 0;
+					background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
+					opacity: 0;
+					transition: opacity 0.2s ease;
+				}
+				
+				&:active::before {
+					opacity: 1;
+				}
 				
 				&:active {
 					transform: scale(0.98);
@@ -761,22 +1101,24 @@ export default {
 			}
 			
 			.cancel-btn {
-				background: #f5f5f5;
+				background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
 				color: #666;
-				border: 2rpx solid #e0e0e0;
+				border: 2rpx solid #dee2e6;
 				
 				&:active {
-					background: #e0e0e0;
-					border-color: #d0d0d0;
+					background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
+					border-color: #ced4da;
 				}
 			}
 			
 			.confirm-btn {
 				background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
 				color: #fff;
+				box-shadow: 0 4rpx 20rpx 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);
 				}
 			}
 		}