add

src/api/company/pay.js

@@ -9,4 +9,31 @@ export function weixinPay(query) {
     params: query
   })
 }
- 
+
+/**
+ * 微信二维码支付
+ * @param query
+ * @returns {*}
+ */
+export function wxQrPay(query) {
+  return request({
+    url: '/company/companyRecharge/wxRecharge',
+    method: 'post',
+    data: query
+  })
+}
+
+/**
+ * 查询订单
+ * @param orderNo
+ * @returns {*}
+ */
+export function queryOrder(orderNo){
+  return request({
+    url: '/company/companyRecharge/queryOrder',
+    method: 'get',
+    params: {
+      orderNo: orderNo
+    }
+  })
+}

src/views/company/companyRecharge/doRecharge.vue

@@ -7,26 +7,22 @@
              <span style="font-size:20px;color:red;">{{money}}</span>元
           </el-form-item>
           <el-form-item label="充值金额" prop="money">
-            <el-input v-model="form.money" style="width:200px" placeholder="请输入充值金额" />
+            <el-input-number  v-model="form.money" style="width:200px" placeholder="请输入充值金额" />
           </el-form-item>
           <el-form-item label="支付方式" prop="payType">
                <div class="radio">
                  <div class="radio-item">
                      <el-radio v-model="form.payType" :label=1><img class="radio-img" src="../../../assets/image/WeChat_icon30.png">微信</el-radio>
                  </div>
-                 <div class="radio-item">
-                     <el-radio v-model="form.payType" :label=2><img class="radio-img" src="../../../assets/image/alipay_icon30.png">支付宝</el-radio>
-                 </div>
                </div>
             </el-form-item>
             <div class="footer-btn">
               <el-button type="primary" @click="submitForm">充值</el-button>
             </div>
-            
         </el-form>
       </el-tab-pane>
     </el-tabs>
-    <el-dialog :title="payTitle" :visible.sync="payVisible" top="10vh" width="550px" class="my-dialog">
+    <el-dialog :title="payTitle" :visible.sync="payVisible" top="10vh" width="550px" class="my-dialog" @close="handleDialogClose">
       <div class="pay-dialog-cont">
         <div class="price">
           <span class="label">应付金额</span>
@@ -36,7 +32,6 @@
         <div class="order-sn">订单编号：{{orderNo}}</div>
         <div class="code-box">
           <div class="qrcode" ref="qrCodeUrl"></div>
-          <!-- <img src="../../assets/image/qr.png" alt=""> -->
         </div>
         <div class="tip-box">
           <span>请使用<span class="orange">微信</span>扫一扫</span>
@@ -44,40 +39,68 @@
         </div>
       </div>
     </el-dialog>
-     
+
   </div>
 </template>
 
 <script>
 import { listCompanyRecharge, getCompanyRecharge, delCompanyRecharge, addCompanyRecharge, updateCompanyRecharge, exportCompanyRecharge } from "@/api/company/companyRecharge";
 import { getCompanyInfo } from "@/api/company/company";
