Skip to content

H
hls-xcmg-vue-app
Commit 4eae0302 authored by 24776's avatar 24776
Browse files
Options

支付

parent 6b847af3
Hide whitespace changes
Inline Side-by-side
Showing with 1976 additions and 1 deletion
src/pages/pay/firstPay/contract-record.vue 0 → 100644
View file @ 4eae0302
<template>
<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()">
<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 2" :key="index" class="contract-item">
<div class="header">
<img src="@/assets/payment/contract.png" alt="">
<p>合同号 &nbsp; CON201903022001</p>
<span>张三</span>
</div>
<div class="title">
<div><span>款项</span><span>应还金额</span><span>已还金额</span><span>本次还款额</span></div>
</div>
<div class="content">
<div class="list">
<span>首付款</span>
<div>300,000.00</div>
<p>9,000.00</p>
<input v-model="first_pay" type="text" placeholder="请输入还款金额">
</div>
<div class="list">
<span>保证金</span>
<div>1,000.00</div>
<p>9,000.00</p>
<input type="text" placeholder="请输入还款金额">
</div>
<div class="list">
<span>手续费</span>
<div>50,000.00</div>
<p>9,000.00</p>
<input type="text" placeholder="请输入还款金额">
</div>
</div>
</section>
</h-content>
<div class="prompt">
<div><img src="@/assets/payment/prompt.png" alt=""></div>
<div>
<p>温馨提示</p>
<p> 推荐使用农行卡，农行卡支付免收手续费！</p>
<p>由于存在款项到账时差性，“已还金额”字段可能XXX，给您造成的不便，请谅解，谢谢！</p>
</div>
</div>
<bottom-tab>
<tab-button class="footer" @click.native="toPayEntry(money)">
支&nbsp;&nbsp;付
</tab-button>
</bottom-tab>
</h-view>
</template>
<script>
export default {
name: 'ContractRecord',
components: {
},
data () {
return {
money: '',
first_pay: '',
}
},
computed: {},
watch: {},
activated () {
this.money = this.$route.params.money
},
methods: {
toPayEntry (money) {
this.$router.push({
name: 'PayEntry',
params: {
money,
},
})
},
},
}
</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;
}
}
}
.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;
}
}
}
}
.pay-content {
padding-top: 50px;
.contract-item {
background-color: #fff;
.header {
height: 34px;
background: rgba(0,70,156,.1);
display: flex;
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #00469C;
line-height: 37px;
padding: 0 16px;
img {
height: 18px;
margin-top: 10px;
margin-right: 6px;
}
p {
flex:2;
font-weight: 700;
}
span {
font-weight: 700;
}
}
.title {
padding: 0 16px;
font-family: PingFangSC-Regular;
font-size: 13px;
color: #383F45;
div {
border-bottom: 1px solid #eee;
display: flex;
text-align: center;
padding: 0 14px;
height: 37px;
line-height: 37px;
justify-content : space-between;
}
}
.content {
margin-bottom: 8px;
.list {
display: flex;
justify-content : space-between;
padding: 0 16px 0 20px;
height: 45px;
line-height: 45px;
text-align: center;
margin-bottom: 0px;
span {
font-family: PingFangSC-Regular;
font-size: 13px;
color: rgba(56,63,69,0.60);
}
div {
font-family: DIN-Bold;
font-size: 15px;
color: #00469C;
font-weight: 700;
}
p {
font-family: DIN-Regular;
font-size: 14px;
color: rgba(56,63,69,0.60);
}
input {
margin-top: 9px;
width: 96px;
height: 28px;
border: 1px solid #00469C;
border-radius: 2px;
font-size: 12px;
text-align: center;
}
input::placeholder {
font-family: PingFangSC-Regular;
font-size: 12px;
color: #B4B4B5;
}
}
}
}
}
.prompt {
background: rgba(142,195,30,0.10);
height: 111px;
display: flex;
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;
margin-bottom: 7px;
}
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);
letter-spacing: 0.37px;
margin-left: -22px;
}
}
}
.bottom-tab-button{
background: #00469C;
border-radius: 4px;
color:white;
height: 40px;
margin: 4px 2% 0 2%;
}
}
</style>
src/pages/pay/firstPay/first-pay.vue 0 → 100644
View file @ 4eae0302
<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="$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">
<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="请输入支付金额">
<div @click="toContractRecord(money)"><i class="icon ion-ios-arrow-right"/></div>
</div>
</div>
</h-content>
<div class="prompt">
<div><img src="@/assets/payment/prompt.png" alt=""></div>
<div>
<p>温馨提示</p>
<p>推荐使用农行卡，农行卡支付免收手续费！</p>
</div>
</div>
<bottom-tab>
<tab-button class="footer" @click.native="toPayEntry(money)">
支&nbsp;&nbsp;付
</tab-button>
</bottom-tab>
</h-view>
</template>
<script>
export default {
name: 'FirstPay',
components: {
},
data () {
return {
money: '',
}
},
computed: {},
watch: {},
methods: {
toPayEntry (money) {
this.$router.push({
name: 'PayEntry',
params: {
money,
},
})
},
toContractRecord (money) {
this.$router.push({
name: 'ContractRecord',
params: {
money,
},
})
},
},
}
</script>
<style lang='less' >
#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;
.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;
}
}
}
}
.pay-content {
padding-top: 50px;
.pay-money {
height: 74px;
background-color: #fff;
padding-left: 16px;
.pay-icon {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #00469C;
padding-top: 12px;
img{
width: 18px;
display: block;
float: left;
margin-right: 9px;
}
}
.pay-input {
margin-top: 11px;
display: flex;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #656464;
height: 37px;
span {
flex: 2;
text-align: left;
line-height: 37px;
}
input {
flex: 3;
text-align: right;
padding-right: 5px;
}
div{
flex: 1;
text-align: center;
line-height: 37px;
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.10);
height: 77px;
display: flex;
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.80);
letter-spacing: 0.37px;
}
}
}
.bottom-tab-button{
background: #00469C;
border-radius: 4px;
color:white;
height: 40px;
margin: 4px 2% 0 2%;
}
}
</style>
src/pages/pay/firstPay/pay-entry.vue 0 → 100644
View file @ 4eae0302
<template>
<h-view id="pay-entry" 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()">
<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 :proportion="[7,1,1]" @click.native="isSelect('one')">
<div slot="name"> <img src="@/assets/payment/alipay.png" alt="" class="icon1"> 支付宝</div>
<section slot="content">
<img v-show="select === 'one'" src="@/assets/payment/select.png" alt="">
<img v-show="select !== 'one'" src="@/assets/payment/unselect.png" alt="">
</section>
</item>
<item :proportion="[7,1,1]" @click.native="isSelect('two')">
<div slot="name"> <img src="@/assets/payment/wx.png" alt="" class="icon2"> 微信</div>
<section slot="content">
<img v-show="select === 'two'" src="@/assets/payment/select.png" alt="">
<img v-show="select !== 'two'" src="@/assets/payment/unselect.png" alt="">
</section>
</item>
<item :proportion="[7,1,1]" @click.native="isSelect('three')">
<div slot="name" style="flex=3"> <img src="@/assets/payment/ly.png" alt="" class="icon"> 中国农业银行</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="">
</section>
</item>
<item :proportion="[7,1,1]" @click.native="isSelect('four')">
<div slot="name"> <img src="@/assets/payment/js.png" alt="" class="icon"> 中国建设银行</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="">
</section>
</item>
</list-item>
</h-content>
<bottom-tab>
<tab-button class="footer">
立即付款
</tab-button>
</bottom-tab>
</h-view>
</template>
<script>
export default {
name: 'PayEntry',
components: {
},
data () {
return {
money: '',
select: 'one',
}
},
computed: {},
watch: {},
activated () {
this.money = this.$route.params.money
},
methods: {
isSelect (way) {
this.select = way
},
},
}
</script>
<style lang='less' >
#pay-entry {
.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;
}
}
}
.entry-content {
.amount {
height: 166px;
background-color: #fff;
padding-top: 55px;
text-align: center;
border-bottom: 1px solid #D9DBDF;
p {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #656464;
letter-spacing: 0;
}
div {
font-family: PingFangSC-Semibold;
font-size: 24px;
color: #383F45;
letter-spacing: 0.86px;
font-weight: 700;
margin-top: 10px;
}
}
.pay-way {
.hls-item {
padding-left: 12px;
.add-name {
flex: 3;
line-height: 56px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #656464;
.icon1 {
width: 34px;
height: 34px;
display: block;
float: left;
margin-top: 10px;
margin-right: 5px;
}
.icon2 {
width: 32px;
display: block;
float: left;
margin-top: 12px;
margin-right: 8px;
}
.icon {
width: 30px;
display: block;
float: left;
margin: 12px 8px 0 3px;
}
}
.add-content {
img{
width: 21px;
}
}
}
}
}
.bottom-tab-button{
background: #00469C;
border-radius: 4px;
color:white;
height: 40px;
margin: 4px 2% 0 2%;
}
}
</style>
src/pages/pay/marginPay/first-pay.vue 0 → 100644
View file @ 4eae0302
<template>
<h-view id="margin-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="$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">
<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="请输入支付金额">
</div>
</div>
</h-content>
<div class="prompt">
<div><img src="@/assets/payment/prompt.png" alt=""></div>
<div>
<p>温馨提示</p>
<p>推荐使用农行卡，农行卡支付免收手续费！</p>
</div>
</div>
<bottom-tab>
<tab-button class="footer" @click.native="toPayEntry(money)">
支&nbsp;&nbsp;付
</tab-button>
</bottom-tab>
</h-view>
</template>
<script>
export default {
name: 'FirstPay',
components: {
},
data () {
return {
money: '',
}
},
computed: {},
watch: {},
methods: {
toPayEntry (money) {
this.$router.push({
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;
.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;
}
}
}
}
.pay-content {
padding-top: 50px;
.pay-money {
height: 74px;
background-color: #fff;
padding-left: 16px;
.pay-icon {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #00469C;
padding-top: 12px;
img{
width: 18px;
display: block;
float: left;
margin-right: 9px;
}
}
.pay-input {
margin-top: 11px;
display: flex;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #656464;
height: 37px;
span {
flex: 2;
text-align: left;
line-height: 37px;
}
input {
flex: 3;
text-align: right;
padding-right: 20px;
}
div{
flex: 1;
text-align: center;
line-height: 37px;
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.10);
height: 77px;
display: flex;
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.80);
letter-spacing: 0.37px;
}
}
}
.bottom-tab-button{
background: #00469C;
border-radius: 4px;
color:white;
height: 40px;
margin: 4px 2% 0 2%;
}
}
</style>
src/pages/pay/marginPay/pay-entry.vue 0 → 100644
View file @ 4eae0302
<template>
<h-view id="margin-pay-entry" 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()">
<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 :proportion="[7,1,1]" @click.native="isSelect('one')">
<div slot="name"> <img src="@/assets/payment/alipay.png" alt="" class="icon1"> 支付宝</div>
<section slot="content">
<img v-show="select === 'one'" src="@/assets/payment/select.png" alt="">
<img v-show="select !== 'one'" src="@/assets/payment/unselect.png" alt="">
</section>
</item>
<item :proportion="[7,1,1]" @click.native="isSelect('two')">
<div slot="name"> <img src="@/assets/payment/wx.png" alt="" class="icon2"> 微信</div>
<section slot="content">
<img v-show="select === 'two'" src="@/assets/payment/select.png" alt="">
<img v-show="select !== 'two'" src="@/assets/payment/unselect.png" alt="">
</section>
</item>
<item :proportion="[7,1,1]" @click.native="isSelect('three')">
<div slot="name" style="flex=3"> <img src="@/assets/payment/ly.png" alt="" class="icon"> 中国农业银行</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="">
</section>
</item>
<item :proportion="[7,1,1]" @click.native="isSelect('four')">
<div slot="name"> <img src="@/assets/payment/js.png" alt="" class="icon"> 中国建设银行</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="">
</section>
</item>
</list-item>
</h-content>
<bottom-tab>
<tab-button class="footer">
立即付款
</tab-button>
</bottom-tab>
</h-view>
</template>
<script>
export default {
name: 'PayEntry',
components: {
},
data () {
return {
money: '',
select: 'one',
}
},
computed: {},
watch: {},
activated () {
this.money = this.$route.params.money
},
methods: {
isSelect (way) {
this.select = way
},
},
}
</script>
<style lang='less' >
#margin-pay-entry {
.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;
}
}
}
.entry-content {
.amount {
height: 166px;
background-color: #fff;
padding-top: 55px;
text-align: center;
border-bottom: 1px solid #D9DBDF;
p {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #656464;
letter-spacing: 0;
}
div {
font-family: PingFangSC-Semibold;
font-size: 24px;
color: #383F45;
letter-spacing: 0.86px;
font-weight: 700;
margin-top: 10px;
}
}
.pay-way {
.hls-item {
padding-left: 12px;
.add-name {
flex: 3;
line-height: 56px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #656464;
.icon1 {
width: 34px;
height: 34px;
display: block;
float: left;
margin-top: 10px;
margin-right: 5px;
}
.icon2 {
width: 32px;
display: block;
float: left;
margin-top: 12px;
margin-right: 8px;
}
.icon {
width: 30px;
display: block;
float: left;
margin: 12px 8px 0 3px;
}
}
.add-content {
img{
width: 21px;
}
}
}
}
}
.bottom-tab-button{
background: #00469C;
border-radius: 4px;
color:white;
height: 40px;
margin: 4px 2% 0 2%;
}
}
</style>
src/pages/pay/payment/contract-record.vue 0 → 100644
View file @ 4eae0302
<template>
<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()">
<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="search">
<img src="@/assets/payment/search.png" alt="">
<input type="text" placeholder="请输入合同号/车架号/承租人名称">
</div>
<section v-for="(item,index) in 2" :key="index" class="contract-item">
<div class="header">
<img src="@/assets/payment/contract.png" alt="">
<p>合同号 &nbsp; CON201903022001</p>
<span>张三</span>
</div>
<div class="content">
<div class="item">
<div class="list">
<div><span>参数项</span> <span>JC1213</span> </div>
<div class="ing"><p>还款中</p></div>
</div>
<div class="list">
<div> <span>发动机号</span> <span>JC1213210</span> </div>
<div> <span>应还金额</span> <span class="orange">60，000.00</span> </div>
</div>
<div class="list">
<div><span>厂商型号</span> <span>98765556</span> </div>
<div><span>已还金额</span> <span class="blue">60，000.00</span> </div>
</div>
<div class="list">
<div><span>车牌号</span> <span>98765556</span> </div>
<div><span>本次还款</span><section><input type="text" placeholder="请输入还款金额"></section></div>
</div>
</div>
<div class="item">
<div class="list">
<div><span>参数项</span> <span>JC1213</span> </div>
<div class="ing"/>
</div>
<div class="list">
<div> <span>发动机号</span> <span>JC1213210</span> </div>
<div> <span>应还金额</span> <span class="blue">60，000.00</span> </div>
</div>
<div class="list">
<div><span>厂商型号</span> <span>98765556</span> </div>
<div><span>已还金额</span> <span class="blue">60，000.00</span> </div>
</div>
<div class="list">
<div><span>车牌号</span> <span>98765556</span> </div>
<div/>
</div>
</div>
</div>
</section>
</h-content>
<div class="prompt">
<div><img src="@/assets/payment/prompt.png" alt=""></div>
<div>
<p>温馨提示</p>
<p> 推荐使用农行卡，农行卡支付免收手续费！</p>
<p>由于存在款项到账时差性，“已还金额”字段可能XXX，给您造成的不便，请谅解，谢谢！</p>
</div>
</div>
<bottom-tab>
<tab-button class="footer" @click.native="toPayEntry(money)">
支&nbsp;&nbsp;付
</tab-button>
</bottom-tab>
</h-view>
</template>
<script>
export default {
name: 'PaymentContractRecord',
components: {
},
data () {
return {
money: '',
}
},
computed: {},
watch: {},
activated () {
this.money = this.$route.params.money
},
methods: {
toPayEntry (money) {
this.$router.push({
name: 'PaymentPayEntry',
params: {
money,
},
})
},
},
}
</script>
<style lang='less' >
#payment-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;
}
}
}
.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;
}
}
}
}
.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;
}
}
.contract-item {
background-color: #fff;
.header {
height: 34px;
background: rgba(0,70,156,.1);
display: flex;
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #00469C;
line-height: 37px;
padding: 0 16px;
img {
height: 18px;
margin-top: 10px;
margin-right: 6px;
}
p {
flex:2;
font-weight: 700;
}
span {
font-weight: 700;
}
}
.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;
}
}
div {
flex:1;
display: flex;
height: 28px;
line-height: 29px;
margin-left: -0px;
section{
flex:1;
}
input {
text-align: center;
width: 96px;
height: 28px;
border: 1px solid #00469C;
border-radius: 2px;
font-family: PingFangSC-Regular;
font-size: 12px;
}
input::placeholder {
color: #B4B4B5;
}
&:first-child {
flex: 2;
}
&:last-child {
flex : 3;
margin-left: -40px;
}
span:last-child {
flex:1;
font-family: PingFangSC-Regular;
font-size: 13px;
color: #383F45;
}
span.orange {
font-family: DIN-Bold;
font-size: 13px;
color: #FF8300;
font-weight: 700;
}
span.blue {
font-family: DIN-Bold;
font-size: 13px;
font-weight: 700;
color: #00469C;
}
span:first-child {
flex:1;
text-align: right;
margin-right: 10px;
font-family: PingFangSC-Regular;
font-size: 13px;
color: rgba(56,63,69,0.60);
}
}
}
}
}
}
}
.prompt {
background: rgba(142,195,30,0.10);
height: 111px;
display: flex;
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;
margin-bottom: 7px;
}
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);
letter-spacing: 0.37px;
margin-left: -22px;
}
}
}
.bottom-tab-button{
background: #00469C;
border-radius: 4px;
color:white;
height: 40px;
margin: 4px 2% 0 2%;
}
}
</style>
src/pages/pay/payment/first-pay.vue 0 → 100644
View file @ 4eae0302
<template>
<h-view id="payment-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="$routeGo()">
<span>还款明细</span>
</div>
</h-header>
<div class="center">
<div class="now-pay">
<div>当前应付</div>
<div><span>￥</span>{{ liquidated_damages?money:pay_rent |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>
<p>{{ pay_rent |currency }}</p>
<div @click="toContractRecord(liquidated_damages)"><i class="icon ion-ios-arrow-right"/></div>
</div>
</div>
<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="liquidated_damages" type="text" placeholder="请输入支付金额">
</div>
</div>
</h-content>
<div class="prompt">
<div><img src="@/assets/payment/prompt.png" alt=""></div>
<div>
<p>温馨提示</p>
<p>推荐使用农行卡，农行卡支付免收手续费！</p>
</div>
</div>
<bottom-tab>
<tab-button class="footer" @click.native="toPayEntry(money)">
支&nbsp;&nbsp;付
</tab-button>
</bottom-tab>
</h-view>
</template>
<script>
export default {
name: 'PaymentFirstPay',
components: {
},
data () {
return {
money: '',
liquidated_damages: null,
pay_rent: 50000,
}
},
computed: {},
watch: {
'liquidated_damages': function () {
this.money = parseFloat(this.pay_rent) + parseFloat(this.liquidated_damages)
if (!this.liquidated_damages) { this.money = this.pay_rent }
},
},
activated () {
this.money = this.pay_rent
},
methods: {
toPayEntry (money) {
this.$router.push({
name: 'PaymentPayEntry',
params: {
money,
},
})
},
toContractRecord (money) {
this.$router.push({
name: 'PaymentContractRecord',
params: {
money,
},
})
},
},
}
</script>
<style lang='less' >
#payment-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;
.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;
}
}
}
}
.pay-content {
padding-top: 50px;
.pay-money {
height: 74px;
background-color: #fff;
padding-left: 16px;
margin-bottom: 8px;
.pay-icon {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #00469C;
padding-top: 12px;
img{
width: 18px;
display: block;
float: left;
margin-right: 9px;
}
}
.pay-input {
margin-top: 11px;
display: flex;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #656464;
height: 37px;
span {
flex: 2;
text-align: left;
line-height: 37px;
}
p {
flex: 3;
line-height: 37px;
font-size: 14px;
margin-right: 5px;
text-align: right;
}
input {
flex: 3;
text-align: right;
padding-right: 16px;
}
div{
flex: 1;
text-align: center;
line-height: 37px;
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.10);
height: 77px;
display: flex;
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.80);
letter-spacing: 0.37px;
}
}
}
.bottom-tab-button{
background: #00469C;
border-radius: 4px;
color:white;
height: 40px;
margin: 4px 2% 0 2%;
}
}
</style>
src/pages/pay/payment/pay-entry.vue 0 → 100644
View file @ 4eae0302
<template>
<h-view id="payment-pay-entry" 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()">
<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 :proportion="[7,1,1]" @click.native="isSelect('one')">
<div slot="name"> <img src="@/assets/payment/alipay.png" alt="" class="icon1"> 支付宝</div>
<section slot="content">
<img v-show="select === 'one'" src="@/assets/payment/select.png" alt="">
<img v-show="select !== 'one'" src="@/assets/payment/unselect.png" alt="">
</section>
</item>
<item :proportion="[7,1,1]" @click.native="isSelect('two')">
<div slot="name"> <img src="@/assets/payment/wx.png" alt="" class="icon2"> 微信</div>
<section slot="content">
<img v-show="select === 'two'" src="@/assets/payment/select.png" alt="">
<img v-show="select !== 'two'" src="@/assets/payment/unselect.png" alt="">
</section>
</item>
<item :proportion="[7,1,1]" @click.native="isSelect('three')">
<div slot="name" style="flex=3"> <img src="@/assets/payment/ly.png" alt="" class="icon"> 中国农业银行</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="">
</section>
</item>
<item :proportion="[7,1,1]" @click.native="isSelect('four')">
<div slot="name"> <img src="@/assets/payment/js.png" alt="" class="icon"> 中国建设银行</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="">
</section>
</item>
</list-item>
</h-content>
<bottom-tab>
<tab-button class="footer">
立即付款
</tab-button>
</bottom-tab>
</h-view>
</template>
<script>
export default {
name: 'PaymentPayEntry',
components: {
},
data () {
return {
money: '',
select: 'one',
}
},
computed: {},
watch: {},
activated () {
this.money = this.$route.params.money
},
methods: {
isSelect (way) {
this.select = way
},
},
}
</script>
<style lang='less' >
#payment-pay-entry {
.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;
}
}
}
.entry-content {
.amount {
height: 166px;
background-color: #fff;
padding-top: 55px;
text-align: center;
border-bottom: 1px solid #D9DBDF;
p {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #656464;
letter-spacing: 0;
}
div {
font-family: PingFangSC-Semibold;
font-size: 24px;
color: #383F45;
letter-spacing: 0.86px;
font-weight: 700;
margin-top: 10px;
}
}
.pay-way {
.hls-item {
padding-left: 12px;
.add-name {
flex: 3;
line-height: 56px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #656464;
.icon1 {
width: 34px;
height: 34px;
display: block;
float: left;
margin-top: 10px;
margin-right: 5px;
}
.icon2 {
width: 32px;
display: block;
float: left;
margin-top: 12px;
margin-right: 8px;
}
.icon {
width: 30px;
display: block;
float: left;
margin: 12px 8px 0 3px;
}
}
.add-content {
img{
width: 21px;
}
}
}
}
}
.bottom-tab-button{
background: #00469C;
border-radius: 4px;
color:white;
height: 40px;
margin: 4px 2% 0 2%;
}
}
</style>
src/router/index.js
View file @ 4eae0302
......@@ -42,12 +42,22 @@ import ContractDetails from '@/pages/distributorSign/contract-details'
import FinancDetails from '@/pages/distributorSign/financ-details' // 还款计划
import FinancingTrial from '@/pages/distributorSign/financing-trial'
import FinancingDetails from '@/pages/distributorSign/financing-details' // 融资明细
// 合同签约
import ContractSigning from '../pages/contractSigning/contract-signing'
import ContractDetail from '@/pages/ContractSigning/contract-detail'
import ContractContent from '@/pages/ContractSigning/contract-content'
import EntryInfo from '@/pages/ContractSigning/entry-info'
// 首付款支付
import FirstPay from '../pages/pay/firstPay/first-pay'
import PayEntry from '@/pages/pay/firstPay/pay-entry'
import ContractRecord from '@/pages/pay/firstPay/contract-record'
// 款项支付
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 MarginFirstPay from '../pages/pay/marginPay/first-pay'
import MarginPayEntry from '../pages/pay/marginPay/pay-entry'
Vue.use(Router)
......@@ -144,6 +154,17 @@ export default new Router({
{path: '/contract-detail', component: ContractDetail, name: 'ContractDetail', meta: {keepAlive: true}},
{path: '/contract-content', component: ContractContent, name: 'ContractContent', meta: {keepAlive: true}},
{path: '/entry-info', component: EntryInfo, name: 'EntryInfo', meta: {keepAlive: true}},
// 首付款支付
{path: '/first-pay', component: FirstPay, name: 'FirstPay', meta: {keepAlive: true}},
{path: '/pay-entry', component: PayEntry, name: 'PayEntry', meta: {keepAlive: true}},
{path: '/contract-record', component: ContractRecord, name: 'ContractRecord', meta: {keepAlive: true}},
// 款项支付
{path: '/payment-first-pay', component: PaymentFirstPay, name: 'PaymentFirstPay', meta: {keepAlive: true}},
{path: '/payment-pay-entry', component: PaymentPayEntry, name: 'PaymentPayEntry', 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-pay-entry', component: MarginPayEntry, name: 'MarginPayEntry', meta: {keepAlive: true}},
],
scrollBehavior (to, from, savedPosition) {
......
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