5月6日扫码支付页面UI优化

src/pages/applications/cmbPolyPay/cmbPolyPay.vue

 <template>
   <div class="" style="padding: 20px; height: 100%">
     <div class="title" style="height:5%; width:100%">
-      <div style="
-              width: 100%;
-              height:100%;
-              text-align: center;
-              border-radius: 5px;
-              padding-top: 7px;
-              background-color: #ddd;
-              font-size: 16px;
-              font-weight: 700;
-              color: #11111187;
-            ">
-        合同信息
-      </div>
+      <div>合同信息</div>
     </div>
     <div class="search">
       <div class="searchInput">
@@ -23,7 +11,7 @@
     </div>
     <div v-if="ListNum != 0" class="billList">
       <article v-for="(item, index) in massages" :key="item.id" class="article" style="margin-top:10px">
-        <img slot="left-icon" src="../../../assets\electronicContract\contract-list.png" class="icon">
+        <img slot="left-icon" src="../../../assets\electronicContract\contract-icon.png" class="icon">
         <div slot="name" class="text" style="width: 80%;font-size: 12px;">
           <div class="cont-type" style="color: #000;font-size: 14px;font-weight:700">承租人：{{ item.customername }}
           </div>
@@ -79,7 +67,7 @@ export default {
   methods: {
     searchBill (openId) {
       let vm = this;
-      let value = vm.searchCondition.input
+      let value = vm.searchCondition.input;
       let url = process.env.basePath + 'getCmbConList';
       console.log("请求数据")
       // http://sign.hitachics.com/core/r/api?sysName=HCL_UPLOAD_FILE&apiName=getCmbConList
@@ -119,6 +107,20 @@ export default {
 </script>
 
 <style lang="less" type="text/less" scoped>
+.title{
+  border-radius: 5px;
+  background-color: #ddd;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  div{
+    height: 20px;
+    line-height: 20px;
+    font-size: 16px;
+    font-weight:bolder;
+    color: #11111187; 
+  }     
+}
 .search {
   display: flex;
   //height: 50px;
@@ -182,9 +184,9 @@ export default {
         width: 100%;
         word-wrap:break-word;
       }
-      :nth-child(1){
-        width: 200px;
-      }
+      // :nth-child(1){
+      //   width: 200px;
+      // }
     }
     .icon {
       //左侧图标
@@ -205,13 +207,14 @@ export default {
     }
     button {
       position: absolute;
-      top: 12px;
-      right: 5px;
+      bottom: 12px;
+      right: 15px;
       width: 75px;
       height: 25px;
       font-size: 14px;
-      background-color: #d1d1d1;
-      border: 2px solid #dcd0d0;
+      color: #fff;
+      background-color: rgb(0, 200, 0);
+      border: 2px solid rgb(0, 200, 0);
       border-radius: 5px;
     };
     .more {

src/pages/applications/cmbPolyPay/cmbPolyPayDetail.vue

@@ -7,16 +7,16 @@
           <li><span>期数：</span>{{ item.times }}</li>
           <li><span>还款日期：</span>{{ item.recduedt_char }}</li>
           <li><span>租金金额：</span>{{ item.recdueamt }}</li>
-          <li><span>逾期金额：</span>{{ item.ovducmpsamt }}</li>
-          <li><span>剩余应还金额：</span>{{ item.recdueamt_total }}</li>
-          <li><span>现金流项目：</span>{{ item.characterid_n }}</li>
+          <li><span>违约金金额：</span>{{ item.ovducmpsamt }}</li>
+          <li><span>剩余应还金额：</span>{{ item.recdueamt_total_str }}</li>
+          <li><span>收款类别：</span>{{ item.characterid_n }}</li>
         </ul>
       </li>
     </ul>
     <!-- 总计还款金额 -->
     <div v-if="bottomType == 0" class="bottomBox">
       <div class="total">
-        <span>合计还款金额：{{ total }}</span>
+        <div class="counter"><span>合计还款金额：{{ total }}</span></div>
         <input id="payamount" type="number" placeholder="请输入支付金额" required oninvalid="setCustomValidity('请输入支付金额！');"
           oninput="setCustomValidity('');">
       </div>
@@ -88,10 +88,11 @@ export default {
           // 给checked和unchecked初始值
           for (let i = 0; i < vm.ListNum; i++) {
             // console.log('给checked初始值');
-            vm.checked[i] = false
-            vm.unchecked[i] = dataInfo.lists[i].select_flag == 'N'
+            vm.checked[i] = false;
+            vm.unchecked[i] = dataInfo.lists[i].select_flag === 'N';
           }
-          vm.Lists = dataInfo.lists
+          vm.Lists = dataInfo.lists;
+          console.log(vm.Lists);
         } else {
           vm.hlsPopup.showLongCenter('获取合同还款计划失败，请联系管理员')
         }
@@ -220,9 +221,6 @@ export default {
           console.log(res.respMsg);
         }
       });
-    },
-    showPaypage () {
-
     },
     close () {
       // 点击关闭二维码页面;
@@ -234,13 +232,15 @@ export default {
       if (this.Lists[index].select_flag == 'N') {
         return
       }
-      var num = this.total
+      var num = this.total;
       // 计算
       if (this.checked[index] == false) {
-        num += this.Lists[index].recdueamt_total
+        num += this.Lists[index].recdueamt_total;
       } else if (this.checked[index] == true) {
-        num -= this.Lists[index].recdueamt_total
+        num -= this.Lists[index].recdueamt_total;
       }
+      num = Number(num.toFixed(2));
+      // console.log(Number(num.toFixed(2)));
       this.total = num;
       document.getElementById('payamount').value = num;
       console.log(index);
@@ -252,7 +252,7 @@ export default {
         let $input = document.getElementById('box').children[i].children[0];
         let $ul = document.getElementById('box').children[i].children[1];
         // console.log($input.className);
-        if (this.unchecked[i] == true) {
+        if (this.unchecked[i] === true) {
           $input.className = 'uncheck-box';
           $ul.className = 'uncheck-ul';
         } else {
@@ -285,7 +285,7 @@ export default {
   ul {
     margin-right: 3%;
     width: 87%;
-    border: 2px solid #b08f8f;
+    border: 2px solid #afafaf;
     border-radius: 8px;
     li {
       padding-left: 8px;
@@ -298,7 +298,7 @@ export default {
     }
   }
   .uncheck-ul{
-    background-color: #d5d5d5;
+    background-color: #ffffff;
   }
   .check-ul{
     background-color: #ffffff;
@@ -336,8 +336,8 @@ input[type="checkbox"] {
 }
 .uncheck-box[type="checkbox"]::after {
   position: absolute;
-  background-color: #d5d5d5;
-  border: 2px solid #8e8e8e;
+  background-color: #d9d9d9;
+  border: 2px solid #bfbfbf;
   width: 18px;
   height: 18px;
   display: inline-block;
@@ -354,25 +354,29 @@ input[type="checkbox"] {
   background-color: #fffffe;
   border-top: 2px solid #7aae3b;
   .total {
-    font-size: 12px;
+    font-size: 14px;
+    font-weight: bolder;
     color: rgb(180, 0, 0);
-    width: 80%;
-    height: 20%;
+    width: 90%;
+    // height: 20%;
     margin: 20px auto;
     display: flex;
-    justify-content: space-between;
-    span {
-      height: 25px;
-      line-height: 25px;
-      text-align: center;
+    justify-content: space-around;
+    align-items: flex-end;
+    .counter{
+      vertical-align: bottom;
+      position: relative;
+      bottom: 0px;
     }
     input {
+      font-size: 12px;
       position: relative;
       right: 0px;
-      width: 50%;
-      border: 1px solid #dab2b2;
+      width: 36%;
+      border: 1px solid #a69a9a;
       border-radius: 5px;
-      padding-left: 6%;
+      padding-left: 5%;
+      padding-right: 3%;
     }
   }
   button {
@@ -382,8 +386,8 @@ input[type="checkbox"] {
     left: 50%;
     transform: translateX(-50%);
     color: #ffffff;
-    border-radius: 5px;
-    border: 1px solid #dab2b2;
+    border-radius: 8px;
+    border: 1px solid rgb(0, 200, 0);
     background-color: rgb(0, 200, 0);
   }
 }