-import { weixinPay } from "@/api/company/pay";
+import {queryOrder, weixinPay, wxQrPay} from "@/api/company/pay";
 import QRCode from 'qrcodejs2'
 
 export default {
   name: "CompanyRecharge",
   data() {
     return {
+      qrLoading: false,
+      qrPayUrl: '',
       orderNo:"",
-      payVisible: false, // 支付弹窗
+      payVisible: false,
       payTitle: '微信支付',
       toPayFlag:true,
       activeName:"first",
+      timer: null,
       money:0,
-      // 表单参数
       form: {
         payType:1,
       },
-      // 表单校验
       rules: {
         money: [
           { required: true, message: "金额不能为空", trigger: "blur" },
+          {
+            validator: (rule, value, callback) => {
+              if (value === '' || value === undefined || value === null) {
+                callback();
+                return;
+              }
+              const numValue = Number(value);
+              if (isNaN(numValue)) {
+                callback(new Error('请输入有效的金额'));
+                return;
+              }
+              if (numValue < 0.01) {
+                callback(new Error('最小充值金额为0.01元'));
+                return;
+              }
+              if (numValue > 10000) {
+                callback(new Error('最大充值金额为10000元'));
+                return;
+              }
+              if (!/^\d+(\.\d{1,2})?$/.test(value.toString())) {
+                callback(new Error('金额最多支持两位小数'));
+                return;
+              }
+              callback();
+            },
+            trigger: 'blur'
+          }
         ],
       }
     };
   },
   created() {
-     
+
     this.getDicts("company_pay_status").then((response) => {
       this.statusOptions = response.data;
     });
@@ -89,52 +112,73 @@ export default {
     });
   },
   methods: {
+    /**
+     * 创建二维码
+     * @param {string} url - 二维码内容URL
+     */
     creatQrCode(url) {
-      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
-          text: url, // 需要转换为二维码的内容
-          width: 200,
-          height: 200,
-          colorDark: '#000000',
-          colorLight: '#ffffff',
-          correctLevel: QRCode.CorrectLevel.H
-      })
-    },
-    toPay(orderNo) {
-      if(this.form.payType == 1) {
-        this.payTitle = '微信支付'
-        var param={orderNo:orderNo,orderType:1};
-        weixinPay(param).then(response => {
-          this.creatQrCode(response.qr)
-        });
-        this.payVisible = true
-        
-      } else {
-        this.payTitle = '支付宝支付'
+      // 首先清空容器，避免重复创建
+      if (this.$refs.qrCodeUrl) {
+        this.$refs.qrCodeUrl.innerHTML = '';
       }
-      
+
+      // 使用nextTick确保DOM已更新
+      this.$nextTick(() => {
+        try {
+          if (this.$refs.qrCodeUrl) {
+            new QRCode(this.$refs.qrCodeUrl, {
+              text: url, // 需要转换为二维码的内容
+              width: 200,
+              height: 200,
+              colorDark: '#000000',
+              colorLight: '#ffffff',
+              correctLevel: QRCode.CorrectLevel.H
+            });
+            console.log('二维码创建成功');
+          } else {
+            console.error('二维码容器不存在');
+            this.$message.error('二维码生成失败：容器不存在');
+          }
+        } catch (error) {
+          console.error('二维码创建失败:', error);
+          this.$message.error('二维码生成失败，请重试');
+        }
+      });
+    },
+    handleDialogClose(){
+      clearInterval(this.timer);
+      this.timer=null;
     },
     /** 提交按钮 */
     submitForm() {
-      this.msgError("未开放此功能");
-      return;
       var that=this;
-       if(this.orderNo!=""){
-        this.payVisible = true
-        return;
-      }
-      if(!this.toPayFlag){
-        return;
-      }
       this.$refs["form"].validate(valid => {
         if (valid) {
           that.toPayFlag=false;
-            addCompanyRecharge(this.form).then(response => {
-              if (response.code === 200) {
-                
-                that.orderNo=response.rechargeNo
-                that.toPay(response.rechargeNo);
-              }
-            });
+          wxQrPay({
+            amount: this.form.money
+          }).then(res=>{
+            if(res.code === 200) {
+              this.payVisible = true;
+              this.creatQrCode(res.data.qrLink);
+              this.orderNo = res.data.orderNo;
+
+
+              // 轮询订单是否完成
+              this.timer = setInterval(()=>{
+                queryOrder(res.data.orderNo).then(res=>{
+                  if(res.code === 200 && res.data.transactionId != null) {
+                    this.$message.success("支付成功！");
+                    clearInterval(this.timer);
+                    this.timer=null;
+                    setTimeout(()=>{
+                      window.location.reload()
+                    },2000)
+                  }
+                })
+              },1000)
+            }
+          })
         }
       });
     },
@@ -148,7 +192,7 @@ export default {
 .radio{
   display: flex;
   align-items: center;
-   
+
 
 }
 .radio-item{