Skip to content

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

add

parent e0f34019
Show whitespace changes
Inline Side-by-side
Showing with 242 additions and 110 deletions
src/pages/pay/firstPay/pay-entry.vue
View file @ 53972781
...@@ -9,24 +9,14 @@ ...@@ -9,24 +9,14 @@
</div> </div>
</div> </div>
</transition> </transition>
<h-header :proportion="[5,1,1]" class="bar-custom"> <transition name="trans">
<div slot="left" class="h-header-btn"> <div v-show="show" class="modal-show-bank">
<img src="@/assets/userBind/arrow.png" @click="$routeGo()" > <div class="down">
<span>支付中心</span> <div class="top">
</div> <img src="@/assets/payment/back.png" @click="show=false" >
</h-header> <span>支付方式</span>
<h-content class="entry-content">
<div class="amount">
<p>{{ userName }}</p>
<div>￥{{ money |currency }}</div>
</div>
<div class="info">
<div class="info-item">
<span>还款金额</span>
<span>¥50600.00</span>
</div>
</div> </div>
<!-- <list-item :item-height="56" class="pay-way"> <list-item :item-height="56" class="pay-way">
<item <item
v-for="(item,index) in nongBank" v-for="(item,index) in nongBank"
:proportion="[7,1,1]" :proportion="[7,1,1]"
...@@ -85,10 +75,76 @@ ...@@ -85,10 +75,76 @@
<img v-show="select !== `three${index}`" src="@/assets/payment/unselect.png" alt > <img v-show="select !== `three${index}`" src="@/assets/payment/unselect.png" alt >
</section> </section>
</item> </item>
</list-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()">
<span>支付中心</span>
</div>
</h-header>
<h-content class="entry-content">
<div class="amount">
<p>{{ userName }}</p>
<div>￥{{ money |currency }}</div>
</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>
</h-content> </h-content>
<bottom-tab> <bottom-tab>
<tab-button class="foot" @click.native="pay">立即付款</tab-button> <tab-button class="foot" @click.native="pay">确认支付</tab-button>
</bottom-tab> </bottom-tab>
</h-view> </h-view>
</template> </template>
...@@ -117,6 +173,9 @@ export default { ...@@ -117,6 +173,9 @@ export default {
money: '', money: '',
select: 'three0', select: 'three0',
name: '', name: '',
checkType: {},
confirm: false,
show: false,
downNum: false, downNum: false,
recommand: false, recommand: false,
userName: window.sessionStorage.getItem('bp_name'), userName: window.sessionStorage.getItem('bp_name'),
...@@ -143,8 +202,12 @@ export default { ...@@ -143,8 +202,12 @@ export default {
} else { } else {
vm.select = 'one' vm.select = 'one'
} }
if (vm.nongBank.length !== 0) {
vm.checkType = {...vm.nongBank[0]}
}
return notNong return notNong
}, },
}, },
watch: {}, watch: {},
beforeRouteEnter (to, from, next) { beforeRouteEnter (to, from, next) {
...@@ -250,19 +313,111 @@ export default { ...@@ -250,19 +313,111 @@ export default {
.trans-enter, .trans-enter,
.trans-leave-active { .trans-leave-active {
opacity: 0; 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 { .info {
width: 100%; width: 100%;
height: 226px; height: 226px;
background-color: #fff; background-color: #fff;
.info-item { .info-item {
border: 1px solid #d9dbdf;
height: 46px; height: 46px;
width: 335px; width: 335px;
margin: 0 auto; margin: 0 auto;
position: relative;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.arrow{
margin-right:-10px;
}
img{
width:17px;
margin-right:10px;
}
span:first-child { span:first-child {
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 14px; font-size: 14px;
...@@ -276,17 +431,35 @@ export default { ...@@ -276,17 +431,35 @@ export default {
color: #383f45; color: #383f45;
letter-spacing: 0; letter-spacing: 0;
line-height: 18px; line-height: 18px;
display: flex;
align-items: center;
} }
} }
.info-item:nth-of-type(1)::after{ .info-item:nth-of-type(1)::after{
content:""; content:"";
display:block; display:block;
width: 16px; position: absolute;
height: 16px; right:20px;
border: 16px solid #fff; top:25px;
border-left:transparent; border: 10px solid #fff;
border-right:transparent; border-left-color:transparent;
border-top: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 { .modal-show {
...@@ -369,47 +542,6 @@ export default { ...@@ -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 { .foot {
background-color: @headerColor; 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