Skip to content

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

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

parent 559ce305
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
...@@ -2,58 +2,67 @@ ...@@ -2,58 +2,67 @@
<h-view id="contract-record" class="public-style"> <h-view id="contract-record" 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="$routeGo()"> <img src="@/assets/userBind/arrow.png" @click="$routeGo()" >
<span>合同记录</span> <span>合同记录</span>
</div> </div>
</h-header> </h-header>
<h-content class="my-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">
<section v-for="(item,index) in prj_lists" :key="index" class="contract-item"> <section v-for="(item,index) in prj_lists" :key="index" class="contract-item">
<div class="header"> <div class="header">
<img src="@/assets/payment/contract.png" alt=""> <img src="@/assets/payment/file.png" >
<p>合同号 &nbsp; {{ item.project_number }}</p> <p>&nbsp; {{ item.project_number }}</p>
<span>{{ item.bp_name }}</span> <span>{{ item.bp_name }}</span>
</div> </div>
<div class="title">
<div><span>款项</span><span>应还金额</span><span>已还金额</span><span>本次还款额</span></div>
</div>
<div class="content"> <div class="content">
<div v-for="(e,i) in item.cf_lists" :key="i" class="list"> <div v-for="(e,i) in item.cf_lists" :key="i" class="list-item">
<span>{{ e.cf_item_name }}</span> <span class="item-left">{{ e.cf_item_name }}</span>
<div>{{ e.due_amount|currency }}</div> <div class="item-center">
<p>应还金额</p>
<p>已还金额</p>
<p>本次还款</p>
</div>
<div class="item-right">
<p>{{ e.due_amount|currency }}</p>
<p>{{ e.received_amount|currency }}</p> <p>{{ e.received_amount|currency }}</p>
<input v-model="e.amount" type="text" placeholder="请输入还款金额"> <input v-model="e.amount" type="text" placeholder="请输入还款金额" >
</div>
</div> </div>
</div> </div>
</section> </section>
</h-content> </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>
<p>由于存在款项到账时差性，“已还金额”字段可能XXX，给您造成的不便，请谅解，谢谢！</p> <p>由于存在款项到账时差性，“已还金额”字段可能XXX，给您造成的不便，请谅解，谢谢！</p>
</div> </div>
</div> </div>
<bottom-tab > <bottom-tab>
<tab-button class="footer" @click.native="createDetail"> <tab-button class="footer" @click.native="createDetail">支&nbsp;&nbsp;付</tab-button>
支&nbsp;&nbsp;付
</tab-button>
</bottom-tab> </bottom-tab>
</h-content>
</h-view> </h-view>
</template> </template>
<script> <script>
export default { export default {
name: 'ContractRecord', name: 'ContractRecord',
components: { components: {},
},
data () { data () {
return { return {
money: 0, money: 0,
...@@ -63,7 +72,7 @@ export default { ...@@ -63,7 +72,7 @@ export default {
}, },
watch: { watch: {
'prj_lists': { prj_lists: {
handler (newName, oldName) { handler (newName, oldName) {
let vm = this let vm = this
let sumL = [] let sumL = []
...@@ -90,11 +99,10 @@ export default { ...@@ -90,11 +99,10 @@ export default {
}, },
deep: true, deep: true,
}, },
}, },
beforeRouteEnter (to, from, next) { beforeRouteEnter (to, from, next) {
next(vm => { next(vm => {
vm.getDetail() // vm.getDetail()
}) })
}, },
...@@ -163,91 +171,74 @@ export default { ...@@ -163,91 +171,74 @@ export default {
</script> </script>
<style lang='less' > <style lang='less' >
#contract-record { #contract-record {
.h-header { .top-head {
background-color: #00469C; position: fixed;
.h-header-btn { width: 100%;
img { height: 142px;
width: 16px; background: url("../../../assets/payment/back1.png");
height: 16px; background-size: 100% 142px;
margin-left: 4px;
}
span {
font-family: PingFangSC-Semibold;
margin-left: 16px;
font-size: 17px;
letter-spacing: 0.61px;
line-height: 24px;
}
} }
}
.center { .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; }
text-align: center; .title {
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: 1.8%;
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 { margin-top: 16px;
font-size: 16px;
margin-right: 5px;
}
}
} }
} }
.pay-content { .pay-content {
padding-top: 50px; width: 100%;
position: relative;
top: 80px;
height: 370px;
overflow: scroll;
.contract-item { .contract-item {
width: 95%;
background-color: #fff; background-color: #fff;
margin: 0 auto;
box-shadow: 0 1px 3px 2px rgba(168, 168, 168, 0.14);
.header { .header {
height: 34px; height: 44px;
background: rgba(0,70,156,.1); background: #fff;
display: flex; display: flex;
font-family: PingFangSC-Semibold; font-family: PingFangSC-Semibold;
font-size: 14px; font-size: 15px;
color: #00469C; color: #383f45;
line-height: 37px; letter-spacing: 0;
line-height: 44px;
padding: 0 16px; padding: 0 16px;
img { img {
height: 18px; height: 30px;
margin-top: 10px; margin-top: 10px;
margin-right: 6px; margin-right: 6px;
} }
p { p {
flex:2; flex: 2;
border-bottom: 1px solid #f3f3f7;
font-weight: 700; font-weight: 700;
} }
span { span {
border-bottom: 1px solid #f3f3f7;
font-weight: 700; font-weight: 700;
} }
} }
...@@ -256,7 +247,7 @@ export default { ...@@ -256,7 +247,7 @@ export default {
padding: 0 16px; padding: 0 16px;
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 13px; font-size: 13px;
color: #383F45; color: #383f45;
div { div {
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
...@@ -265,71 +256,81 @@ export default { ...@@ -265,71 +256,81 @@ export default {
padding: 0 14px; padding: 0 14px;
height: 37px; height: 37px;
line-height: 37px; line-height: 37px;
justify-content : space-between; justify-content: space-between;
} }
} }
.content { .content {
margin-bottom: 8px; margin-bottom: 8px;
background-color: #fff;
.list { .list-item:not(:last-of-type) {
background: url("../../../assets/payment/border.png") 0px 90px
no-repeat;
}
.list-item {
display: flex; display: flex;
justify-content : space-between; justify-content: space-around;
padding: 0 16px 0 20px; align-items: center;
height: 45px; height: 99px;
line-height: 45px; padding-bottom: 12px;
text-align: center; .item-left {
margin-bottom: 0px; font-family: PingFangSC-Semibold;
font-size: 13px;
span { color: #383f45;
flex:3; letter-spacing: 0;
text-align: left; // flex: 3;
margin-top: -63px;
}
.item-center {
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 13px; font-size: 13px;
color: rgba(56,63,69,0.60); color: rgba(56, 63, 69, 0.6);
letter-spacing: 0;
line-height: 30px;
// flex: 5;
} }
.item-right {
// flex: 4;
line-height: 30px;
div { p:nth-of-type(1) {
flex:5; font-family: Verdana-Bold;
font-family: DIN-Bold; font-size: 12px;
font-size: 15px; color: #1d3fff;
color: #00469C; letter-spacing: 0;
text-align: center; text-align: right;
font-weight: 700;
} }
p:nth-of-type(2) {
p { font-family: Verdana-Bold;
flex:5; font-size: 12px;
font-family: DIN-Regular; color: #383f45;
font-size: 14px; letter-spacing: 0;
color: rgba(56,63,69,0.60); text-align: right;
} }
input { input {
flex: 5; width: 90px;
margin-top: 9px; border: none;
width: 96px; border-bottom: 1px solid #1d3fff;
height: 28px; font-size: 13px;
border: 1px solid #00469C;
border-radius: 2px;
font-size: 12px;
text-align: center; text-align: center;
} }
input::placeholder { input::placeholder {
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 12px; font-size: 13px;
color: #B4B4B5; color: rgba(56, 63, 69, 0.4);
letter-spacing: 0;
}
} }
} }
} }
} }
} }
.prompt { .prompt {
background: rgba(142,195,30,0.10); position: absolute;
width: 100%;
bottom: 40px;
background: rgba(142, 195, 30, 0.1);
height: 111px; height: 111px;
display: flex; display: flex;
div:first-child { div:first-child {
...@@ -343,37 +344,33 @@ export default { ...@@ -343,37 +344,33 @@ 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;
margin-bottom: 7px; margin-bottom: 7px;
} }
p:nth-child(n+2) { p:nth-child(n + 2) {
text-indent: 2em; text-indent: 2em;
line-height: 20px; line-height: 20px;
padding-right: 16px; padding-right: 16px;
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;
margin-left: -22px; margin-left: -22px;
} }
} }
} }
.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/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
<template> <template>
<h-view id="margin-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 :proportion="[7,1,1]" @click.native="isSelect('one')"> <item
<div slot="name"> <img src="@/assets/payment/alipay.png" alt="" class="icon1"> 支付宝</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 === 'one'" src="@/assets/payment/select.png" alt=""> <img v-show="select === `nong${index}`" src="@/assets/payment/select.png" alt >
<img v-show="select !== 'one'" 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('two')"> <item :proportion="[7,1,1]" @click.native="isSelect('one')">
<div slot="name"> <img src="@/assets/payment/wx.png" alt="" class="icon2"> 微信</div> <div slot="name">
<img src="@/assets/payment/alipay.png" alt class="icon1" > 支付宝
</div>
<section slot="content"> <section slot="content">
<img v-show="select === 'two'" src="@/assets/payment/select.png" alt=""> <img v-show="select === 'one'" src="@/assets/payment/select.png" alt >
<img v-show="select !== 'two'" 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('three')"> <item :proportion="[7,1,1]" @click.native="isSelect('two')">
<div slot="name" style="flex=3"> <img src="@/assets/payment/ly.png" alt="" class="icon"> 中国农业银行</div> <div slot="name">
<img src="@/assets/payment/wx.png" alt class="icon2" > 微信
</div>
<section slot="content"> <section slot="content">
<img v-show="select === 'three'" src="@/assets/payment/select.png" alt=""> <img v-show="select === 'two'" src="@/assets/payment/select.png" alt >
<img v-show="select !== 'three'" src="@/assets/payment/unselect.png" alt=""> <img v-show="select !== 'two'" src="@/assets/payment/unselect.png" alt >
</section> </section>
</item> </item>
<item :proportion="[7,1,1]" @click.native="isSelect('four')"> <item
<div slot="name"> <img src="@/assets/payment/js.png" alt="" class="icon"> 中国建设银行</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 === 'four'" src="@/assets/payment/select.png" alt=""> <img v-show="select === `three${index}`" src="@/assets/payment/select.png" alt >
<img v-show="select !== 'four'" 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"> <tab-button class="foot" @click.native="pay">立即付款</tab-button>
立即付款
</tab-button>
</bottom-tab> </bottom-tab>
</h-view> </h-view>
</template> </template>
<script> <script>
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 { export default {
name: 'PayEntry', name: 'PayEntry',
components: { components: {},
},
data () { data () {
return { return {
money: '', money: '',
select: 'one', select: 'three0',
name: '',
downNum: false,
recommand: false,
flag: false, // 用于判断是否有农业银行卡
lists: [],
nongBank: [], // 存农行卡
} }
}, },
computed: {}, computed: {
newList () {
let vm = this
let value
vm.lists.forEach((item, i) => {
if (item.bank_full_name.indexOf('农业') !== -1) {
value = vm.lists.splice(i, 1)
vm.nongBank.push(...value)
vm.flag = true
}
})
if (vm.flag) {
vm.select = 'nong0'
} else {
vm.select = 'one'
}
return vm.lists
},
},
watch: {}, watch: {},
beforeRouteEnter (to, from, next) {
next(vm => {
vm.name = from.name
vm.getType()
vm.nongBank = []
})
},
activated () { activated () {
this.money = this.$route.params.money this.money = this.$route.params.money
}, },
methods: { 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) { isSelect (way) {
this.select = way this.select = way
}, },
pay () {
let vm = this
hlsPopup.showLoading('请稍候')
setTimeout(() => {
vm.hlsPopup.hideLoading()
if (vm.money === 0) {
vm.downNum = true
} else {
vm.changePage()
}
}, 2000)
},
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> </script>
<style lang='less' > <style lang='less' >
#margin-pay-entry { #pay-entry {
.h-header { .trans-enter-active,
background-color: #00469C; .trans-leave-active {
.h-header-btn { transition: opacity 0.5s;
img { }
width: 16px; .trans-enter,
height: 16px; .trans-leave-active {
margin-left: 4px; opacity: 0;
}
.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 { 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-family: PingFangSC-Semibold;
margin-left: 16px; font-size: 15px;
font-size: 17px; color: #fafafa;
letter-spacing: 0.61px; line-height: 20px;
line-height: 24px;
} }
} }
} }
.push {
position: absolute;
top: 10px;
margin-left: 10px;
width: 35px;
}
.entry-content { .entry-content {
.amount { .amount {
height: 166px; height: 166px;
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;
...@@ -115,7 +315,7 @@ export default { ...@@ -115,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;
...@@ -151,26 +351,22 @@ export default { ...@@ -151,26 +351,22 @@ export default {
width: 30px; width: 30px;
display: block; display: block;
float: left; float: left;
position: relative;
margin: 12px 8px 0 3px; margin: 12px 8px 0 3px;
} }
} }
.add-content { .add-content {
img{ img {
width: 21px; width: 21px;
} }
} }
} }
} }
} }
.foot {
.bottom-tab-button{ background-color: @headerColor;
background: #00469C; color: #fff;
border-radius: 4px;
color:white;
height: 40px;
margin: 4px 2% 0 2%;
} }
} }
</style> </style>
src/pages/pay/payment/contract-record.vue
View file @ 462318ef
...@@ -2,44 +2,78 @@ ...@@ -2,44 +2,78 @@
<h-view id="payment-contract-record" class="public-style"> <h-view id="payment-contract-record" 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="$routeGo()"> <img src="@/assets/userBind/arrow.png" @click="$routeGo()" >
<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>{{ sumMoney |currency }}</div> <div class="data">
<span>￥</span>
{{ sumMoney |currency }}
</div>
</div>
</div> </div>
</div> </div>
<h-content class="pay-content">
<div class="search"> <div class="search">
<img src="@/assets/payment/search.png" alt=""> <img src="@/assets/payment/search.png" alt >
<input type="text" placeholder="请输入合同号/车架号/承租人名称"> <input type="text" placeholder="请输入合同号/车架号/承租人名称" >
</div> </div>
<section class="pay-content">
<section v-for="(item,index) in info" :key="index" class="contract-item"> <section v-for="(item,index) in info" :key="index" class="contract-item">
<div class="header"> <div class="header">
<img src="@/assets/payment/contract.png" alt=""> <img src="@/assets/payment/file.png" alt >
<p>合同号 &nbsp; {{ item.project_number }}</p> <p>&nbsp; {{ item.project_number }}</p>
<span>{{ item.bp_name }}</span> <span>还款中</span>
</div> </div>
<div class="content"> <div class="content">
<div v-for="(detail,index) in item.con_lists" :key="index" class="item"> <div v-for="(detail,index) in item.con_lists" :key="index" class="item">
<div class="list"> <div class="list">
<div><span>参数项</span> <span>{{ detail.product_code }}</span> </div> <div>
<div class="ing"><p>还款中</p></div> <span>承租人</span>
<span class="bp-name">{{ item.bp_name }}</span>
</div>
<div>
<span>车牌号</span>
<span>{{ detail.lease_item_car_num }}</span>
</div>
</div> </div>
<div class="list"> <div class="list">
<div> <span>发动机号</span> <span>{{ detail.lease_item_engine_num }}</span> </div> <div>
<div> <span>应还金额</span> <span class="orange">{{ detail.due_amount|currency }}</span> </div> <span>参数项</span>
<span>{{ detail.product_code }}</span>
</div>
<div>
<span>应还金额</span>
<span class="orange">{{ detail.due_amount|currency }}</span>
</div>
</div> </div>
<div class="list"> <div class="list">
<div><span>厂商型号</span> <span>{{ detail.lease_item_factory_num }}</span> </div> <div>
<div><span>已还金额</span> <span class="blue">{{ detail.received_amount|currency }}</span> </div> <span>发动机号</span>
<span>{{ detail.lease_item_engine_num }}</span>
</div>
<div>
<span>已还金额</span>
<span class="blue">{{ detail.received_amount|currency }}</span>
</div>
</div> </div>
<div class="list"> <div class="list">
<div><span>车牌号</span> <span>{{ detail.lease_item_car_num }}</span> </div> <div>
<div><span>本次还款</span><section><input v-model="detail.amount" type="text" placeholder="请输入还款金额"></section></div> <span>厂商型号</span>
<span>{{ detail.lease_item_factory_num }}</span>
</div>
<div>
<span>本次还款</span>
<section>
<input v-model="detail.amount" type="text" placeholder="请输入还款金额" >
</section>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -49,28 +83,28 @@ ...@@ -49,28 +83,28 @@
<div slot="name">逾期利息</div> <div slot="name">逾期利息</div>
<span slot="content">{{ money|currency }}</span> <span slot="content">{{ money|currency }}</span>
</item> </item>
</list-item></h-content> </list-item>
</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>
<p>由于存在款项到账时差性，“已还金额”字段可能XXX，给您造成的不便，请谅解，谢谢！</p> <p>由于存在款项到账时差性，“已还金额”字段可能XXX，给您造成的不便，请谅解，谢谢！</p>
</div> </div>
</div> </div>
<bottom-tab> <bottom-tab>
<tab-button class="footer" @click.native="payDetail()"> <tab-button class="footer" @click.native="payDetail()">支&nbsp;&nbsp;付</tab-button>
支&nbsp;&nbsp;付
</tab-button>
</bottom-tab> </bottom-tab>
</h-content>
</h-view> </h-view>
</template> </template>
<script> <script>
export default { export default {
name: 'PaymentContractRecord', name: 'PaymentContractRecord',
components: { components: {},
},
beforeRouteEnter (to, from, next) { beforeRouteEnter (to, from, next) {
next(vm => { next(vm => {
vm.getRentInfo() vm.getRentInfo()
...@@ -89,7 +123,7 @@ export default { ...@@ -89,7 +123,7 @@ export default {
}, },
computed: {}, computed: {},
watch: { watch: {
'info': { info: {
handler (newName, oldName) { handler (newName, oldName) {
let vm = this let vm = this
let sumL = [] let sumL = []
...@@ -125,10 +159,8 @@ export default { ...@@ -125,10 +159,8 @@ export default {
}, },
deep: true, deep: true,
}, },
},
activated () {
}, },
activated () {},
methods: { methods: {
getRentInfo () { getRentInfo () {
let vm = this let vm = this
...@@ -191,183 +223,148 @@ export default { ...@@ -191,183 +223,148 @@ export default {
</script> </script>
<style lang='less' > <style lang='less' >
#payment-contract-record { #payment-contract-record {
.none{ .none {
display:flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.h-header { .top-head {
background-color: #00469C; position: fixed;
.h-header-btn { width: 100%;
img { height: 92px;
width: 16px; background: url("../../../assets/payment/back1.png");
height: 16px; background-size: 100% 142px;
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; }
text-align: center; .title {
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: 1.8%;
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 { margin-top: 16px;
font-size: 16px;
margin-right: 5px;
}
}
}
} }
.pay-content {
.search { .search {
position: relative; width: 351px;
height: 108px; margin: 0 auto;
background-color: #fff;
padding-top: 53px;
text-align: center;
img { img {
position: absolute; position: absolute;
width: 16px; width: 16px;
bottom: 28px; bottom: 28px;
right: 25px; right: 31px;
top: 83px;
z-index: 999;
} }
input { input {
position: fixed;
top: 20%;
width: 351px; width: 351px;
height: 36px; height: 44px;
border: 1px solid rgba(56,63,69,0.60);
border-radius: 4px; border-radius: 4px;
padding-left: 12px; padding-left: 12px;
box-shadow: 0 1px 3px 2px rgba(168, 168, 168, 0.14);
} }
input::placeholder { input::placeholder {
opacity: 0.4; opacity: 0.4;
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 14px; font-size: 14px;
color: #B4B4B5; color: #b4b4b5;
} }
} }
.pay-content {
width: 100%;
position: relative;
margin-top: 32%;
height: 54%;
overflow: scroll;
.contract-item { .contract-item {
background-color: #fff; background-color: #fff;
box-shadow: 0 1px 3px 2px rgba(168, 168, 168, 0.14);
border-radius: 2px;
width: 359px;
margin: 0 auto;
.header { .header {
height: 34px; height: 34px;
background: rgba(0,70,156,.1); background: #fff;
display: flex; display: flex;
font-family: PingFangSC-Semibold; align-items: center;
font-size: 14px;
color: #00469C;
line-height: 37px; line-height: 37px;
padding: 0 16px; padding: 0 16px;
img { img {
height: 18px; height: 30px;
margin-top: 10px;
margin-right: 6px;
} }
p { p {
flex:2; flex: 2;
font-family: PingFangSC-Semibold;
font-size: 15px;
color: #383f45;
letter-spacing: 0;
font-weight: 700; font-weight: 700;
} }
span { span {
font-weight: 700; display: inline-block;
width: 57px;
height: 21px;
text-align: center;
line-height: 21px;
border: 1px solid #1d3fff;
border-radius: 2px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #3957ff;
letter-spacing: 0;
} }
} }
.content { .content {
margin-bottom: 8px; margin-bottom: 8px;
.item { .item {
padding: 4px 0; padding: 4px 0;
background-color: #fff; background-color: #fff;
margin-bottom: 4px; margin-bottom: 4px;
.list { .list {
margin-bottom: 0; margin-bottom: 0;
display: flex; display: flex;
.bp-name {
.ing { width: 75px;
position: relative; overflow: hidden;
text-overflow: ellipsis;
p { white-space: nowrap;
position: absolute;
top: 5px;
right: 22px;
width: 48px;
height: 18px;
background: #FF8300;
border-radius: 2px;
font-family: PingFangSC-Semibold;
font-size: 12px;
color: #FFFFFF;
text-align: center;
line-height: 18px;
} }
}
div { div {
flex:1; flex: 1;
display: flex; display: flex;
height: 28px; height: 28px;
line-height: 29px; line-height: 29px;
margin-left: -0px; margin-left: -0px;
section {
section{ flex: 1;
flex:1;
} }
input { input {
text-align: center; text-align: center;
width: 96px; width: 96px;
height: 28px; height: 28px;
border: 1px solid #00469C; border-bottom: 1px solid #00469c;
border-radius: 2px; border-radius: 2px;
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 12px; font-size: 12px;
} }
input::placeholder { input::placeholder {
color: #B4B4B5; color: #b4b4b5;
} }
&:first-child { &:first-child {
...@@ -375,21 +372,21 @@ export default { ...@@ -375,21 +372,21 @@ export default {
} }
&:last-child { &:last-child {
flex : 3; flex: 3;
margin-left: -40px; margin-left: -40px;
} }
span:last-child { span:last-child {
flex:1; flex: 1;
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 13px; font-size: 13px;
color: #383F45; color: #383f45;
} }
span.orange { span.orange {
font-family: DIN-Bold; font-family: DIN-Bold;
font-size: 13px; font-size: 13px;
color: #FF8300; color: #1d3fff;
font-weight: 700; font-weight: 700;
} }
...@@ -397,27 +394,29 @@ export default { ...@@ -397,27 +394,29 @@ export default {
font-family: DIN-Bold; font-family: DIN-Bold;
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
color: #00469C; color: #383f45;
} }
span:first-child { span:first-child {
flex:1; flex: 1;
text-align: right; text-align: right;
margin-right: 10px; margin-right: 10px;
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 13px; font-size: 13px;
color: rgba(56,63,69,0.60); color: rgba(56, 63, 69, 0.6);
} }
} }
} }
} }
} }
} }
} }
.prompt { .prompt {
background: rgba(142,195,30,0.10); position: absolute;
width: 100%;
bottom: 40px;
background: rgba(142, 195, 30, 0.1);
height: 111px; height: 111px;
display: flex; display: flex;
...@@ -432,36 +431,33 @@ export default { ...@@ -432,36 +431,33 @@ 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;
margin-bottom: 7px; margin-bottom: 7px;
} }
p:nth-child(n+2) { p:nth-child(n + 2) {
text-indent: 2em; text-indent: 2em;
padding-right: 16px; padding-right: 16px;
line-height: 20px; line-height: 20px;
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;
margin-left: -22px; margin-left: -22px;
} }
} }
} }
.bottom-tab-button{ .footer {
background: #00469C; background: @headerColor;
border-radius: 4px; color: white;
color:white;
height: 40px;
margin: 4px 2% 0 2%;
} }
} }
</style> </style>
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