Skip to content

H
hls-xcmg-vue-app
Commit d915faa3 authored by 李晓兵's avatar 李晓兵
Browse files
Options

'jpush'

parent 9293fc5a
Hide whitespace changes
Inline Side-by-side
Showing with 684 additions and 691 deletions
src/pages/pay/firstPay/pay-entry.vue
View file @ d915faa3
<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;
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;
}
}
}
}
}
.foot {
color: #fff;
background-color: @headerColor;
}
}
</style>
<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;
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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment