<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);confirmToPay(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);confirmToPay(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="checkPay">立即支付</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.localStorage.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 let notNong = vm.lists.filter(i => { return i.bank_full_name.indexOf('农业') === -1 }) // 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 }, confirmToPay (e) { let vm = this let url = process.env.basePath + 'update_order_info' let param = { info: { order_id: vm.$route.params.order_id, fee: vm.sumMoney, bank_account_id: e.bank_account_id, pay_type: e.pay_type, }, } hlsPopup.showLoading('请稍候') vm.$post(url, param).then(function (res) { if (res.result === 'S') { vm.hlsPopup.hideLoading() } 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, }, }) } } else { hlsPopup.showLongCenter(res.message) } }) }, 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.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]) } 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.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) } }) }, }, } </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; 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); } } .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; } } } } } .foot { color: #fff; background-color: @headerColor; } } </style>