Skip to content

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

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

parent 559ce305
Hide 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 @@
</item>
<item>
<div slot="name">产品线</div>
<div slot="content">{{ detailInfo.division_n }}</div>
<div slot="content">{{ detailInfo.division_n?detailInfo.division_n:"暂无数据" }}</div>
</item>
<item>
<div slot="name">合同金额</div>
......
src/pages/myInfo/my-info.vue
View file @ 462318ef
......@@ -195,7 +195,7 @@ export default {
},
changeRent () {
this.$router.push({
name: 'PaymentFirstPay',
name: 'NewList',
})
},
updateVersion () {
......
src/pages/pay/firstPay/contract-record.vue
View file @ 462318ef
......@@ -2,58 +2,67 @@
<h-view id="contract-record" 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="$routeGo()">
<img src="@/assets/userBind/arrow.png" @click="$routeGo()" >
<span>合同记录</span>
</div>
</h-header>
<div class="center">
<div class="now-pay">
<div>当前应付</div>
<div><span>￥</span>{{ money |currency }}</div>
</div>
</div>
<h-content class="pay-content">
<section v-for="(item,index) in prj_lists" :key="index" class="contract-item">
<div class="header">
<img src="@/assets/payment/contract.png" alt="">
<p>合同号 &nbsp; {{ item.project_number }}</p>
<span>{{ item.bp_name }}</span>
</div>
<div class="title">
<div><span>款项</span><span>应还金额</span><span>已还金额</span><span>本次还款额</span></div>
</div>
<div class="content">
<div v-for="(e,i) in item.cf_lists" :key="i" class="list">
<span>{{ e.cf_item_name }}</span>
<div>{{ e.due_amount|currency }}</div>
<p>{{ e.received_amount|currency }}</p>
<input v-model="e.amount" type="text" placeholder="请输入还款金额">
<h-content class="my-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">
<section v-for="(item,index) in prj_lists" :key="index" class="contract-item">
<div class="header">
<img src="@/assets/payment/file.png" >
<p>&nbsp; {{ item.project_number }}</p>
<span>{{ item.bp_name }}</span>
</div>
<div class="content">
<div v-for="(e,i) in item.cf_lists" :key="i" class="list-item">
<span class="item-left">{{ e.cf_item_name }}</span>
<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>
<input v-model="e.amount" type="text" placeholder="请输入还款金额" >
</div>
</div>
</div>
</section>
</section>
</h-content>
<div class="prompt">
<div><img src="@/assets/payment/prompt.png" alt=""></div>
<div>
<p>温馨提示</p>
<p> 推荐使用农行卡，农行卡支付免收手续费！</p>
<p>由于存在款项到账时差性，“已还金额”字段可能XXX，给您造成的不便，请谅解，谢谢！</p>
<div class="prompt">
<div>
<img src="@/assets/payment/prompt.png" alt >
</div>
<div>
<p>温馨提示</p>
<p>推荐使用农行卡，农行卡支付免收手续费！</p>
<p>由于存在款项到账时差性，“已还金额”字段可能XXX，给您造成的不便，请谅解，谢谢！</p>
</div>
</div>
</div>
<bottom-tab >
<tab-button class="footer" @click.native="createDetail">
支&nbsp;&nbsp;付
</tab-button>
</bottom-tab>
<bottom-tab>
<tab-button class="footer" @click.native="createDetail">支&nbsp;&nbsp;付</tab-button>
</bottom-tab>
</h-content>
</h-view>
</template>
<script>
export default {
name: 'ContractRecord',
components: {
},
components: {},
data () {
return {
money: 0,
......@@ -63,7 +72,7 @@ export default {
},
watch: {
'prj_lists': {
prj_lists: {
handler (newName, oldName) {
let vm = this
let sumL = []
......@@ -90,11 +99,10 @@ export default {
},
deep: true,
},
},
beforeRouteEnter (to, from, next) {
next(vm => {
vm.getDetail()
// vm.getDetail()
})
},
......@@ -163,91 +171,74 @@ export default {
</script>
<style lang='less' >
#contract-record {
.h-header {
background-color: #00469C;
.h-header-btn {
img {
width: 16px;
height: 16px;
margin-left: 4px;
}
span {
font-family: PingFangSC-Semibold;
margin-left: 16px;
font-size: 17px;
letter-spacing: 0.61px;
line-height: 24px;
}
}
.top-head {
position: fixed;
width: 100%;
height: 142px;
background: url("../../../assets/payment/back1.png");
background-size: 100% 142px;
}
.center {
position: relative;
height: 50px;
background-color: #00469C;
.now-pay {
// background: url('../../../assets/payment/background.png');
background-size: 365px;
background-position: -5px;
position: absolute;
left: 10px;
z-index: 2;
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-size: 14px;
color: #383F45;
height: 35px;
line-height: 42px;
}
:last-child {
font-family: DIN-Bold;
font-size: 24px;
color: #FF8300;
font-weight: 700;
span {
font-size: 16px;
margin-right: 5px;
}
}
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: 1.8%;
}
.data {
font-family: Verdana-Bold;
font-size: 24px;
color: #ffffff;
letter-spacing: 0;
line-height: 18px;
margin-top: 16px;
}
}
.pay-content {
padding-top: 50px;
width: 100%;
position: relative;
top: 80px;
height: 370px;
overflow: scroll;
.contract-item {
width: 95%;
background-color: #fff;
margin: 0 auto;
box-shadow: 0 1px 3px 2px rgba(168, 168, 168, 0.14);
.header {
height: 34px;
background: rgba(0,70,156,.1);
height: 44px;
background: #fff;
display: flex;
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #00469C;
line-height: 37px;
font-size: 15px;
color: #383f45;
letter-spacing: 0;
line-height: 44px;
padding: 0 16px;
img {
height: 18px;
height: 30px;
margin-top: 10px;
margin-right: 6px;
}
p {
flex:2;
flex: 2;
border-bottom: 1px solid #f3f3f7;
font-weight: 700;
}
span {
border-bottom: 1px solid #f3f3f7;
font-weight: 700;
}
}
......@@ -256,7 +247,7 @@ export default {
padding: 0 16px;
font-family: PingFangSC-Regular;
font-size: 13px;
color: #383F45;
color: #383f45;
div {
border-bottom: 1px solid #eee;
......@@ -265,71 +256,81 @@ export default {
padding: 0 14px;
height: 37px;
line-height: 37px;
justify-content : space-between;
justify-content: space-between;
}
}
.content {
margin-bottom: 8px;
.list {
background-color: #fff;
.list-item:not(:last-of-type) {
background: url("../../../assets/payment/border.png") 0px 90px
no-repeat;
}
.list-item {
display: flex;
justify-content : space-between;
padding: 0 16px 0 20px;
height: 45px;
line-height: 45px;
text-align: center;
margin-bottom: 0px;
span {
flex:3;
text-align: left;
font-family: PingFangSC-Regular;
justify-content: space-around;
align-items: center;
height: 99px;
padding-bottom: 12px;
.item-left {
font-family: PingFangSC-Semibold;
font-size: 13px;
color: rgba(56,63,69,0.60);
}
div {
flex:5;
font-family: DIN-Bold;
font-size: 15px;
color: #00469C;
text-align: center;
font-weight: 700;
}
p {
flex:5;
font-family: DIN-Regular;
font-size: 14px;
color: rgba(56,63,69,0.60);
}
input {
flex: 5;
margin-top: 9px;
width: 96px;
height: 28px;
border: 1px solid #00469C;
border-radius: 2px;
font-size: 12px;
text-align: center;
color: #383f45;
letter-spacing: 0;
// flex: 3;
margin-top: -63px;
}
input::placeholder {
.item-center {
font-family: PingFangSC-Regular;
font-size: 12px;
color: #B4B4B5;
font-size: 13px;
color: rgba(56, 63, 69, 0.6);
letter-spacing: 0;
line-height: 30px;
// flex: 5;
}
.item-right {
// flex: 4;
line-height: 30px;
p:nth-of-type(1) {
font-family: Verdana-Bold;
font-size: 12px;
color: #1d3fff;
letter-spacing: 0;
text-align: right;
}
p:nth-of-type(2) {
font-family: Verdana-Bold;
font-size: 12px;
color: #383f45;
letter-spacing: 0;
text-align: right;
}
input {
width: 90px;
border: none;
border-bottom: 1px solid #1d3fff;
font-size: 13px;
text-align: center;
}
input::placeholder {
font-family: PingFangSC-Regular;
font-size: 13px;
color: rgba(56, 63, 69, 0.4);
letter-spacing: 0;
}
}
}
}
}
}
.prompt {
background: rgba(142,195,30,0.10);
position: absolute;
width: 100%;
bottom: 40px;
background: rgba(142, 195, 30, 0.1);
height: 111px;
display: flex;
div:first-child {
......@@ -343,37 +344,33 @@ export default {
}
div:last-child {
flex:12;
flex: 12;
p:first-child {
padding-top: 16px;
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #8EC31E;
color: #8ec31e;
letter-spacing: 0.5px;
margin-bottom: 7px;
}
p:nth-child(n+2) {
p:nth-child(n + 2) {
text-indent: 2em;
line-height: 20px;
padding-right: 16px;
font-family: PingFangSC-Regular;
font-size: 12px;
color: rgba(101,100,100,0.80);
color: rgba(101, 100, 100, 0.8);
letter-spacing: 0.37px;
margin-left: -22px;
}
}
}
.bottom-tab-button{
background: #00469C;
border-radius: 4px;
color:white;
height: 40px;
margin: 4px 2% 0 2%;
.footer {
background-color: @headerColor;
color: #fff;
}
}
</style>
src/pages/pay/firstPay/first-pay.vue
View file @ 462318ef
......@@ -29,7 +29,7 @@
<span>应还首付款</span>
<input v-model="money" type="text" placeholder="请输入支付金额" >
<div @click="createOrder">
<i class="icon ion-ios-arrow-right" />
<img src="@/assets/payment/into.png" >
</div>
</div>
</div>
......@@ -172,15 +172,15 @@ export default {
#first-pay {
.top-head {
width: 100%;
height: 206px;
height: 142px;
background: url("../../../assets/payment/back1.png");
background-size: 100% 206px;
background-size: 100% 142px;
.now-pay {
width: 90px;
margin: 0 auto;
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
flex-flow: column wrap;
.title {
font-family: PingFangSC-Regular;
font-size: 14px;
......@@ -200,7 +200,7 @@ export default {
}
.pay-content {
position: relative;
top: -47px;
top: -57px;
width: 100%;
height: 94px;
display: flex;
......@@ -225,10 +225,10 @@ export default {
align-items: center;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #00469c;
color: #1d3fff;
img {
width: 18px;
width: 30px;
display: block;
float: left;
margin-right: 9px;
......@@ -236,21 +236,24 @@ export default {
}
.pay-input {
height: 50%;
display: flex;
align-items: center;
flex:1;
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;
display: flex;
align-items: center;
}
input {
......@@ -260,9 +263,10 @@ export default {
}
div {
display: flex;
height: 100%;
align-items: center;
display: flex;
height: 100%;
align-items: center;
justify-content: center;
flex: 1;
text-align: center;
background: rgba(0, 70, 156, 0.08);
......@@ -320,12 +324,9 @@ export default {
}
}
.bottom-tab-button {
background: #00469c;
border-radius: 4px;
color: white;
height: 40px;
margin: 4px 2% 0 2%;
.footer {
background-color: @headerColor;
color: #fff;
}
}
</style>
src/pages/pay/firstPay/pay-entry.vue
View file @ 462318ef
<template>
<h-view id="pay-entry" class="public-style">
<transition name="trans">
<div v-show="downNum" class="modal-show">
<div class="down">
<p>提示</p>
<span>您好，当前余额不足，请重新支付！</span>
<button @click="downNum=false">确定</button>
</div>
</div>
</transition>
<h-header :proportion="[5,1,1]" class="bar-custom">
<div slot="left" class="h-header-btn">
<img src="@/assets/userBind/arrow.png" @click="$routeGo()">
<img src="@/assets/userBind/arrow.png" @click="$routeGo()" >
<span>支付中心</span>
</div>
</h-header>
<h-content class="entry-content">
<div class="amount">
<p>交易金额</p>
<div>￥{{ money |currency }}</div>
</div>
<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}`)">
<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>
<item
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">
<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/select.png" alt >
<img v-show="select !== `nong${index}`" src="@/assets/payment/unselect.png" alt >
</section>
</item>
<item :proportion="[7,1,1]" @click.native="isSelect('one')">
<div slot="name"> <img src="@/assets/payment/alipay.png" alt="" class="icon1"> 支付宝</div>
<div slot="name">
<img src="@/assets/payment/alipay.png" alt class="icon1" > 支付宝
</div>
<section slot="content">
<img v-show="select === 'one'" src="@/assets/payment/select.png" alt="">
<img v-show="select !== 'one'" src="@/assets/payment/unselect.png" alt="">
<img v-show="select === 'one'" src="@/assets/payment/select.png" alt >
<img v-show="select !== 'one'" src="@/assets/payment/unselect.png" alt >
</section>
</item>
<item :proportion="[7,1,1]" @click.native="isSelect('two')">
<div slot="name"> <img src="@/assets/payment/wx.png" alt="" class="icon2"> 微信</div>
<div slot="name">
<img src="@/assets/payment/wx.png" alt class="icon2" > 微信
</div>
<section slot="content">
<img v-show="select === 'two'" src="@/assets/payment/select.png" alt="">
<img v-show="select !== 'two'" src="@/assets/payment/unselect.png" alt="">
<img v-show="select === 'two'" src="@/assets/payment/select.png" alt >
<img v-show="select !== 'two'" src="@/assets/payment/unselect.png" alt >
</section>
</item>
<item
v-for="(item,index) in newList" :proportion="[7,1,1]" :key="index"
@click.native="isSelect(`three${index}`)">
<div slot="name" style="flex=3"> <img :src="selectImg(item)" alt="" class="icon"> {{ item.bank_full_name }}({{ selectLast(item) }})<img v-show="item.recommand" class="push" src="@/assets/payment/push.png"></div>
v-for="(item,index) in newList"
:proportion="[7,1,1]"
:key="index"
@click.native="isSelect(`three${index}`)"
>
<div slot="name" style="flex=3">
<img :src="selectImg(item)" alt class="icon" >
{{ item.bank_full_name }}({{ selectLast(item) }})
<img
v-show="item.recommand"
class="push"
src="@/assets/payment/push.png"
>
</div>
<section slot="content">
<img v-show="select === `three${index}`" src="@/assets/payment/select.png" alt="">
<img v-show="select !== `three${index}`" src="@/assets/payment/unselect.png" alt="">
<img v-show="select === `three${index}`" src="@/assets/payment/select.png" alt >
<img v-show="select !== `three${index}`" src="@/assets/payment/unselect.png" alt >
</section>
</item>
</list-item>
</h-content>
<bottom-tab>
<tab-button class="foot" @click.native="pay">
立即付款
</tab-button>
<tab-button class="foot" @click.native="pay">立即付款</tab-button>
</bottom-tab>
</h-view>
</template>
......@@ -72,13 +105,13 @@ import zx from '@/assets/payment/zx.png'
import bank from '@/assets/payment/bank.png'
export default {
name: 'PayEntry',
components: {
},
components: {},
data () {
return {
money: '',
select: 'three0',
name: '',
downNum: false,
recommand: false,
flag: false, // 用于判断是否有农业银行卡
lists: [],
......@@ -109,6 +142,7 @@ export default {
next(vm => {
vm.name = from.name
vm.getType()
vm.nongBank = []
})
},
......@@ -162,7 +196,11 @@ export default {
hlsPopup.showLoading('请稍候')
setTimeout(() => {
vm.hlsPopup.hideLoading()
vm.changePage()
if (vm.money === 0) {
vm.downNum = true
} else {
vm.changePage()
}
}, 2000)
},
changePage () {
......@@ -196,11 +234,67 @@ export default {
</script>
<style lang='less' >
#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;
top:10px;
margin-left:10px;
width:35px;
display: flex;
z-index: 900;
background-color: rgba(56, 63, 69, 0.3);
justify-content: center;
align-items: center;
.down {
position: relative;
width: 301px;
height: 162px;
display: flex;
justify-content: center;
flex-flow: column wrap;
align-items: center;
background-size: 301px 24.7px;
background-color: #fff;
border-radius: 8px;
p {
font-family: PingFangSC-Semibold;
font-size: 16px;
color: #1d3fff;
margin-top: 16px;
flex: 2;
}
span {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #383f45;
flex: 3;
letter-spacing: 0;
margin-top: 16px;
}
button {
width: 159px;
flex: 2;
margin-bottom: 16px;
height: 40px;
background-color: @headerColor;
font-family: PingFangSC-Semibold;
font-size: 15px;
color: #fafafa;
line-height: 20px;
}
}
}
.push {
position: absolute;
top: 10px;
margin-left: 10px;
width: 35px;
}
.entry-content {
......@@ -209,7 +303,7 @@ export default {
background-color: #fff;
padding-top: 55px;
text-align: center;
border-bottom: 1px solid #D9DBDF;
border-bottom: 1px solid #d9dbdf;
p {
font-family: PingFangSC-Regular;
......@@ -221,7 +315,7 @@ export default {
div {
font-family: PingFangSC-Semibold;
font-size: 24px;
color: #383F45;
color: #383f45;
letter-spacing: 0.86px;
font-weight: 700;
margin-top: 10px;
......@@ -263,17 +357,16 @@ export default {
}
.add-content {
img{
img {
width: 21px;
}
}
}
}
}
.foot{
background-color: @headerColor;
color: #fff;
}
.foot {
background-color: @headerColor;
color: #fff;
}
}
</style>
src/pages/pay/marginPay/first-pay.vue
View file @ 462318ef
<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">
<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>
</div>
</h-header>
<div class="center">
<div class="now-pay">
<div>当前应付</div>
<div><span>￥</span>{{ money |currency }}</div>
</div>
</div>
<h-content class="pay-content">
<div class="pay-money">
<div class="pay-icon"><img src="@/assets/payment/first-pay.png" alt="">保证金支付</div>
<div class="pay-input">
<span>应还保证金</span>
<input v-model="money" type="text" placeholder="请输入支付金额">
<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>
</h-content>
<div class="prompt">
<div><img src="@/assets/payment/prompt.png" alt=""></div>
<div>
<p>温馨提示</p>
<p>推荐使用农行卡，农行卡支付免收手续费！</p>
<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="money" type="text" placeholder="请输入支付金额" >
<div @click="createOrder">
<img src="@/assets/payment/into.png" >
</div>
</div>
</div>
</div>
</section>
<div class="prompt">
<div>
<img src="@/assets/payment/prompt.png" alt >
</div>
<div>
<p>温馨提示</p>
<p>推荐使用农行卡，农行卡支付免收手续费！</p>
</div>
</div>
</div>
</h-content>
<bottom-tab>
<tab-button class="footer" @click.native="toPayEntry(money)">
支&nbsp;&nbsp;付
</tab-button>
<tab-button class="footer" @click.native="toPayEntry(money)">支&nbsp;&nbsp;付</tab-button>
</bottom-tab>
</h-view>
</template>
<script>
export default {
name: 'FirstPay',
components: {
},
components: {},
data () {
return {
money: '',
fromName: '',
money: 0,
default: 0,
}
},
beforeRouteEnter (to, from, next) {
next(vm => {
vm.fromName = from.name
})
},
computed: {},
watch: {},
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) {
this.$router.push({
name: 'MarginPayEntry',
name: 'PayEntry',
params: {
money,
},
})
},
},
}
</script>
<style lang='less' >
#margin-first-pay {
.h-header {
background-color: #00469C;
.h-header-btn {
img {
width: 16px;
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;
#first-pay {
.top-head {
width: 100%;
height: 142px;
background: url("../../../assets/payment/back1.png");
background-size: 100% 142px;
.now-pay {
// background: url('../../../assets/payment/background.png');
background-size: 365px;
background-position: -5px;
position: absolute;
left: 10px;
z-index: 2;
text-align: center;
width: 355px;
height: 89px;
border-radius: 4px;
box-shadow: 0 1px 3px 2px rgba(168,168,168,0.14);
:first-child {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column wrap;
.title {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #383F45;
height: 35px;
line-height: 42px;
color: #ffffff;
margin-top: 20px;
}
:last-child {
font-family: DIN-Bold;
.data {
font-family: Verdana-Bold;
font-size: 24px;
color: #FF8300;
font-weight: 700;
span {
font-size: 16px;
margin-right: 5px;
}
color: #ffffff;
letter-spacing: 0;
line-height: 18px;
text-align: center;
margin-top: 16px;
}
}
}
.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 {
height: 74px;
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: #00469C;
padding-top: 12px;
color: #1d3fff;
img{
width: 18px;
img {
width: 30px;
display: block;
float: left;
margin-right: 9px;
......@@ -163,33 +148,43 @@ export default {
}
.pay-input {
margin-top: 11px;
height: 44px;
display: flex;
align-items: center;
flex: 1;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #656464;
height: 37px;
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: 20px;
padding-right: 5px;
}
div{
div {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
flex: 1;
text-align: center;
line-height: 37px;
background: rgba(0,70,156,0.08);
background: rgba(0, 70, 156, 0.08);
i {
color: #00469C;
color: #00469c;
font-size: 16px;
}
}
......@@ -197,17 +192,19 @@ export default {
input::placeholder {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #B4B4B5;
color: #b4b4b5;
}
}
}
}
.prompt {
background: rgba(142,195,30,0.10);
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;
......@@ -219,13 +216,13 @@ export default {
}
div:last-child {
flex:12;
flex: 12;
p:first-child {
padding-top: 16px;
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #8EC31E;
color: #8ec31e;
letter-spacing: 0.5px;
}
......@@ -233,18 +230,15 @@ export default {
padding-top: 15px;
font-family: PingFangSC-Regular;
font-size: 12px;
color: rgba(101,100,100,0.80);
color: rgba(101, 100, 100, 0.8);
letter-spacing: 0.37px;
}
}
}
.bottom-tab-button{
background: #00469C;
border-radius: 4px;
color:white;
height: 40px;
margin: 4px 2% 0 2%;
.footer {
background-color: @headerColor;
color: #fff;
}
}
</style>
src/pages/pay/marginPay/pay-entry.vue
View file @ 462318ef
<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">
<div slot="left" class="h-header-btn">
<img src="@/assets/userBind/arrow.png" @click="$routeGo()">
<img src="@/assets/userBind/arrow.png" @click="$routeGo()" >
<span>支付中心</span>
</div>
</h-header>
<h-content class="entry-content">
<div class="amount">
<p>首付还款</p>
<p>交易金额</p>
<div>￥{{ money |currency }}</div>
</div>
<list-item :item-height="56" class="pay-way">
<item :proportion="[7,1,1]" @click.native="isSelect('one')">
<div slot="name"> <img src="@/assets/payment/alipay.png" alt="" class="icon1"> 支付宝</div>
<item
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">
<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 === `nong${index}`" src="@/assets/payment/select.png" alt >
<img v-show="select !== `nong${index}`" src="@/assets/payment/unselect.png" alt >
</section>
</item>
<item :proportion="[7,1,1]" @click.native="isSelect('two')">
<div slot="name"> <img src="@/assets/payment/wx.png" alt="" class="icon2"> 微信</div>
<item :proportion="[7,1,1]" @click.native="isSelect('one')">
<div slot="name">
<img src="@/assets/payment/alipay.png" alt class="icon1" > 支付宝
</div>
<section slot="content">
<img v-show="select === 'two'" 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/select.png" alt >
<img v-show="select !== 'one'" src="@/assets/payment/unselect.png" alt >
</section>
</item>
<item :proportion="[7,1,1]" @click.native="isSelect('three')">
<div slot="name" style="flex=3"> <img src="@/assets/payment/ly.png" alt="" class="icon"> 中国农业银行</div>
<item :proportion="[7,1,1]" @click.native="isSelect('two')">
<div slot="name">
<img src="@/assets/payment/wx.png" alt class="icon2" > 微信
</div>
<section slot="content">
<img v-show="select === 'three'" 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/select.png" alt >
<img v-show="select !== 'two'" src="@/assets/payment/unselect.png" alt >
</section>
</item>
<item :proportion="[7,1,1]" @click.native="isSelect('four')">
<div slot="name"> <img src="@/assets/payment/js.png" alt="" class="icon"> 中国建设银行</div>
<item
v-for="(item,index) in newList"
:proportion="[7,1,1]"
:key="index"
@click.native="isSelect(`three${index}`)"
>
<div slot="name" style="flex=3">
<img :src="selectImg(item)" alt class="icon" >
{{ item.bank_full_name }}({{ selectLast(item) }})
<img
v-show="item.recommand"
class="push"
src="@/assets/payment/push.png"
>
</div>
<section slot="content">
<img v-show="select === 'four'" 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/select.png" alt >
<img v-show="select !== `three${index}`" src="@/assets/payment/unselect.png" alt >
</section>
</item>
</list-item>
</h-content>
<bottom-tab>
<tab-button class="footer">
立即付款
</tab-button>
<tab-button class="foot" @click.native="pay">立即付款</tab-button>
</bottom-tab>
</h-view>
</template>
<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 {
name: 'PayEntry',
components: {
},
components: {},
data () {
return {
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: {},
beforeRouteEnter (to, from, next) {
next(vm => {
vm.name = from.name
vm.getType()
vm.nongBank = []
})
},
activated () {
this.money = this.$route.params.money
},
methods: {
selectImg (e) {
if (e.bank_full_name.indexOf('建设') !== -1) {
return js
} else if (e.bank_full_name.indexOf('农业') !== -1) {
e.recommand = true
return ny
} else if (e.bank_full_name.indexOf('光大') !== -1) {
return gd
} else if (e.bank_full_name.indexOf('广发') !== -1) {
return gf
} else if (e.bank_full_name.indexOf('浦') !== -1) {
return pf
} else if (e.bank_full_name.indexOf('工商') !== -1) {
return gs
} else if (e.bank_full_name.indexOf('交通') !== -1) {
return jt
} else if (e.bank_full_name.indexOf('民生') !== -1) {
return ms
} else if (e.bank_full_name.indexOf('平安') !== -1) {
return pa
} else if (e.bank_full_name.indexOf('兴业') !== -1) {
return xy
} else if (e.bank_full_name.indexOf('邮') !== -1) {
return yzcx
} else if (e.bank_full_name.indexOf('中国') !== -1) {
return zg
} else if (e.bank_full_name.indexOf('招商') !== -1) {
return zs
} else if (e.bank_full_name.indexOf('中信') !== -1) {
return zx
} else {
return bank
}
},
selectLast (item) {
let num = item.bank_account_num
return num.substring(num.length - 4)
},
isSelect (way) {
this.select = way
},
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>
<style lang='less' >
#margin-pay-entry {
.h-header {
background-color: #00469C;
.h-header-btn {
img {
width: 16px;
height: 16px;
margin-left: 4px;
#pay-entry {
.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;
display: flex;
z-index: 900;
background-color: rgba(56, 63, 69, 0.3);
justify-content: center;
align-items: center;
.down {
position: relative;
width: 301px;
height: 162px;
display: flex;
justify-content: center;
flex-flow: column wrap;
align-items: center;
background-size: 301px 24.7px;
background-color: #fff;
border-radius: 8px;
p {
font-family: PingFangSC-Semibold;
font-size: 16px;
color: #1d3fff;
margin-top: 16px;
flex: 2;
}
span {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #383f45;
flex: 3;
letter-spacing: 0;
margin-top: 16px;
}
button {
width: 159px;
flex: 2;
margin-bottom: 16px;
height: 40px;
background-color: @headerColor;
font-family: PingFangSC-Semibold;
margin-left: 16px;
font-size: 17px;
letter-spacing: 0.61px;
line-height: 24px;
font-size: 15px;
color: #fafafa;
line-height: 20px;
}
}
}
.push {
position: absolute;
top: 10px;
margin-left: 10px;
width: 35px;
}
.entry-content {
.amount {
height: 166px;
background-color: #fff;
padding-top: 55px;
text-align: center;
border-bottom: 1px solid #D9DBDF;
border-bottom: 1px solid #d9dbdf;
p {
font-family: PingFangSC-Regular;
......@@ -115,7 +315,7 @@ export default {
div {
font-family: PingFangSC-Semibold;
font-size: 24px;
color: #383F45;
color: #383f45;
letter-spacing: 0.86px;
font-weight: 700;
margin-top: 10px;
......@@ -151,26 +351,22 @@ export default {
width: 30px;
display: block;
float: left;
position: relative;
margin: 12px 8px 0 3px;
}
}
.add-content {
img{
img {
width: 21px;
}
}
}
}
}
.bottom-tab-button{
background: #00469C;
border-radius: 4px;
color:white;
height: 40px;
margin: 4px 2% 0 2%;
.foot {
background-color: @headerColor;
color: #fff;
}
}
</style>
src/pages/pay/payment/contract-record.vue
View file @ 462318ef
......@@ -2,75 +2,109 @@
<h-view id="payment-contract-record" 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="$routeGo()">
<img src="@/assets/userBind/arrow.png" @click="$routeGo()" >
<span>合同记录</span>
</div>
</h-header>
<div class="center">
<div class="now-pay">
<div>当前应付</div>
<div><span>￥</span>{{ sumMoney |currency }}</div>
<h-content>
<div class="top-head">
<div class="center">
<div class="now-pay">
<div class="title">当前应付</div>
<div class="data">
<span>￥</span>
{{ sumMoney |currency }}
</div>
</div>
</div>
</div>
</div>
<h-content class="pay-content">
<div class="search">
<img src="@/assets/payment/search.png" alt="">
<input type="text" placeholder="请输入合同号/车架号/承租人名称">
<img src="@/assets/payment/search.png" alt >
<input type="text" placeholder="请输入合同号/车架号/承租人名称" >
</div>
<section v-for="(item,index) in info" :key="index" class="contract-item">
<div class="header">
<img src="@/assets/payment/contract.png" alt="">
<p>合同号 &nbsp; {{ item.project_number }}</p>
<span>{{ item.bp_name }}</span>
</div>
<div class="content">
<div v-for="(detail,index) in item.con_lists" :key="index" class="item">
<div class="list">
<div><span>参数项</span> <span>{{ detail.product_code }}</span> </div>
<div class="ing"><p>还款中</p></div>
</div>
<div class="list">
<div> <span>发动机号</span> <span>{{ detail.lease_item_engine_num }}</span> </div>
<div> <span>应还金额</span> <span class="orange">{{ detail.due_amount|currency }}</span> </div>
</div>
<div class="list">
<div><span>厂商型号</span> <span>{{ detail.lease_item_factory_num }}</span> </div>
<div><span>已还金额</span> <span class="blue">{{ detail.received_amount|currency }}</span> </div>
</div>
<div class="list">
<div><span>车牌号</span> <span>{{ detail.lease_item_car_num }}</span> </div>
<div><span>本次还款</span><section><input v-model="detail.amount" type="text" placeholder="请输入还款金额"></section></div>
<section class="pay-content">
<section v-for="(item,index) in info" :key="index" class="contract-item">
<div class="header">
<img src="@/assets/payment/file.png" alt >
<p>&nbsp; {{ item.project_number }}</p>
<span>还款中</span>
</div>
<div class="content">
<div v-for="(detail,index) in item.con_lists" :key="index" class="item">
<div class="list">
<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 class="list">
<div>
<span>参数项</span>
<span>{{ detail.product_code }}</span>
</div>
<div>
<span>应还金额</span>
<span class="orange">{{ detail.due_amount|currency }}</span>
</div>
</div>
<div class="list">
<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 class="list">
<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>
</section>
<list-item :item-height="44">
<item>
<div slot="name">逾期利息</div>
<span slot="content">{{ money|currency }}</span>
</item>
</list-item>
</section>
<list-item :item-height="44">
<item>
<div slot="name">逾期利息</div>
<span slot="content">{{ money|currency }}</span>
</item>
</list-item></h-content>
<div class="prompt">
<div><img src="@/assets/payment/prompt.png" alt=""></div>
<div>
<p>温馨提示</p>
<p> 推荐使用农行卡，农行卡支付免收手续费！</p>
<p>由于存在款项到账时差性，“已还金额”字段可能XXX，给您造成的不便，请谅解，谢谢！</p>
<div class="prompt">
<div>
<img src="@/assets/payment/prompt.png" alt >
</div>
<div>
<p>温馨提示</p>
<p>推荐使用农行卡，农行卡支付免收手续费！</p>
<p>由于存在款项到账时差性，“已还金额”字段可能XXX，给您造成的不便，请谅解，谢谢！</p>
</div>
</div>
</div>
<bottom-tab>
<tab-button class="footer" @click.native="payDetail()">
支&nbsp;&nbsp;付
</tab-button>
</bottom-tab>
<bottom-tab>
<tab-button class="footer" @click.native="payDetail()">支&nbsp;&nbsp;付</tab-button>
</bottom-tab>
</h-content>
</h-view>
</template>
<script>
export default {
name: 'PaymentContractRecord',
components: {
},
components: {},
beforeRouteEnter (to, from, next) {
next(vm => {
vm.getRentInfo()
......@@ -89,7 +123,7 @@ export default {
},
computed: {},
watch: {
'info': {
info: {
handler (newName, oldName) {
let vm = this
let sumL = []
......@@ -125,10 +159,8 @@ export default {
},
deep: true,
},
},
activated () {
},
activated () {},
methods: {
getRentInfo () {
let vm = this
......@@ -191,183 +223,148 @@ export default {
</script>
<style lang='less' >
#payment-contract-record {
.none{
display:flex;
.none {
display: flex;
justify-content: center;
align-items: center;
}
.h-header {
background-color: #00469C;
.h-header-btn {
img {
width: 16px;
height: 16px;
margin-left: 4px;
}
span {
font-family: PingFangSC-Semibold;
margin-left: 16px;
font-size: 17px;
letter-spacing: 0.61px;
line-height: 24px;
}
}
.top-head {
position: fixed;
width: 100%;
height: 92px;
background: url("../../../assets/payment/back1.png");
background-size: 100% 142px;
}
.center {
position: relative;
height: 50px;
background-color: #00469C;
.now-pay {
// background: url('../../../assets/payment/background.png');
background-size: 365px;
background-position: -5px;
.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: 1.8%;
}
.data {
font-family: Verdana-Bold;
font-size: 24px;
color: #ffffff;
letter-spacing: 0;
line-height: 18px;
margin-top: 16px;
}
.search {
width: 351px;
margin: 0 auto;
img {
position: absolute;
left: 10px;
z-index: 2;
text-align: center;
width: 355px;
height: 89px;
width: 16px;
bottom: 28px;
right: 31px;
top: 83px;
z-index: 999;
}
input {
position: fixed;
top: 20%;
width: 351px;
height: 44px;
border-radius: 4px;
box-shadow: 0 1px 3px 2px rgba(168,168,168,0.14);
:first-child {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #383F45;
height: 35px;
line-height: 42px;
}
:last-child {
font-family: DIN-Bold;
font-size: 24px;
color: #FF8300;
font-weight: 700;
padding-left: 12px;
box-shadow: 0 1px 3px 2px rgba(168, 168, 168, 0.14);
}
span {
font-size: 16px;
margin-right: 5px;
}
}
input::placeholder {
opacity: 0.4;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #b4b4b5;
}
}
.pay-content {
.search {
position: relative;
height: 108px;
background-color: #fff;
padding-top: 53px;
text-align: center;
img {
position: absolute;
width: 16px;
bottom: 28px;
right: 25px;
}
input {
width: 351px;
height: 36px;
border: 1px solid rgba(56,63,69,0.60);
border-radius: 4px;
padding-left: 12px;
}
input::placeholder {
opacity: 0.4;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #B4B4B5;
}
}
width: 100%;
position: relative;
margin-top: 32%;
height: 54%;
overflow: scroll;
.contract-item {
background-color: #fff;
box-shadow: 0 1px 3px 2px rgba(168, 168, 168, 0.14);
border-radius: 2px;
width: 359px;
margin: 0 auto;
.header {
height: 34px;
background: rgba(0,70,156,.1);
background: #fff;
display: flex;
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #00469C;
align-items: center;
line-height: 37px;
padding: 0 16px;
img {
height: 18px;
margin-top: 10px;
margin-right: 6px;
height: 30px;
}
p {
flex:2;
flex: 2;
font-family: PingFangSC-Semibold;
font-size: 15px;
color: #383f45;
letter-spacing: 0;
font-weight: 700;
}
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 {
margin-bottom: 8px;
.item {
padding: 4px 0;
background-color: #fff;
margin-bottom: 4px;
.list {
margin-bottom: 0;
display: flex;
.ing {
position: relative;
p {
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;
}
.bp-name {
width: 75px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
div {
flex:1;
flex: 1;
display: flex;
height: 28px;
line-height: 29px;
margin-left: -0px;
section{
flex:1;
section {
flex: 1;
}
input {
text-align: center;
width: 96px;
height: 28px;
border: 1px solid #00469C;
border-bottom: 1px solid #00469c;
border-radius: 2px;
font-family: PingFangSC-Regular;
font-size: 12px;
}
input::placeholder {
color: #B4B4B5;
color: #b4b4b5;
}
&:first-child {
......@@ -375,21 +372,21 @@ export default {
}
&:last-child {
flex : 3;
flex: 3;
margin-left: -40px;
}
span:last-child {
flex:1;
flex: 1;
font-family: PingFangSC-Regular;
font-size: 13px;
color: #383F45;
color: #383f45;
}
span.orange {
font-family: DIN-Bold;
font-size: 13px;
color: #FF8300;
color: #1d3fff;
font-weight: 700;
}
......@@ -397,27 +394,29 @@ export default {
font-family: DIN-Bold;
font-size: 13px;
font-weight: 700;
color: #00469C;
color: #383f45;
}
span:first-child {
flex:1;
flex: 1;
text-align: right;
margin-right: 10px;
font-family: PingFangSC-Regular;
font-size: 13px;
color: rgba(56,63,69,0.60);
color: rgba(56, 63, 69, 0.6);
}
}
}
}
}
}
}
.prompt {
background: rgba(142,195,30,0.10);
position: absolute;
width: 100%;
bottom: 40px;
background: rgba(142, 195, 30, 0.1);
height: 111px;
display: flex;
......@@ -432,36 +431,33 @@ export default {
}
div:last-child {
flex:12;
flex: 12;
p:first-child {
padding-top: 16px;
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #8EC31E;
color: #8ec31e;
letter-spacing: 0.5px;
margin-bottom: 7px;
}
p:nth-child(n+2) {
p:nth-child(n + 2) {
text-indent: 2em;
padding-right: 16px;
line-height: 20px;
font-family: PingFangSC-Regular;
font-size: 12px;
color: rgba(101,100,100,0.80);
color: rgba(101, 100, 100, 0.8);
letter-spacing: 0.37px;
margin-left: -22px;
}
}
}
.bottom-tab-button{
background: #00469C;
border-radius: 4px;
color:white;
height: 40px;
margin: 4px 2% 0 2%;
.footer {
background: @headerColor;
color: white;
}
}
</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>
<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">
<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>
</div>
</h-header>
......@@ -13,41 +22,61 @@
<div>￥{{ money |currency }}</div>
</div>
<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}`)">
<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>
<item
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">
<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/select.png" alt >
<img v-show="select !== `nong${index}`" src="@/assets/payment/unselect.png" alt >
</section>
</item>
<item :proportion="[7,1,1]" @click.native="isSelect('one')">
<div slot="name"> <img src="@/assets/payment/alipay.png" alt="" class="icon1"> 支付宝</div>
<div slot="name">
<img src="@/assets/payment/alipay.png" alt class="icon1" > 支付宝
</div>
<section slot="content">
<img v-show="select === 'one'" src="@/assets/payment/select.png" alt="">
<img v-show="select !== 'one'" src="@/assets/payment/unselect.png" alt="">
<img v-show="select === 'one'" src="@/assets/payment/select.png" alt >
<img v-show="select !== 'one'" src="@/assets/payment/unselect.png" alt >
</section>
</item>
<item :proportion="[7,1,1]" @click.native="isSelect('two')">
<div slot="name"> <img src="@/assets/payment/wx.png" alt="" class="icon2"> 微信</div>
<div slot="name">
<img src="@/assets/payment/wx.png" alt class="icon2" > 微信
</div>
<section slot="content">
<img v-show="select === 'two'" src="@/assets/payment/select.png" alt="">
<img v-show="select !== 'two'" src="@/assets/payment/unselect.png" alt="">
<img v-show="select === 'two'" src="@/assets/payment/select.png" alt >
<img v-show="select !== 'two'" src="@/assets/payment/unselect.png" alt >
</section>
</item>
<item v-for="(item,index) in newList" :proportion="[7,1,1]" :key="index" @click.native="isSelect(`three${index}`)">
<div slot="name" style="flex=3"> <img :src="selectImg(item)" alt="" class="icon"> {{ item.bank_full_name }}({{ selectLast(item) }})<img v-show="item.recommand" class="push" src="@/assets/payment/push.png"></div>
<item
v-for="(item,index) in newList"
:proportion="[7,1,1]"
:key="index"
@click.native="isSelect(`three${index}`)"
>
<div slot="name" style="flex=3">
<img :src="selectImg(item)" alt class="icon" >
{{ item.bank_full_name }}({{ selectLast(item) }})
<img v-show="item.recommand" class="push" src="@/assets/payment/push.png" >
</div>
<section slot="content">
<img v-show="select === `three${index}`" src="@/assets/payment/select.png" alt="">
<img v-show="select !== `three${index}`" src="@/assets/payment/unselect.png" alt="">
<img v-show="select === `three${index}`" src="@/assets/payment/select.png" alt >
<img v-show="select !== `three${index}`" src="@/assets/payment/unselect.png" alt >
</section>
</item>
</list-item>
</h-content>
<bottom-tab>
<tab-button class="footer" @click.native="pay">
立即付款
</tab-button>
<tab-button class="footer" @click.native="pay">立即付款</tab-button>
</bottom-tab>
</h-view>
</template>
......@@ -69,12 +98,12 @@ import zs from '@/assets/payment/zs.png'
import zx from '@/assets/payment/zx.png'
export default {
name: 'PaymentPayEntry',
components: {
},
components: {},
data () {
return {
money: '',
select: 'one',
downNum: false,
nongBank: [], // 存农行卡
flag: false, // 用于判断是否有农业银行卡
lists: [],
......@@ -99,16 +128,16 @@ export default {
return vm.lists
},
},
watch: {
},
watch: {},
beforeRouteEnter (to, from, next) {
next(vm => {
if (from.name === 'PaymentFirstPay') {
if (from.name === 'NewList') {
vm.money = vm.$route.params.money
} else if (from.name === 'PaymentContractRecord') {
vm.money = vm.$route.params.sumMoney
}
vm.getType()
vm.nongBank = []
})
},
methods: {
......@@ -117,8 +146,12 @@ export default {
hlsPopup.showLoading('请稍候')
setTimeout(() => {
vm.hlsPopup.hideLoading()
vm.goSuccess()
}, 1000)
if (vm.money === 0) {
vm.downNum = true
} else {
vm.goSuccess()
}
}, 2000)
},
selectLast (item) {
let num = item.bank_account_num
......@@ -186,7 +219,7 @@ export default {
},
changePage () {
this.$router.replace({
name: 'PaymentContractRecord',
name: 'NewList',
params: {
money: this.$route.params.money,
},
......@@ -198,18 +231,66 @@ export default {
</script>
<style lang='less' >
#payment-pay-entry {
.icon {
width: 30px;
display: block;
float: left;
position: relative;
margin: 12px 8px 0 3px;
}
.push{
.icon {
width: 30px;
display: block;
float: left;
position: relative;
margin: 12px 8px 0 3px;
}
.push {
position: absolute;
top: 10px;
margin-left: 10px;
width: 35px;
}
.modal-show {
width: 100%;
height: 100%;
position: absolute;
top:10px;
margin-left:10px;
width:35px;
display: flex;
z-index: 900;
background-color: rgba(56, 63, 69, 0.3);
justify-content: center;
align-items: center;
.down {
position: relative;
width: 301px;
height: 162px;
display: flex;
justify-content: center;
flex-flow: column wrap;
align-items: center;
background-size: 301px 24.7px;
background-color: #fff;
border-radius: 8px;
p {
font-family: PingFangSC-Semibold;
font-size: 16px;
color: #1d3fff;
margin-top: 16px;
flex: 2;
}
span {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #383f45;
flex: 3;
letter-spacing: 0;
margin-top: 16px;
}
button {
width: 159px;
flex: 2;
margin-bottom: 16px;
height: 40px;
background-color: @headerColor;
font-family: PingFangSC-Semibold;
font-size: 15px;
color: #fafafa;
line-height: 20px;
}
}
}
.entry-content {
.amount {
......@@ -217,7 +298,7 @@ export default {
background-color: #fff;
padding-top: 55px;
text-align: center;
border-bottom: 1px solid #D9DBDF;
border-bottom: 1px solid #d9dbdf;
p {
font-family: PingFangSC-Regular;
......@@ -229,7 +310,7 @@ export default {
div {
font-family: PingFangSC-Semibold;
font-size: 24px;
color: #383F45;
color: #383f45;
letter-spacing: 0.86px;
font-weight: 700;
margin-top: 10px;
......@@ -261,21 +342,19 @@ export default {
margin-top: 12px;
margin-right: 8px;
}
}
.add-content {
img{
img {
width: 21px;
}
}
}
}
}
.footer{
color: #fff;
background-color: @headerColor;
}
.footer {
color: #fff;
background-color: @headerColor;
}
}
</style>
src/pages/pay/success.vue
View file @ 462318ef
......@@ -70,7 +70,7 @@ export default {
})
} else if (this.name === 'PaymentPayEntry') {
this.$router.replace({
name: 'PaymentFirstPay',
name: 'NewList',
})
}
},
......
src/router/index.js
View file @ 462318ef
......@@ -58,6 +58,7 @@ import Success from '@/pages/pay/success'
import PaymentFirstPay from '@/pages/pay/payment/first-pay'
import PaymentPayEntry from '@/pages/pay/payment/pay-entry'
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 MarginPayEntry from '@/pages/pay/marginPay/pay-entry'
......@@ -203,6 +204,7 @@ export default new Router({
// 款项支付
{path: '/payment-first-pay', component: PaymentFirstPay, name: 'PaymentFirstPay', meta: {keepAlive: true}},
{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: '/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