From 1b27ffe11072674c6afb912a882c66df76c6c4a1 Mon Sep 17 00:00:00 2001
From: Liuxin <1360643156@qq.com>
Date: Mon, 11 Nov 2019 17:15:08 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=87=E7=BA=A7=E9=A6=96=E4=BB=98=E6=AC=BE?=
 =?UTF-8?q?=E6=94=AF=E4=BB=98=E4=BB=A5=E5=8F=8A=E6=AC=BE=E9=A1=B9=E6=94=AF?=
 =?UTF-8?q?=E4=BB=98=EF=BC=8C=E4=BF=AE=E5=A4=8Dbug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/contractRepayment/refund.vue        |   1 +
 src/pages/contractRepayment/repay-details.vue |   2 +-
 src/pages/contractRepayment/repay-plan.vue    |   1 -
 src/pages/pay/firstPay/contract-record.vue    |   7 +-
 src/pages/pay/firstPay/first-pay.vue          |  10 +-
 src/pages/pay/firstPay/pay-entry.vue          | 338 +++++++++-----
 src/pages/pay/payment/new-list.vue            |   4 +-
 src/pages/pay/payment/pay-entry.vue           | 439 +++++++++++++++---
 src/pages/videoSign/video-list.vue            |   4 +-
 9 files changed, 612 insertions(+), 194 deletions(-)

diff --git a/src/pages/contractRepayment/refund.vue b/src/pages/contractRepayment/refund.vue
index b6d69469..8172e465 100644
--- a/src/pages/contractRepayment/refund.vue
+++ b/src/pages/contractRepayment/refund.vue
@@ -107,6 +107,7 @@ export default {
   },
   beforeRouteEnter (to, from, next) {
     next(vm => {
+      vm.show = false
       vm.getRefund()
     })
   },
diff --git a/src/pages/contractRepayment/repay-details.vue b/src/pages/contractRepayment/repay-details.vue
index 51b00401..0e0d6eab 100644
--- a/src/pages/contractRepayment/repay-details.vue
+++ b/src/pages/contractRepayment/repay-details.vue
@@ -28,7 +28,7 @@
         </item>
         <item>
           <div slot="name">合同金额</div>
-          <div slot="content">{{ detailInfo.total_price }}</div>
+          <div slot="content">{{ detailInfo.total_price|currency }}</div>
         </item>
         <item>
           <div slot="name">商务政策</div>
diff --git a/src/pages/contractRepayment/repay-plan.vue b/src/pages/contractRepayment/repay-plan.vue
index 8ac3e7a8..21ce0e17 100644
--- a/src/pages/contractRepayment/repay-plan.vue
+++ b/src/pages/contractRepayment/repay-plan.vue
@@ -27,7 +27,6 @@
         </div>
       </div>
     </h-content>
-
   </h-view>
 </template>
 
diff --git a/src/pages/pay/firstPay/contract-record.vue b/src/pages/pay/firstPay/contract-record.vue
index 0f687515..b8240bc3 100644
--- a/src/pages/pay/firstPay/contract-record.vue
+++ b/src/pages/pay/firstPay/contract-record.vue
@@ -34,7 +34,7 @@
                 <p>本次还款</p>
               </div>
               <div class="item-right">
-                <p>{{ e.due_amount|currency }}</p>
+                <p>{{ parseFloat(e.due_amount).toFixed(2)|currency }}</p>
                 <p>{{ e.received_amount|currency }}</p>
                 <input v-model="e.amount" type="text" placeholder="请输入还款金额" >
               </div>
@@ -102,7 +102,7 @@ export default {
   },
   beforeRouteEnter (to, from, next) {
     next(vm => {
-      // vm.getDetail()
+      vm.getDetail()
     })
   },
 
@@ -312,7 +312,8 @@ export default {
               border: none;
               border-bottom: 1px solid #1d3fff;
               font-size: 13px;
-              text-align: center;
+              text-align: right;
+              float: right;
             }
             input::placeholder {
               font-family: PingFangSC-Regular;
diff --git a/src/pages/pay/firstPay/first-pay.vue b/src/pages/pay/firstPay/first-pay.vue
index 3d199dd9..e689b259 100644
--- a/src/pages/pay/firstPay/first-pay.vue
+++ b/src/pages/pay/firstPay/first-pay.vue
@@ -13,7 +13,7 @@
             <div class="title">当前应付</div>
             <div class="data">
               <span>¥</span>
-              {{ money |currency }}
+              {{ moneyToFix |currency }}
             </div>
           </div>
         </div>
@@ -27,7 +27,7 @@
             </div>
             <div class="pay-input">
               <span>应还首付款</span>
-              <input v-model="money" type="text" placeholder="请输入支付金额" >
+              <input v-model="moneyToFix" type="text" placeholder="请输入支付金额" >
               <div @click="createOrder">
                 <img src="@/assets/payment/into.png" >
               </div>
@@ -73,7 +73,11 @@ export default {
       }
     })
   },
