Skip to content

H
hls-xcmg-vue-app
Commit b90dcf08 authored by 786817560's avatar 786817560
Browse files
Options

Merge branch 'develop' of https://hel.hand-china.com/xugong/hls-xcmg-vue-app into develop

parents b509feae 730af46e
Hide whitespace changes
Inline Side-by-side
Showing with 349 additions and 90 deletions
src/pages/pay/marginPay/first-pay.vue
View file @ b90dcf08
<template> <template>
<h-view id="first-pay" class="public-style"> <h-view id="first-pay" class="public-style">
<h-header :proportion="[5,1,1]" class="bar-custom"> <h-header :proportion="[5,1,1]" :has-border="false" class="bar-custom">
<div slot="left" class="h-header-btn"> <div slot="left" class="h-header-btn">
<img src="@/assets/userBind/arrow.png" @click="$routeGo()" > <img src="@/assets/userBind/arrow.png" @click="$routeGo()" >
<span>保证金支付</span> <span>保证金支付</span>
</div> </div>
</h-header> </h-header>
<h-content> <h-content style="margin-top:-1px;">
<div class="top-head"> <div class="top-head">
<div class="center"> <div class="center">
<div class="now-pay"> <div class="now-pay">
...@@ -28,9 +28,9 @@ ...@@ -28,9 +28,9 @@
<div class="pay-input"> <div class="pay-input">
<span>应还保证金</span> <span>应还保证金</span>
<input v-model="money" type="text" placeholder="请输入支付金额" > <input v-model="money" type="text" placeholder="请输入支付金额" >
<div> <!-- <div @click="createOrder">
<img src="@/assets/payment/into.png" > <img src="@/assets/payment/into.png" >
</div> </div> -->
</div> </div>
</div> </div>
</div> </div>
...@@ -82,7 +82,7 @@ export default { ...@@ -82,7 +82,7 @@ export default {
</script> </script>
<style lang='less' > <style lang='less' >
#first-pay { #first-pay {
.top-head { .top-head {
width: 100%; width: 100%;
height: 142px; height: 142px;
background: url("../../../assets/payment/back1.png"); background: url("../../../assets/payment/back1.png");
......
src/pages/pay/marginPay/pay-entry.vue
View file @ b90dcf08
...@@ -9,6 +9,113 @@ ...@@ -9,6 +9,113 @@
</div> </div>
</div> </div>
</transition> </transition>
<transition name="trans">
<div v-show="show" class="modal-show-bank">
<div class="down">
<div class="top">
<img src="@/assets/payment/back.png" @click="show=false" >
<span>支付方式</span>
</div>
<scroll>
<list-item :item-height="56" class="pay-way">
<item
v-for="(item,index) in nongBank"
:proportion="[7,1,1]"
:key="item.bank_account_num"
@click.native="isSelect(`nong${index}`);ischeck(item)"
>
<div slot="name" style="flex=3">
<img :src="selectImg(item)" alt class="icon" >
{{ item.bank_full_name }}({{ selectLast(item) }})
<img
v-show="item.recommand"
class="push"
src="@/assets/payment/push.png"
>
</div>
<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 >
</section>
</item>
<item :proportion="[7,1,1]" @click.native="isSelect('one');ischeck('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');ischeck('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
v-for="(item,index) in newList"
:proportion="[7,1,1]"
:key="index"
@click.native="isSelect(`three${index}`);ischeck(item)"
>
<div slot="name" style="flex=3">
<img :src="selectImg(item)" alt class="icon" >
{{ item.bank_full_name }}({{ selectLast(item) }})
<img
v-show="item.recommand"
class="push"
src="@/assets/payment/push.png"
>
</div>
<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 >
</section>
</item>
</list-item>
</scroll>
</div>
</div>
</transition>
<transition name="trans">
<div v-show="confirm" class="modal-show-confirm">
<div class="down">
<div class="top">
<img src="@/assets/payment/back.png" @click="confirm=false" >
<span>确认付款</span>
</div>
<div class="info">
<div class="info-item">
<span>还款金额</span>
<span>¥{{ money |currency }}</span>
</div>
<div class="interest">
<span>本次交易收取{{ rate }}%服务费</span>
</div>
<div class="info-item">
<span>服务费</span>
<span>+¥{{ serviceCharge |currency }}</span>
</div>
<div class="info-item" @click="show=true">
<span>付款方式</span>
<span>
<img :src="checkType.img" >
<span>{{ checkType.bank_full_name }}</span>
<span v-if="sectctNong">({{ selectLast(checkType) }})</span>
<img class="arrow" src="@/assets/payment/go.png" >
</span>
</div>
</div>
<bottom-tab>
<tab-button class="foot" @click.native="pay">立即支付</tab-button>
</bottom-tab>
</div>
</div>
</transition>
<h-header :proportion="[5,1,1]" class="bar-custom"> <h-header :proportion="[5,1,1]" class="bar-custom">
<div slot="left" class="h-header-btn"> <div slot="left" class="h-header-btn">
<img src="@/assets/userBind/arrow.png" @click="$routeGo()" > <img src="@/assets/userBind/arrow.png" @click="$routeGo()" >
...@@ -17,72 +124,34 @@ ...@@ -17,72 +124,34 @@
</h-header> </h-header>
<h-content class="entry-content"> <h-content class="entry-content">
<div class="amount"> <div class="amount">
<p>交易金额</p> <p>{{ userName }}</p>
<div>￥{{ money |currency }}</div> <div>￥{{ sumMoney |currency }}</div>
</div>
<div class="info">
<div class="info-item">
<span>还款金额</span>
<span>¥{{ parseFloat(money).toFixed(2) |currency }}</span>
</div>
<div class="interest">
<span>本次交易收取{{ rate }}%手续费</span>
</div>
<div class="info-item">
<span>手续费</span>
<span>+¥{{ serviceCharge }}</span>
</div>
<div class="info-item" @click="show=true">
<span>付款方式</span>
<span>
<img :src="checkType.img" >
<span>{{ checkType.bank_full_name }}</span>
<span v-if="sectctNong">({{ selectLast(checkType) }})</span>
<img class="arrow" src="@/assets/payment/go.png" >
</span>
</div>
</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>
<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 >
</section>
</item>
<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
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 >
</section>
</item>
</list-item>
</h-content> </h-content>
<bottom-tab> <bottom-tab>
<tab-button class="foot" @click.native="pay">立即付款</tab-button> <tab-button class="foot" @click.native="affirm">确认支付</tab-button>
</bottom-tab> </bottom-tab>
</h-view> </h-view>
</template> </template>
...@@ -236,6 +305,9 @@ export default { ...@@ -236,6 +305,9 @@ export default {
</script> </script>
<style lang='less' > <style lang='less' >
#pay-entry-margin { #pay-entry-margin {
.vue-better-scroll__wrapper{
padding: 0;
}
.trans-enter-active, .trans-enter-active,
.trans-leave-active { .trans-leave-active {
transition: opacity 0.5s; transition: opacity 0.5s;
...@@ -244,6 +316,209 @@ export default { ...@@ -244,6 +316,209 @@ export default {
.trans-leave-active { .trans-leave-active {
opacity: 0; opacity: 0;
} }
.modal-show-confirm {
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 {
height: 466px;
width: 100%;
position: relative;
top:18%;
background: #fff;
border-radius: 12px 12px 0 0;
overflow: scroll;
display: flex;
align-items: center;
flex-direction: column;
.top {
width: 330px;
height: 54px;
display: flex;
align-items: center;
background-color: #fff;
img {
width: 20px;
}
span {
margin-left: 38%;
font-family: PingFangSC-Semibold;
font-size: 16px;
color: #656464;
letter-spacing: 0.49px;
text-align: center;
}
}
.info {
//margin-top: 60px;
}
}
}
.modal-show-bank {
width: 100%;
height: 100%;
position: absolute;
display: flex;
z-index: 910;
background-color: rgba(56, 63, 69, 0.3);
justify-content: center;
align-items: center;
.down {
height: 466px;
width: 100%;
position: relative;
top:18%;
background: #fff;
border-radius: 12px 12px 0 0;
overflow: scroll;
display: flex;
align-items: center;
flex-direction: column;
.top {
left: 24px;
width: 330px;
height: 54px;
display: flex;
align-items: center;
background-color: #fff;
img {
width: 20px;
}
span {
margin-left: 38%;
font-family: PingFangSC-Semibold;
font-size: 16px;
color: #656464;
letter-spacing: 0.49px;
text-align: center;
}
}
.pay-way {
//width: 350px;
//margin: 0 auto;
width: 100%;
padding: 0 4% 0 4%;
background: #fff;
.hls-item {
padding-left: 12px;
.add-name {
flex: 3;
line-height: 56px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #656464;
div{
display: flex;
justify-content: center;
align-items: center;
}
.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;
position: relative;*/
margin: 0 8px 0 3px;
}
}
.add-content {
img {
width: 21px;
}
}
}
}
}
}
.info {
width: 100%;
height: 226px;
background-color: #fff;
.info-item {
height: 46px;
width: 335px;
margin: 0 auto;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
.arrow {
margin-right: -10px;
}
img {
width: 17px;
margin-right: 10px;
}
span:first-child {
font-family: PingFangSC-Regular;
font-size: 14px;
color: rgba(56, 63, 69, 0.6);
letter-spacing: 0;
line-height: 18px;
}
span:last-child {
font-family: Verdana;
font-size: 14px;
color: #383f45;
letter-spacing: 0;
line-height: 18px;
display: flex;
align-items: center;
}
}
.info-item:nth-of-type(1)::after {
content: "";
display: block;
position: absolute;
right: 20px;
top: 25px;
border: 10px solid #fff;
border-left-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
border-bottom-color: rgba(75, 74, 75, 0.1);
}
.info-item:nth-of-type(1) {
border-top: 1px solid #d9dbdf;
}
.interest {
width: 100%;
height: 37px;
line-height: 37px;
font-family: PingFangSC-Medium;
font-size: 11px;
color: #4b4a4b;
letter-spacing: 0;
text-indent: 215px;
background-color: rgba(75, 74, 75, 0.1);
}
}
.push {
/* position: absolute;
top: 10px;
margin-left: 10px;*/
width: 35px;
}
.modal-show { .modal-show {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -292,21 +567,12 @@ export default { ...@@ -292,21 +567,12 @@ export default {
} }
} }
} }
.push {
position: absolute;
top: 10px;
margin-left: 10px;
width: 35px;
}
.entry-content { .entry-content {
.amount { .amount {
height: 166px; height: 166px;
background-color: #fff; background-color: #fff;
padding-top: 55px; padding-top: 55px;
text-align: center; text-align: center;
border-bottom: 1px solid #d9dbdf;
p { p {
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 14px; font-size: 14px;
...@@ -349,13 +615,6 @@ export default { ...@@ -349,13 +615,6 @@ export default {
margin-top: 12px; margin-top: 12px;
margin-right: 8px; margin-right: 8px;
} }
.icon {
width: 30px;
display: block;
float: left;
position: relative;
margin: 12px 8px 0 3px;
}
} }
.add-content { .add-content {
...@@ -367,8 +626,8 @@ export default { ...@@ -367,8 +626,8 @@ export default {
} }
} }
.foot { .foot {
background-color: @headerColor;
color: #fff; color: #fff;
background-color: @headerColor;
} }
} }
</style> </style>
src/pages/userBind/np/naturePerson.vue
View file @ b90dcf08
...@@ -311,14 +311,14 @@ ...@@ -311,14 +311,14 @@
</div> </div>
</div> </div>
</div> </div>
<!-- <div v-if="from&&isApproved&&isAGENT" class="tax" @click="changeUndertake"> <div v-if="from&&isApproved&&isAGENT" class="tax" @click="changeUndertake">
<img src="@/assets/userBind/tax.png" class="left-img"> <img src="@/assets/userBind/tax.png" class="left-img">
<div> <div>
<span>缴纳保证金</span> <span>缴纳保证金</span>
<p>已缴纳：500000</p> <p>已缴纳：500000</p>
</div> </div>
<img src="@/assets/userBind/arrow-right.png" class="right-img"> <img src="@/assets/userBind/arrow-right.png" class="right-img">
</div>--> </div>
</div> </div>
<BankInfo <BankInfo
...@@ -369,15 +369,15 @@ ...@@ -369,15 +369,15 @@
<list-item :item-height="44" class="card-Info"> <list-item :item-height="44" class="card-Info">
<item> <item>
<div slot="name">银行卡卡号</div> <div slot="name">银行卡卡号</div>
<input slot="content" readonly v-model="bank.bank_account_num" placeholder="识别银行卡自动填充"> <input slot="content" v-model="bank.bank_account_num" readonly placeholder="识别银行卡自动填充">
</item> </item>
<item> <item>
<div slot="name">账户姓名</div> <div slot="name">账户姓名</div>
<input slot="content" readonly v-model="bank.bank_account_name" placeholder="请输入账户名称" > <input slot="content" v-model="bank.bank_account_name" readonly placeholder="请输入账户名称" >
</item> </item>
<item> <item>
<div slot="name">银行名称</div> <div slot="name">银行名称</div>
<input slot="content" readonly v-model="bank.bank_full_name" placeholder="识别银行卡自动填充" > <input slot="content" v-model="bank.bank_full_name" readonly placeholder="识别银行卡自动填充" >
</item> </item>
<item> <item>
<div slot="name">支行名称</div> <div slot="name">支行名称</div>
......
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