Skip to content

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

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

parent 559ce305
Expand all 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
This diff is collapsed.
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
This diff is collapsed.
src/pages/pay/payment/contract-record.vue
View file @ 462318ef
This diff is collapsed.
src/pages/pay/payment/new-list.vue 0 → 100644
View file @ 462318ef
<template>
<h-view id="first-pay" class="public-style">
<h-header :proportion="[5,1,1]" class="bar-custom">
<div slot="left" class="h-header-btn">
<img src="@/assets/userBind/arrow.png" @click="goHome" >
<span>还款明细</span>
</div>
</h-header>
<h-content>
<div class="top-head">
<div class="center">
<div class="now-pay">
<div class="title">当前应付</div>
<div class="data">
<span>￥</span>
{{ money |currency }}
</div>
</div>
</div>
</div>
<section class="pay-content">
<div class="pos">
<div class="pay-money">
<div class="pay-icon">
<img src="@/assets/payment/first-pay.png" >租金支付
</div>
<div class="pay-input">
<span>应还租金</span>
<input v-model="pay_rent" type="text" placeholder="请输入支付金额" >
<div @click="createOrder">
<img src="@/assets/payment/into.png" >
</div>
</div>
</div>
</div>
<div class="pos">
<div class="pay-money">
<div class="pay-icon">
<img src="@/assets/payment/first-pay.png" >逾期利息
</div>
<div class="pay-input">
<span>应还利息</span>
<input v-model="liquidated_damages" readonly type="text" placeholder="请输入支付金额" >
</div>
</div>
</div>
</section>
<div class="prompt">
<div>
<img src="@/assets/payment/prompt.png" alt >
</div>
<div>
<p>温馨提示</p>
<p>推荐使用农行卡，农行卡支付免收手续费！</p>
</div>
</div>
</h-content>
<bottom-tab>
<tab-button class="footer" @click.native="toPay">支&nbsp;&nbsp;付</tab-button>
</bottom-tab>
</h-view>
</template>
<script>
export default {
name: 'NewList',
components: {
},
data () {
return {
money: 0,
liquidated_damages: 0,
pay_rent: 0,
}
},
beforeRouteEnter (to, from, next) {
next(vm => {
if (from.name === 'MyInfo') {
vm.getRent()
} else if (from.name === 'Success') {
vm.money = parseInt(vm.default) - parseInt(window.sessionStorage.getItem('money'))
vm.default = vm.money
vm.pay_rent = vm.money
}
})
},
computed: {},
watch: {
'pay_rent': {
handler () {
this.money = parseFloat(parseFloat(this.pay_rent) + parseFloat(this.liquidated_damages))
},
immediate: true,
},
},
activated () {
// this.money = this.pay_rent
},
methods: {
goHome () {
this.$router.replace({
name: 'MyInfo',
})
},
getRent () {
let vm = this
let url = process.env.basePath + 'rent_repayment_query'
let param = {
bp_id: window.sessionStorage.getItem('bp_id'),
}
hlsPopup.showLoading('请稍候')
vm.$post(url, param).then(function (res) {
vm.hlsPopup.hideLoading()
if (res.result === 'S') {
vm.default = parseFloat(res.info.rental_amount) + parseFloat(res.info.overdue_amount)
vm.pay_rent = res.info.rental_amount
vm.liquidated_damages = res.info.overdue_amount
} else {
hlsPopup.showLongCenter(res.message)
}
})
},
toPay () {
let vm = this
let url = process.env.basePath + 'create_order_1_amount'
let param = {
info: {
bp_id: window.sessionStorage.getItem('bp_id'),
},
}
hlsPopup.showLoading('请稍候')
vm.$post(url, param).then(function (res) {
vm.hlsPopup.hideLoading()
if (res.result === 'S') {
vm.toPayEntry(vm.money)
} else {
hlsPopup.showLongCenter(res.message)
}
})
},
createOrder () {
let vm = this
let url = process.env.basePath + 'do_order_1_con'
let param = {
info: {
bp_id: window.sessionStorage.getItem('bp_id'),
},
}
hlsPopup.showLoading('请稍候')
vm.$post(url, param).then(function (res) {
vm.hlsPopup.hideLoading()
if (res.result === 'S') {
window.sessionStorage.setItem('order_id', res.order_id)
vm.toContractRecord(vm.liquidated_damages)
} else {
hlsPopup.showLongCenter(res.message)
}
})
},
toPayEntry () {
this.$router.push({
name: 'PaymentPayEntry',
params: {
money: this.money,
},
})
},
toContractRecord (money) {
this.$router.push({
name: 'PaymentContractRecord',
params: {
money: this.liquidated_damages,
},
})
},
},
}
</script>
<style lang='less' >
#first-pay {
.top-head {
width: 100%;
height: 142px;
background: url("../../../assets/payment/back1.png");
background-size: 100% 142px;
.now-pay {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column wrap;
.title {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #ffffff;
margin-top: 20px;
}
.data {
font-family: Verdana-Bold;
font-size: 24px;
color: #ffffff;
letter-spacing: 0;
line-height: 18px;
text-align: center;
margin-top: 16px;
}
}
}
.pay-content {
position: relative;
top: -57px;
width: 100%;
height: 94px;
display: flex;
justify-content: center;
flex-flow:row wrap;
.pos {
width: 96%;
height: 100%;
background: #ffffff;
}
.pos:nth-of-type(1){
box-shadow: 0 1px 3px 2px rgba(168, 168, 168, 0.14);
}
.pos:nth-of-type(2){
box-shadow: 0 3px 5px rgba(168, 168, 168, 0.14);
}
.pay-money {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
flex: 1;
background-color: #fff;
padding-left: 16px;
.pay-icon {
height: 50%;
display: flex;
align-items: center;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #1d3fff;
img {
width: 30px;
display: block;
float: left;
margin-right: 9px;
}
}
.pay-input {
height: 44px;
display: flex;
align-items: center;
flex: 1;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #656464;
img {
width: 15px;
height: 17px;
}
span {
flex: 2;
text-align: left;
line-height: 37px;
height: 100%;
display: flex;
align-items: center;
}
input {
flex: 3;
text-align: right;
padding-right: 5px;
}
div {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
flex: 1;
text-align: center;
background: rgba(0, 70, 156, 0.08);
i {
color: #00469c;
font-size: 16px;
}
}
input::placeholder {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #b4b4b5;
}
}
}
}
.prompt {
background: rgba(142, 195, 30, 0.1);
height: 77px;
display: flex;
position: absolute;
width: 100%;
bottom: 0;
div:first-child {
flex: 1;
padding: 16px 0 0 16px;
img {
width: 16px;
height: 16px;
}
}
div:last-child {
flex: 12;
p:first-child {
padding-top: 16px;
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #8ec31e;
letter-spacing: 0.5px;
}
p:last-child {
padding-top: 15px;
font-family: PingFangSC-Regular;
font-size: 12px;
color: rgba(101, 100, 100, 0.8);
letter-spacing: 0.37px;
}
}
}
.footer {
background-color: @headerColor;
color: #fff;
}
}
</style>
src/pages/pay/payment/pay-entry.vue
View file @ 462318ef
<template>
<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