-  computed: {},
+  computed: {
+    moneyToFix () {
+      return parseFloat(this.money).toFixed(2)
+    },
+  },
   watch: {},
   methods: {
     getDownPayment () {
diff --git a/src/pages/pay/firstPay/pay-entry.vue b/src/pages/pay/firstPay/pay-entry.vue
index 0d7a8a80..72d49bf8 100644
--- a/src/pages/pay/firstPay/pay-entry.vue
+++ b/src/pages/pay/firstPay/pay-entry.vue
@@ -21,7 +21,7 @@
               v-for="(item,index) in nongBank"
               :proportion="[7,1,1]"
               :key="item.bank_account_num"
-              @click.native="isSelect(`nong${index}`)"
+              @click.native="isSelect(`nong${index}`);ischeck(item)"
             >
               <div slot="name" style="flex=3">
                 <img :src="selectImg(item)" alt class="icon" >
@@ -37,7 +37,7 @@
                 <img v-show="select !== `nong${index}`" src="@/assets/payment/unselect.png" alt >
               </section>
             </item>
-            <item :proportion="[7,1,1]" @click.native="isSelect('one')">
+            <item :proportion="[7,1,1]" @click.native="isSelect('one');ischeck('one')">
               <div slot="name">
                 <img src="@/assets/payment/alipay.png" alt class="icon1" > 支付宝
               </div>
@@ -46,7 +46,7 @@
                 <img v-show="select !== 'one'" src="@/assets/payment/unselect.png" alt >
               </section>
             </item>
-            <item :proportion="[7,1,1]" @click.native="isSelect('two')">
+            <item :proportion="[7,1,1]" @click.native="isSelect('two');ischeck('two')">
               <div slot="name">
                 <img src="@/assets/payment/wx.png" alt class="icon2" > 微信
               </div>
@@ -59,7 +59,7 @@
               v-for="(item,index) in newList"
               :proportion="[7,1,1]"
               :key="index"
-              @click.native="isSelect(`three${index}`)"
+              @click.native="isSelect(`three${index}`);ischeck(item)"
             >
               <div slot="name" style="flex=3">
                 <img :src="selectImg(item)" alt class="icon" >
@@ -77,79 +77,86 @@
             </item>
           </list-item>
         </div>
-    </div></transition>
+      </div>
+    </transition>
     <transition name="trans">
-      <div v-show="confirm" class="modal-show-bank">
+      <div v-show="confirm" class="modal-show-confirm">
         <div class="down">
           <div class="top">
-            <img src="@/assets/payment/back.png" @click="show=false" >
+            <img src="@/assets/payment/back.png" @click="confirm=false" >
             <span>确认付款</span>
           </div>
           <div class="info">
             <div class="info-item">
               <span>还款金额</span>
-              <span>¥50600.00</span>
+              <span>¥{{ money |currency }}</span>
             </div>
             <div class="interest">
-              <span>本次交易收取0.03%服务费</span>
+              <span>本次交易收取{{ rate }}%服务费</span>
             </div>
             <div class="info-item">
               <span>服务费</span>
-              <span>+¥15.00</span>
-            </div>
-            <div class="info-item">
-              <span>合同编号</span>
-              <span>EF12345678</span>
+              <span>+¥{{ serviceCharge |currency }}</span>
             </div>
             <div class="info-item" @click="show=true">
               <span>付款方式</span>
-              <span v-if="flag"><img src="@/assets/payment/ly.png"><span>农业银行</span><img class="arrow" src="@/assets/payment/go.png"></span>
-              <span v-if="!flag"><img src="@/assets/payment/alipay.png"><span>支付宝</span><img class="arrow" src="@/assets/payment/go.png"></span>
+              <span>
+                <img :src="checkType.img" >
+                <span>{{ checkType.bank_full_name }}</span>
+                <span v-if="sectctNong">({{ selectLast(checkType) }})</span>
+                <img class="arrow" src="@/assets/payment/go.png" >
+              </span>
             </div>
           </div>
+          <bottom-tab>
+            <tab-button class="foot" @click.native="pay">立即支付</tab-button>
+          </bottom-tab>
         </div>
-    </div></transition>
+      </div>
+    </transition>
     <h-header :proportion="[5,1,1]" class="bar-custom">
       <div slot="left" class="h-header-btn">
-        <img src="@/assets/userBind/arrow.png" @click="$routeGo()">
+        <img src="@/assets/userBind/arrow.png" @click="$routeGo()" >
         <span>支付中心</span>
       </div>
     </h-header>
     <h-content class="entry-content">
       <div class="amount">
         <p>{{ userName }}</p>
-        <div>¥{{ money |currency }}</div>
+        <div>¥{{ sumMoney |currency }}</div>
       </div>
       <div class="info">
         <div class="info-item">
           <span>还款金额</span>
-          <span>¥50600.00</span>
+          <span>¥{{ parseFloat(money).toFixed(2) |currency }}</span>
         </div>
         <div class="interest">
-          <span>本次交易收取0.03%服务费</span>
+          <span>本次交易收取{{ rate }}%服务费</span>
         </div>
         <div class="info-item">
           <span>服务费</span>
-          <span>+¥15.00</span>
-        </div>
-        <div class="info-item">
-          <span>合同编号</span>
-          <span>EF12345678</span>
+          <span>+¥{{ serviceCharge }}</span>
         </div>
         <div class="info-item" @click="show=true">
           <span>付款方式</span>
-          <span v-if="flag"><img src="@/assets/payment/ly.png"><span>农业银行</span><img class="arrow" src="@/assets/payment/go.png"></span>
-          <span v-if="!flag"><img src="@/assets/payment/alipay.png"><span>支付宝</span><img class="arrow" src="@/assets/payment/go.png"></span>
+          <span>
+            <img :src="checkType.img" >
+            <span>{{ checkType.bank_full_name }}</span>
+            <span v-if="sectctNong">({{ selectLast(checkType) }})</span>
+            <img class="arrow" src="@/assets/payment/go.png" >
+          </span>
         </div>
       </div>
     </h-content>
     <bottom-tab>
-      <tab-button class="foot" @click.native="pay">确认支付</tab-button>
+      <tab-button class="foot" @click.native="affirm">确认支付</tab-button>
     </bottom-tab>
   </h-view>
 </template>
 
 <script>
+import zfb from '@/assets/payment/alipay.png'
+import wx from '@/assets/payment/wx.png'
 import js from '@/assets/payment/js.png'
 import ny from '@/assets/payment/ly.png'
 import pf from '@/assets/payment/pf.png'
@@ -171,9 +178,15 @@ export default {
   data () {
     return {
       money: '',
+      rate: 0.03,
       select: 'three0',
       name: '',
-      checkType: {},
+      sectctNong: false,
+      checkType: {
+        img: '',
+        bank_full_name: '',
+        bank_account_num: '',
+      },
       confirm: false,
       show: false,
       downNum: false,
@@ -185,6 +198,14 @@ export default {
     }
   },
   computed: {
+    serviceCharge () {
+      return (this.money * (this.rate / 100)).toFixed(2)
+    },
+    sumMoney () {
+      return (parseFloat(this.serviceCharge) + parseFloat(this.money)).toFixed(
+        2
+      )
+    },
     newList () {
       let vm = this
       vm.nongBank = []
@@ -199,19 +220,24 @@ export default {
       })
       if (vm.flag) {
         vm.select = 'nong0'
+        vm.checkType.bank_full_name = '农业银行'
+        vm.checkType.img = ny
+        vm.checkType.bank_account_num = this.nongBank[0].bank_account_num
+        vm.sectctNong = true
       } else {
         vm.select = 'one'
-      }
-      if (vm.nongBank.length !== 0) {
-        vm.checkType = {...vm.nongBank[0]}
+        vm.checkType.bank_full_name = '支付宝'
+        vm.checkType.img = zfb
+        vm.sectctNong = false
       }
       return notNong
     },
-
   },
-  watch: {},
   beforeRouteEnter (to, from, next) {
     next(vm => {
+      vm.confirm = false
+      vm.show = false
+      vm.downNum = false
       vm.name = from.name
       vm.getType()
       vm.nongBank = []
@@ -263,6 +289,23 @@ export default {
     isSelect (way) {
       this.select = way
     },
+    ischeck (way) {
+      if (way === 'one') {
+        this.checkType.bank_full_name = '支付宝'
+        this.checkType.img = zfb
+        this.sectctNong = false
+      } else if (way === 'two') {
+        this.checkType.bank_full_name = '微信'
+        this.checkType.img = wx
+        this.sectctNong = false
+      } else {
+        this.checkType.bank_full_name = way.bank_full_name
+        this.checkType.bank_account_num = way.bank_account_num
+        this.checkType.img = this.selectImg(way)
+        this.sectctNong = true
+      }
+      this.show = false
+    },
     pay () {
       let vm = this
       hlsPopup.showLoading('请稍候')
@@ -275,6 +318,9 @@ export default {
         }
       }, 2000)
     },
+    affirm () {
+      this.confirm = true
+    },
     changePage () {
       this.$router.push({
         name: 'Success',
@@ -314,7 +360,7 @@ export default {
   .trans-leave-active {
     opacity: 0;
   }
-   .modal-show-bank {
+  .modal-show-confirm {
     width: 100%;
     height: 100%;
     position: absolute;
@@ -324,80 +370,123 @@ export default {
     justify-content: center;
     align-items: center;
     .down {
-     height:466px;
-     width: 100%;
-     position: absolute;
-     bottom: 0px;
-     background-color: #fff;
-     border-radius: 12px 12px 0 0;
-     overflow: scroll;
-     .top{
-       position: fixed;
-       left:24px;
-       width:330px;
-       height:54px;
-      display: flex;
-      z-index: 999;
-      align-items: center;
+      height: 466px;
+      width: 100%;
+      position: absolute;
+      bottom: 0px;
       background-color: #fff;
-      img{
-        width:20px;
+      border-radius: 12px 12px 0 0;
+      overflow: scroll;
+      .top {
+        position: fixed;
+        left: 24px;
+        width: 330px;
+        height: 54px;
+        display: flex;
+        z-index: 999;
+        align-items: center;
+        background-color: #fff;
+        img {
+          width: 20px;
+        }
+        span {
+          margin-left: 38%;
+          font-family: PingFangSC-Semibold;
+          font-size: 16px;
+          color: #656464;
+          letter-spacing: 0.49px;
+          text-align: center;
+        }
       }
-      span{
-        margin-left:38%;
-        font-family: PingFangSC-Semibold;
-font-size: 16px;
-color: #656464;
-letter-spacing: 0.49px;
-text-align: center;
+      .info {
+        margin-top: 60px;
       }
-     }
-       .pay-way {
-         width:350px;
-      margin:0 auto;
-         margin-top:54px;
-         background-color: #fff;
-      .hls-item {
-        padding-left: 12px;
-        .add-name {
-          flex: 3;
-          line-height: 56px;
-          font-family: PingFangSC-Regular;
-          font-size: 14px;
+    }
+  }
+  .modal-show-bank {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    display: flex;
+    z-index: 910;
+    background-color: rgba(56, 63, 69, 0.3);
+    justify-content: center;
+    align-items: center;
+    .down {
+      height: 466px;
+      width: 100%;
+      position: absolute;
+      bottom: 0px;
+      background-color: #fff;
+      border-radius: 12px 12px 0 0;
+      overflow: scroll;
+      .top {
+        position: fixed;
+        left: 24px;
+        width: 330px;
+        height: 54px;
+        display: flex;
+        z-index: 999;
+        align-items: center;
+        background-color: #fff;
+        img {
+          width: 20px;
+        }
+        span {
+          margin-left: 38%;
+          font-family: PingFangSC-Semibold;
+          font-size: 16px;
           color: #656464;
+          letter-spacing: 0.49px;
+          text-align: center;
+        }
+      }
+      .pay-way {
+        width: 350px;
+        margin: 0 auto;
+        margin-top: 54px;
+        background-color: #fff;
+        .hls-item {
+          padding-left: 12px;
+          .add-name {
+            flex: 3;
+            line-height: 56px;
+            font-family: PingFangSC-Regular;
+            font-size: 14px;
+            color: #656464;
 
-          .icon1 {
-            width: 34px;
-            height: 34px;
-            display: block;
-            float: left;
-            margin-top: 10px;
-            margin-right: 5px;
+            .icon1 {
+              width: 34px;
+              height: 34px;
+              display: block;
+              float: left;
+              margin-top: 10px;
+              margin-right: 5px;
+            }
+            .icon2 {
+              width: 32px;
+              display: block;
+              float: left;
+              margin-top: 12px;
+              margin-right: 8px;
+            }
+            .icon {
+              width: 30px;
+              display: block;
+              float: left;
+              position: relative;
+              margin: 12px 8px 0 3px;
+            }
           }
-          .icon2 {
-            width: 32px;
-            display: block;
-            float: left;
-            margin-top: 12px;
-            margin-right: 8px;
-          }
-          .icon {
-            width: 30px;
-            display: block;
-            float: left;
-            position: relative;
-            margin: 12px 8px 0 3px;
-          }
-        }
 
-        .add-content {
-          img {
-            width: 21px;
+          .add-content {
+            img {
+              width: 21px;
+            }
           }
         }
       }
     }
-    }
   }
   .info {
     width: 100%;
@@ -411,12 +500,12 @@ text-align: center;
       display: flex;
       justify-content: space-between;
       align-items: center;
-      .arrow{
-        margin-right:-10px;
+      .arrow {
+        margin-right: -10px;
       }
-      img{
-        width:17px;
-        margin-right:10px;
+      img {
+        width: 17px;
+        margin-right: 10px;
       }
       span:first-child {
         font-family: PingFangSC-Regular;
@@ -435,31 +524,31 @@ text-align: center;
         align-items: center;
       }
     }
-    .info-item:nth-of-type(1)::after{
-      content:"";
-      display:block;
+    .info-item:nth-of-type(1)::after {
+      content: "";
+      display: block;
       position: absolute;
-      right:20px;
-      top:25px;
+      right: 20px;
+      top: 25px;
       border: 10px solid #fff;
-      border-left-color:transparent;
-      border-right-color:transparent;
-      border-top-color:transparent;
-      border-bottom-color:rgba(75,74,75,0.10);
+      border-left-color: transparent;
+      border-right-color: transparent;
+      border-top-color: transparent;
+      border-bottom-color: rgba(75, 74, 75, 0.1);
     }
-    .info-item:nth-of-type(1){
+    .info-item:nth-of-type(1) {
       border-top: 1px solid #d9dbdf;
     }
-    .interest{
-      width:100%;
-      height:37px;
+    .interest {
+      width: 100%;
+      height: 37px;
       line-height: 37px;
-font-family: PingFangSC-Medium;
-font-size: 11px;
-color: #4B4A4B;
-letter-spacing: 0;
-text-indent:215px;
-      background-color:rgba(75,74,75,0.10);
+      font-family: PingFangSC-Medium;
+      font-size: 11px;
+      color: #4b4a4b;
+      letter-spacing: 0;
+      text-indent: 215px;
+      background-color: rgba(75, 74, 75, 0.1);
     }
   }
   .modal-show {
@@ -467,7 +556,7 @@ text-indent:215px;
     height: 100%;
     position: absolute;
     display: flex;
-    z-index: 900;
+    z-index: 999;
     background-color: rgba(56, 63, 69, 0.3);
     justify-content: center;
     align-items: center;
@@ -541,7 +630,6 @@ text-indent:215px;
         margin-top: 10px;
       }
     }
-
   }
   .foot {
     background-color: @headerColor;
diff --git a/src/pages/pay/payment/new-list.vue b/src/pages/pay/payment/new-list.vue
index 6a325d69..1baff30a 100644
--- a/src/pages/pay/payment/new-list.vue
+++ b/src/pages/pay/payment/new-list.vue
@@ -39,7 +39,7 @@
               <img src="@/assets/payment/first-pay.png" >逾期利息
             </div>
             <div class="pay-input">
-              <span>应还利息</span>
+              <span>逾期利息</span>
               <input v-model="liquidated_damages" readonly type="text" placeholder="请输入支付金额" >
             </div>
           </div>
@@ -86,7 +86,7 @@ export default {
   },
   computed: {},
   watch: {
-    'pay_rent': {
+    'liquidated_damages': {
       handler () {
         this.money = parseFloat(parseFloat(this.pay_rent) + parseFloat(this.liquidated_damages))
       },
diff --git a/src/pages/pay/payment/pay-entry.vue b/src/pages/pay/payment/pay-entry.vue
index 4c6b361e..0b91634b 100644
--- a/src/pages/pay/payment/pay-entry.vue
+++ b/src/pages/pay/payment/pay-entry.vue
@@ -9,6 +9,112 @@
         </div>
       </div>
     </transition>
+    <transition name="trans">
+      <div v-show="show" class="modal-show-bank">
+        <transition name="show">
+          <div class="down">
+            <div class="top">
+              <img src="@/assets/payment/back.png" @click="show=false" >
+              <span>支付方式</span>
+            </div>
+            <list-item :item-height="56" class="pay-way">
+              <item
+                v-for="(item,index) in nongBank"
+                :proportion="[7,1,1]"
+                :key="item.bank_account_num"
+                @click.native="isSelect(`nong${index}`);ischeck(item)"
+              >
+                <div slot="name" style="flex=3">
+                  <img :src="selectImg(item)" alt class="icon" >
+                  {{ item.bank_full_name }}({{ selectLast(item) }})
+                  <img
+                    v-show="item.recommand"
+                    class="push"
+                    src="@/assets/payment/push.png"
+                  >
+                </div>
+                <section slot="content">
+                  <img v-show="select === `nong${index}`" src="@/assets/payment/select.png" alt >
+                  <img v-show="select !== `nong${index}`" src="@/assets/payment/unselect.png" alt >
+                </section>
+              </item>
+              <item :proportion="[7,1,1]" @click.native="isSelect('one');ischeck('one')">
+                <div slot="name">
+                  <img src="@/assets/payment/alipay.png" alt class="icon1" > 支付宝
+                </div>
+                <section slot="content">
+                  <img v-show="select === 'one'" src="@/assets/payment/select.png" alt >
+                  <img v-show="select !== 'one'" src="@/assets/payment/unselect.png" alt >
+                </section>
+              </item>
+              <item :proportion="[7,1,1]" @click.native="isSelect('two');ischeck('two')">
+                <div slot="name">
+                  <img src="@/assets/payment/wx.png" alt class="icon2" > 微信
+                </div>
+                <section slot="content">
+                  <img v-show="select === 'two'" src="@/assets/payment/select.png" alt >
+                  <img v-show="select !== 'two'" src="@/assets/payment/unselect.png" alt >
+                </section>
+              </item>
+              <item
+                v-for="(item,index) in newList"
+                :proportion="[7,1,1]"
+                :key="index"
+                @click.native="isSelect(`three${index}`);ischeck(item)"
+              >
+                <div slot="name" style="flex=3">
+                  <img :src="selectImg(item)" alt class="icon" >
+                  {{ item.bank_full_name }}({{ selectLast(item) }})
+                  <img
+                    v-show="item.recommand"
+                    class="push"
+                    src="@/assets/payment/push.png"
+                  >
+                </div>
+                <section slot="content">
+                  <img v-show="select === `three${index}`" src="@/assets/payment/select.png" alt >
+                  <img v-show="select !== `three${index}`" src="@/assets/payment/unselect.png" alt >
+                </section>
+              </item>
+            </list-item>
+          </div>
+      </transition></div>
+    </transition>
+    <transition name="trans">
+      <div v-show="confirm" class="modal-show-confirm">
+        <div class="down">
+          <div class="top">
+            <img src="@/assets/payment/back.png" @click="confirm=false" >
+            <span>确认付款</span>
+          </div>
+          <div class="info">
+            <div class="info-item">
+              <span>还款金额</span>
+              <span>¥{{ money |currency }}</span>
+            </div>
+            <div class="interest">
+              <span>本次交易收取{{ rate }}%服务费</span>
+            </div>
+            <div class="info-item">
+              <span>服务费</span>
+              <span>+¥{{ serviceCharge |currency }}</span>
+            </div>
+            <div class="info-item" @click="show=true">
+              <span>付款方式</span>
+              <span>
+                <img :src="checkType.img" >
+                <span>{{ checkType.bank_full_name }}</span>
+                <span v-if="sectctNong">({{ selectLast(checkType) }})</span>
+                <img class="arrow" src="@/assets/payment/go.png" >
+              </span>
+            </div>
+          </div>
+          <bottom-tab>
+            <tab-button class="footer" @click.native="pay">立即支付</tab-button>
+          </bottom-tab>
+        </div>
+      </div>
+    </transition>
     <h-header :proportion="[5,1,1]" class="bar-custom">
       <div slot="left" class="h-header-btn">
         <img src="@/assets/userBind/arrow.png" @click="changePage" >
@@ -18,70 +124,41 @@
 
     <h-content class="entry-content">
       <div class="amount">
-        <p>交易金额</p>
-        <div>¥{{ money |currency }}</div>
+        <p>{{ userName }}</p>
+        <div>¥{{ sumMoney |currency }}</div>
+      </div>
+      <div class="info">
+        <div class="info-item">
+          <span>还款金额</span>
+          <span>¥{{ parseFloat(money).toFixed(2) |currency }}</span>
+        </div>
+        <div class="interest">
+          <span>本次交易收取{{ rate }}%服务费</span>
+        </div>
+        <div class="info-item">
+          <span>服务费</span>
+          <span>+¥{{ serviceCharge }}</span>
+        </div>
+        <div class="info-item" @click="show=true">
+          <span>付款方式</span>
+          <span>
+            <img :src="checkType.img" >
+            <span>{{ checkType.bank_full_name }}</span>
+            <span v-if="sectctNong">({{ selectLast(checkType) }})</span>
+            <img class="arrow" src="@/assets/payment/go.png" >
+          </span>
+        </div>
       </div>
-      <list-item :item-height="56" class="pay-way">
-        <item
-          v-for="(item,index) in nongBank"
-          :proportion="[7,1,1]"
-          :key="item.bank_account_num"
-          @click.native="isSelect(`nong${index}`)"
-        >
-          <div slot="name" style="flex=3">
-            <img :src="selectImg(item)" alt class="icon" >
-            {{ item.bank_full_name }}({{ selectLast(item) }})
-            <img v-show="item.recommand" class="push" src="@/assets/payment/push.png" >
-          </div>
-          <section slot="content">
-            <img v-show="select === `nong${index}`" src="@/assets/payment/select.png" alt >
-            <img v-show="select !== `nong${index}`" src="@/assets/payment/unselect.png" alt >
-          </section>
-        </item>
-        <item :proportion="[7,1,1]" @click.native="isSelect('one')">
-          <div slot="name">
-            <img src="@/assets/payment/alipay.png" alt class="icon1" > 支付宝
-          </div>
-          <section slot="content">
-            <img v-show="select === 'one'" src="@/assets/payment/select.png" alt >
-            <img v-show="select !== 'one'" src="@/assets/payment/unselect.png" alt >
-          </section>
-        </item>
-        <item :proportion="[7,1,1]" @click.native="isSelect('two')">
-          <div slot="name">
-            <img src="@/assets/payment/wx.png" alt class="icon2" > 微信
-          </div>
-          <section slot="content">
-            <img v-show="select === 'two'" src="@/assets/payment/select.png" alt >
-            <img v-show="select !== 'two'" src="@/assets/payment/unselect.png" alt >
-          </section>
-        </item>
-        <item
-          v-for="(item,index) in newList"
-          :proportion="[7,1,1]"
-          :key="index"
-          @click.native="isSelect(`three${index}`)"
-        >
-          <div slot="name" style="flex=3">
-            <img :src="selectImg(item)" alt class="icon" >
-            {{ item.bank_full_name }}({{ selectLast(item) }})
-            <img v-show="item.recommand" class="push" src="@/assets/payment/push.png" >
-          </div>
-          <section slot="content">
-            <img v-show="select === `three${index}`" src="@/assets/payment/select.png" alt >
-            <img v-show="select !== `three${index}`" src="@/assets/payment/unselect.png" alt >
-          </section>
-        </item>
-      </list-item>
     </h-content>
-
     <bottom-tab>
-      <tab-button class="footer" @click.native="pay">立即付款</tab-button>
+      <tab-button class="footer" @click.native="affirm">确认支付</tab-button>
     </bottom-tab>
   </h-view>
 </template>
 
 <script>
+import zfb from '@/assets/payment/alipay.png'
+import wx from '@/assets/payment/wx.png'
 import js from '@/assets/payment/js.png'
 import ny from '@/assets/payment/ly.png'
 import pf from '@/assets/payment/pf.png'
@@ -103,13 +180,32 @@ export default {
     return {
       money: '',
       select: 'one',
+      rate: 0.03,
+      name: '',
+      sectctNong: false,
+      checkType: {
+        img: '',
+        bank_full_name: '',
+        bank_account_num: '',
+      },
+      confirm: false,
+      show: false,
       downNum: false,
+      userName: window.sessionStorage.getItem('bp_name'),
       nongBank: [], // 存农行卡
       flag: false, // 用于判断是否有农业银行卡
       lists: [],
     }
   },
   computed: {
+    serviceCharge () {
+      return (this.money * (this.rate / 100)).toFixed(2)
+    },
+    sumMoney () {
+      return (parseFloat(this.serviceCharge) + parseFloat(this.money)).toFixed(
+        2
+      )
+    },
     newList () {
       let vm = this
       vm.nongBank = []
@@ -120,12 +216,19 @@ export default {
         }
       })
       let notNong = vm.lists.filter(i => {
-        return (i.bank_full_name.indexOf('农业') === -1)
+        return i.bank_full_name.indexOf('农业') === -1
       })
       if (vm.flag) {
         vm.select = 'nong0'
+        vm.checkType.bank_full_name = '农业银行'
+        vm.checkType.img = ny
+        vm.checkType.bank_account_num = this.nongBank[0].bank_account_num
+        vm.sectctNong = true
       } else {
         vm.select = 'one'
+        vm.checkType.bank_full_name = '支付宝'
+        vm.checkType.img = zfb
+        vm.sectctNong = false
       }
       return notNong
     },
@@ -133,6 +236,9 @@ export default {
   watch: {},
   beforeRouteEnter (to, from, next) {
     next(vm => {
+      vm.confirm = false
+      vm.show = false
+      vm.downNum = false
       if (from.name === 'NewList') {
         vm.money = vm.$route.params.money
       } else if (from.name === 'PaymentContractRecord') {
@@ -143,6 +249,9 @@ export default {
     })
   },
   methods: {
+    affirm () {
+      this.confirm = true
+    },
     pay () {
       let vm = this
       hlsPopup.showLoading('请稍候')
@@ -155,6 +264,23 @@ export default {
         }
       }, 2000)
     },
+    ischeck (way) {
+      if (way === 'one') {
+        this.checkType.bank_full_name = '支付宝'
+        this.checkType.img = zfb
+        this.sectctNong = false
+      } else if (way === 'two') {
+        this.checkType.bank_full_name = '微信'
+        this.checkType.img = wx
+        this.sectctNong = false
+      } else {
+        this.checkType.bank_full_name = way.bank_full_name
+        this.checkType.bank_account_num = way.bank_account_num
+        this.checkType.img = this.selectImg(way)
+        this.sectctNong = true
+      }
+      this.show = false
+    },
     selectLast (item) {
       let num = item.bank_account_num
       return num.substring(num.length - 4)
@@ -233,6 +359,205 @@ export default {
 </script>
 <style lang='less' >
 #payment-pay-entry {
+  .trans-enter-active,
+  .trans-leave-active {
+    transition: opacity 0.5s;
+  }
+  .trans-enter,
+  .trans-leave-active {
+    opacity: 0;
+  }
+  .modal-show-confirm {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    display: flex;
+    z-index: 900;
+    background-color: rgba(56, 63, 69, 0.3);
+    justify-content: center;
+    align-items: center;
+    .down {
+      height: 466px;
+      width: 100%;
+      position: absolute;
+      bottom: 0px;
+      background-color: #fff;
+      border-radius: 12px 12px 0 0;
+      overflow: scroll;
+      .top {
+        position: fixed;
+        left: 24px;
+        width: 330px;
+        height: 54px;
+        display: flex;
+        z-index: 999;
+        align-items: center;
+        background-color: #fff;
+        img {
+          width: 20px;
+        }
+        span {
+          margin-left: 38%;
+          font-family: PingFangSC-Semibold;
+          font-size: 16px;
+          color: #656464;
+          letter-spacing: 0.49px;
+          text-align: center;
+        }
+      }
+      .info {
+        margin-top: 60px;
+      }
+    }
+  }
+  .modal-show-bank {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    display: flex;
+    z-index: 910;
+    background-color: rgba(56, 63, 69, 0.3);
+    justify-content: center;
+    align-items: center;
+    .down {
+      height: 466px;
+      width: 100%;
+      position: absolute;
+      bottom: 0px;
+      background-color: #fff;
+      border-radius: 12px 12px 0 0;
+      overflow: scroll;
+      .top {
+        position: fixed;
+        left: 24px;
+        width: 330px;
+        height: 54px;
+        display: flex;
+        z-index: 999;
+        align-items: center;
+        background-color: #fff;
+        img {
+          width: 20px;
+        }
+        span {
+          margin-left: 38%;
+          font-family: PingFangSC-Semibold;
+          font-size: 16px;
+          color: #656464;
+          letter-spacing: 0.49px;
+          text-align: center;
+        }
+      }
+      .pay-way {
+        width: 350px;
+        margin: 0 auto;
+        margin-top: 54px;
+        background-color: #fff;
+        .hls-item {
+          padding-left: 12px;
+          .add-name {
+            flex: 3;
+            line-height: 56px;
+            font-family: PingFangSC-Regular;
+            font-size: 14px;
+            color: #656464;
+
+            .icon1 {
+              width: 34px;
+              height: 34px;
+              display: block;
+              float: left;
+              margin-top: 10px;
+              margin-right: 5px;
+            }
+            .icon2 {
+              width: 32px;
+              display: block;
+              float: left;
+              margin-top: 12px;
+              margin-right: 8px;
+            }
+            .icon {
+              width: 30px;
+              display: block;
+              float: left;
+              position: relative;
+              margin: 12px 8px 0 3px;
+            }
+          }
+
+          .add-content {
+            img {
+              width: 21px;
+            }
+          }
+        }
+      }
+    }
+  }
+  .info {
+    width: 100%;
+    height: 226px;
+    background-color: #fff;
+    .info-item {
+      height: 46px;
+      width: 335px;
+      margin: 0 auto;
+      position: relative;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .arrow {
+        margin-right: -10px;
+      }
+      img {
+        width: 17px;
+        margin-right: 10px;
+      }
+      span:first-child {
+        font-family: PingFangSC-Regular;
+        font-size: 14px;
+        color: rgba(56, 63, 69, 0.6);
+        letter-spacing: 0;
+        line-height: 18px;
+      }
+      span:last-child {
+        font-family: Verdana;
+        font-size: 14px;
+        color: #383f45;
+        letter-spacing: 0;
+        line-height: 18px;
+        display: flex;
+        align-items: center;
+      }
+    }
+    .info-item:nth-of-type(1)::after {
+      content: "";
+      display: block;
+      position: absolute;
+      right: 20px;
+      top: 25px;
+      border: 10px solid #fff;
+      border-left-color: transparent;
+      border-right-color: transparent;
+      border-top-color: transparent;
+      border-bottom-color: rgba(75, 74, 75, 0.1);
+    }
+    .info-item:nth-of-type(1) {
+      border-top: 1px solid #d9dbdf;
+    }
+    .interest {
+      width: 100%;
+      height: 37px;
+      line-height: 37px;
+      font-family: PingFangSC-Medium;
+      font-size: 11px;
+      color: #4b4a4b;
+      letter-spacing: 0;
+      text-indent: 215px;
+      background-color: rgba(75, 74, 75, 0.1);
+    }
+  }
   .icon {
     width: 30px;
     display: block;
diff --git a/src/pages/videoSign/video-list.vue b/src/pages/videoSign/video-list.vue
index a76543af..771b367d 100644
--- a/src/pages/videoSign/video-list.vue
+++ b/src/pages/videoSign/video-list.vue
@@ -20,7 +20,7 @@
           </div>
           <div class="right">
             <div class="right-top">
-              <span>进件号</span>
+              <span>合同号</span>
               <span>{{ item.project_number }}</span>
             </div>
             <div class="right-bottom">
@@ -30,7 +30,7 @@
                   <span>{{ item.bp_name }}</span>
                 </li>
                 <li>
-                  已还租金
+                  产品线
                   <span>{{ item.division_n }}</span>
                 </li>
                 <li>
-- 
2.21.0