Skip to content

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

升级首付款支付和款项支付

parent 559ce305
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1358 additions and 653 deletions
src/assets/payment/first-pay.png
View replaced file @ 559ce305 View file @ 462318ef
src/assets/payment/first-pay.png

1.06 KB | W: | H:

src/assets/payment/first-pay.png

1.4 KB | W: | H:

src/assets/payment/first-pay.png
src/assets/payment/first-pay.png
src/assets/payment/first-pay.png
src/assets/payment/first-pay.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/payment/search.png
View replaced file @ 559ce305 View file @ 462318ef
src/assets/payment/search.png

1.07 KB | W: | H:

src/assets/payment/search.png

1.09 KB | W: | H:

src/assets/payment/search.png
src/assets/payment/search.png
src/assets/payment/search.png
src/assets/payment/search.png
  • 2-up
  • Swipe
  • Onion skin
src/pages/contractRepayment/repay-details.vue
View file @ 462318ef
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
</item> </item>
<item> <item>
<div slot="name">产品线</div> <div slot="name">产品线</div>
<div slot="content">{{ detailInfo.division_n }}</div> <div slot="content">{{ detailInfo.division_n?detailInfo.division_n:"暂无数据" }}</div>
</item> </item>
<item> <item>
<div slot="name">合同金额</div> <div slot="name">合同金额</div>
......
src/pages/myInfo/my-info.vue
View file @ 462318ef
...@@ -195,7 +195,7 @@ export default { ...@@ -195,7 +195,7 @@ export default {
}, },
changeRent () { changeRent () {
this.$router.push({ this.$router.push({
name: 'PaymentFirstPay', name: 'NewList',
}) })
}, },
updateVersion () { updateVersion () {
......
src/pages/pay/firstPay/contract-record.vue
View file @ 462318ef
This diff is collapsed.
src/pages/pay/firstPay/first-pay.vue
View file @ 462318ef
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
<span>应还首付款</span> <span>应还首付款</span>
<input v-model="money" type="text" placeholder="请输入支付金额" > <input v-model="money" type="text" placeholder="请输入支付金额" >
<div @click="createOrder"> <div @click="createOrder">
<i class="icon ion-ios-arrow-right" /> <img src="@/assets/payment/into.png" >
</div> </div>
</div> </div>
</div> </div>
...@@ -172,15 +172,15 @@ export default { ...@@ -172,15 +172,15 @@ export default {
#first-pay { #first-pay {
.top-head { .top-head {
width: 100%; width: 100%;
height: 206px; height: 142px;
background: url("../../../assets/payment/back1.png"); background: url("../../../assets/payment/back1.png");
background-size: 100% 206px; background-size: 100% 142px;
.now-pay { .now-pay {
width: 90px; width: 100%;
margin: 0 auto;
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-wrap: wrap; align-items: center;
flex-flow: column wrap;
.title { .title {
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 14px; font-size: 14px;
...@@ -200,7 +200,7 @@ export default { ...@@ -200,7 +200,7 @@ export default {
} }
.pay-content { .pay-content {
position: relative; position: relative;
top: -47px; top: -57px;
width: 100%; width: 100%;
height: 94px; height: 94px;
display: flex; display: flex;
...@@ -225,10 +225,10 @@ export default { ...@@ -225,10 +225,10 @@ export default {
align-items: center; align-items: center;
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 14px; font-size: 14px;
color: #00469c; color: #1d3fff;
img { img {
width: 18px; width: 30px;
display: block; display: block;
float: left; float: left;
margin-right: 9px; margin-right: 9px;
...@@ -236,14 +236,17 @@ export default { ...@@ -236,14 +236,17 @@ export default {
} }
.pay-input { .pay-input {
height: 50%; height: 44px;
display: flex; display: flex;
align-items: center; align-items: center;
flex:1; flex: 1;
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 14px; font-size: 14px;
color: #656464; color: #656464;
img {
width: 15px;
height: 17px;
}
span { span {
flex: 2; flex: 2;
text-align: left; text-align: left;
...@@ -263,6 +266,7 @@ export default { ...@@ -263,6 +266,7 @@ export default {
display: flex; display: flex;
height: 100%; height: 100%;
align-items: center; align-items: center;
justify-content: center;
flex: 1; flex: 1;
text-align: center; text-align: center;
background: rgba(0, 70, 156, 0.08); background: rgba(0, 70, 156, 0.08);
...@@ -320,12 +324,9 @@ export default { ...@@ -320,12 +324,9 @@ export default {
} }
} }
.bottom-tab-button { .footer {
background: #00469c; background-color: @headerColor;
border-radius: 4px; color: #fff;
color: white;
height: 40px;
margin: 4px 2% 0 2%;
} }
} }
</style> </style>
src/pages/pay/firstPay/pay-entry.vue
View file @ 462318ef
<template> <template>
<h-view id="pay-entry" class="public-style"> <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>
<h-header :proportion="[5,1,1]" class="bar-custom"> <h-header :proportion="[5,1,1]" class="bar-custom">
<div slot="left" class="h-header-btn"> <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> <span>支付中心</span>
</div> </div>
</h-header> </h-header>
<h-content class="entry-content"> <h-content class="entry-content">
<div class="amount"> <div class="amount">
<p>交易金额</p> <p>交易金额</p>
<div>￥{{ money |currency }}</div> <div>￥{{ money |currency }}</div>
</div> </div>
<list-item :item-height="56" class="pay-way"> <list-item :item-height="56" class="pay-way">
<item v-for="(item,index) in nongBank" :proportion="[7,1,1]" :key="index" @click.native="isSelect(`nong${index}`)"> <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> v-for="(item,index) in nongBank"
:proportion="[7,1,1]"
:key="index"
@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"> <section slot="content">
<img v-show="select === `nong${index}`" src="@/assets/payment/select.png" alt=""> <img v-show="select === `nong${index}`" src="@/assets/payment/select.png" alt >
<img v-show="select !== `nong${index}`" src="@/assets/payment/unselect.png" alt=""> <img v-show="select !== `nong${index}`" src="@/assets/payment/unselect.png" alt >
</section> </section>
</item> </item>
<item :proportion="[7,1,1]" @click.native="isSelect('one')"> <item :proportion="[7,1,1]" @click.native="isSelect('one')">
<div slot="name"> <img src="@/assets/payment/alipay.png" alt="" class="icon1"> 支付宝</div> <div slot="name">
<img src="@/assets/payment/alipay.png" alt class="icon1" > 支付宝
</div>
<section slot="content"> <section slot="content">
<img v-show="select === 'one'" src="@/assets/payment/select.png" alt=""> <img v-show="select === 'one'" src="@/assets/payment/select.png" alt >
<img v-show="select !== 'one'" src="@/assets/payment/unselect.png" alt=""> <img v-show="select !== 'one'" src="@/assets/payment/unselect.png" alt >
</section> </section>
</item> </item>
<item :proportion="[7,1,1]" @click.native="isSelect('two')"> <item :proportion="[7,1,1]" @click.native="isSelect('two')">
<div slot="name"> <img src="@/assets/payment/wx.png" alt="" class="icon2"> 微信</div> <div slot="name">
<img src="@/assets/payment/wx.png" alt class="icon2" > 微信
</div>
<section slot="content"> <section slot="content">
<img v-show="select === 'two'" src="@/assets/payment/select.png" alt=""> <img v-show="select === 'two'" src="@/assets/payment/select.png" alt >
<img v-show="select !== 'two'" src="@/assets/payment/unselect.png" alt=""> <img v-show="select !== 'two'" src="@/assets/payment/unselect.png" alt >
</section> </section>
</item> </item>
<item <item
v-for="(item,index) in newList" :proportion="[7,1,1]" :key="index" v-for="(item,index) in newList"
@click.native="isSelect(`three${index}`)"> :proportion="[7,1,1]"
<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> :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"> <section slot="content">
<img v-show="select === `three${index}`" src="@/assets/payment/select.png" alt=""> <img v-show="select === `three${index}`" src="@/assets/payment/select.png" alt >
<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>
</h-content> </h-content>
<bottom-tab> <bottom-tab>
<tab-button class="foot" @click.native="pay"> <tab-button class="foot" @click.native="pay">立即付款</tab-button>
立即付款
</tab-button>
</bottom-tab> </bottom-tab>
</h-view> </h-view>
</template> </template>
...@@ -72,13 +105,13 @@ import zx from '@/assets/payment/zx.png' ...@@ -72,13 +105,13 @@ import zx from '@/assets/payment/zx.png'
import bank from '@/assets/payment/bank.png' import bank from '@/assets/payment/bank.png'
export default { export default {
name: 'PayEntry', name: 'PayEntry',
components: { components: {},
},
data () { data () {
return { return {
money: '', money: '',
select: 'three0', select: 'three0',
name: '', name: '',
downNum: false,
recommand: false, recommand: false,
flag: false, // 用于判断是否有农业银行卡 flag: false, // 用于判断是否有农业银行卡
lists: [], lists: [],
...@@ -109,6 +142,7 @@ export default { ...@@ -109,6 +142,7 @@ export default {
next(vm => { next(vm => {
vm.name = from.name vm.name = from.name
vm.getType() vm.getType()
vm.nongBank = []
}) })
}, },
...@@ -162,7 +196,11 @@ export default { ...@@ -162,7 +196,11 @@ export default {
hlsPopup.showLoading('请稍候') hlsPopup.showLoading('请稍候')
setTimeout(() => { setTimeout(() => {
vm.hlsPopup.hideLoading() vm.hlsPopup.hideLoading()
if (vm.money === 0) {
vm.downNum = true
} else {
vm.changePage() vm.changePage()
}
}, 2000) }, 2000)
}, },
changePage () { changePage () {
...@@ -196,11 +234,67 @@ export default { ...@@ -196,11 +234,67 @@ export default {
</script> </script>
<style lang='less' > <style lang='less' >
#pay-entry { #pay-entry {
.push{ .trans-enter-active,
.trans-leave-active {
transition: opacity 0.5s;
}
.trans-enter,
.trans-leave-active {
opacity: 0;
}
.modal-show {
width: 100%;
height: 100%;
position: absolute; position: absolute;
top:10px; display: flex;
margin-left:10px; z-index: 900;
width:35px; 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;
}
}
}
.push {
position: absolute;
top: 10px;
margin-left: 10px;
width: 35px;
} }
.entry-content { .entry-content {
...@@ -209,7 +303,7 @@ export default { ...@@ -209,7 +303,7 @@ export default {
background-color: #fff; background-color: #fff;
padding-top: 55px; padding-top: 55px;
text-align: center; text-align: center;
border-bottom: 1px solid #D9DBDF; border-bottom: 1px solid #d9dbdf;
p { p {
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
...@@ -221,7 +315,7 @@ export default { ...@@ -221,7 +315,7 @@ export default {
div { div {
font-family: PingFangSC-Semibold; font-family: PingFangSC-Semibold;
font-size: 24px; font-size: 24px;
color: #383F45; color: #383f45;
letter-spacing: 0.86px; letter-spacing: 0.86px;
font-weight: 700; font-weight: 700;
margin-top: 10px; margin-top: 10px;
...@@ -263,17 +357,16 @@ export default { ...@@ -263,17 +357,16 @@ export default {
} }
.add-content { .add-content {
img{ img {
width: 21px; width: 21px;
} }
} }
} }
} }
} }
.foot{ .foot {
background-color: @headerColor; background-color: @headerColor;
color: #fff; color: #fff;
} }
} }
</style> </style>
src/pages/pay/marginPay/first-pay.vue
View file @ 462318ef
<template> <template>
<h-view id="margin-first-pay" class="public-style"> <h-view id="first-pay" class="public-style">
<h-header :proportion="[5,1,1]" class="bar-custom"> <h-header :proportion="[5,1,1]" class="bar-custom">
<div slot="left" class="h-header-btn"> <div slot="left" class="h-header-btn">
<img src="@/assets/userBind/arrow.png" @click="changePage"> <img src="@/assets/userBind/arrow.png" @click="goHome" >
<span>保证金支付</span> <span>保证金支付</span>
</div> </div>
</h-header> </h-header>
<h-content>
<div class="top-head">
<div class="center"> <div class="center">
<div class="now-pay"> <div class="now-pay">
<div>当前应付</div> <div class="title">当前应付</div>
<div><span>￥</span>{{ money |currency }}</div> <div class="data">
<span>￥</span>
{{ money |currency }}
</div> </div>
</div> </div>
<h-content class="pay-content"> </div>
</div>
<section class="pay-content">
<div class="pos">
<div class="pay-money"> <div class="pay-money">
<div class="pay-icon"><img src="@/assets/payment/first-pay.png" alt="">保证金支付</div> <div class="pay-icon">
<img src="@/assets/payment/first-pay.png" >保证金支付
</div>
<div class="pay-input"> <div class="pay-input">
<span>应还保证金</span> <span>应还保证金</span>
<input v-model="money" type="text" placeholder="请输入支付金额"> <input v-model="money" type="text" placeholder="请输入支付金额" >
<div @click="createOrder">
<img src="@/assets/payment/into.png" >
</div> </div>
</div> </div>
</div>
</h-content> </div>
</section>
<div class="prompt"> <div class="prompt">
<div><img src="@/assets/payment/prompt.png" alt=""></div> <div>
<img src="@/assets/payment/prompt.png" alt >
</div>
<div> <div>
<p>温馨提示</p> <p>温馨提示</p>
<p>推荐使用农行卡，农行卡支付免收手续费！</p> <p>推荐使用农行卡，农行卡支付免收手续费！</p>
</div> </div>
</div> </div>
</h-content>
<bottom-tab> <bottom-tab>
<tab-button class="footer" @click.native="toPayEntry(money)"> <tab-button class="footer" @click.native="toPayEntry(money)">支&nbsp;&nbsp;付</tab-button>
支&nbsp;&nbsp;付
</tab-button>
</bottom-tab> </bottom-tab>
</h-view> </h-view>
</template> </template>
<script> <script>
export default { export default {
name: 'FirstPay', components: {},
components: {
},
data () { data () {
return { return {
money: '', money: 0,
fromName: '', default: 0,
} }
}, },
beforeRouteEnter (to, from, next) { beforeRouteEnter (to, from, next) {
next(vm => { next(vm => {
vm.fromName = from.name
}) })
}, },
computed: {}, computed: {},
watch: {}, watch: {},
methods: { methods: {
changePage () {
this.$router.replace({
name: this.fromName,
params: {
bp_id: this.$route.params.bp_id,
status: this.$route.params.status,
isAGENT: this.$route.params.isAGENT,
},
})
this.$router.go(-1)
},
toPayEntry (money) { toPayEntry (money) {
this.$router.push({ this.$router.push({
name: 'MarginPayEntry', name: 'PayEntry',
params: { params: {
money, money,
}, },
}) })
}, },
}, },
} }
</script> </script>
<style lang='less' > <style lang='less' >
#margin-first-pay { #first-pay {
.h-header { .top-head {
background-color: #00469C; width: 100%;
.h-header-btn { height: 142px;
img { background: url("../../../assets/payment/back1.png");
width: 16px; background-size: 100% 142px;
height: 16px;
margin-left: 4px;
}
span {
font-family: PingFangSC-Semibold;
margin-left: 16px;
font-size: 17px;
letter-spacing: 0.61px;
line-height: 24px;
}
}
}
.center {
position: relative;
height: 50px;
background-color: #00469C;
.now-pay { .now-pay {
// background: url('../../../assets/payment/background.png'); width: 100%;
background-size: 365px; display: flex;
background-position: -5px; justify-content: center;
position: absolute; align-items: center;
left: 10px; flex-flow: column wrap;
z-index: 2; .title {
text-align: center;
width: 355px;
height: 89px;
border-radius: 4px;
box-shadow: 0 1px 3px 2px rgba(168,168,168,0.14);
:first-child {
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 14px; font-size: 14px;
color: #383F45; color: #ffffff;
height: 35px; margin-top: 20px;
line-height: 42px;
} }
.data {
:last-child { font-family: Verdana-Bold;
font-family: DIN-Bold;
font-size: 24px; font-size: 24px;
color: #FF8300; color: #ffffff;
font-weight: 700; letter-spacing: 0;
line-height: 18px;
span { text-align: center;
font-size: 16px; margin-top: 16px;
margin-right: 5px;
}
} }
} }
} }
.pay-content { .pay-content {
padding-top: 50px; position: relative;
top: -57px;
width: 100%;
height: 94px;
display: flex;
justify-content: center;
.pos {
width: 96%;
height: 100%;
background: #ffffff;
box-shadow: 0 1px 3px 2px rgba(168, 168, 168, 0.14);
}
.pay-money { .pay-money {
height: 74px; width: 100%;
height: 100%;
display: flex;
flex-direction: column;
flex: 1;
background-color: #fff; background-color: #fff;
padding-left: 16px; padding-left: 16px;
.pay-icon { .pay-icon {
height: 50%;
display: flex;
align-items: center;
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 14px; font-size: 14px;
color: #00469C; color: #1d3fff;
padding-top: 12px;
img{ img {
width: 18px; width: 30px;
display: block; display: block;
float: left; float: left;
margin-right: 9px; margin-right: 9px;
...@@ -163,33 +148,43 @@ export default { ...@@ -163,33 +148,43 @@ export default {
} }
.pay-input { .pay-input {
margin-top: 11px; height: 44px;
display: flex; display: flex;
align-items: center;
flex: 1;
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 14px; font-size: 14px;
color: #656464; color: #656464;
height: 37px; img {
width: 15px;
height: 17px;
}
span { span {
flex: 2; flex: 2;
text-align: left; text-align: left;
line-height: 37px; line-height: 37px;
height: 100%;
display: flex;
align-items: center;
} }
input { input {
flex: 3; flex: 3;
text-align: right; text-align: right;
padding-right: 20px; padding-right: 5px;
} }
div{ div {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
flex: 1; flex: 1;
text-align: center; text-align: center;
line-height: 37px; background: rgba(0, 70, 156, 0.08);
background: rgba(0,70,156,0.08);
i { i {
color: #00469C; color: #00469c;
font-size: 16px; font-size: 16px;
} }
} }
...@@ -197,17 +192,19 @@ export default { ...@@ -197,17 +192,19 @@ export default {
input::placeholder { input::placeholder {
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 14px; font-size: 14px;
color: #B4B4B5; color: #b4b4b5;
} }
} }
} }
} }
.prompt { .prompt {
background: rgba(142,195,30,0.10); background: rgba(142, 195, 30, 0.1);
height: 77px; height: 77px;
display: flex; display: flex;
position: absolute;
width: 100%;
bottom: 0;
div:first-child { div:first-child {
flex: 1; flex: 1;
padding: 16px 0 0 16px; padding: 16px 0 0 16px;
...@@ -219,13 +216,13 @@ export default { ...@@ -219,13 +216,13 @@ export default {
} }
div:last-child { div:last-child {
flex:12; flex: 12;
p:first-child { p:first-child {
padding-top: 16px; padding-top: 16px;
font-family: PingFangSC-Semibold; font-family: PingFangSC-Semibold;
font-size: 14px; font-size: 14px;
color: #8EC31E; color: #8ec31e;
letter-spacing: 0.5px; letter-spacing: 0.5px;
} }
...@@ -233,18 +230,15 @@ export default { ...@@ -233,18 +230,15 @@ export default {
padding-top: 15px; padding-top: 15px;
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 12px; font-size: 12px;
color: rgba(101,100,100,0.80); color: rgba(101, 100, 100, 0.8);
letter-spacing: 0.37px; letter-spacing: 0.37px;
} }
} }
} }
.bottom-tab-button{ .footer {
background: #00469C; background-color: @headerColor;
border-radius: 4px; color: #fff;
color:white;
height: 40px;
margin: 4px 2% 0 2%;
} }
} }
</style> </style>
src/pages/pay/marginPay/pay-entry.vue
View file @ 462318ef
This diff is collapsed.
src/pages/pay/payment/contract-record.vue
View file @ 462318ef
This diff is collapsed.
src/pages/pay/payment/new-list.vue 0 → 100644
View file @ 462318ef
<template>
<h-view id="first-pay" class="public-style">
<h-header :proportion="[5,1,1]" class="bar-custom">
<div slot="left" class="h-header-btn">
<img src="@/assets/userBind/arrow.png" @click="goHome" >
<span>还款明细</span>
</div>
</h-header>
<h-content>
<div class="top-head">
<div class="center">
<div class="now-pay">
<div class="title">当前应付</div>
<div class="data">
<span>￥</span>
{{ money |currency }}
</div>
</div>
</div>
</div>
<section class="pay-content">
<div class="pos">
<div class="pay-money">
<div class="pay-icon">
<img src="@/assets/payment/first-pay.png" >租金支付
</div>
<div class="pay-input">
<span>应还租金</span>
<input v-model="pay_rent" type="text" placeholder="请输入支付金额" >
<div @click="createOrder">
<img src="@/assets/payment/into.png" >
</div>
</div>
</div>
</div>
<div class="pos">
<div class="pay-money">
<div class="pay-icon">
<img src="@/assets/payment/first-pay.png" >逾期利息
</div>
<div class="pay-input">
<span>应还利息</span>
<input v-model="liquidated_damages" readonly type="text" placeholder="请输入支付金额" >
</div>
</div>
</div>
</section>
<div class="prompt">
<div>
<img src="@/assets/payment/prompt.png" alt >
</div>
<div>
<p>温馨提示</p>
<p>推荐使用农行卡，农行卡支付免收手续费！</p>
</div>
</div>
</h-content>
<bottom-tab>
<tab-button class="footer" @click.native="toPay">支&nbsp;&nbsp;付</tab-button>
</bottom-tab>
</h-view>
</template>
<script>
export default {
name: 'NewList',
components: {
},
data () {
return {
money: 0,
liquidated_damages: 0,
pay_rent: 0,
}
},
beforeRouteEnter (to, from, next) {
next(vm => {
if (from.name === 'MyInfo') {
vm.getRent()
} else if (from.name === 'Success') {
vm.money = parseInt(vm.default) - parseInt(window.sessionStorage.getItem('money'))
vm.default = vm.money
vm.pay_rent = vm.money
}
})
},
computed: {},
watch: {
'pay_rent': {
handler () {
this.money = parseFloat(parseFloat(this.pay_rent) + parseFloat(this.liquidated_damages))
},
immediate: true,
},
},
activated () {
// this.money = this.pay_rent
},
methods: {
goHome () {
this.$router.replace({
name: 'MyInfo',
})
},
getRent () {
let vm = this
let url = process.env.basePath + 'rent_repayment_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.default = parseFloat(res.info.rental_amount) + parseFloat(res.info.overdue_amount)
vm.pay_rent = res.info.rental_amount
vm.liquidated_damages = res.info.overdue_amount
} else {
hlsPopup.showLongCenter(res.message)
}
})
},
toPay () {
let vm = this
let url = process.env.basePath + 'create_order_1_amount'
let param = {
info: {
bp_id: window.sessionStorage.getItem('bp_id'),
},
}
hlsPopup.showLoading('请稍候')
vm.$post(url, param).then(function (res) {
vm.hlsPopup.hideLoading()
if (res.result === 'S') {
vm.toPayEntry(vm.money)
} else {
hlsPopup.showLongCenter(res.message)
}
})
},
createOrder () {
let vm = this
let url = process.env.basePath + 'do_order_1_con'
let param = {
info: {
bp_id: window.sessionStorage.getItem('bp_id'),
},
}
hlsPopup.showLoading('请稍候')
vm.$post(url, param).then(function (res) {
vm.hlsPopup.hideLoading()
if (res.result === 'S') {
window.sessionStorage.setItem('order_id', res.order_id)
vm.toContractRecord(vm.liquidated_damages)
} else {
hlsPopup.showLongCenter(res.message)
}
})
},
toPayEntry () {
this.$router.push({
name: 'PaymentPayEntry',
params: {
money: this.money,
},
})
},
toContractRecord (money) {
this.$router.push({
name: 'PaymentContractRecord',
params: {
money: this.liquidated_damages,
},
})
},
},
}
</script>
<style lang='less' >
#first-pay {
.top-head {
width: 100%;
height: 142px;
background: url("../../../assets/payment/back1.png");
background-size: 100% 142px;
.now-pay {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column wrap;
.title {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #ffffff;
margin-top: 20px;
}
.data {
font-family: Verdana-Bold;
font-size: 24px;
color: #ffffff;
letter-spacing: 0;
line-height: 18px;
text-align: center;
margin-top: 16px;
}
}
}
.pay-content {
position: relative;
top: -57px;
width: 100%;
height: 94px;
display: flex;
justify-content: center;
flex-flow:row wrap;
.pos {
width: 96%;
height: 100%;
background: #ffffff;
}
.pos:nth-of-type(1){
box-shadow: 0 1px 3px 2px rgba(168, 168, 168, 0.14);
}
.pos:nth-of-type(2){
box-shadow: 0 3px 5px rgba(168, 168, 168, 0.14);
}
.pay-money {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
flex: 1;
background-color: #fff;
padding-left: 16px;
.pay-icon {
height: 50%;
display: flex;
align-items: center;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #1d3fff;
img {
width: 30px;
display: block;
float: left;
margin-right: 9px;
}
}
.pay-input {
height: 44px;
display: flex;
align-items: center;
flex: 1;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #656464;
img {
width: 15px;
height: 17px;
}
span {
flex: 2;
text-align: left;
line-height: 37px;
height: 100%;
display: flex;
align-items: center;
}
input {
flex: 3;
text-align: right;
padding-right: 5px;
}
div {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
flex: 1;
text-align: center;
background: rgba(0, 70, 156, 0.08);
i {
color: #00469c;
font-size: 16px;
}
}
input::placeholder {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #b4b4b5;
}
}
}
}
.prompt {
background: rgba(142, 195, 30, 0.1);
height: 77px;
display: flex;
position: absolute;
width: 100%;
bottom: 0;
div:first-child {
flex: 1;
padding: 16px 0 0 16px;
img {
width: 16px;
height: 16px;
}
}
div:last-child {
flex: 12;
p:first-child {
padding-top: 16px;
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #8ec31e;
letter-spacing: 0.5px;
}
p:last-child {
padding-top: 15px;
font-family: PingFangSC-Regular;
font-size: 12px;
color: rgba(101, 100, 100, 0.8);
letter-spacing: 0.37px;
}
}
}
.footer {
background-color: @headerColor;
color: #fff;
}
}
</style>
src/pages/pay/payment/pay-entry.vue
View file @ 462318ef
<template> <template>
<h-view id="payment-pay-entry" class="public-style"> <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>
<h-header :proportion="[5,1,1]" class="bar-custom"> <h-header :proportion="[5,1,1]" class="bar-custom">
<div slot="left" class="h-header-btn"> <div slot="left" class="h-header-btn">
<img src="@/assets/userBind/arrow.png" @click="changePage"> <img src="@/assets/userBind/arrow.png" @click="changePage" >
<span>支付中心</span> <span>支付中心</span>
</div> </div>
</h-header> </h-header>
...@@ -13,41 +22,61 @@ ...@@ -13,41 +22,61 @@
<div>￥{{ money |currency }}</div> <div>￥{{ money |currency }}</div>
</div> </div>
<list-item :item-height="56" class="pay-way"> <list-item :item-height="56" class="pay-way">
<item v-for="(item,index) in nongBank" :proportion="[7,1,1]" :key="index" @click.native="isSelect(`nong${index}`)"> <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> v-for="(item,index) in nongBank"
:proportion="[7,1,1]"
:key="index"
@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"> <section slot="content">
<img v-show="select === `nong${index}`" src="@/assets/payment/select.png" alt=""> <img v-show="select === `nong${index}`" src="@/assets/payment/select.png" alt >
<img v-show="select !== `nong${index}`" src="@/assets/payment/unselect.png" alt=""> <img v-show="select !== `nong${index}`" src="@/assets/payment/unselect.png" alt >
</section> </section>
</item> </item>
<item :proportion="[7,1,1]" @click.native="isSelect('one')"> <item :proportion="[7,1,1]" @click.native="isSelect('one')">
<div slot="name"> <img src="@/assets/payment/alipay.png" alt="" class="icon1"> 支付宝</div> <div slot="name">
<img src="@/assets/payment/alipay.png" alt class="icon1" > 支付宝
</div>
<section slot="content"> <section slot="content">
<img v-show="select === 'one'" src="@/assets/payment/select.png" alt=""> <img v-show="select === 'one'" src="@/assets/payment/select.png" alt >
<img v-show="select !== 'one'" src="@/assets/payment/unselect.png" alt=""> <img v-show="select !== 'one'" src="@/assets/payment/unselect.png" alt >
</section> </section>
</item> </item>
<item :proportion="[7,1,1]" @click.native="isSelect('two')"> <item :proportion="[7,1,1]" @click.native="isSelect('two')">
<div slot="name"> <img src="@/assets/payment/wx.png" alt="" class="icon2"> 微信</div> <div slot="name">
<img src="@/assets/payment/wx.png" alt class="icon2" > 微信
</div>
<section slot="content"> <section slot="content">
<img v-show="select === 'two'" src="@/assets/payment/select.png" alt=""> <img v-show="select === 'two'" src="@/assets/payment/select.png" alt >
<img v-show="select !== 'two'" src="@/assets/payment/unselect.png" alt=""> <img v-show="select !== 'two'" src="@/assets/payment/unselect.png" alt >
</section> </section>
</item> </item>
<item v-for="(item,index) in newList" :proportion="[7,1,1]" :key="index" @click.native="isSelect(`three${index}`)"> <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> 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"> <section slot="content">
<img v-show="select === `three${index}`" src="@/assets/payment/select.png" alt=""> <img v-show="select === `three${index}`" src="@/assets/payment/select.png" alt >
<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>
</h-content> </h-content>
<bottom-tab> <bottom-tab>
<tab-button class="footer" @click.native="pay"> <tab-button class="footer" @click.native="pay">立即付款</tab-button>
立即付款
</tab-button>
</bottom-tab> </bottom-tab>
</h-view> </h-view>
</template> </template>
...@@ -69,12 +98,12 @@ import zs from '@/assets/payment/zs.png' ...@@ -69,12 +98,12 @@ import zs from '@/assets/payment/zs.png'
import zx from '@/assets/payment/zx.png' import zx from '@/assets/payment/zx.png'
export default { export default {
name: 'PaymentPayEntry', name: 'PaymentPayEntry',
components: { components: {},
},
data () { data () {
return { return {
money: '', money: '',
select: 'one', select: 'one',
downNum: false,
nongBank: [], // 存农行卡 nongBank: [], // 存农行卡
flag: false, // 用于判断是否有农业银行卡 flag: false, // 用于判断是否有农业银行卡
lists: [], lists: [],
...@@ -99,16 +128,16 @@ export default { ...@@ -99,16 +128,16 @@ export default {
return vm.lists return vm.lists
}, },
}, },
watch: { watch: {},
},
beforeRouteEnter (to, from, next) { beforeRouteEnter (to, from, next) {
next(vm => { next(vm => {
if (from.name === 'PaymentFirstPay') { if (from.name === 'NewList') {
vm.money = vm.$route.params.money vm.money = vm.$route.params.money
} else if (from.name === 'PaymentContractRecord') { } else if (from.name === 'PaymentContractRecord') {
vm.money = vm.$route.params.sumMoney vm.money = vm.$route.params.sumMoney
} }
vm.getType() vm.getType()
vm.nongBank = []
}) })
}, },
methods: { methods: {
...@@ -117,8 +146,12 @@ export default { ...@@ -117,8 +146,12 @@ export default {
hlsPopup.showLoading('请稍候') hlsPopup.showLoading('请稍候')
setTimeout(() => { setTimeout(() => {
vm.hlsPopup.hideLoading() vm.hlsPopup.hideLoading()
if (vm.money === 0) {
vm.downNum = true
} else {
vm.goSuccess() vm.goSuccess()
}, 1000) }
}, 2000)
}, },
selectLast (item) { selectLast (item) {
let num = item.bank_account_num let num = item.bank_account_num
...@@ -186,7 +219,7 @@ export default { ...@@ -186,7 +219,7 @@ export default {
}, },
changePage () { changePage () {
this.$router.replace({ this.$router.replace({
name: 'PaymentContractRecord', name: 'NewList',
params: { params: {
money: this.$route.params.money, money: this.$route.params.money,
}, },
...@@ -205,11 +238,59 @@ export default { ...@@ -205,11 +238,59 @@ export default {
position: relative; position: relative;
margin: 12px 8px 0 3px; margin: 12px 8px 0 3px;
} }
.push{ .push {
position: absolute;
top: 10px;
margin-left: 10px;
width: 35px;
}
.modal-show {
width: 100%;
height: 100%;
position: absolute; position: absolute;
top:10px; display: flex;
margin-left:10px; z-index: 900;
width:35px; 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 { .entry-content {
.amount { .amount {
...@@ -217,7 +298,7 @@ export default { ...@@ -217,7 +298,7 @@ export default {
background-color: #fff; background-color: #fff;
padding-top: 55px; padding-top: 55px;
text-align: center; text-align: center;
border-bottom: 1px solid #D9DBDF; border-bottom: 1px solid #d9dbdf;
p { p {
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
...@@ -229,7 +310,7 @@ export default { ...@@ -229,7 +310,7 @@ export default {
div { div {
font-family: PingFangSC-Semibold; font-family: PingFangSC-Semibold;
font-size: 24px; font-size: 24px;
color: #383F45; color: #383f45;
letter-spacing: 0.86px; letter-spacing: 0.86px;
font-weight: 700; font-weight: 700;
margin-top: 10px; margin-top: 10px;
...@@ -261,21 +342,19 @@ export default { ...@@ -261,21 +342,19 @@ export default {
margin-top: 12px; margin-top: 12px;
margin-right: 8px; margin-right: 8px;
} }
} }
.add-content { .add-content {
img{ img {
width: 21px; width: 21px;
} }
} }
} }
} }
} }
.footer{ .footer {
color: #fff; color: #fff;
background-color: @headerColor; background-color: @headerColor;
} }
} }
</style> </style>
src/pages/pay/success.vue
View file @ 462318ef
...@@ -70,7 +70,7 @@ export default { ...@@ -70,7 +70,7 @@ export default {
}) })
} else if (this.name === 'PaymentPayEntry') { } else if (this.name === 'PaymentPayEntry') {
this.$router.replace({ this.$router.replace({
name: 'PaymentFirstPay', name: 'NewList',
}) })
} }
}, },
......
src/router/index.js
View file @ 462318ef
...@@ -58,6 +58,7 @@ import Success from '@/pages/pay/success' ...@@ -58,6 +58,7 @@ import Success from '@/pages/pay/success'
import PaymentFirstPay from '@/pages/pay/payment/first-pay' import PaymentFirstPay from '@/pages/pay/payment/first-pay'
import PaymentPayEntry from '@/pages/pay/payment/pay-entry' import PaymentPayEntry from '@/pages/pay/payment/pay-entry'
import PaymentContractRecord from '@/pages/pay/payment/contract-record' import PaymentContractRecord from '@/pages/pay/payment/contract-record'
import NewList from '@/pages/pay/payment/new-list'
// 保证金支付 // 保证金支付
import MarginFirstPay from '@/pages/pay/marginPay/first-pay' import MarginFirstPay from '@/pages/pay/marginPay/first-pay'
import MarginPayEntry from '@/pages/pay/marginPay/pay-entry' import MarginPayEntry from '@/pages/pay/marginPay/pay-entry'
...@@ -203,6 +204,7 @@ export default new Router({ ...@@ -203,6 +204,7 @@ export default new Router({
// 款项支付 // 款项支付
{path: '/payment-first-pay', component: PaymentFirstPay, name: 'PaymentFirstPay', meta: {keepAlive: true}}, {path: '/payment-first-pay', component: PaymentFirstPay, name: 'PaymentFirstPay', meta: {keepAlive: true}},
{path: '/payment-pay-entry', component: PaymentPayEntry, name: 'PaymentPayEntry', meta: {keepAlive: false}}, {path: '/payment-pay-entry', component: PaymentPayEntry, name: 'PaymentPayEntry', meta: {keepAlive: false}},
{path: '/new-list', component: NewList, name: 'NewList', meta: {keepAlive: true}},
{path: '/payment-contract-record', component: PaymentContractRecord, name: 'PaymentContractRecord', meta: {keepAlive: true}}, {path: '/payment-contract-record', component: PaymentContractRecord, name: 'PaymentContractRecord', meta: {keepAlive: true}},
// 保证金支付 // 保证金支付
{path: '/margin-first-pay', component: MarginFirstPay, name: 'MarginFirstPay', meta: {keepAlive: true}}, {path: '/margin-first-pay', component: MarginFirstPay, name: 'MarginFirstPay', meta: {keepAlive: true}},
......
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