Commit b7432f59 authored by linxin's avatar linxin

add:基本信息/支付功能改造

parent 7873f20d
<template>
<h-view id="add-person">
<h-header :proportion="[5,1,1]" class="bar-custom">
<div slot="left" class="h-header-btn">
<img src="@/assets/userBind/arrow.png" @click="$routeGo()" >
<span>添加担保人</span>
</div>
</h-header>
<h-content>
<div class="search has-header">
<input v-model="keyWord" placeholder="请输入担保人名称/证件号码" >
</div>
<list-item :item-height="68" class="item">
<item>
<img slot="left-icon" src="@/assets/contractCreate/name.png" class="left-icon" >
<div slot="name">担保人名称<br>证件号</div>
<div slot="content">
<input placeholder="暂无信息" readonly >
<input placeholder="暂无信息" readonly >
</div>
</item>
</list-item>
</h-content>
</h-view>
</template>
<script>
export default {
data () {
return {
keyWord: '',
}
},
}
</script>
<style lang="less" scoped>
#add-person{
.item{
width:359px;
margin:0 auto;
}
.search {
background-color: #fff;
padding: 8px 12px;
width: 100%;
height: 1.02rem;
z-index: 100;
margin-bottom: 8px;
input {
background: url("../../assets/contractStart/search1.png") 320px no-repeat;
background-size: 16px 16px;
background-color: rgba(239, 239, 239, 0.55);
padding-left: 12px;
height:36px;
line-height: 36px;
border-radius: 4px;
width: 100%;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #888c8f;
}
input::placeholder {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #888c8f;
letter-spacing: 0;
}
input:focus {
background: url("../../assets/contractStart/search2.png") 320px no-repeat;
background-size: 16px 16px;
background-color: rgba(239, 239, 239, 0.55);
border: 2px solid #bcc6ff;
}
}
}
@media (device-width: 414px) and (device-height: 896px) {
.platform-ios {
#add-person {
.search {
input {
background: url("../../assets/contractStart/search1.png") 320px
no-repeat;
background-size: 16px 16px;
background-color: rgba(239, 239, 239, 0.55);
padding: 8px 12px;
border-radius: 4px;
width: 100%;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #888c8f;
}
}
}
}
}
</style>
......@@ -46,7 +46,7 @@
</div>
</scroll>
<bottom-tab>
<tab-button class="footer">
<tab-button class="footer" @click.native="changePage">
<img class="add-img" src="@/assets/contractCreate/create-add.png" alt=""> 创建新合同
</tab-button>
</bottom-tab>
......@@ -93,6 +93,11 @@ export default {
name: 'SalesInfo',
})
},
changePage () {
this.$router.push({
name: 'CreateBaseInfo',
})
},
loadMore () {},
},
}
......
<template>
<h-view id="create-rent-info">
<h-header :proportion="[5,1,1]" class="bar-custom">
<div slot="left" class="h-header-btn">
<img src="@/assets/userBind/arrow.png" @click="$routeGo()" >
<span>基本信息</span>
</div>
</h-header>
<h-content/>
</h-view>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
</style>
<template>
<h-view id="create-base-info">
<h-header :proportion="[5,1,1]" class="bar-custom">
<div slot="left" class="h-header-btn">
<img src="@/assets/userBind/arrow.png" @click="$routeGo()" >
<span>基本信息</span>
</div>
</h-header>
<h-content>
<div class="top">
<div class="item">
<span>1</span>
<p>基本信息</p>
</div>
<span class="line" />
<div class="item">
<span>2</span>
<p>租赁信息</p>
</div>
<span class="line" />
<div class="item">
<span>3</span>
<p>附件信息</p>
</div>
</div>
<div class="create-content">
<div v-if="bp_class==='NP'">
<div class="userInfo">客户信息</div>
<list-item :item-height="44">
<item>
<div slot="name">姓名</div>
<input slot="content" readonly placeholder="暂无信息" >
</item>
<item>
<div slot="name">身份证号</div>
<input slot="content" readonly placeholder="暂无信息" >
</item>
<item>
<div slot="name">手机号码</div>
<input slot="content" readonly placeholder="暂无信息" >
</item>
<item>
<div slot="name">婚姻</div>
<input slot="content" placeholder="暂无信息" readonly >
</item>
<item>
<div slot="name">户籍地址</div>
<input slot="content" readonly placeholder="暂无信息" >
</item>
<item>
<div slot="name">联系地址</div>
<input slot="content" readonly placeholder="暂无信息" >
</item>
</list-item>
<div class="userInfo">配偶信息</div>
<list-item :item-height="44">
<item>
<div slot="name">姓名</div>
<input slot="content" readonly placeholder="暂无信息" >
</item>
<item>
<div slot="name">手机号码</div>
<input slot="content" readonly placeholder="暂无信息" >
</item>
<item>
<div slot="name">工作单位</div>
<input slot="content" readonly placeholder="暂无信息" >
</item>
<item>
<div slot="name">居住地址</div>
<input slot="content" placeholder="暂无信息" readonly >
</item>
</list-item>
<div class="another-info">
<img src="@/assets/contractCreate/otherInfo.png" >补充信息
</div>
<list-item :item-height="44">
<item :showArrow="true">
<div slot="name">行业情况</div>
<input slot="content" readonly placeholder="请选择" >
</item>
<item :showArrow="true">
<div slot="name">职业情况</div>
<input slot="content" readonly placeholder="请选择" >
</item>
<item :showArrow="true">
<div slot="name">房产信息</div>
<input slot="content" readonly placeholder="请选择" >
</item>
<item :showArrow="true">
<div slot="name">设备价值</div>
<input slot="content" placeholder="请选择" readonly >
</item>
<item class="check" @click.native="checked=!checked">
<div slot="name">农行代扣</div>
<img v-if="checked" slot="content" src="@/assets/contractCreate/selected.png" >
<span v-if="!checked" slot="content" />
</item>
<item class="check" @click.native="checkedApproved=!checkedApproved">
<div slot="name">是否特批</div>
<img v-if="checkedApproved" slot="content" src="@/assets/contractCreate/selected.png" >
<span v-if="!checkedApproved" slot="content" />
</item>
<item>
<div slot="name">特批事项</div>
<input slot="content" placeholder="暂无信息" readonly >
</item>
</list-item>
</div>
<div v-if="bp_class==='ORG'">
<div class="userInfo">客户信息</div>
<list-item :item-height="44">
<item>
<div slot="name">公司名称</div>
<input slot="content" readonly placeholder="暂无信息" >
</item>
<item>
<div slot="name">企业类型</div>
<input slot="content" readonly placeholder="暂无信息" >
</item>
<item>
<div slot="name">营业执照号</div>
<input slot="content" readonly placeholder="暂无信息" >
</item>
<item>
<div slot="name">注册资本</div>
<input slot="content" placeholder="暂无信息" readonly >
</item>
<item>
<div slot="name">注册地址</div>
<input slot="content" readonly placeholder="暂无信息" >
</item>
<item>
<div slot="name">联系地址</div>
<input slot="content" readonly placeholder="暂无信息" >
</item>
<item>
<div slot="name">固定电话</div>
<input slot="content" readonly placeholder="暂无信息" >
</item>
</list-item>
<div class="userInfo">法人代表信息</div>
<list-item :item-height="44">
<item>
<div slot="name">姓名</div>
<input slot="content" readonly placeholder="暂无信息" >
</item>
<item>
<div slot="name">身份证号</div>
<input slot="content" readonly placeholder="暂无信息" >
</item>
<item>
<div slot="name">手机号</div>
<input slot="content" readonly placeholder="暂无信息" >
</item>
<item>
<div slot="name">联系地址</div>
<input slot="content" placeholder="暂无信息" readonly >
</item>
</list-item>
<div class="another-info">
<img src="@/assets/contractCreate/otherInfo.png" >补充信息
</div>
<list-item :item-height="44">
<item :showArrow="true">
<div slot="name">设备保有量</div>
<input slot="content" readonly placeholder="请选择" >
</item>
<item :showArrow="true">
<div slot="name">工程合同</div>
<input slot="content" readonly placeholder="请选择" >
</item>
<item :showArrow="true">
<div slot="name">企业性质</div>
<input slot="content" readonly placeholder="请选择" >
</item>
<item :showArrow="true">
<div slot="name">设备价值</div>
<input slot="content" placeholder="请选择" readonly >
</item>
<item class="check" @click.native="checked=!checked">
<div slot="name">农行代扣</div>
<img v-if="checked" slot="content" src="@/assets/contractCreate/selected.png" >
<span v-if="!checked" slot="content" />
</item>
<item class="check" @click.native="checkedApproved=!checkedApproved">
<div slot="name">是否特批</div>
<img v-if="checkedApproved" slot="content" src="@/assets/contractCreate/selected.png" >
<span v-if="!checkedApproved" slot="content" />
</item>
<item>
<div slot="name">特批事项</div>
<input slot="content" placeholder="暂无信息" readonly >
</item>
</list-item>
</div>
<div class="another-info">
<img src="@/assets/contractCreate/undertake.png" >担保人信息
<span @click="addPerson">+</span>
</div>
</div>
<item-option class="mySlider">
<list-item :item-height="68">
<item>
<span slot="left-icon" class="left-icon">1</span>
<div slot="name">
担保人1姓名
<br >证件号
</div>
<div slot="content">
<input placeholder="暂无信息" readonly >
<input placeholder="暂无信息" readonly >
</div>
</item>
</list-item>
<div slot="buttons">
<option-button type="warn" text @click.native="deleteFun" />
</div>
</item-option>
</h-content>
<bottom-tab class="add-box">
<tab-button class="before" @click.native="$routeGo()">上一步</tab-button>
<tab-button class="next" @click.native="goRent">下一步</tab-button>
</bottom-tab>
</h-view>
</template>
<script>
export default {
data () {
return {
checked: false, // 农行代扣
checkedApproved: false, // 是否特批
bp_class: 'ORG',
}
},
methods: {
addPerson () {
this.$router.push({
name: 'AddPerson',
})
},
goRent () {
this.$router.push({
name: 'createRentInfo',
})
},
deleteFun () {},
},
}
</script>
<style lang="less" scoped>
#create-base-info {
.swipeout-list .item .function {
height: 68px;
background: url("../../assets/contractCreate/delete.png") 45% 45% #fde5e8
no-repeat;
background-size: 20px 20px;
}
.hls-list-item {
margin-bottom: 0px !important;
}
.swipeout-list {
padding: 0px;
}
.left-icon {
width: 18px;
height: 18px;
text-align: center;
line-height: 18px;
background-color: rgba(29, 63, 255, 0.2);
color: @headerColor;
border-radius: 4px;
}
input::placeholder {
color: #b4b4b5;
}
.top {
width: 100%;
height: 81px;
background-color: #faf5e0;
display: flex;
justify-content: center;
align-items: center;
.line {
display: inline-block;
width: 78px;
border-top: 1px solid #a4a4a4;
margin-bottom: 18px;
}
.item {
display: flex;
justify-content: center;
align-items: center;
flex-flow: column wrap;
font-family: PingFangSC-Semibold;
font-size: 12px;
color: rgba(56, 63, 69, 0.5);
letter-spacing: 0.43px;
span {
display: block;
text-align: center;
line-height: 18px;
border-radius: 50%;
width: 18px;
height: 18px;
color: #fff;
background: #a4a4a4;
}
p {
margin-top: 10px;
}
}
.item:nth-of-type(1) {
font-family: PingFangSC-Semibold;
font-size: 12px;
color: #383f45;
letter-spacing: 0.43px;
span {
background-color: #ffa000;
}
}
}
.check {
span {
width: 16px;
height: 16px;
border: 1px solid #1d3fff;
border-radius: 3px;
}
img{
width:16px;
}
}
.another-info {
height: 40px;
line-height: 40px;
color: @headerColor;
display: flex;
align-items: center;
img {
margin-left: 16px;
width: 19px;
margin-right: 10px;
}
span {
display: flex;
margin-left: 58%;
justify-content: center;
align-items: center;
width: 18px;
height: 18px;
border: 1px solid @headerColor;
color: @headerColor;
border-radius: 50%;
}
}
.userInfo:first-of-type {
margin-top: 10px;
}
.userInfo {
height: 40px;
line-height: 40px;
color: @headerColor;
// margin-top: -10px;
font-size: 15px;
margin-left: 16px;
position: relative;
}
.userInfo::before {
content: "";
display: block;
width: 4px;
height: 20px;
background-color: @headerColor;
position: absolute;
left: -15px;
top: 12px;
}
.add-box {
.before {
border: 1px solid #fdb62f;
border-radius: 4px;
color: #fdb62f;
}
.next {
background: #1d3fff;
border-radius: 4px;
color: #fff;
}
}
}
</style>
......@@ -53,7 +53,7 @@
</div>
</div>
<bottom-tab>
<tab-button class="footer" @click.native="checkPay">&nbsp;&nbsp;</tab-button>
<tab-button class="footer" @click.native="checkPay">提交订单</tab-button>
</bottom-tab>
</h-view>
</template>
......
......@@ -140,7 +140,7 @@
</section>
</item>
</list-item>
<list-item :item-height="56" class="pay-way">
<list-item v-if="isNongPay" :item-height="56" class="pay-way">
<item
v-for="(item,index) in nongPayList"
:proportion="[7,1,1]"
......@@ -233,6 +233,7 @@ export default {
sectctNong: false,
pay_type: '',
bank_account_id: '',
isNongPay: false,
checkType: {
img: '',
bank_full_name: '',
......@@ -309,7 +310,6 @@ export default {
if (way.pay_type_name === '银联支付') {
this.checkPayWay.img = yinlian
} else {
debugger
this.checkPayWay.img = ny
}
this.sectctNong = true
......@@ -454,6 +454,15 @@ export default {
this.confirm = true
this.confirmToPay()
this.getPayType()
if (this.checkType.bank_full_name.indexOf('农业') !== -1) {
this.checkPayWay.img = ny
this.checkPayWay.pay_type_name = 'K码支付'
this.isNongPay = true
} else {
this.checkPayWay.img = yinlian
this.checkPayWay.pay_type_name = '银联支付'
this.isNongPay = false
}
},
changePage () {
this.$router.push({
......@@ -515,6 +524,9 @@ export default {
</script>
<style lang='less' >
#pay-entry {
.hls-list-item{
margin-bottom: 2px !important;
}
.vue-better-scroll__wrapper {
padding: 0;
}
......
......@@ -97,7 +97,7 @@
</div>
</div>
<bottom-tab>
<tab-button class="footer" @click.native="checkPay()">&nbsp;&nbsp;</tab-button>
<tab-button class="footer" @click.native="checkPay()">提交订单</tab-button>
</bottom-tab>
</div>
</h-view>
......
......@@ -58,7 +58,7 @@
</div>
</h-content>
<bottom-tab>
<tab-button class="footer" @click.native="checkPay">&nbsp;&nbsp;</tab-button>
<tab-button class="footer" @click.native="checkPay">提交订单</tab-button>
</bottom-tab>
</h-view>
</template>
......
......@@ -14,7 +14,7 @@
<div class="down">
<div class="top">
<img src="@/assets/payment/back.png" @click="show=false" >
<span>支付方式</span>
<span>选择银行卡</span>
</div>
<scroll>
<list-item :item-height="56" class="pay-way">
......@@ -80,12 +80,58 @@
</scroll>
</div>
</div></transition>
<transition name="trans">
<div v-show="wayShow" class="modal-show-payWay">
<div class="down">
<div class="top">
<img src="@/assets/payment/back.png" @click="wayShow=false" >
<span>选择支付方式</span>
</div>
<scroll>
<list-item :item-height="56" class="pay-way">
<item
v-for="(item,index) in notNongList"
:proportion="[7,1,1]"
:key="index"
@click.native="isSelect(`bind`);ischeckPay(item)"
>
<div slot="name" style="flex=3">
<img src="@/assets/payment/bind.png" alt class="icon" >
{{ item.pay_type_name }}
</div>
<section slot="content">
<img v-show="select === `bind`" src="@/assets/payment/select.png" alt >
<img v-show="select !== `bind`" src="@/assets/payment/unselect.png" alt >
</section>
</item>
</list-item>
<list-item v-if="isNongPay" :item-height="56" class="pay-way">
<item
v-for="(item,index) in nongPayList"
:proportion="[7,1,1]"
:key="index"
@click.native="isSelect(`pay${index}`);ischeckPay(item)"
>
<div slot="name" style="flex=3">
<img src="@/assets/payment/ly.png" alt class="icon" >
{{ item.pay_type_name }}
</div>
<section slot="content">
<img v-show="select === `pay${index}`" src="@/assets/payment/select.png" alt >
<img v-show="select !== `pay${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>
<span>确认付款方式</span>
</div>
<div class="info">
<div class="info-item">
......@@ -99,12 +145,11 @@
<span>手续费</span>
<span>{{ serviceCharge |currency }}</span>
</div>
<div class="info-item" @click="show=true">
<div class="info-item" @click="wayShow=true">
<span>付款方式</span>
<span>
<img :src="checkType.img" >
<span>{{ checkType.bank_full_name }}</span>
<span v-if="sectctNong">({{ selectLast(checkType) }})</span>
<img :src="checkPayWay.img" >
<span>{{ checkPayWay.pay_type_name }}</span>
<img class="arrow" src="@/assets/payment/go.png" >
</span>
</div>
......@@ -118,7 +163,7 @@
<h-header :proportion="[5,1,1]" class="bar-custom">
<div slot="left" class="h-header-btn">
<img src="@/assets/userBind/arrow.png" @click="changePage" >
<span>支付中心</span>
<span>{{ title }}</span>
</div>
</h-header>
......@@ -140,7 +185,7 @@
<span>{{ serviceCharge }}</span>
</div>
<div class="info-item" @click="show=true">
<span>付款方式</span>
<span>银行卡</span>
<span>
<img :src="checkType.img" >
<span>{{ checkType.bank_full_name }}</span>
......@@ -151,7 +196,7 @@
</div>
</h-content>
<bottom-tab>
<tab-button class="footer" @click.native="affirm">确认支付</tab-button>
<tab-button class="footer" @click.native="affirm">确认订单</tab-button>
</bottom-tab>
</h-view>
</template>
......@@ -172,6 +217,7 @@ 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 yinlian from '@/assets/payment/bind.png'
import zx from '@/assets/payment/zx.png'
export default {
name: 'PaymentPayEntry',
......@@ -181,6 +227,7 @@ export default {
money: '',
select: 'one',
name: '',
wayShow: false,
pay_type: '',
bank_account_id: '',
sectctNong: false,
......@@ -189,16 +236,30 @@ export default {
bank_full_name: '',
bank_account_num: '',
},
checkPayWay: {
img: '',
pay_type_name: '',
},
confirm: false,
show: false,
downNum: false,
isNongPay: false,
userName: window.localStorage.getItem('bp_name'),
nongBank: [], // 存农行卡
flag: false, // 用于判断是否有农业银行卡
lists: [],
notNongList: [],
nongPayList: [],
}
},
computed: {
title () {
if (this.confirm) {
return '支付中心'
} else {
return '确认订单'
}
},
serviceCharge () {
return (this.money * (this.rate / 100)).toFixed(2)
},
......@@ -226,6 +287,7 @@ export default {
vm.confirm = false
vm.show = false
vm.downNum = false
vm.getPayType()
if (from.name === 'NewList') {
vm.money = vm.$route.params.money
} else if (from.name === 'PaymentContractRecord') {
......@@ -236,9 +298,46 @@ export default {
})
},
methods: {
getPayType () {
let vm = this
let url = process.env.basePath + 'payment_type_query'
let param = {}
vm.$post(url, param).then(function (res) {
vm.hlsPopup.hideLoading()
if (res.result === 'S') {
vm.notNongList = res.lists.filter(i => {
return i.pay_type === 'ABC_UNION'
})
vm.nongPayList = res.lists.filter(i => {
return i.pay_type === 'ABC_KM' || i.pay_type === 'ABC_KL'
})
} else {
hlsPopup.showLongCenter(res.message)
}
})
},
ischeckPay (way) {
this.checkPayWay.pay_type_name = way.pay_type_name
if (way.pay_type_name === '银联支付') {
this.checkPayWay.img = yinlian
} else {
this.checkPayWay.img = ny
}
this.sectctNong = true
this.wayShow = false
},
affirm () {
this.confirm = true
this.confirmToPay()
if (this.checkType.bank_full_name.indexOf('农业') !== -1) {
this.checkPayWay.img = ny
this.checkPayWay.pay_type_name = 'K码支付'
this.isNongPay = true
} else {
this.checkPayWay.img = yinlian
this.checkPayWay.pay_type_name = '银联支付'
this.isNongPay = false
}
},
confirmToPay (e) {
let vm = this
......@@ -424,6 +523,9 @@ export default {
</script>
<style lang='less' >
#payment-pay-entry {
.hls-list-item{
margin-bottom: 2px !important;
}
.vue-better-scroll__wrapper{
padding: 0;
}
......@@ -434,6 +536,94 @@ export default {
.trans-enter,
.trans-leave-active {
opacity: 0;
}
.modal-show-payWay{
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;
margin: 0 8px 0 3px;
}
}
.add-content {
img {
width: 21px;
}
}
}
}
}
}
.modal-show-confirm {
width: 100%;
......
......@@ -122,6 +122,9 @@ import AccessoryInfo from '@/pages/userBindNew/np/accessory-info'
import ContractCreateList from '@/pages/contractCreate/contract-create-list'
import SalesInfo from '@/pages/contractCreate/sales-info'
import PickLessee from '@/pages/contractCreate/pick-lessee'
import CreateBaseInfo from '@/pages/contractCreate/create-base-info'
import AddPerson from '@/pages/contractCreate/add-person'
import CreateRentInfo from '@/pages/contractCreate/creat-rent-info'
Vue.use(Router)
export default new Router({
......@@ -291,6 +294,9 @@ export default new Router({
{path: '/contract-create-list', component: ContractCreateList, name: 'ContractCreateList', meta: {keepAlive: true}},
{path: '/sales-info', component: SalesInfo, name: 'SalesInfo', meta: {keepAlive: true}},
{path: '/pick-lessee', component: PickLessee, name: 'PickLessee', meta: {keepAlive: true}},
{path: '/create-base-info', component: CreateBaseInfo, name: 'CreateBaseInfo', meta: {keepAlive: true}},
{path: '/add-person', component: AddPerson, name: 'AddPerson', meta: {keepAlive: true}},
{path: '/create-rent-info', component: CreateRentInfo, name: 'CreateRentInfo', meta: {keepAlive: true}},
],
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
......
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