充值管理

mallApp/src/pages/member/recharge.vue

@@ -88,6 +88,7 @@
 			title="支付提示" 
 			:custom="true"
 			:button="[]"
+			width="95%"
 			@click="handlePayConfirm"
 		>
 			<view class="pay-confirm-content">
@@ -96,10 +97,11 @@
 				</view>
 				<view class="confirm-text">
 					<view class="text-title">充值金额由门店收取和管理</view>
-					<view class="text-desc">保证余额安全是门店责任，与本小程序无关，小程序只是收款工具</view>
+					<view class="text-desc">保证余额安全是门店责任，与本小程序无关，小程序只是门店收款和登记工具</view>
 				</view>
 				<view class="confirm-btn-wrap">
 					<button class="confirm-btn" @click="handleConfirmRecharge">知道了，继续充值</button>
+					<button class="cancel-btn" @click="handleCancelRecharge">取消充值</button>
 					<view class="tech-support">花掌柜小程序提供技术支持</view>
 				</view>
 			</view>
@@ -340,8 +342,11 @@ export default {
 		},
 		// 确认充值
 		handleConfirmRecharge() {
-			this.payConfirmShow = false
 			this.wexinPayFn()
+		},
+		// 取消充值
+		handleCancelRecharge() {
+			this.payConfirmShow = false
 		}
 	}
 }
@@ -778,40 +783,40 @@ export default {
 
 // 支付确认弹框样式
 .pay-confirm-content {
-	padding: 40upx 20upx;
+	padding: 60upx 40upx;
 	text-align: center;
 	
 	.confirm-icon {
-		margin-bottom: 30upx;
+		margin-bottom: 50upx;
 		
 		.info-icon {
-			width: 80upx;
-			height: 80upx;
+			width: 120upx;
+			height: 120upx;
 			background: #4a90e2;
 			color: #fff;
 			border-radius: 50%;
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			font-size: 36upx;
+			font-size: 56upx;
 			font-weight: bold;
 			margin: 0 auto;
 		}
 	}
 	
 	.confirm-text {
-		margin-bottom: 40upx;
+		margin-bottom: 60upx;
 		
 		.text-title {
-			font-size: 32upx;
+			font-size: 42upx;
 			font-weight: bold;
 			color: #333;
-			margin-bottom: 16upx;
+			margin-bottom: 25upx;
 			line-height: 1.4;
 		}
 		
 		.text-desc {
-			font-size: 28upx;
+			font-size: 38upx;
 			color: #3f3e3e;
 			line-height: 1.4;
 		}
@@ -820,19 +825,19 @@ export default {
 	.confirm-btn-wrap {
 		.confirm-btn {
 			width: 60%;
-			height: 80upx;
+			height: 100upx;
 			background: linear-gradient(135deg, #07c160 0%, #10ad6a 100%);
 			color: #fff;
 			border: none;
-			border-radius: 40upx;
-			font-size: 30upx;
+			border-radius: 50upx;
+			font-size: 38upx;
 			font-weight: bold;
 			display: flex;
 			align-items: center;
 			justify-content: center;
 			box-shadow: 0 4upx 12upx rgba(7, 193, 96, 0.3);
 			transition: all 0.3s ease;
-			margin: 0 auto 20upx;
+			margin: 0 auto 25upx;
 			
 			&:active {
 				transform: scale(0.98);
@@ -840,8 +845,29 @@ export default {
 			}
 		}
 		
+		.cancel-btn {
+			width: 60%;
+			height: 100upx;
+			background: #f5f5f5;
+			color: #666;
+			border: 2upx solid #ddd;
+			border-radius: 50upx;
+			font-size: 38upx;
+			font-weight: bold;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			transition: all 0.3s ease;
+			margin: 0 auto 30upx;
+			
+			&:active {
+				transform: scale(0.98);
+				background: #e8e8e8;
+			}
+		}
+		
 		.tech-support {
-			font-size: 24upx;
+			font-size: 32upx;
 			color: #999;
 			text-align: center;
 			line-height: 1.4;