补缴-二维码

王飞
1 parent 255542b3
Showing 2 changed files with 43 additions and 9 deletions
package.json
src/views/payback/index.vue
@@ -21,6 +21,7 @@
     "normalize.css": "7.0.0",
     "nprogress": "^0.2.0",
     "path-to-regexp": "2.4.0",
+    "qrcodejs2": "^0.0.2",
     "vue": "2.6.10",
     "vue-router": "3.0.6",
     "vuex": "3.1.0"
@@ -113,12 +113,15 @@
       :visible.sync="dialogVisible"
       width="30%"
       :close-on-click-modal="false">
+      <!--<div>-->
+        <!--<img style="display: block;width: 100%" :src="url" >-->
+
+      <!--</div>-->
       <div>
-        <el-image style="display: block;width: 100%" :src="url" >
-        </el-image>
+        <div id="qrcode"></div>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+        <el-button type="primary" @click="onBack">确 定</el-button>
       </span>
     </el-dialog>
@@ -128,6 +131,7 @@
 <script>
   import {pageQueryArrearRecordByCondition,selectAllAppOrg,personOrderBackWxPay } from '@/api/index';
   import {fen2Yuan,string2Date,inOutStateFormatter,parkingDurationFormatter} from '@/filters/index';
+  import QRCode from 'qrcodejs2'  // 引入qrcode
   export default {
     data() {
       return {
@@ -145,7 +149,7 @@
         ],
         multipleSelection:[],
         dialogVisible:false,
-        url:'http://106.15.186.134:9090/group1/M00/20/F3/rBMAsV0exOmAH91dAAZpQUTBbps512.jpg',
+        url:'http://img.renniting.cn/group1/M00/35/07/rBABHF0fHpOAGw2BAAF_F0CXpIA340.png',
       }
     },
     mounted: function() {
@@ -153,6 +157,25 @@
     },
     methods: {
+      qrcode :function(url) {
+        let qrcode = new QRCode('qrcode', {
+          width: 100,
+          height: 100, // 高度
+          text: url,// 二维码内容
+          // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
+          // background: '#f0f'
+          // foreground: '#ff0'
+        })
+        console.log(qrcode)
+      },
+      clearCode:function(){
+
+        var qrcodes=document.getElementById('qrcode');
+        if(qrcodes != null && qrcodes.innerHTML != '' && qrcodes.innerHTML!= null){
+          qrcodes.innerHTML = '';
+        }
+
+      },
       /**
        *获取所有组织下拉框
        */
@@ -226,6 +249,7 @@
       },
       toBackSubmit:function(){
+        this.clearCode();
         let selects = this.multipleSelection;
         if(selects == null || selects.length < 1){
           this.$message({
@@ -237,7 +261,7 @@
         let orders = [];
         let orgIds = [];
         selects.forEach(item=>{
-          orders.push({orderId:item.orderId,parkId:item.plNo,orderNotPayFee:item.arrearageFee});
+          orders.push({orderId:item.orderId,parkId:item.plNo,orderNotPayFee:item.arrearageFee,sourceType:1});
           orgIds.push(item.orgId);
         });
         if(orders == null || orders.length < 1){
@@ -253,18 +277,22 @@
           payType:2,
           paySrcType:103,
           terminalSource:9,
+          carNumber:'京A11111',
           recordArreaInfos:JSON.stringify(orders)
         };
         // req = JSON.stringify(req);
         //调用后台接口获取二维码信息
         personOrderBackWxPay(req).then(response =>{
           if(response.code=='8888'){
-            console.log(response.data);
-            this.url = response.data;
-
+            let data = response.data;
+            data = JSON.parse(data);
+            let url = data.data.code_url;
+            console.log(url);
+            //this.url = url;
+            this.qrcode(url);
           }else{
             console.log(response);
-            this.url = "http://106.15.186.134:9090/group1/M00/20/F3/rBMAsV0exOmAH91dAAZpQUTBbps512.jpg";
+
           }
         });
@@ -274,6 +302,11 @@
       onSubmit:function() {
         this.pageQueryArrearRecordByCondition();
       },
+      onBack:function() {
+        this.dialogVisible = false;
+        this.pageQueryArrearRecordByCondition();
+        this.clearCode();
+      },
       onCancel:function() {
         this.$message({
           message: 'cancel!',