自有账户支付宝充值

package.json

@@ -50,6 +50,7 @@
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
     "nprogress": "0.2.0",
+    "qrcode": "^1.5.4",
     "quill": "1.3.7",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",

src/components/QrCode.vue

+<template>
+  <div>
+    <canvas ref="qrcodeCanvas"></canvas>
+  </div>
+</template>
+
+<script>
+import QRCode from 'qrcode'
+
+export default {
+  name: 'QrCodeComponent',
+  props: {
+    text: {
+      type: String,
+      required: true
+    }
+  },
+  watch: {
+    text(newVal, oldVal) {
+      if (oldVal) {
+        this.generateQRCode()
+      }
+    }
+  },
+  mounted() {
+    this.generateQRCode()
+  },
+  methods: {
+    generateQRCode() {
+      // console.log('执行了');
+      const canvas = this.$refs.qrcodeCanvas
+      QRCode.toCanvas(canvas, this.text, error => {
+        if (error) console.error(error)
+      })
+    }
+  }
+}
+</script>

src/views/business/salaryAccount/index.vue

@@ -64,9 +64,9 @@
                                 <div style="width: 90%;">
                                     <el-row>
                                         <el-col :span="12"><el-button style="width:120px;" type="primary"
-                                                @click="ownBalanceRecharge(ele.payAccNo)">余额充值</el-button></el-col>
+                                                @click="ownBalanceRecharge(ele)">余额充值</el-button></el-col>
                                         <el-col :span="12"><el-button style="width:120px;" type="primary"
-                                                @click="ownServiceChargeRecharge(ele.payAccNo)">服务费充值</el-button></el-col>
+                                                @click="ownServiceChargeRecharge(ele)">服务费充值</el-button></el-col>
                                     </el-row>
                                 </div>
                                 <div style="width: 90%;">
@@ -147,9 +147,9 @@
                                 <div style="width: 90%;">
                                     <el-row>
                                         <el-col :span="12"><el-button style="width:120px;" type="primary"
-                                                @click="balanceRecharge(ele.payAccNo)">余额充值</el-button></el-col>
+                                                @click="balanceRecharge(ele)">余额充值</el-button></el-col>
                                         <el-col :span="12"><el-button style="width:120px;" type="primary"
-                                                @click="serviceChargeRecharge(ele.payAccNo)">服务费充值</el-button></el-col>
+                                                @click="serviceChargeRecharge(ele)">服务费充值</el-button></el-col>
                                     </el-row>
                                 </div>
                                 <div style="width: 90%;">
@@ -193,7 +193,7 @@
                 <el-form-item label="收款账户" prop="payeeAccNo">
                     <el-input v-model="aliQRCodeRechargeForm.payeeAccNo" placeholder="请输入收款账号" disabled />
                 </el-form-item>
-                <el-form-item label="付款账户" prop="payerAccNo">
+                <el-form-item label="付款账户" prop="payerAccNo" v-if="aliQRCodeRechargeForm.bindType && 2 === aliQRCodeRechargeForm.bindType">
                     <accSelect :bindType="1" v-model="aliQRCodeRechargeForm.payerAccNo"></accSelect>
                 </el-form-item>
                 <el-form-item label="余额/服务费" prop="rechargeType">
@@ -247,7 +247,7 @@
                 <el-col :span="12">
                     <div class="ownRechargeMain">
                         <img class="ownRechargeImage" src="@/assets/images/zfb.png" alt="">
-                        <el-button class="ownRechargeButton">支付宝充值</el-button>
+                        <el-button class="ownRechargeButton" @click="ownAliQRCodeRechargeOpen = false; aliQRCodeRechargeOpen = true">支付宝充值</el-button>
                     </div>
                 </el-col>
                 <el-col :span="12">
@@ -323,18 +323,36 @@
                 <el-button type="primary" @click="rechargeCoursePanel = false">确 定</el-button>
             </div>
         </el-dialog>
+      <el-dialog title="确认支付" :visible.sync="qrPayPanel.open" width="20%">
+        <div>
+          <span style="font-size: 18px;">1、使用手机支付宝扫码支付;</span>
+          <qr-code-component :text="qrPayPanel.payUrl" />
+        </div>
+        <div style="margin-top: 12px;">
+        <span style="font-size: 18px;">2、通过支付宝官网支付，<a :href="qrPayPanel.payUrl" target="_blank"
+                                                               style="font-size: 20px;color: #409EFF;"><strong>去支付</strong></a>;</span>
+        </div>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="qrPayPanel.open = false">取 消</el-button>
+        </div>
+      </el-dialog>
     </div>
 </template>
 
 <script>
 import AccSelect from '@/views/business/accInfo/accSelect.vue'
