pay-entry.vue

<template>
  <h-view id="payment-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="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="payTypeObj.img" >
                <span>{{ payTypeObj.payType_n }}</span>
                <img class="arrow" src="@/assets/payment/go.png" >
              </span>
            </div>
            <!-- <list-item :item-height="44">
              <item :showArrow="true" @click.native="selectPayType">
                <div slot="name">支付渠道</div>
                <input
                  slot="content" v-model="payTypeObj.payType_n" readonly>
              </item>
            </list-item> -->
          </div>
          <bottom-tab>
            <tab-button class="footer" @click.native="checkPay">去支付</tab-button>
          </bottom-tab>
        </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 payTypeList"
                :proportion="[7,1,1]"
                :key="index"
                @click.native="isSelect(`three${index}`);ischeck(item)"><!--;confirmToPay(item)-->
                <div slot="name" style="flex=3">
                  <img :src="selectImg(item)" alt class="icon" >
                  {{ item.code_name }}
                  <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>
    <h-header :proportion="[5,1,1]" class="bar-custom">
      <div slot="left" class="h-header-btn">
        <img src="@/assets/userBind/arrow.png" @click="changePage" >
        <span>{{ title }}</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="payTypeObj.img" >
            <span>{{ payTypeObj.payType_n }}</span>
            <img class="arrow" src="@/assets/payment/go.png" >
          </span>
        </div>
      </div>
    </h-content>
    <bottom-tab>
      <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'
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 yinlian from '@/assets/payment/bind.png'
import zx from '@/assets/payment/zx.png'
export default {
  name: 'PaymentPayEntry',
  components: {},
  data () {
    return {
      money: '',
      select: 'one',
      name: '',
      pay_type: '',
      bank_account_id: '',
      sectctNong: false,
      checkType: {
        img: '',
        bank_full_name: '',
        bank_account_num: '',
      },
      payTypeList: [],
      payTypeObj: {
        img: ny,
        payType: 'ABC_PAY',
        payType_n: '农行支付',
      },
      confirm: false,
      show: false,
      downNum: false,
      isNongPay: false,
      userName: window.localStorage.getItem('bp_name'),
      nongBank: [], // 存农行卡
      flag: false, // 用于判断是否有农业银行卡
      lists: [],
      notNongList: [],
      nongPayList: [],
    }
  },
  computed: {
    title () {
      if (this.confirm) {
        return '支付中心'
      } else {
        return '确认订单'
      }
    },
    text () {
      if (this.payTypeObj.payType_n.indexOf('农行') !== -1) {
        return 'K码/K令支付'
      } else if (this.payTypeObj.payType_n.indexOf('农行') === -1) {
        return '银联支付'
      }
    },
    serviceCharge () {
      return (this.money * (this.rate / 100)).toFixed(2)
    },
    rate () {
      return this.payTypeObj.payType_n.indexOf('农行') !== -1 ? 0.00 : 0.18
    },
    sumMoney () {
      return (parseFloat(this.serviceCharge) + parseFloat(this.money)).toFixed(
        2
      )
    },
    newList () {
      let vm = this

      let notNong = vm.lists.filter(i => {
        return i.bank_full_name.indexOf('农业') === -1
      })

      return notNong
    },
  },
  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') {
        vm.money = vm.$route.params.sumMoney
      }
      vm.getType()
      vm.getPayType()
      // vm.nongBank = []
    })
  },
  methods: {
    selectPayType (e) {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.payTypeList,
        code: 'bp_type',
        object: {},
        returnItem: function (index, obj) {
          vm.payTypeObj.payType = obj.bp_type
          vm.payTypeObj.payType_n = obj.bp_type_n
        },
      })
    },
    getPayType () {
      let vm = this
      let url = process.env.basePath + 'payment_type_query'
      let param = {}
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.payTypeList = res.lists.map(item => {
            return {
              code: item.pay_type,
              code_name: item.pay_type_name,
            }
          })
        }
      })
    },
    affirm () {
      // this.confirm = true
      this.confirmToPay()
    },
    confirmToPay (e) {
      let vm = this
      let randomString = Math.floor(Math.random() * 21)
      let url = process.env.basePath + 'update_order_info' + '&index' +
        `'${randomString}'`
      if (e) {
        vm.pay_type = e.pay_type
        vm.bank_account_id = e.bank_account_id
      }
      let param = {
        info: {
          order_id: vm.$route.params.order_id,
          fee: vm.serviceCharge,
          bank_account_id: '0',
          pay_type: vm.payTypeObj.payType,
        },
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        if (res.result === 'S') {
          vm.hlsPopup.hideLoading()
          vm.checkPay()
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    checkPay () {
      let vm = this
      if (parseFloat(vm.sumMoney) === 0) {
        hlsPopup.showLongCenter('您支付的金额为0元')
        console.log('您支付的金额为0元')
      } else if (parseFloat(vm.sumMoney) > 0) {
        vm.pay()
      }
    },
    pay () {
      let vm = this
      let url = process.env.basePath + 'merchant_payment'
      let param = {
        order_id: vm.$route.params.order_id,
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          if (res.return_code !== '0000') {
            hlsPopup.showLongCenter(res.error_message)
          } else {
            vm.$router.push({
              name: 'PayPage',
              params: {
                url: res.paymentURL,
                order_id: vm.$route.params.order_id,
                text: vm.text,
                payType: vm.payTypeObj.payType,
              },
            })
          }
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    ischeck (way) {
      this.payTypeObj.payType = way.code
      this.payTypeObj.payType_n = way.code_name
      this.payTypeObj.img = this.selectImg(way)
      this.show = false
    },
    selectLast (item) {
      let num = item.bank_account_num
      return num.substring(num.length - 4)
    },
    selectImg (e) {
      if (e.code_name.indexOf('农行') !== -1) {
        e.recommand = true
        return ny
      } else if (e.code_name.indexOf('银联') !== -1) {
        return yinlian
      }
    },
    goSuccess () {
      this.$router.push({
        name: 'Success',
        params: {
          userName: this.userName,
          money: this.money,
        },
      })
    },
    isSelect (way) {
      this.select = way
    },
    getType () {
      let vm = this
      let url = process.env.basePath + 'payment_method_query'
      let param = {
        bp_id: window.localStorage.getItem('bp_id'),
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.lists = res.lists
          vm.nongBank = []
          vm.lists.forEach((item, i) => {
            if (item.bank_full_name.indexOf('农业') !== -1) {
              vm.nongBank.push(vm.lists[i])
              vm.flag = true
            }
          })
          if (vm.flag) {
            vm.select = 'nong0'
            vm.checkType.bank_full_name = '农业银行'
            vm.checkType.img = ny
            vm.checkType.bank_account_num = vm.nongBank[0].bank_account_num
            vm.sectctNong = true
            // vm.confirmToPay(vm.nongBank[0])
            vm.pay_type = vm.nongBank[0].pay_type
            vm.bank_account_id = vm.nongBank[0].bank_account_id
          } else if (!vm.flag && vm.lists.length !== 0) {
            vm.select = 'three0'
            vm.checkType.bank_full_name = vm.newList[0].bank_full_name
            vm.checkType.img = vm.selectImg(vm.newList[0])
            vm.checkType.bank_account_num = vm.newList[0].bank_account_num
            vm.sectctNong = true
            vm.pay_type = vm.lists[0].pay_type
            vm.bank_account_id = vm.lists[0].bank_account_id
            // vm.confirmToPay(vm.lists[0])
          } else if (!vm.flag && vm.lists === 0) {
            vm.sectctNong = false
            hlsPopup.showLongCenter('请先绑定银行卡')
            vm.checkType.bank_full_name = '（无）'
          }
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    changePage () {
      this.$router.replace({
        name: 'NewList',
        params: {
          money: this.$route.params.money,
        },
      })
      this.$router.go(-1)
    },
  },
}
</script>
<style lang='less' >
#payment-pay-entry {
    .hls-list-item{
    margin-bottom: 2px !important;
  }
  .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-payWay{
     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;
              margin: 0 8px 0 3px;
            }
          }

          .add-content {
            img {
              width: 21px;
            }
          }
        }
      }
    }
  }
  .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;
              float: left;
              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 {
    width: 30px;
    display: block;
    float: left;
    position: relative;
    margin: 12px 8px 0 3px;
  }
  .push {
   /* position: absolute;
    top: 10px;
    margin-left: 10px;*/
    width: 35px;
  }
  .modal-show {
    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 {
      position: relative;
      width: 301px;
      height: 162px;
      display: flex;
      justify-content: center;
      flex-flow: column wrap;
      align-items: center;
      background-size: 301px 24.7px;
      background-color: #fff;
      border-radius: 8px;
      p {
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #1d3fff;
        margin-top: 16px;
        flex: 2;
      }
      span {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #383f45;
        flex: 3;
        letter-spacing: 0;
        margin-top: 16px;
      }
      button {
        width: 159px;
        flex: 2;
        margin-bottom: 16px;
        height: 40px;
        background-color: @headerColor;
        font-family: PingFangSC-Semibold;
        font-size: 15px;
        color: #fafafa;
        line-height: 20px;
      }
    }
  }
  .entry-content {
    .amount {
      height: 166px;
      background-color: #fff;
      padding-top: 55px;
      text-align: center;
      p {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #656464;
        letter-spacing: 0;
      }

      div {
        font-family: PingFangSC-Semibold;
        font-size: 24px;
        color: #383f45;
        letter-spacing: 0.86px;
        font-weight: 700;
        margin-top: 10px;
      }
    }

    .pay-way {
      .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;
          }
        }

        .add-content {
          img {
            width: 21px;
          }
        }
      }
    }
  }
  .footer {
    color: #fff;
    background-color: @headerColor;
  }
}
</style>