模拟支付流

src/pages/myInfo/my-info.vue

@@ -314,7 +314,6 @@ export default {
         this.$router.push({
           name: 'UserBind',
         })
-        // this.hlsPopup.showLongCenter('请先进行用户绑定')
       }
     },
     userQuery () {
@@ -331,7 +330,7 @@ export default {
           vm.user_bp_status = res.info.user_bp_status
           vm.user_bp_class = res.info.user_bp_class
           vm.bp_id = res.info.user_bp_id
-          window.sessionStorage.setItem('bp_id', res.info.user_bp_id)
+          window.sessionStorage.setItem('bp_id', 7850)
           vm.user_bp_name = res.info.user_bp_name
           vm.user_bp_type = res.info.user_bp_type
           vm.user_phone = res.info.user_phone

src/pages/pay/firstPay/first-pay.vue

@@ -2,7 +2,7 @@
   <h-view id="first-pay" class="public-style">
     <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="goHome">
         <span>首付款支付</span>
       </div>
     </h-header>
@@ -51,7 +51,13 @@ export default {
   },
   beforeRouteEnter (to, from, next) {
     next(vm => {
+      if (from.name === 'MyInfo') {
         vm.getDownPayment()
+      } else if (from.name === 'Success') {
+        // console.log(vm.money, window.sessionStorage.getItem('money'))
+        vm.money = parseInt(vm.default) - parseInt(window.sessionStorage.getItem('money'))
+        vm.default = vm.money
+      }
     })
   },
   computed: {},
@@ -74,6 +80,11 @@ export default {
         }
       })
     },