-import { listAllAccInfo, getMerchantDetailsAPI, getAccAliInfo } from '@/api/business/accInfo'
+import { listAllAccInfo, getAccAliInfo } from '@/api/business/accInfo'
 import { addAccRecharge } from '@/api/business/accRecharge.js'
+import QrCodeComponent from '@/components/QrCode.vue'
 export default {
     name: 'SalaryAccount',
-    components: { AccSelect },
+    components: { QrCodeComponent, AccSelect },
     data() {
         return {
+          qrPayPanel: {
+            open: false,
+            payUrl: ''
+          },
             // 账户详情
             accDetail: {
                 content_style: {
@@ -388,7 +406,6 @@ export default {
             // 充值参数-自有
             ownAliQRCodeRechargeOpen: false,
             ownRechargeTitle: null,
-            ownRechargeNo: null,
             ownAliQRCodeRechargeForm: {
 
             },
@@ -412,7 +429,7 @@ export default {
         offlineRecharge() {
             this.ownAliQRCodeRechargeOpen = false
             this.$modal.loading('...加载中')
-            getAccAliInfo(this.ownRechargeNo).then(resp => {
+            getAccAliInfo(this.aliQRCodeRechargeForm.payeeAccNo).then(resp => {
                 if (200 === resp.code) {
                     this.offlineRechargeData = resp.data
                     this.rechargeCoursePanel = true
@@ -424,29 +441,34 @@ export default {
                 this.$modal.closeLoading()
             })
         },
-        // 点击服务分充值方法-第三方
+        // 点击服务分充值方法-自有
         ownServiceChargeRecharge(val) {
-            console.log('执行了', val);
-            this.ownRechargeNo = val
+          this.aliQRCodeRechargeForm.rechargeType = 2
+          this.aliQRCodeRechargeForm.payeeAccNo = val.payAccNo
+          this.aliQRCodeRechargeForm.bindType = val.bindType
             this.ownRechargeTitle = '自有服务费充值'
             this.ownAliQRCodeRechargeOpen = true
         },
         // 点击余额充值方法-自有
         ownBalanceRecharge(val) {
-            this.ownRechargeNo = val
+          this.aliQRCodeRechargeForm.rechargeType = 1
+          this.aliQRCodeRechargeForm.payeeAccNo = val.payAccNo
+          this.aliQRCodeRechargeForm.bindType = val.bindType
             this.ownRechargeTitle = '自有余额充值'
             this.ownAliQRCodeRechargeOpen = true
         },
         // 点击余额充值方法-第三方
         balanceRecharge(val) {
             this.aliQRCodeRechargeForm.rechargeType = 1
-            this.aliQRCodeRechargeForm.payeeAccNo = val
+            this.aliQRCodeRechargeForm.payeeAccNo = val.payAccNo
+            this.aliQRCodeRechargeForm.bindType = val.bindType
             this.aliQRCodeRechargeOpen = true
         },
         // 点击服务费充值方法-第三方
         serviceChargeRecharge(val) {
             this.aliQRCodeRechargeForm.rechargeType = 2
-            this.aliQRCodeRechargeForm.payeeAccNo = val
+            this.aliQRCodeRechargeForm.payeeAccNo = val.payAccNo
+            this.aliQRCodeRechargeForm.bindType = val.bindType
             this.aliQRCodeRechargeOpen = true
         },
         // 确认支付按钮
@@ -455,10 +477,16 @@ export default {
                 if (valid) {
                     this.$modal.loading('充值中....')
                     addAccRecharge(this.aliQRCodeRechargeForm).then(res => {
-                        if (res.code == 200) {
                       this.aliQRCodeRechargeOpen = false
+                        if (200 === res.code) {
+                          if (1 === this.aliQRCodeRechargeForm.bindType) {
+                              this.qrPayPanel.payUrl = res.data.msg
+                              this.qrPayPanel.open = true
+                              this.$forceUpdate()
+                          } else {
                             this.$modal.msgSuccess("充值成功！");
                           }
+                        }
                     }).finally(() => {
                         this.$modal.closeLoading()
                     })