'jpush'

d915faa3 · 李晓兵 · 9293fc5a · d915faa3
Commit d915faa3 authored Nov 13, 2019 by 李晓兵
Hide whitespace changes
Inline Side-by-side

Showing with 684 additions and 691 deletions

pay-entry.vue src/pages/pay/firstPay/pay-entry.vue +684 -691

No files found.
--- a/src/pages/pay/firstPay/pay-entry.vue
+++ b/src/pages/pay/firstPay/pay-entry.vue
 <template>
  <h-view id="pay-entry" class="public-style">
    <transition name="trans">
      <div v-show="downNum" class="modal-show">
        <div class="down">
          <p>提示</p>
          <span>您好，当前余额不足，请重新支付！</span>
          <button @click="downNum=false">确定</button>
        </div>
      </div>
    </transition>
    <transition name="trans">
      <div v-show="show" class="modal-show-bank">
        <div class="down">
          <div class="top">
            <img src="@/assets/payment/back.png" @click="show=false" >
            <span>支付方式</span>
          </div>
          <scroll>
            <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>
          </scroll>
        </div>
      </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="foot" @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="$routeGo()" >
        <span>支付中心</span>
      </div>
    </h-header>
    <h-content class="entry-content">
      <div class="amount">
        <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>
    </h-content>
    <bottom-tab>
      <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'
 import gd from '@/assets/payment/gd.png'
 import gf from '@/assets/payment/gf.png'
 import jt from '@/assets/payment/jt.png'
 import gs from '@/assets/payment/gs.png'
 import ms from '@/assets/payment/ms.png'
 import pa from '@/assets/payment/pa.png'
 import xy from '@/assets/payment/xy.png'
 import yzcx from '@/assets/payment/yzcx.png'
 import zg from '@/assets/payment/zg.png'
 import zs from '@/assets/payment/zs.png'
 import zx from '@/assets/payment/zx.png'
 import bank from '@/assets/payment/bank.png'
 export default {
  name: 'PayEntry',
  components: {},
  data () {
    return {
      money: '',
      select: 'three0',
      name: '',
      sectctNong: false,
      checkType: {
        img: '',
        bank_full_name: '',
        bank_account_num: '',
      },
      confirm: false,
      show: false,
      downNum: false,
      recommand: false,
      userName: window.sessionStorage.getItem('bp_name'),
      flag: false, // 用于判断是否有农业银行卡
      lists: [],
      nongBank: [], // 存农行卡
    }
  },
  computed: {
    serviceCharge () {
      return (this.money * (this.rate / 100)).toFixed(2)
    },
    rate () {
      return this.checkType.bank_full_name.indexOf('农业') !== -1 ? 0.0 : 0.18
    },
    sumMoney () {
      return (parseFloat(this.serviceCharge) + parseFloat(this.money)).toFixed(
        2
      )
    },
    newList () {
      let vm = this
      vm.nongBank = []
      vm.lists.forEach((item, i) => {
        if (item.bank_full_name.indexOf('农业') !== -1) {
          vm.nongBank.push(vm.lists[i])
          vm.flag = true
        }
      })
      let notNong = vm.lists.filter(i => {
        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
    },
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.confirm = false
      vm.show = false
      vm.downNum = false
      vm.name = from.name
      vm.getType()
      vm.nongBank = []
    })
  },
  activated () {
    this.money = this.$route.params.money
  },
  methods: {
    selectImg (e) {
      if (e.bank_full_name.indexOf('建设') !== -1) {
        return js
      } else if (e.bank_full_name.indexOf('农业') !== -1) {
        e.recommand = true
        return ny
      } else if (e.bank_full_name.indexOf('光大') !== -1) {
        return gd
      } else if (e.bank_full_name.indexOf('广发') !== -1) {
        return gf
      } else if (e.bank_full_name.indexOf('浦') !== -1) {
        return pf
      } else if (e.bank_full_name.indexOf('工商') !== -1) {
        return gs
      } else if (e.bank_full_name.indexOf('交通') !== -1) {
        return jt
      } else if (e.bank_full_name.indexOf('民生') !== -1) {
        return ms
      } else if (e.bank_full_name.indexOf('平安') !== -1) {
        return pa
      } else if (e.bank_full_name.indexOf('兴业') !== -1) {
        return xy
      } else if (e.bank_full_name.indexOf('邮') !== -1) {
        return yzcx
      } else if (e.bank_full_name.indexOf('中国') !== -1) {
        return zg
      } else if (e.bank_full_name.indexOf('招商') !== -1) {
        return zs
      } else if (e.bank_full_name.indexOf('中信') !== -1) {
        return zx
      } else {
        return bank
      }
    },
    selectLast (item) {
      let num = item.bank_account_num
      return num.substring(num.length - 4)
    },
    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('请稍候')
      setTimeout(() => {
        vm.hlsPopup.hideLoading()
        if (vm.money === 0) {
          vm.downNum = true
        } else {
          vm.changePage()
        }
      }, 2000)
    },
    affirm () {
      this.confirm = true
    },
    changePage () {
      this.$router.push({
        name: 'Success',
        params: {
          userName: this.userName,
          money: this.$route.params.money,
        },
      })
    },
    getType () {
      let vm = this
      let url = process.env.basePath + 'payment_method_query'
      let param = {
        bp_id: window.sessionStorage.getItem('bp_id'),
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.lists = res.lists
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
  },
 }
 </script>
 <style lang='less' >
 #pay-entry {
 .vue-better-scroll__wrapper{
    padding: 0;
  }
  .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: relative;
      top:18%;
      background: #fff;
      border-radius: 12px 12px 0 0;
      overflow: scroll;
      display: flex;
      align-items: center;
      flex-direction: column;
      .top {
        width: 330px;
        height: 54px;
        display: flex;
        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: relative;
      top:18%;
      background: #fff;
      border-radius: 12px 12px 0 0;
      overflow: scroll;
      display: flex;
      align-items: center;
      flex-direction: column;
      .top {
        left: 24px;
        width: 330px;
        height: 54px;
        display: flex;
        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;
        width: 100%;
       padding: 0 4% 0 4%;
        background: #fff;
        .hls-item {
          padding-left: 12px;
          .add-name {
            flex: 3;
            line-height: 56px;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #656464;
            div{
              display: flex;
              justify-content: center;
              align-items: center;
            }
            .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;
+             /* display: block;
              float: left;
-              position: relative;
+              position: relative;*/
              margin: 0 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 {
+  .push {
-    width: 30px;
+   /* position: absolute;
-    display: block;
+    top: 10px;
-    float: left;
+    margin-left: 10px;*/
-    position: relative;
+    width: 35px;
-    margin: 12px 8px 0 3px;
+  }
-  }
+  .modal-show {
-  .push {
+    width: 100%;
-   /* position: absolute;
+    height: 100%;
-    top: 10px;
+    position: absolute;
-    margin-left: 10px;*/
+    display: flex;
-    width: 35px;
+    z-index: 900;
-  }
+    background-color: rgba(56, 63, 69, 0.3);
-  .modal-show {
+    justify-content: center;
-    width: 100%;
+    align-items: center;
-    height: 100%;
+    .down {
-    position: absolute;
+      position: relative;
-    display: flex;
+      width: 301px;
-    z-index: 900;
+      height: 162px;
-    background-color: rgba(56, 63, 69, 0.3);
+      display: flex;
-    justify-content: center;
+      justify-content: center;
-    align-items: center;
+      flex-flow: column wrap;
-    .down {
+      align-items: center;
-      position: relative;
+      background-size: 301px 24.7px;
-      width: 301px;
+      background-color: #fff;
-      height: 162px;
+      border-radius: 8px;
-      display: flex;
+      p {
-      justify-content: center;
+        font-family: PingFangSC-Semibold;
-      flex-flow: column wrap;
+        font-size: 16px;
-      align-items: center;
+        color: #1d3fff;
-      background-size: 301px 24.7px;
+        margin-top: 16px;
-      background-color: #fff;
+        flex: 2;
-      border-radius: 8px;
+      }
-      p {
+      span {
-        font-family: PingFangSC-Semibold;
+        font-family: PingFangSC-Regular;
-        font-size: 16px;
+        font-size: 14px;
-        color: #1d3fff;
+        color: #383f45;
-        margin-top: 16px;
+        flex: 3;
-        flex: 2;
+        letter-spacing: 0;
-      }
+        margin-top: 16px;
-      span {
+      }
-        font-family: PingFangSC-Regular;
+      button {
-        font-size: 14px;
+        width: 159px;
-        color: #383f45;
+        flex: 2;
-        flex: 3;
+        margin-bottom: 16px;
-        letter-spacing: 0;
+        height: 40px;
-        margin-top: 16px;
+        background-color: @headerColor;
-      }
+        font-family: PingFangSC-Semibold;
-      button {
+        font-size: 15px;
-        width: 159px;
+        color: #fafafa;
-        flex: 2;
+        line-height: 20px;
-        margin-bottom: 16px;
+      }
-        height: 40px;
+    }
-        background-color: @headerColor;
+  }
-        font-family: PingFangSC-Semibold;
+  .entry-content {
-        font-size: 15px;
+    .amount {
-        color: #fafafa;
+      height: 166px;
-        line-height: 20px;
+      background-color: #fff;
-      }
+      padding-top: 55px;
-    }
+      text-align: center;
-  }
+      p {
-  .entry-content {
+        font-family: PingFangSC-Regular;
-    .amount {
+        font-size: 14px;
-      height: 166px;
+        color: #656464;
-      background-color: #fff;
+        letter-spacing: 0;
-      padding-top: 55px;
+      }
-      text-align: center;
-      p {
+      div {
-        font-family: PingFangSC-Regular;
+        font-family: PingFangSC-Semibold;
-        font-size: 14px;
+        font-size: 24px;
-        color: #656464;
+        color: #383f45;
-        letter-spacing: 0;
+        letter-spacing: 0.86px;
-      }
+        font-weight: 700;
+        margin-top: 10px;
-      div {
+      }
-        font-family: PingFangSC-Semibold;
+    }
-        font-size: 24px;
-        color: #383f45;
+    .pay-way {
-        letter-spacing: 0.86px;
+      .hls-item {
-        font-weight: 700;
+        padding-left: 12px;
-        margin-top: 10px;
+        .add-name {
-      }
+          flex: 3;
-    }
+          line-height: 56px;
+          font-family: PingFangSC-Regular;
-    .pay-way {
+          font-size: 14px;
-      .hls-item {
+          color: #656464;
-        padding-left: 12px;
-        .add-name {
+          .icon1 {
-          flex: 3;
+            width: 34px;
-          line-height: 56px;
+            height: 34px;
-          font-family: PingFangSC-Regular;
+            display: block;
-          font-size: 14px;
+            float: left;
-          color: #656464;
+            margin-top: 10px;
+            margin-right: 5px;
-          .icon1 {
+          }
-            width: 34px;
+          .icon2 {
-            height: 34px;
+            width: 32px;
            display: block;
            float: left;
-            margin-top: 10px;
+            margin-top: 12px;
-            margin-right: 5px;
+            margin-right: 8px;
          }
-          .icon2 {
+        }
-            width: 32px;
-            display: block;
+        .add-content {
-            float: left;
+          img {
-            margin-top: 12px;
+            width: 21px;
-            margin-right: 8px;
+          }
-          }
+        }
-        }
+      }
+    }
-        .add-content {
+  }
-          img {
+  .foot {
-            width: 21px;
+    color: #fff;
-          }
+    background-color: @headerColor;
-        }
+  }
-      }
+}
-    }
+</style>
-  }
-  .foot {
-    color: #fff;
-    background-color: @headerColor;
-  }
-}
-</style>