充值

mallApp/src/pages/member/recharge.vue

@@ -64,29 +64,11 @@
 
 			<view class="btn-wrap">
 				<!-- #ifdef MP-WEIXIN -->
-				<button class="button-com green" @click="showPayConfirm">微信支付</button>
+				<button class="button-com green" @click="handleConfirmRecharge">微信支付</button>
 				<!-- #endif -->
 			</view>
 		</view>
 
-		<!-- 支付确认弹框 -->
-		<ModalModule :show="payConfirmShow" title="支付提示" :custom="true" :button="[]" width="95%" @click="handlePayConfirm" >
-			<view class="pay-confirm-content">
-				<view class="confirm-icon">
-					<view class="info-icon">i</view>
-				</view>
-				<view class="confirm-text">
-					<view class="text-title">充值金额由门店收取和管理</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>
-		</ModalModule>
-
 		<!-- 福利选择弹框 -->
 		<ModalModule :show="welfareModalShow" title="充值福利" :custom="true" :button="[]" width="95%" @click="handleWelfareModal" >
 			<view class="welfare-modal-content">
@@ -159,8 +141,6 @@ export default {
 			rechargeWeal:0,
 			weal:[],
 			hint:'请输入充值金额',
-			// 支付确认弹框相关
-			payConfirmShow: false,
 			// 福利选择弹框相关
 			welfareModalShow: false,
 			// 防重复请求相关
@@ -347,23 +327,9 @@ export default {
 		viewChange() {
 			this.pageTo({ url:'/pages/balance/changeList?id='+this.hdId+'&account='+this.account})
 		},
-		// 显示支付确认弹框
-		showPayConfirm() {
-			this.payConfirmShow = true
-		},
-		// 处理支付确认弹框点击
-		handlePayConfirm(e) {
-			// 点击遮罩层关闭弹框
-			this.payConfirmShow = false
-		},
-		// 确认充值
 		handleConfirmRecharge() {
 			this.wexinPayFn()
 		},
-		// 取消充值
-		handleCancelRecharge() {
-			this.payConfirmShow = false
-		},
 		// 显示福利选择弹框
 		showWelfareModal() {
 			this.welfareModalShow = true
@@ -377,7 +343,7 @@ export default {
 		selectWelfare(info) {
 			this.amount = info.recharge.toString()
 			this.handleWelfareModal()
-			this.showPayConfirm()
+			this.wexinPayFn()
 		},
 		// 关闭福利弹框
 		closeWelfareModal() {

mallApp/src/pages/member/rechargeResult.vue

@@ -5,7 +5,17 @@
         <view class="result-view">
           <view :class="['iconfont', 'iconchenggong']"></view>
           <view class="result-title">充值成功</view>
-          <button class="admin-button-com big" style="width:60vw;margin-top:50upx;" @click="goBack">返回</button>  
+
+          <view class="pay-confirm-content">
+            <view class="confirm-text">
+              <view class="text-title">充值金额由门店收取和管理</view>
+              <view class="text-desc">保证资金安全是门店责任，本小程序只是门店收款和登记工具</view>
+            </view>
+            <view class="confirm-btn-wrap">
+              <button class="confirm-btn" @click="goBack">知道了</button>
+              <view class="tech-support">花掌柜小程序提供技术支持</view>
+            </view>
+          </view>
         </view>
       </view>
     </view>
@@ -124,12 +134,12 @@
       border-radius: 20upx;
       z-index: 1;
       .iconchenggong {
-        font-size: 170upx;
+        font-size: 130upx;
         color: $mainColor1;
       }
       .result-title {
-        margin: 20upx 0 50upx;
-        font-size: 32upx;
+        margin: 50upx 0 30upx;
+        font-size: 38upx;
       }
       .close_btn {
         line-height: 88upx;
@@ -147,4 +157,98 @@
       width: 100%;
     }
   }
+
+  // 支付确认弹框样式
+  .pay-confirm-content {
+    padding: 30upx 40upx;
+    text-align: center;
+    
+    .confirm-icon {
+      margin-bottom: 50upx;
+      
+      .info-icon {
+        width: 120upx;
+        height: 120upx;
+        background: #4a90e2;
+        color: #fff;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 56upx;
+        font-weight: bold;
+        margin: 0 auto;
+      }
+    }
+    
+    .confirm-text {
+      margin-bottom: 60upx;
+      
+      .text-title {
+        font-size: 42upx;
+        font-weight: bold;
+        color: #333;
+        margin-bottom: 25upx;
+        line-height: 1.4;
+      }
+      
+      .text-desc {
+        font-size: 38upx;
+        color: #3f3e3e;
+        line-height: 1.4;
+      }
+    }
+    
+    .confirm-btn-wrap {
+      .confirm-btn {
+        width: 60%;
+        height: 100upx;
+        background: linear-gradient(135deg, #07c160 0%, #10ad6a 100%);
+        color: #fff;
+        border: none;
+        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 25upx;
+        
+        &:active {
+          transform: scale(0.98);
+          box-shadow: 0 2upx 8upx rgba(7, 193, 96, 0.4);
+        }
+      }
+      
+      .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: 32upx;
+        color: #999;
+        text-align: center;
+        line-height: 1.4;
+      }
+    }
+  }
   </style>