Skip to content

H
hls-xcmg-vue-app
Commit 53972781 authored by linxin's avatar linxin
Browse files
Options

add

parent e0f34019
Hide whitespace changes
Inline Side-by-side
Showing with 242 additions and 110 deletions
src/pages/pay/firstPay/pay-entry.vue
View file @ 53972781
......@@ -9,9 +9,109 @@
</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>
<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}`)"
>
<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')">
<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')">
<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}`)"
>
<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>
</div>
</div></transition>
<transition name="trans">
<div v-show="confirm" class="modal-show-bank">
<div class="down">
<div class="top">
<img src="@/assets/payment/back.png" @click="show=false" >
<span>确认付款</span>
</div>
<div class="info">
<div class="info-item">
<span>还款金额</span>
<span>¥50600.00</span>
</div>
<div class="interest">
<span>本次交易收取0.03%服务费</span>
</div>
<div class="info-item">
<span>服务费</span>
<span>+¥15.00</span>
</div>
<div class="info-item">
<span>合同编号</span>
<span>EF12345678</span>
</div>
<div class="info-item" @click="show=true">
<span>付款方式</span>
<span v-if="flag"><img src="@/assets/payment/ly.png"><span>农业银行</span><img class="arrow" src="@/assets/payment/go.png"></span>
<span v-if="!flag"><img src="@/assets/payment/alipay.png"><span>支付宝</span><img class="arrow" src="@/assets/payment/go.png"></span>
</div>
</div>
</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()" >
<img src="@/assets/userBind/arrow.png" @click="$routeGo()">
<span>支付中心</span>
</div>
</h-header>
......@@ -25,70 +125,26 @@
<span>还款金额</span>
<span>¥50600.00</span>
</div>
<div class="interest">
<span>本次交易收取0.03%服务费</span>
</div>
<div class="info-item">
<span>服务费</span>
<span>+¥15.00</span>
</div>
<div class="info-item">
<span>合同编号</span>
<span>EF12345678</span>
</div>
<div class="info-item" @click="show=true">
<span>付款方式</span>
<span v-if="flag"><img src="@/assets/payment/ly.png"><span>农业银行</span><img class="arrow" src="@/assets/payment/go.png"></span>
<span v-if="!flag"><img src="@/assets/payment/alipay.png"><span>支付宝</span><img class="arrow" src="@/assets/payment/go.png"></span>
</div>
</div>
<!-- <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}`)"
>
<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')">
<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')">
<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}`)"
>
<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>-->
</h-content>
<bottom-tab>
<tab-button class="foot" @click.native="pay">立即付款</tab-button>
<tab-button class="foot" @click.native="pay">确认支付</tab-button>
</bottom-tab>
</h-view>
</template>
......@@ -117,6 +173,9 @@ export default {
money: '',
select: 'three0',
name: '',
checkType: {},
confirm: false,
show: false,
downNum: false,
recommand: false,
userName: window.sessionStorage.getItem('bp_name'),
......@@ -143,8 +202,12 @@ export default {
} else {
vm.select = 'one'
}
if (vm.nongBank.length !== 0) {
vm.checkType = {...vm.nongBank[0]}
}
return notNong
},
},
watch: {},
beforeRouteEnter (to, from, next) {
......@@ -250,19 +313,111 @@ export default {
.trans-enter,
.trans-leave-active {
opacity: 0;
}
.modal-show-bank {
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: absolute;
bottom: 0px;
background-color: #fff;
border-radius: 12px 12px 0 0;
overflow: scroll;
.top{
position: fixed;
left:24px;
width:330px;
height:54px;
display: flex;
z-index: 999;
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;
margin-top:54px;
background-color: #fff;
.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;
}
.icon {
width: 30px;
display: block;
float: left;
position: relative;
margin: 12px 8px 0 3px;
}
}
.add-content {
img {
width: 21px;
}
}
}
}
}
}
.info {
width: 100%;
height: 226px;
background-color: #fff;
.info-item {
border: 1px solid #d9dbdf;
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;
......@@ -276,17 +431,35 @@ export default {
color: #383f45;
letter-spacing: 0;
line-height: 18px;
display: flex;
align-items: center;
}
}
.info-item:nth-of-type(1)::after{
content:"";
display:block;
width: 16px;
height: 16px;
border: 16px solid #fff;
border-left:transparent;
border-right:transparent;
border-top:transparent;
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.10);
}
.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.10);
}
}
.modal-show {
......@@ -369,47 +542,6 @@ export default {
}
}
.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;
}
.icon {
width: 30px;
display: block;
float: left;
position: relative;
margin: 12px 8px 0 3px;
}
}
.add-content {
img {
width: 21px;
}
}
}
}
}
.foot {
background-color: @headerColor;
......
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