+    goHome () {
+      this.$router.replace({
+        name: 'HomePage',
+      })
+    },
     pay () {
       this.payProtocol()
 

src/pages/pay/firstPay/pay-entry.vue

@@ -34,14 +34,6 @@
             <img v-show="select !== `three${index}`" src="@/assets/payment/unselect.png" alt="">
           </section>
         </item>
-        <!-- <item :proportion="[7,1,1]" @click.native="isSelect('four')">
-          <div slot="name"> <img src="@/assets/payment/js.png" alt="" class="icon"> 中国建设银行</div>
-          <section slot="content">
-            <img v-show="select === 'four'" src="@/assets/payment/select.png" alt="">
-            <img v-show="select !== 'four'" src="@/assets/payment/unselect.png" alt="">
-          </section>
-        </item> -->
-
       </list-item>
     </h-content>
 
@@ -91,13 +83,16 @@ export default {
       hlsPopup.showLoading('请稍候')
       setTimeout(() => {
         vm.hlsPopup.hideLoading()
-        // vm.hlsPopup.showSuccess('支付成功！')
         vm.changePage()
       }, 2000)
     },
     changePage () {
       this.$router.push({
         name: 'Success',
+        params: {
+          userName: this.userName,
+          money: this.$route.params.money,
+        },
       })
     },
     getType () {
@@ -111,6 +106,7 @@ export default {
         vm.hlsPopup.hideLoading()
         if (res.result === 'S') {
           vm.lists = res.lists
+          vm.userName = res.lists[0].bank_account_name
         } else {
           hlsPopup.showLongCenter(res.message)
         }

src/pages/pay/payment/first-pay.vue

@@ -2,7 +2,7 @@
   <h-view id="payment-first-pay" class="public-style">
     <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="goHome">
         <span>还款明细</span>
       </div>
     </h-header>
@@ -59,7 +59,14 @@ export default {
   },
   beforeRouteEnter (to, from, next) {
     next(vm => {
+      if (from.name === 'MyInfo') {
         vm.getRent()
+      } else if (from.name === 'Success') {
+        // console.log(vm.money, window.sessionStorage.getItem('money'))
+        vm.money = parseInt(vm.default) - parseInt(window.sessionStorage.getItem('money'))
+        vm.default = vm.money
+        vm.pay_rent = vm.money
+      }
     })
   },
   computed: {},
@@ -75,6 +82,11 @@ export default {
     // this.money = this.pay_rent
   },
   methods: {
+    goHome () {
+      this.$router.replace({
+        name: 'HomePage',
+      })
+    },
     getRent () {
       let vm = this
       let url = process.env.basePath + 'rent_repayment_query'
@@ -85,6 +97,7 @@ export default {
       vm.$post(url, param).then(function (res) {
         vm.hlsPopup.hideLoading()
         if (res.result === 'S') {
+          vm.default = parseFloat(res.info.rental_amount) + parseFloat(res.info.overdue_amount)
           vm.pay_rent = res.info.rental_amount
           vm.liquidated_damages = res.info.overdue_amount
         } else {

src/pages/pay/payment/pay-entry.vue

@@ -81,14 +81,25 @@ export default {
   methods: {
     pay () {
       let vm = this
+      hlsPopup.showLoading('请稍候')
       setTimeout(() => {
-        vm.hlsPopup.showSuccess('支付成功！')
+        vm.hlsPopup.hideLoading()
+        vm.goSuccess()
       }, 1000)
     },
     selectLast (item) {
       let num = item.bank_account_num
       return num.substring(num.length - 4)
     },
+    goSuccess () {
+      this.$router.push({
+        name: 'Success',
+        params: {
+          userName: this.userName,
+          money: this.money,
+        },
+      })
+    },
     isSelect (way) {
       this.select = way
     },
@@ -103,6 +114,7 @@ export default {
         vm.hlsPopup.hideLoading()
         if (res.result === 'S') {
           vm.lists = res.lists
+          vm.userName = res.lists[0].bank_account_name
         } else {
           hlsPopup.showLongCenter(res.message)
         }

src/pages/pay/success.vue

@@ -2,28 +2,97 @@
   <h-view id="result" class="public-style">
     <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="changePage" >
         <span>支付中心</span>
       </div>
     </h-header>
+    <h-content>
+      <div class="my-content">
+        <img class="flag" src="@/assets/payment/success.png" >
+        <h3>支付成功</h3>
+        <p>感谢您的还款，我们将尽快为您结清金额</p>
+        <div class="info">
+          <div class="left">
+            <list-item :item-height="30">
+              <item>
+                <div slot="name" class="name">时间</div>
+                <div slot="content">{{ date }}</div>
+              </item>
+              <item>
+                <div slot="name" class="name">姓名</div>
+                <div slot="content">{{ userName }}</div>
+              </item>
+              <item>
+                <div slot="name" class="name">还款金额</div>
+                <div slot="content">{{ money|currency }}</div>
+              </item>
+            </list-item>
+          </div>
+        </div>
+      </div>
+    </h-content>
   </h-view>
 </template>
 <script>
 export default {
-
+  data () {
+    return {
+      date: null,
+      userName: this.$route.params.userName,
+      isShow: false,
+      name: null,
+      money: this.$route.params.money,
+    }
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+    //   if (vm.$route.params.name === 'FirstPay') {
+    //     vm.isShow = false
+    //   } else if (vm.$route.params.name === 'ContractRecord') {
+    //     vm.isShow = true
+    //   }
+      vm.name = from.name
+      window.sessionStorage.setItem('money', vm.money)
+    })
+  },
+  watch: {
+    'date': {
+      handler (newVal, oldVal) {
+        let time = new Date()
+        let year = time.getFullYear()
+        let month = time.getMonth() + 1
+        let day = time.getDate()
+        this.date = `${year}-${month}-${day}`
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    changePage () {
+      if (this.name === 'PayEntry') {
+        this.$router.replace({
+          name: 'FirstPay',
+        })
+      } else if (this.name === 'PaymentPayEntry') {
+        this.$router.replace({
+          name: 'PaymentFirstPay',
+        })
+      }
+    },
+  },
 }
 </script>
 <style lang="less" scoped>
-#result{
+#result {
+  background-color: #fafafa;
   .h-header {
-    background-color: #00469C;
+    background-color: #00469c;
     .h-header-btn {
       img {
         width: 16px;
         height: 16px;
         margin-left: 4px;
       }
-
       span {
         font-family: PingFangSC-Semibold;
         margin-left: 16px;
@@ -33,5 +102,49 @@ export default {
       }
     }
   }
+  .my-content {
+    height: 400px;
+    background-color: #fff;
+    .flag {
+      display: block;
+      margin: 0 auto;
+      width: 72px;
+      padding-top: 48px;
+    }
+    h3 {
+      margin: 0 auto;
+      margin-top: 32px;
+      width: 83px;
+      font-weight: 600;
+      font-family: PingFangSC-Semibold;
+      font-size: 20px;
+      color: #383f45;
+      letter-spacing: 0.71px;
+    }
+    p {
+      margin: 0 auto;
+      margin-top: 10px;
+      width: 234px;
+      font-family: PingFangSC-Regular;
+      font-size: 13px;
+      color: rgba(56, 63, 69, 0.6);
+      letter-spacing: 0;
+    }
+    .info {
+      width: 343px;
+      margin: 0 auto;
+      border-top: 1px solid #d9dbdf;
+      margin-top: 48px;
+      .name {
+        font-family: PingFangSC-Regular;
+        font-size: 14px;
+        color: rgba(56, 63, 69, 0.6);
+        letter-spacing: 0.5px;
+      }
+      .left {
+        padding-top: 10px;
+      }
+    }
+  }
 }
 </style>

src/router/index.js

@@ -177,7 +177,7 @@ export default new Router({
     {path: '/first-pay', component: FirstPay, name: 'FirstPay', meta: {keepAlive: true}},
     {path: '/pay-entry', component: PayEntry, name: 'PayEntry', meta: {keepAlive: true}},
     {path: '/contract-record', component: ContractRecord, name: 'ContractRecord', meta: {keepAlive: true}},
-    {path: '/success', component: Success, name: 'Success', meta: {keepAlive: true}},
+    {path: '/success', component: Success, name: 'Success', meta: {keepAlive: false}},
     // 款项支付
     {path: '/payment-first-pay', component: PaymentFirstPay, name: 'PaymentFirstPay', meta: {keepAlive: true}},
     {path: '/payment-pay-entry', component: PaymentPayEntry, name: 'PaymentPayEntry', meta: {keepAlive: false}},