充值

hdPad/src/pages/home/components/recharge.vue

@@ -112,6 +112,20 @@
     <view class="footer-buttons">
       <button class="admin-button-com middle blue" @click="confirmRecharge">充值</button>
     </view>
+
+    <!-- 自定义确认弹窗 -->
+    <view class="confirm-modal" v-if="showConfirmModal">
+      <view class="confirm-overlay" @click="cancelConfirm"></view>
+      <view class="confirm-dialog">
+        <view class="confirm-content">
+          <text>{{ confirmMessage }}</text>
+        </view>
+        <view class="confirm-buttons">
+          <button class="confirm-btn cancel" @click="cancelConfirm">取消</button>
+          <button class="confirm-btn confirm" @click="handleConfirm">确定</button>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
@@ -132,6 +146,9 @@ export default {
       rechargeInputFocus: false,
       weal: [],
       rechargeWeal: 0,
+      showConfirmModal: false,
+      confirmMessage: '确认充值？',
+      confirmCallback: null,
       rForm: {
         rechargeAmount: '',
         rechargeRemark: '',
@@ -169,20 +186,48 @@ export default {
         this.$msg('充值金额要大于0')
         return false
       }
-      this.$util.confirmModal({ content: '确认充值？' }, () => {
-        uni.showLoading({ mask: true })
-        toManRecharge({
-          amount: this.rForm.rechargeAmount,
-          remark: this.rForm.rechargeRemark,
-          payWay: this.rForm.rechargePayWay,
-          customId: this.customId
-        }).then(res => {
-          uni.hideLoading()
-          if (res.code == 1) {
-            this.$msg('充值成功')
-            this.$emit('success')
-          }
-        })
+      
+      // 显示自定义确认弹窗
+      this.showConfirm('确认充值？', () => {
+        this.processRecharge()
+      })
+    },
+    
+    // 显示确认弹窗
+    showConfirm(message, callback) {
+      this.confirmMessage = message
+      this.confirmCallback = callback
+      this.showConfirmModal = true
+    },
+    
+    // 取消确认
+    cancelConfirm() {
+      this.showConfirmModal = false
+      this.confirmCallback = null
+    },
+    
+    // 确认操作
+    handleConfirm() {
+      this.showConfirmModal = false
+      if (typeof this.confirmCallback === 'function') {
+        this.confirmCallback()
+      }
+    },
+    
+    // 处理充值请求
+    processRecharge() {
+      uni.showLoading({ mask: true })
+      toManRecharge({
+        amount: this.rForm.rechargeAmount,
+        remark: this.rForm.rechargeRemark,
+        payWay: this.rForm.rechargePayWay,
+        customId: this.customId
+      }).then(res => {
+        uni.hideLoading()
+        if (res.code == 1) {
+          this.$msg('充值成功')
+          this.$emit('success')
+        }
       })
     }
   }
@@ -369,4 +414,71 @@ export default {
     }
   }
 }
+/* 自定义确认弹窗样式 */
+.confirm-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.confirm-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.confirm-dialog {
+  position: relative;
+  width: 80%;
+  max-width: 300px;
+  background-color: #fff;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+.confirm-content {
+  padding: 20px;
+  text-align: center;
+  font-size: 14px;
+  color: #333;
+}
+
+.confirm-buttons {
+  display: flex;
+  border-top: 1px solid #eee;
+}
+
+.confirm-btn {
+  flex: 1;
+  height: 44px;
+  line-height: 44px;
+  text-align: center;
+  font-size: 14px;
+  background: transparent;
+  border: none;
+  
+  &.cancel {
+    color: #666;
+    border-right: 1px solid #eee;
+  }
+  
+  &.confirm {
+    color: #3385FF;
+    font-weight: 500;
+  }
+  
+  &:active {
+    background-color: #f5f5f5;
+  }
+}
 </style>