Skip to content

H
hls-xcmg-vue-app
Commit 665708b5 authored by 李晓兵's avatar 李晓兵
Browse files
Options

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

parents 7bfcdb05 32482dd3
Hide whitespace changes
Inline Side-by-side
Showing with 2189 additions and 955 deletions
src/assets/payment/first-pay.png
View replaced file @ 7bfcdb05 View file @ 665708b5
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 @ 7bfcdb05 View file @ 665708b5
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 @ 665708b5
......@@ -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/contractSigning/contract-detail.vue
View file @ 665708b5
<!--
* @Author: your name
* @Date: 2019-09-29 10:02:11
* @LastEditTime: 2019-11-04 18:34:35
* @LastEditTime: 2019-11-05 13:36:11
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
-->
......@@ -22,6 +22,26 @@
<span>合同详情</span>
</div>
</h-header>
<div v-if="!isConfirm&&con_confirm_status!=='APPROVED'" v-once class="myModal">
<div class="box">
<span class="title-box">征信授权书</span>
<div class="content-box">
<p>本人知晓并同意_(会员机构XXX)___依据《征信业管理条例》及相关法律法规，委托第三方征信机构，合法调查本人信息，包括但不限于个人基本信息、借贷交易信息、银行卡交易信息、电商交易信息、公用事业信息、央行征信报告。所获取的信息，仅在此笔借贷业务的贷前审批和贷后管理工作中使用。(会员机构XXX)_将对所获取的信息妥善进行保管，除为本人提供信审服务/借款资金的合作方外，未经本人授权，不得向其他机构或个人公开、编辑或透露信息内容。</p>
<p>本人知晓并同意_(会员机构XXX)_依据《征信业管理条例》及相关法律法规，向第三方征信机构提交本人在此笔借贷业务中产生的相关信息，包括但不限于个人基本信息、借款申请信息、借款合同信息以及还款行为信息，并记录在征信机构的个人信用信息数据库中。</p>
<p>本人同意若本人出现不良还款行为，__(会员机构XXX)__按合同所留联系方式对本人进行提醒并告知，本人若仍未履行还款义务，_(会员机构XXX)__可将本人的不良还款信息提交至第三方征信机构，记录在征信机构的个人信用信息库中。</p>
<p>本人已被明确告知不良还款信息一旦记录在第三方征信机构的个人信用信息数据库中，在日后的经济活动中对本人可能产生的不良影响。</p>
<p>若本人所约定的联络方式产生变化，本人将及时通知_(会员机构XXX)_，若因未通知造成的相应损失，本人愿承担相应责任。</p>
<p>本人知晓第三方征信机构包含：北京安融惠众征信有限公司。</p>
<p>授权人签名：_______________</p>
<p>日期：_____________________</p>
</div>
<div class="confirm">
<input type="checkbox" @click="select" >
<span>我本人已阅读本协议，并同意授权xxxx</span>
</div>
<button class="appro" @click="confirm">同意</button>
</div>
</div>
<div class="tab-style">
<div :class="{'done':num === 0,'undone':num !== 0}" @click="num = 0;"><img :src="num === 0?check1:uncheck1">基本信息</div>
<div :class="{'done':num === 1,'undone':num !== 1}" @click="num = 1;"><img :src="num === 1?check3:uncheck3" >租赁信息</div>
......@@ -244,7 +264,7 @@
</div>
</div> -->
</h-content>
<bottom-tab v-show="num === 1 && confirm_status === 'SUBMIT'">
<bottom-tab v-if="con_confirm_status == 'SUBMIT'">
<tab-button class="footer" @click.native="inSure">
确认签约
</tab-button>
......@@ -279,20 +299,30 @@ export default {
baseInfo: {}, // 基本信息
project_id: '',
bank_flag: false,
isConfirm: false, // 征信授权书状态
confirm_id: '',
conditionInfo: {},
check1: Check1,
ischecked: false,
check2: Check2,
check3: Check3,
uncheck1: unCheck1,
uncheck2: unCheck2,
uncheck3: unCheck3,
confirm_status: '',
con_confirm_status: this.$route.params.item.con_confirm_status,
entry_info_flag: false,
}
},
computed: {},
watch: {
'ischecked': function (newVal, oldVal) {
let appro = document.querySelector('.appro') // 同意按钮
if (newVal) {
appro.style.backgroundColor = '#00469c'
} else {
appro.style.backgroundColor = 'rgba(56, 63, 69, 0.5)'
}
},
bp_class () {
if (this.bp_class === 'NP') {
this.bp_flag = false
......@@ -306,10 +336,13 @@ export default {
next(vm => {
if (from.name === 'ContractSigning') {
vm.bank_flag = false
vm.isConfirm = false
vm.ischecked = false
console.log(vm.$route.params.item)
vm.bp_name = vm.$route.params.item.bp_name
vm.project_id = vm.$route.params.item.project_id
vm.confirm_id = vm.$route.params.item.confirm_id
vm.confirm_status = vm.$route.params.item.confirm_status
vm.con_confirm_status = vm.$route.params.item.con_confirm_status
if (vm.$route.params.item.bp_class === 'NP') {
vm.bp_flag = false
} else {
......@@ -328,7 +361,29 @@ export default {
activated () {
// this.bankCardQuery()
},
mounted () {
if (this.con_confirm_status !== 'APPROVED') {
this.popProtocol()
}
},
methods: {
popProtocol () {
let modal = document.querySelector('.myModal')
let alpha = 0
let addOpacity = setInterval(() => {
alpha += 1
modal.style.backgroundColor = `rgba(56,63,69,${alpha / 100})`
if (alpha >= 30) {
clearInterval(addOpacity)
}
}, 10)
},
select () {
this.ischecked = !this.ischecked
},
confirm () {
this.ischecked ? (this.isConfirm = true) : (this.isConfirm = false)
},
// 担保人
getGuarantor () {
let vm = this
......@@ -403,10 +458,10 @@ export default {
// 还款计划
repayPlan () {
this.$router.push({
name: 'FinancDetails',
name: 'ContractRepayPlan',
params: {
project_id: this.project_id,
product_num: this.conditionInfo.product_num,
product_num: this.info.product_num,
},
})
},
......@@ -439,7 +494,7 @@ export default {
let param = {
master: {
confirm_id: vm.confirm_id,
confirm_status: 'APPROVED',
con_confirm_status: 'APPROVED',
},
}
vm.hlsHttp.post(url, param).then(function (res) {
......@@ -541,7 +596,7 @@ export default {
}
.alert {
//height: 100px;
padding-bottom: 10px;
padding-bottom: 84px;
width: 100%;
//margin-top: -10px;
background: #FbF2d2;
......@@ -1013,5 +1068,79 @@ export default {
height: 40px;
margin: 4px 2% 0 2%;
}
.myModal {
width: 100%;
height: 100%;
position: absolute;
z-index: 999;
background-color: rgba(56, 63, 69, 0.3);
display: flex;
justify-content: center;
align-items: center;
.box {
position: relative;
width: 301px;
height: 467px;
background: url("../../assets/intoApproval/top.png") no-repeat;
background-size: 301px 24.7px;
background-color: #fff;
button {
width: 240px;
height: 40px;
position: absolute;
color: #fff;
bottom: 16px;
left: 30.5px;
background-color: rgba(56, 63, 69, 0.5);
}
.title-box {
width: 100%;
display: block;
text-align: center;
margin-top: 37px;
font-family: PingFangSC-Semibold;
font-size: 16px;
color: #00469c;
}
.content-box {
width: 240px;
height: 280px;
font-family: PingFangSC-Regular;
font-size: 12px;
color: #383f45;
margin: 0 auto;
margin-top: 12px;
overflow-y: scroll;
p {
text-indent: 25px;
line-height: 16px;
}
}
.confirm {
width: 240px;
height: 20px;
padding-top: 25px;
margin: 0 auto;
font-family: PingFangSC-Regular;
font-size: 12px;
color: #383f45;
line-height: 20px;
display: flex;
justify-content: center;
align-items: center;
input {
width: 16px;
height: 16px;
margin-right: 8px;
background: none;
}
input::before {
content: "";
display: block;
background-image: url("../../assets/intoApproval/top.png");
}
}
}
}
}
</style>
src/pages/contractSigning/contract-repay-plan.vue 0 → 100644
View file @ 665708b5
<!--
* @Author: your name
* @Date: 2019-10-30 19:29:24
* @LastEditTime: 2019-11-05 15:45:27
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
-->
<template>
<h-view id="repay-plan" 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="total">
<div class="sum">
<div>融资额</div>
<p>{{ info.total_rental_sum|currency }}</p>
<img src="@/assets/contractInquire/num.png" alt="">
<h3><span>{{ info.lease_times }}期</span></h3>
</div>
<div class="single">
<div><h4>保证金</h4><p>￥{{ info.deposit * product_num | currency }}</p></div>
<div><h4>首付款</h4><p>￥{{ info.down_payment * product_num | currency }}</p></div>
<div><h4>手续费</h4><p>￥{{ info.lease_charge * product_num | currency }}</p></div>
</div>
</div>
<div class="plan-name">
<div class="header">还款计划</div>
<img :class="{'rotate':show}" src="@/assets/contractInquire/top.png" alt="" @click="showDetails">
</div>
</div>
<h-content id="content" class="plan-content">
<scroll ref="scrollList">
<!-- 已结清 black , 逾期 orange , 还款中 blue , 未还款 green -->
<div v-for="(item,index) in lists" :key="index" :class="{'plan-list':true,'or':statu==='orange','bl':statu==='blue','gr':statu==='green'}">
<div :class="{'period':true,'orange':statu==='orange','blue':statu==='blue','green':statu==='green'}">{{ index + 1 }}期</div>
<img v-if="statu === 'black'" src="@/assets/contractInquire/black.png" alt="" class="left">
<img v-if="statu === 'orange'" src="@/assets/contractInquire/orange.png" alt="" class="left">
<img v-if="statu === 'blue'" src="@/assets/contractInquire/blue.png" alt="" class="left">
<img v-if="statu === 'green'" src="@/assets/contractInquire/green.png" alt="" class="left">
<div class="time">
<p>{{ item.due_date.substr(0,4) }}</p>
<span>{{ dateConverse(item.due_date).substr(5,10) }}</span>
</div>
<div class="name">
<p>现金流项目</p>
<p>应还金额</p>
</div>
<div class="number">
<p>租金</p>
<span :class="{'orang':statu==='orange','blu':statu==='blue','gree':statu==='green'}">{{ item.rental * product_num |currency }}</span>
</div>
<img v-if="statu === 'black'" src="@/assets/contractInquire/done.png" alt="" class="status">
<img v-if="statu === 'orange'" src="@/assets/contractInquire/prompt.png" alt="" class="status">
</div>
</scroll>
</h-content>
</h-view>
</template>
<script>
export default {
name: 'RepayPlan',
components: {
},
data () {
return {
// 已结清 black , 逾期 orange , 还款中 blue , 未还款 green
statu: 'orange',
info: {},
lists: [], // 每期还款数据
show: false,
height: 0,
oldHeight: 0,
newHeight: 0,
product_num: '', // 产品数量
}
},
computed: {},
watch: {},
beforeRouteEnter (to, from, next) {
next(vm => {
if (from.name === 'ContractDetail') {
vm.product_num = vm.$route.params.product_num
vm.getInfo()
}
})
next()
},
methods: {
dateConverse (date) {
return date.replace(/\//g, '-')
},
arrSort (property) {
return function (a, b) {
var value1 = a[property]
var value2 = b[property]
return value1 - value2
}
},
showDetails () {
if (!this.flag) {
this.flag = true
this.height = document.getElementsByClassName('total')[0].clientHeight
this.oldHeight = document.getElementById('content').clientHeight
this.newHeight = this.height + this.oldHeight
}
if (!this.show) {
this.show = !this.show
document.getElementById('content').style.height = this.newHeight + 'px'
document.getElementsByClassName('center')[0].style.transition = 'all .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
document.getElementsByClassName('center')[0].style.transform = 'translate(0px, -' + this.height + 'px) scale(1) translateZ(0px)'
document.getElementById('content').style.transition = 'all .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
document.getElementById('content').style.transform = 'translate(0px, -' + this.height + 'px) scale(1) translateZ(0px)'
} else {
this.show = !this.show
document.getElementById('content').style.height = this.oldHeight + 'px'
document.getElementsByClassName('center')[0].style.transition = 'all .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
document.getElementsByClassName('center')[0].style.transform = 'translate(0px, -' + 0 + 'px) scale(1) translateZ(0px)'
document.getElementById('content').style.transition = 'all .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
document.getElementById('content').style.transform = 'translate(0px, -' + 0 + 'px) scale(1) translateZ(0px)'
}
},
getInfo () {
let vm = this
let url = process.env.basePath + 'prj_cashflow_query'
let param = {
project_id: vm.$route.params.project_id,
}
vm.hlsPopup.showLoading('数据加载中')
vm.hlsHttp.post(url, param).then(function (res) {
vm.hlsPopup.hideLoading()
if (res.result === 'S') {
vm.lists = res.lists.sort(vm.arrSort('times')) // 根据还款期排序
Object.assign(vm.info, res.info)
}
})
},
repayQuery () {
let vm = this
let url = $config.basePath + 'prd_repayment_plan'
let param = {
quotation_id: vm.$route.params.quotation_id,
}
vm.hlsPopup.showLoading('数据加载中')
vm.hlsHttp.post(url, param).then(function (res) {
vm.hlsPopup.hideLoading()
if (res.result === 'S') {
vm.info = res.info
} else {
hlsPopup.showLongCenter(res.message)
}
})
},
},
}
</script>
<style lang='less' >
#repay-plan {
.h-header {
background-color: #1D3FFF;
.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;
}
}
}
.total {
position: relative;
background-color: #1D3FFF;
height: 138px;
color: #fff;
background-image: url(../../assets/contractInquire/background.png);
background-size: cover;
.sum {
padding: 0 20px;
div {
font-family: PingFangSC-Semibold;
font-size: 14px;
padding-top: 12px;
padding-bottom: 10px;
}
p {
font-family: Verdana-BoldItalic;
font-size: 20px;
font-weight: 700;
font-style: italic;
margin-left: -4px;
}
img {
width: 75px;
position: absolute;
right: 20px;
top: 25px;
}
h3 {
position: absolute;
font-weight: 700;
margin: 0;
right: 42px;
top: 32px;
color: #1D3FFF;
font-family: PingFangSC-Semibold;
font-size: 14px;
span {
font-style: italic;
margin-right: 5px;
}
}
}
.single {
display: flex;
margin-top: 28px;
div {
flex: auto;
text-align: center;
h4 {
opacity: 0.8;
margin: 0;
font-family: PingFangSC-Regular;
font-size: 12px;
color: #FFFFFF;
margin-bottom: 8px;
}
p {
font-family: Verdana;
font-size: 14px;
color: #FFFFFF;
font-weight: 700;
}
}
}
}
.plan-name {
position: relative;
background-color: #1D3FFF;
margin-top: -2px;
img {
position: absolute;
right: 30px;
top: 12px;
height: 20px;
transition: 0s;
}
.rotate {
transform: rotate(180deg);
}
.header {
position: relative;
height: 48px;
line-height: 48px;
background-color: #fff;
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #21254C;
font-weight: 700;
text-indent: 2em;
border-radius: 24px 0 0 0 ;
&:before {
content: "";
position: absolute;
top: 16px;
left: 15px;
width: 4px;
height: 16px;
background: #1D3FFF;
}
}
}
.plan-content {
background-color: #fff;
padding: 0px 11px;
.plan-list {
position:relative;
background-color: #f7f7f7;
height: 78px;
display: flex;
padding-right: 20px;
padding-left: 10px;
padding-top: 20px;
margin-bottom: 10px;
.left {
height: 30px;
position: absolute;
left: -8px;
top: 24px;
}
.status {
position: absolute;
width:18px;
right: -3px;
top: -5px;
}
.period {
position: absolute;
top: 0;
left: 0;
background: rgba(75,74,75,.5);
border-radius: 4px 0 4px 0;
// width: 30px;
padding: 1px 2px;
height: 20px;
color: #fff;
font-family: PingFangSC-Semibold;
font-size: 12px;
letter-spacing: 1.09px;
line-height: 20px;
text-align: center;
}
.orange {
background: rgba(253, 182, 47,.5);
}
.blue {
background-color: rgba(29, 63, 255,.5);
}
.green {
background-color: rgba(27, 162, 97,.5);
}
.time {
flex: 5;
p {
font-family: DIN-Regular;
font-size: 12px;
color: rgba(56,63,69,0.60);
margin-bottom: 4px;
margin-top: 8px;
}
span {
font-family: DIN-Bold;
font-weight: 700;
font-size: 14px;
color: #21254C;
}
}
.name {
flex: 9;
opacity: 0.6;
font-family: PingFangSC-Regular;
font-size: 13px;
color: #4B4A4B;
p {
margin-bottom: 17px;
}
}
.number {
flex: 9;
text-align: right;
font-family: PingFangSC-Regular;
font-size: 13px;
color: #4B4A4B;
p {
margin-bottom: 17px;
}
span.orang {
color: rgb(253, 182, 47);
font-weight: 700;
font-family: PingFangSC-Semibold;
}
span.blu {
color: #1D3FFF;
font-weight: 700;
font-family: PingFangSC-Semibold;
}
span.gree {
color: #1BA261;
}
}
}
.or {
background-color:rgba(253, 182, 47,.05);
}
.bl,.gr {
background: #FFFFFF;
box-shadow: 0 1px 5px 0 rgba(219,219,219,0.69);
}
}
}
</style>
src/pages/contractSigning/contract-signing.vue
View file @ 665708b5
<!--
* @Author: your name
* @Date: 2019-09-29 10:02:11
* @LastEditTime: 2019-11-03 17:35:19
* @LastEditTime: 2019-11-05 16:14:44
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
-->
......@@ -25,53 +25,51 @@
</div>
<h-content v-if="num === 1">
<div v-for="(item,index) in submitLists" :key="index" class="contract-list">
<div class="item">
<img src="@/assets/constractSigning/Incoming.png" alt="" style="height:18px">
<p class="incoming-num">进件号</p>
<p class="code">{{ item.project_number }}</p>
</div>
<div class="details" @click="goDetails(item)">
<div class="option">
<p class="name">承租人</p>
<p class="full-name normal">{{ item.bp_name }}</p>
</div>
<div class="option">
<p class="name">合同租金</p>
<p class="normal money">{{ item.total_price | currency }}</p>
<img src="@/assets/distributorSign/goDetails.png" alt="">
</div>
<div class="option">
<p class="name">申请时间</p>
<p class="normal">{{ item.confirm_start_date }}</p>
<scroll
ref="scrollList"
>
<div class="wrap">
<div v-for="(item,index) in submitLists" :key="index" class="contract-lists" >
<div class="pro-code" @click="goDetails(item)">
<img src="@/assets/distributorSign/fileIcon.png" alt="" class="file-icon">
<p>
<span>进件号</span>
<span>{{ item.project_number }}</span>
</p>
<img src="@/assets/distributorSign/goDetails.png" alt="" class="arrow">
</div>
<div class="box">
<div><p>承租人</p><p>{{ item.bp_name }}</p></div>
<div><p>合同租金</p><p class="money">{{ item.total_price|currency }}</p></div>
<div><p>申请时间</p><p>{{ dateConverse(item.confirm_start_date) }}</p></div>
</div>
</div>
</div>
</div>
</scroll>
</h-content>
<h-content v-if="num === 2">
<div v-for="(item,index) in approvedLists" :key="index" class="contract-list">
<div class="item">
<img src="@/assets/constractSigning/Incoming.png" alt="" style="height:18px">
<p class="incoming-num">进件号</p>
<p class="code">{{ item.project_number }}</p>
</div>
<div class="details" @click="goDetails(item)">
<div class="option">
<p class="name">承租人</p>
<p class="full-name normal">{{ item.bp_name }}</p>
</div>
<div class="option">
<p class="name">合同金额</p>
<p class="normal money">{{ item.total_price | currency }}</p>
<img src="@/assets/distributorSign/goDetails.png" alt="">
</div>
<div class="option">
<p class="name">申请时间</p>
<p class="normal">{{ item.confirm_start_date }}</p>
<scroll
ref="scrollList"
>
<div class="wrap">
<div v-for="(item,index) in approvedLists" :key="index" class="contract-lists" >
<div class="pro-code" @click="goDetails(item)">
<img src="@/assets/distributorSign/fileIcon.png" alt="" class="file-icon">
<p>
<span>进件号</span>
<span>{{ item.project_number }}</span>
</p>
<img src="@/assets/distributorSign/goDetails.png" alt="" class="arrow">
</div>
<div class="box">
<div><p>承租人</p><p>{{ item.bp_name }}</p></div>
<div><p>合同租金</p><p class="money">{{ item.total_price|currency }}</p></div>
<div><p>申请时间</p><p>{{ dateConverse(item.confirm_start_date) }}</p></div>
</div>
</div>
</div>
</div>
</scroll>
</h-content>
</h-view>
</template>
......@@ -109,6 +107,9 @@ export default {
// next()
},
methods: {
dateConverse (date) {
return date.replace(/\//g, '-')
},
// 合同查询
contractList () {
let vm = this
......@@ -142,22 +143,6 @@ export default {
<style lang="less" type="text/less">
.contract-signing{
.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;
}
}
.tab-style{
display:flex;
......@@ -236,98 +221,80 @@ export default {
}
}
}
.content{
padding-bottom: 14px;
}
.contract-list {
.wrap {
width: 100%;
height: 120px;
// border: 1px solid #ccc;
background: #fff;
//margin-bottom: 8px;
.item {
padding: 0 8px;
.contract-lists {
width: 100%;
height: 34px;
background: rgba(00, 70, 156, 0.1);
display: flex;
flex-direction: row;
align-items: center;
img {
margin-left: 16.6px;
}
.incoming-num {
font-family: PingFangSC-Semibold;
// width: 42px;
height: 20px;
font-weight: bolder;
line-height: 20px;
font-size: 14px;
color: #00469C;
letter-spacing: 0;
margin-left: 8.8px;
}
.code {
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #00469C;
margin-left: 8px;
font-weight: bolder
}
}
.details {
width: 100%;
height: 86px;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 6px 0;
.option {
background: #fff;
margin-bottom: 8px;
.pro-code {
height: 44px;
width: 100%;
height: 18px;
display: flex;
flex-direction: row;
align-items: center;
.name {
font-family: PingFangSC-Regular;
font-size: 13px;
color: rgba(56, 63, 69, 0.60);
width: 80px;
height: 18px;
line-height: 18px;
text-align: right
.file-icon {
width: 30px;
height: 30px;
margin-left: 10px;
}
.normal {
font-family: PingFangSC-Regular;
font-size: 13px;
color: #383F45;
height: 18px;
line-height: 18px;
margin-left: 8px;
}
.money {
color: #FCC800;
p {
height: 44px;
line-height: 44px;
margin-left: 10px;
flex: 1;
font-family: PingFangSC-Semibold;
font-size: 15px;
color: #4B4A4B;
letter-spacing: 0;
border-bottom: 1px solid #F3F3F7
}
img {
margin-left: 47%
.arrow {
height: 16px;
width: 16px;
margin-right: 10px;
margin-left: -8px;
}
}
.option:nth-of-type(2) {
position: relative;
img{
position: absolute;
right: 10px;
.box {
height: 96px;
margin-left: 50px;
margin-right: 19px;
div {
width: 100%;
height: 32px;
position: relative;
.money {
font-family: Verdana-Bold;
font-size: 14px;
color: #4B4A4B;
letter-spacing: 0;
font-weight: 600;
}
p {
height: 32px;
line-height: 32px;
position: absolute;
font-family: PingFangSC-Regular;
font-size: 14px;
letter-spacing: 0;
}
p:nth-of-type(1){
left: 0;
color: rgba(75,74,75,0.60);
}
p:nth-of-type(2){
right: 0;
color: #4B4A4B;
}
}
}
}
}
.content{
padding-bottom: 14px;
}
}
</style>
src/pages/distributorSign/contract-list.vue
View file @ 665708b5
......@@ -20,53 +20,51 @@
</div>
</div>
<h-content v-if="tabNum === 0">
<div v-for="(item,index) in submitLists" :key="index" class="contract-list">
<div class="item">
<img src="@/assets/distributorSign/icon-进件合同.png" alt="">
<p class="incoming-num">进件号</p>
<p class="code">{{ item.project_number }}</p>
</div>
<div class="details" @click="goDetails(item)">
<div class="option">
<p class="name">承租人</p>
<p class="full-name normal">{{ item.bp_name }}</p>
</div>
<div class="option">
<p class="name">合同金额</p>
<p class="normal money">{{ item.total_price|currency }}</p>
<img src="@/assets/distributorSign/goDetails.png" alt="">
</div>
<div class="option">
<p class="name">申请时间</p>
<p class="normal">{{ dateConverse(item.confirm_start_date) }}</p>
<scroll
ref="scrollList"
>
<div class="wrap">
<div v-for="(item,index) in submitLists" :key="index" class="contract-lists" >
<div class="pro-code" @click="goDetails(item)">
<img src="@/assets/distributorSign/fileIcon.png" alt="" class="file-icon">
<p>
<span>进件号</span>
<span>{{ item.project_number }}</span>
</p>
<img src="@/assets/distributorSign/goDetails.png" alt="" class="arrow">
</div>
<div class="box">
<div><p>承租人</p><p>{{ item.bp_name }}</p></div>
<div><p>合同租金</p><p class="money">{{ item.total_price|currency }}</p></div>
<div><p>申请时间</p><p>{{ dateConverse(item.confirm_start_date) }}</p></div>
</div>
</div>
</div>
</div>
</scroll>
</h-content>
<h-content v-if="tabNum === 1">
<div v-for="(item,index) in approvedLists" :key="index" class="contract-list">
<div class="item">
<img src="@/assets/distributorSign/icon-进件合同.png" alt="">
<p class="incoming-num">进件号</p>
<p class="code">{{ item.project_number }}</p>
</div>
<div class="details" @click="goDetails(item)">
<div class="option">
<p class="name">承租人</p>
<p class="full-name normal">{{ item.bp_name }}</p>
</div>
<div class="option">
<p class="name">合同金额</p>
<p class="normal money">{{ parseFloat(item.total_price).toFixed(2)|currency }}</p>
<img src="@/assets/distributorSign/goDetails.png" alt="">
</div>
<div class="option">
<p class="name">申请时间</p>
<p class="normal">{{ dateConverse(item.confirm_start_date) }}</p>
<scroll
ref="scrollList"
>
<div class="wrap">
<div v-for="(item,index) in approvedLists" :key="index" class="contract-lists" >
<div class="pro-code" @click="goDetails(item)">
<img src="@/assets/distributorSign/fileIcon.png" alt="" class="file-icon">
<p>
<span>进件号</span>
<span>{{ item.project_number }}</span>
</p>
<img src="@/assets/distributorSign/goDetails.png" alt="" class="arrow">
</div>
<div class="box">
<div><p>承租人</p><p>{{ item.bp_name }}</p></div>
<div><p>合同租金</p><p class="money">{{ item.total_price|currency }}</p></div>
<div><p>申请时间</p><p>{{ dateConverse(item.confirm_start_date) }}</p></div>
</div>
</div>
</div>
</div>
</scroll>
</h-content>
</h-view>
......@@ -127,19 +125,76 @@ export default {
</script>
<style lang="less" scoped>
#sign {
.h-header-btn {
img {
width: 16px;
height: 16px;
margin-left: 4px;
}
.wrap {
width: 100%;
padding: 0 8px;
.contract-lists {
width: 100%;
background: #fff;
margin-bottom: 8px;
.pro-code {
height: 44px;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
span {
font-family: PingFangSC-Semibold;
margin-left: 16px;
font-size: 17px;
letter-spacing: 0.61px;
line-height: 24px;
.file-icon {
width: 30px;
height: 30px;
margin-left: 10px;
}
p {
height: 44px;
line-height: 44px;
margin-left: 10px;
flex: 1;
font-family: PingFangSC-Semibold;
font-size: 15px;
color: #4B4A4B;
letter-spacing: 0;
border-bottom: 1px solid #F3F3F7
}
.arrow {
height: 16px;
width: 16px;
margin-right: 10px;
margin-left: -8px;
}
}
.box {
height: 96px;
margin-left: 50px;
margin-right: 19px;
div {
width: 100%;
height: 32px;
position: relative;
.money {
font-family: Verdana-Bold;
font-size: 14px;
color: #4B4A4B;
letter-spacing: 0;
font-weight: 600;
}
p {
height: 32px;
line-height: 32px;
position: absolute;
font-family: PingFangSC-Regular;
font-size: 14px;
letter-spacing: 0;
}
p:nth-of-type(1){
left: 0;
color: rgba(75,74,75,0.60);
}
p:nth-of-type(2){
right: 0;
color: #4B4A4B;
}
}
}
}
}
......@@ -180,100 +235,6 @@ export default {
}
}
.content {
padding-bottom: 14px;
}
.contract-list {
width: 100%;
height: 120px;
// border: 1px solid #ccc;
background: #fff;
//margin-bottom: 8px;
.item {
width: 100%;
height: 34px;
background: rgba(00, 70, 156, 0.1);
display: flex;
flex-direction: row;
align-items: center;
img {
margin-left: 16.6px;
}
.incoming-num {
font-family: PingFangSC-Semibold;
// width: 42px;
height: 20px;
font-weight: bolder;
line-height: 20px;
font-size: 14px;
color: #00469C;
letter-spacing: 0;
margin-left: 8.8px;
}
.code {
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #00469C;
margin-left: 8px;
font-weight: bolder
}
}
.details {
width: 100%;
height: 86px;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 6px 0;
.option {
width: 100%;
height: 18px;
display: flex;
flex-direction: row;
.name {
font-family: PingFangSC-Regular;
font-size: 13px;
color: rgba(56, 63, 69, 0.60);
width: 80px;
height: 18px;
line-height: 18px;
text-align: right
}
.normal {
font-family: PingFangSC-Regular;
font-size: 13px;
color: #383F45;
height: 18px;
line-height: 18px;
margin-left: 8px;
}
.money {
color: #FCC800;
}
img {
margin-left: 47%
}
}
.option:nth-of-type(2) {
position: relative;
img{
position: absolute;
right: 10px;
}
}
}
}
}
</style>
src/pages/financingTrial/financing-details.vue
View file @ 665708b5
......@@ -2,7 +2,7 @@
* @Descrip""/>User Settings Edit
* @Author: your name
* @Date: 2019-09-29 20:31:00
* @LastEditTime: 2019-11-01 12:27:20
* @LastEditTime: 2019-11-05 15:35:42
* @LastEditors: Please set LastEditors
-->
<template>
......@@ -23,6 +23,11 @@
<div slot="name" class="font-color">设备总价</div>
<input slot="content" v-model="equip_price" placeholder="请输入设备总价">
</item>
<item>
<div slot="name" class="font-color">融资金额</div>
<span v-if="!equip_price" slot="content" class="autoColor">融资金额自动填充</span>
<span v-if="equip_price" slot="content">{{ equip_price - equip_price*info.down_payment_ratio_n.replace("%","")/100 | currency }}</span>
</item>
<item>
<div slot="name" class="font-color">首付款比例</div>
<input slot="content" v-model="info.down_payment_ratio_n" placeholder="30%">
......@@ -48,7 +53,20 @@
<item>
<div slot="name" class="font-color">手续费</div>
<span v-if="!equip_price" slot="content" class="autoColor">手续费金额自动填充</span>
<span v-if="equip_price" slot="content">{{ equip_price*info.lease_charge_ratio_n.replace("%","")/100 | currency }}</span>
<span v-if="equip_price" slot="content">{{ (equip_price - equip_price*info.down_payment_ratio_n.replace("%","")/100)*(info.lease_charge_ratio_n.replace("%","")/100) | currency }}</span>
</item>
<item>
<div slot="name" class="font-color">保险押金</div>
<input slot="content" v-model="insurance_fee" placeholder="请输入保险押金">
</item>
<item>
<div slot="name" class="font-color">GPS费用</div>
<input slot="content" v-model="gps_fee" placeholder="请输入GPS费用">
</item>
<item>
<div slot="name" class="font-color">首次付款合计</div>
<span v-if="!equip_price" slot="content" class="autoColor">首次付款合计金额自动填充</span>
<span v-if="equip_price" slot="content">{{ equip_price*info.down_payment_ratio_n.replace("%","")/100 + equip_price*info.deposit_ratio_n.replace("%","")/100 + (equip_price - equip_price*info.down_payment_ratio_n.replace("%","")/100)*(info.lease_charge_ratio_n.replace("%","")/100) | currency }}</span>
</item>
<item>
<div slot="name" class="font-color">预计付款日</div>
......@@ -68,6 +86,10 @@
<div slot="name" class="font-color">年利率</div>
<input slot="content" v-model="info.int_rate_n" placeholder="6.5%" >
</item>
<!-- <item>
<div slot="name" class="font-color">产品数量</div>
<input slot="content" v-model="product_num" placeholder="请输入产品数量" >
</item> -->
<item :showArrow="true" @click.native="goRepay">
<div slot="name" class="font-color">查看还款计划</div>
</item>
......@@ -97,9 +119,12 @@ export default {
return {
info: {},
dates: '',
gps_fee: '', // gps费用
insurance_fee: '', // 保险押金
quotation_id: '', // 试算成功返回id
trial_flag: false, // 检测是否通过试算
equip_price: '',
equip_price: null,
product_num: '',
price_date_to: '',
product_plan_id: '',
}
......
src/pages/myInfo/my-info.vue
View file @ 665708b5
......@@ -210,7 +210,7 @@ export default {
},
changeRent () {
this.$router.push({
name: 'PaymentFirstPay',
name: 'NewList',
})
},
updateVersion () {
......
src/pages/pay/firstPay/contract-record.vue
View file @ 665708b5
......@@ -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 @ 665708b5
......@@ -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 @ 665708b5
<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 @ 665708b5
<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 @ 665708b5
<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 @ 665708b5
......@@ -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 @ 665708b5
<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 @ 665708b5
<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 @ 665708b5
......@@ -70,7 +70,7 @@ export default {
})
} else if (this.name === 'PaymentPayEntry') {
this.$router.replace({
name: 'PaymentFirstPay',
name: 'NewList',
})
}
},
......
src/pages/productQuery/product-detailed.vue
View file @ 665708b5
......@@ -2,7 +2,7 @@
* @Descrip: 产品明细
* @Author: your name
* @Date: 2019-10-15 14:30:00
* @LastEditTime: 2019-11-04 19:00:24
* @LastEditTime: 2019-11-04 19:12:44
* @LastEditors: Please set LastEditors
-->
<template>
......@@ -112,6 +112,7 @@ export default {
if (from.name === 'ProductList' || from.name === 'MyProductList' || from.name === 'HomePage') {
next(vm => {
vm.tabNum = 0
vm.slide = false
vm.product_id = vm.$route.params.product_id
vm.bp_id = vm.$route.params.bp_id
vm.baseMsg()
......@@ -136,10 +137,10 @@ export default {
methods:
{
returnGo () {
// this.$router.replace({
// name: 'ProductList',
// })
this.$router.go(-1)
this.$router.replace({
name: 'ProductList',
})
// this.$router.go(-1)
},
vueTouch: function (s, e) {
console.log(s, e)
......
src/pages/productQuery/product-list.vue
View file @ 665708b5
......@@ -7,7 +7,7 @@
<h-view id="prolist" class="public-style" title="产品查询">
<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="returnGo()">
<span>产品信息</span>
</div>
</h-header>
......@@ -62,6 +62,12 @@ export default {
},
methods:
{
returnGo () {
this.$router.replace({
name: 'QueryHome',
})
// this.$router.go(-1)
},
// 根据产品线查询列表
proQuery () {
let vm = this
......
src/pages/productQuery/query-home.vue
View file @ 665708b5
......@@ -2,14 +2,14 @@
* @Descrip: 查询首页
* @Author: your name
* @Date: 2019-10-15 14:30:00
* @LastEditTime: 2019-11-04 11:15:13
* @LastEditTime: 2019-11-04 19:08:13
* @LastEditors: Please set LastEditors
-->
<template>
<h-view id="query" class="public-style" title="产品查询">
<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="returnGo()">
<span>产品信息</span>
</div>
</h-header>
......@@ -74,6 +74,12 @@ export default {
},
methods:
{
returnGo () {
this.$router.replace({
name: 'HomePage',
})
// this.$router.go(-1)
},
// 产品查询
proQuery () {
let vm = this
......
src/router/index.js
View file @ 665708b5
......@@ -2,7 +2,7 @@
* @Description: In User Settings Edit
* @Author: your name
* @Date: 2019-09-24 12:34:06
* @LastEditTime: 2019-10-30 11:24:48
* @LastEditTime: 2019-11-05 11:19:33
* @LastEditors: Please set LastEditors
*/
import Vue from 'vue'
......@@ -48,6 +48,7 @@ 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 ContractRepayPlan from '@/pages/ContractSigning/contract-repay-plan'
// 首付款支付
import FirstPay from '../pages/pay/firstPay/first-pay'
import PayEntry from '@/pages/pay/firstPay/pay-entry'
......@@ -57,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'
......@@ -194,6 +196,7 @@ 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: '/contract-repay-plan', component: ContractRepayPlan, name: 'ContractRepayPlan', meta: {keepAlive: true}},
// 首付款支付
{path: '/first-pay', component: FirstPay, name: 'FirstPay', meta: {keepAlive: true}},
{path: '/pay-entry', component: PayEntry, name: 'PayEntry', meta: {keepAlive: true}},
......@@ -202,6 +205,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