增加创建二维码功能

package.json

@@ -14,10 +14,11 @@
   "dependencies": {
     "autosize": "^3.0.20",
     "better-scroll": "^1.10.3",
+    "hls-easy-ui": "https://hel.hand-china.com/easyUI/hls-easy-ui.git",
+    "qrcodejs2": "^0.0.2",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1",
-    "vux": "^2.9.2",
-    "hls-easy-ui": "https://hel.hand-china.com/easyUI/hls-easy-ui.git"
+    "vux": "^2.9.2"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",
@@ -62,10 +63,10 @@
     "rimraf": "^2.6.0",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
+    "style-loader": "^0.21.0",
     "stylelint": "^8.0.0",
     "stylelint-config-standard": "^18.2.0",
     "stylelint-webpack-plugin": "^0.10.4",
-    "style-loader": "^0.21.0",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
     "url-loader": "^0.5.8",

src/pages/applications/cmbPolyPay/cmbPolyPayDetail.vue

@@ -60,7 +60,7 @@
 </template>
 
 <script>
-import QRCode from 'qrcode'
+import QRCode from 'qrcodejs2'
 export default {
   data () {
     return {
@@ -83,11 +83,11 @@ export default {
   },
   created () {
     // 当数据拿到之后给checked初始值；
-    var name = this.$route.query.contractno
-    console.log('传值', name)
-    // this.contractno = "L20RJ00313";
-    this.contractno = "R21WS00007"
-    this.getData()
+    var name = this.$route.query.contractno;
+    console.log('传值', name);
+    this.contractno = "L20RJ00313";
+    // this.contractno = name;
+    this.getData();
   },
   beforeMount () {
   },
@@ -105,7 +105,7 @@ export default {
           var dataInfo = JSON.parse(res.result.json)
           // console.log('请求成功', dataInfo.lists)
           vm.ListNum = dataInfo.lists.length
-          // 给checked初始值
+          // 给checked和unchecked初始值
           for (let i = 0; i < vm.ListNum; i++) {
             // console.log('给checked初始值');
             vm.checked[i] = false
@@ -121,7 +121,7 @@ export default {
       })
       // console.log(vm.Lists);
     },
-
+    //点击支付
     pay () {
       let vm = this
       let $input = document.getElementById('payamount')
@@ -165,13 +165,22 @@ export default {
         'recamt_id': this.recamt_id,
       }
       console.log('params', params);
-      var qrcode =  new QRCode(document.getElementById("qrcode"), dataInfo);
       vm.$post(url, params).then(function (res) {
         console.log(res);
+        document.getElementById("qrcode").innerHTML = "";
         if (res.respCode == 'SUCCESS') {
           let dataInfo = res.qrCode;
-          qrcode.clear();
-          qrcode.makeCode(dataInfo);
+          let qrcode = new QRCode("qrcode", 
+            {
+              text: dataInfo,
+              width: 128,
+              height: 128,
+              colorDark : '#000000',
+              colorLight : '#ffffff',
+              correctLevel: QRCode.CorrectLevel.H // 容错等级
+            }
+          );
+          console.log(qrcode);
         } else {
           vm.hlsPopup.showLongCenter(res.respMsg)
         }
@@ -181,10 +190,11 @@ export default {
 
     },
     close () {
-      // 点击关闭二维码页面
+      // 点击关闭二维码页面;
       this.bottomType = 0
+      this.getData();
     },
-
+    //选择账单后把总计金额显示在底部
     onClickHander (index) {
       if (this.Lists[index].select_flag == 'N') {
         return
@@ -196,12 +206,11 @@ export default {
       } else if (this.checked[index] == true) {
         num -= this.Lists[index].recdueamt_total
       }
-      // 保留两位
-      this.total = num
-      document.getElementById('payamount').value = num
-      console.log(index)
+      this.total = num;
+      document.getElementById('payamount').value = num;
+      console.log(index);
     },
-
+    //根据getData时 生成的 unchecked:[] 给checkbox添加样式，true为不可选
     addClass () {
       // console.log("add");
       for (var i = 0; i < this.ListNum; i++) {
@@ -366,9 +375,9 @@ input[type="checkbox"] {
     border-top-right-radius: 18px;
     p {
       font-weight: 700;
-      margin-top: 10px;
-      padding-right: 30px;
-      font-size: 14px;
+      margin-top: 15px;
+      padding-right: 20px;
+      font-size: 16px;
       text-align: center;
     }
     .close {
@@ -395,18 +404,14 @@ input[type="checkbox"] {
       }
     }
     #qrcode{
-      width:160px;
-      height:160px;
-      margin-top:15px;
+      position: absolute;
+      width: 128px;
+      height: 128px;
+      top: 30%;
+      left: 50%;
+      transform: translateX(-50%);
+      // background-color:#72a03c ;
     }
-    // img {
-    //   position: absolute;
-    //   width: 40%;
-    //   height: 55%;
-    //   top: 20%;
-    //   left: 50%;
-    //   transform: translateX(-50%);
-    // }
     // .load{
     //   // ../../../assets\image
     //   background-image: url(../../../assets\image);
@@ -423,7 +428,6 @@ input[type="checkbox"] {
 }
 .payPagebox {
   position: absolute;
-  z-index: 9;
   width: 80%;
   height: 40%;
   top: 25%;

yarn.lock

@@ -6591,6 +6591,11 @@ qr.js@0.0.0:
   resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f"
   integrity sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8=
 
+qrcodejs2@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/qrcodejs2/-/qrcodejs2-0.0.2.tgz#465afe5e39f19facecb932c11f7a186109146ae1"
+  integrity sha1-Rlr+Xjnxn6zsuTLBH3oYYQkUauE=
+
 qs@6.7.0:
   version "6.7.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"