Skip to content

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

新增进件审批，修改自然人绑定样式（进件审批图片地址未修改）

parent d5839b95
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 735 additions and 157 deletions
src/components/tab.vue
View file @ 9554d518
<template> <template>
<div class="tab-style"> <div class="tab-style">
<span @click="tabNum = 0;sendTabNum()"><img :src="tabNum == 0?check1:uncheck1"></span> <span @click="tabNum1 = 0;sendTabNum()"><img :src="tabNum == 0?check1:uncheck1"></span>
<span @click="tabNum = 1;sendTabNum()"><img :src="tabNum == 1?check2:uncheck2" ></span> <span @click="tabNum1 = 1;sendTabNum()"><img :src="tabNum == 1?check2:uncheck2" ></span>
<span @click="tabNum = 2;sendTabNum()"><img :src="tabNum == 2?check3:uncheck3"></span> <span @click="tabNum1 = 2;sendTabNum()"><img :src="tabNum == 2?check3:uncheck3"></span>
</div> </div>
</template> </template>
<script> <script>
...@@ -13,9 +13,16 @@ import uncheck1 from '@/assets/userBind/uncheck1.png' ...@@ -13,9 +13,16 @@ import uncheck1 from '@/assets/userBind/uncheck1.png'
import uncheck2 from '@/assets/userBind/uncheck2.png' import uncheck2 from '@/assets/userBind/uncheck2.png'
import uncheck3 from '@/assets/userBind/uncheck3.png' import uncheck3 from '@/assets/userBind/uncheck3.png'
export default { export default {
props: {
'tabNum': {
default: 0,
type: Number,
},
},
data () { data () {
return { return {
tabNum: 0, tabNum1: this.tabNum,
check1: check1, check1: check1,
check2: check2, check2: check2,
check3: check3, check3: check3,
...@@ -26,7 +33,7 @@ export default { ...@@ -26,7 +33,7 @@ export default {
}, },
methods: { methods: {
sendTabNum () { sendTabNum () {
this.$emit('getTabNum', this.tabNum) this.$emit('getTabNum', this.tabNum1)
}, },
}, },
} }
......
src/pages/intoApproval/home.vue 0 → 100644
View file @ 9554d518
<template>
<div @click="changeRoute">
进件审批
</div>
</template>
<script>
export default {
methods: {
changeRoute () {
this.$router.push(
{
name: 'Base',
}
)
},
},
}
</script>
<style scoped>
div{
width: 100px;
height: 100px;
border:2px solid #ccc;
text-align: center;
line-height: 100px;
margin:0 auto;
}
</style>
src/pages/intoApproval/intoApproval/accessory.vue 0 → 100644
View file @ 9554d518
<template>
<div id="accessory">
<list-item :item-height="44">
<item>
<div slot="name">身份证</div>
<span slot="content">
<img src="@/assets/homeImage/download.png" >下载在线查看
</span>
</item>
<item>
<div slot="name">营业执照</div>
<span slot="content">
<img src="@/assets/homeImage/download.png" >下载在线查看
</span>
</item>
<item>
<div slot="name">银行卡</div>
<span slot="content">
<img src="@/assets/homeImage/download.png" >下载在线查看
</span>
</item>
<item>
<div slot="name">征信授权书</div>
<span slot="content">
<img src="@/assets/homeImage/download.png" >下载在线查看
</span>
</item>
</list-item>
</div>
</template>
<script>
export default {
data () {
return {
baseInfo: {},
}
},
}
</script>
<style lang="less" scope>
#accessory {
span {
font-family: PingFangSC-Regular;
font-size: 11px;
color: #00469c;
letter-spacing: 0.34px;
display: flex;
align-items: center;
}
img {
margin-right: 8.7px;
width: 16.6px;
height: 16.6px;
}
}
</style>
src/pages/intoApproval/intoApproval/base.vue 0 → 100644
View file @ 9554d518
<template>
<h-view id="approval" class="public-style" title="进件审批">
<h-header :proportion="[5,1,1]" class="header">
<div slot="left" class="h-header-btn" @click="$routeGo()">
<img src="@/assets/homeImage/arrow.png" >
<span>进件审批</span>
</div>
</h-header>
<Tab @getTabNum="getTabNum" />
<h-content class="content">
<div v-show="tabNum==0">
<list-item :item-height="44">
<item>
<div slot="name">业务经办</div>
<input slot="content" v-model="baseInfo.bp_name_sp" readonly >
</item>
<item>
<div slot="name">经销商</div>
<input slot="content" v-model="baseInfo.spouse_phone" >
</item>
</list-item>
<div class="userInfo">承租人信息</div>
<list-item :item-height="44">
<item>
<div slot="name">姓名</div>
<input slot="content" v-model="baseInfo.bp_name_sp" readonly >
</item>
<item>
<div slot="name">证件号</div>
<input slot="content" v-model="baseInfo.spouse_phone" readonly >
</item>
<item>
<div slot="name">电话号码</div>
<input slot="content" v-model="baseInfo.working_place_sp" readonly >
</item>
<item>
<div slot="name">居住地址</div>
<input slot="content" v-model="baseInfo.address_sp" readonly >
</item>
<item>
<div slot="name">户籍地址</div>
<input slot="content" v-model="baseInfo.working_place_sp" readonly >
</item>
<item>
<div slot="name">学历</div>
<input slot="content" v-model="baseInfo.address_sp" readonly >
</item>
<item>
<div slot="name">婚姻状况</div>
<input slot="content" v-model="baseInfo.address_sp" readonly >
</item>
</list-item>
<div class="userInfo">配偶信息</div>
<list-item :item-height="44">
<item>
<div slot="name">姓名</div>
<input slot="content" v-model="baseInfo.bp_name_sp" readonly >
</item>
<item>
<div slot="name">电话号码</div>
<input slot="content" v-model="baseInfo.working_place_sp" readonly >
</item>
<item>
<div slot="name">工作单位</div>
<input slot="content" v-model="baseInfo.address_sp" readonly >
</item>
<item>
<div slot="name">居住地址</div>
<input slot="content" v-model="baseInfo.working_place_sp" readonly >
</item>
</list-item>
<div class="userInfo">担保人信息</div>
<list-item :item-height="76">
<item>
<div slot="name">
<span class="name-box">1</span>
<span class="name">担保人1姓名</span>
<span class="card-num">证件号</span>
</div>
<div slot="content" class="right">
<img src="@/assets/homeImage/introduce.png" >
<span>张天</span>
<br >
<span>42112029870928097</span>
</div>
</item>
<item>
<div slot="name">
<span class="name-box">1</span>
<span class="name">担保人1姓名</span>
<span class="card-num">证件号</span>
</div>
<div slot="content" class="right">
<img src="@/assets/homeImage/introduce.png" >
<span>张天</span>
<br >
<span>42112029870928097</span>
</div>
</item>
</list-item>
<div class="alert">
<div class="alert-content">
<div class="title">
<img src="@/assets/homeImage/info.png" >
<span class="info-word">温馨提示</span>
</div>
<p class="top-info">绑定成功后，您即可使用APP中合同查询、还款查询等功能。</p>
<div class="top-word">
<p>本人保证所提供信息的真实性、完整性及准确性。</p>
<p>本人在此授权徐工融资租赁有限公司通过中国人民银行个人信用信息基础数据库及其他征信机构、金融机构查询本人的个人信息、信用记录和工作情况。</p>
<p>本人同意接收来自于徐工融资租赁有限公司或第三方发出的提醒付款、确认付款、催款等短信(不含广告),同意接收来自于徐工融资租赁有限公司的录音电话,并积极配合。</p>
</div>
</div>
</div>
</div>
<RentInfo v-show="tabNum==1" />
<AccessoryInfo v-show="tabNum==2"/>
</h-content>
<bottom-tab class="footer-button">
<tab-button class="approve">
<img src="@/assets/homeImage/approve.png" >审批
</tab-button>
</bottom-tab>
</h-view>
</template>
<script>
import Tab from '@/components/tab'
import RentInfo from '@/pages/intoApproval/rentInfo'
import AccessoryInfo from '@/pages/intoApproval/accessory'
export default {
components: {
Tab,
RentInfo,
AccessoryInfo,
},
data () {
return {
tabNum: 0,
baseInfo: {},
}
},
methods: {
getTabNum (i) {
this.tabNum = i
},
},
}
</script>
<style lang="less" scoped type="text/less">
#approval {
font-family: PingFangSC-Regular;
input::placeholder {
color: #b4b4b5;
}
.header {
background-color: #00469c;
color: #fff;
.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.6px;
line-height: 24px;
}
}
}
.content {
.userInfo {
height: 45px;
line-height: 45px;
color: #00469c;
margin-top: -10px;
font-size: 15px;
margin-left: 16px;
position: relative;
}
.userInfo::before {
content: "";
display: block;
width: 4px;
height: 20px;
background-color: #00469c;
position: absolute;
left: -15px;
top: 12px;
}
.name-box {
display: inline-block;
text-align: center;
line-height: 16px;
color: #00469c;
width: 16px;
height: 16px;
background: #cddbec;
border-radius: 4px;
}
.name {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #383f45;
letter-spacing: 0;
margin-left: 10px;
}
.card-num {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #383f45;
letter-spacing: 0;
display: block;
margin-left: 31px;
margin-top: 7px;
}
.right {
position: relative;
}
.right span {
float: right;
margin-right: 48px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: rgba(56, 63, 69, 0.6);
letter-spacing: 0;
line-height: 18px;
}
.right span:last-child {
margin-top: 7px;
}
.right img {
position: absolute;
top: 30%;
left: 80%;
width: 14px;
height: 16px;
}
.alert {
height: 219px;
width: 100%;
background: rgba(252, 200, 0, 0.16);
}
.alert-content {
width: 334px;
margin: 0 auto;
padding-top: 16px;
}
.info-word {
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #fcc800;
letter-spacing: 0.5px;
margin-left: 8px;
}
.title {
display: flex;
align-items: center;
}
.top-info {
font-family: PingFangSC-Regular;
font-size: 12px;
color: #656464;
letter-spacing: 0.37px;
margin-top: 7px;
line-height: 15px;
}
.top-word {
p {
font-family: PingFangSC-Regular;
font-size: 12px;
color: #656464;
letter-spacing: 0.37px;
margin-top: 7px;
line-height: 15px;
text-indent: 16px;
position: relative;
}
p::before {
content: "";
display: block;
position: absolute;
top: 5px;
left: 0px;
width: 4px;
height: 4px;
border-radius: 20px;
background-color: #fcc800;
}
}
.alert img {
width: 18px;
height: 18px;
}
}
.footer-button {
padding-top: 10px;
padding-bottom: 41px;
height: 88px;
.approve {
width: 358.6px;
height: 44px;
background: #00469c;
border-radius: 4px;
color: #fff;
font-family: PingFangSC-Semibold;
font-size: 15px;
line-height: 20px;
letter-spacing: 10px;
img {
width: 16.8px;
height: 16.8px;
}
}
}
}
</style>
src/pages/intoApproval/intoApproval/rentInfo.vue 0 → 100644
View file @ 9554d518
<template>
<div id="rentInfo">
<list-item :item-height="44">
<item>
<div slot="name">商务政策</div>
<input slot="content" v-model="baseInfo.bp_name_sp" readonly >
</item>
<item>
<div slot="name">设备总价</div>
<input slot="content" v-model="baseInfo.working_place_sp" readonly >
</item>
<item>
<div slot="name">融资金额</div>
<input slot="content" v-model="baseInfo.address_sp" readonly >
</item>
<item>
<div slot="name">首付款</div>
<input slot="content" v-model="baseInfo.working_place_sp" readonly >
</item>
<item>
<div slot="name">保证金比例</div>
<input slot="content" v-model="baseInfo.bp_name_sp" readonly >
</item>
<item>
<div slot="name">保证金</div>
<input slot="content" v-model="baseInfo.working_place_sp" readonly >
</item>
<item>
<div slot="name">手续费比例</div>
<input slot="content" v-model="baseInfo.address_sp" readonly >
</item>
<item>
<div slot="name">手续费</div>
<input slot="content" v-model="baseInfo.working_place_sp" readonly >
</item>
<item>
<div slot="name">预计付款日</div>
<input slot="content" v-model="baseInfo.bp_name_sp" readonly >
</item>
<item>
<div slot="name">还款周期</div>
<input slot="content" v-model="baseInfo.working_place_sp" readonly >
</item>
<item>
<div slot="name">租赁期数</div>
<input slot="content" v-model="baseInfo.address_sp" readonly >
</item>
<item>
<div slot="name">年利率</div>
<input slot="content" v-model="baseInfo.working_place_sp" readonly >
</item>
</list-item>
<div class="top-userInfo">查看还款计划</div>
<div class="userInfo">担保人信息</div>
<list-item>
<item>
<div slot="name">参数项</div>
<input slot="content" v-model="baseInfo.working_place_sp" readonly >
</item>
<item>
<div slot="name">产品线</div>
<input slot="content" v-model="baseInfo.address_sp" readonly >
</item>
<item>
<div slot="name">产品数量</div>
<input slot="content" v-model="baseInfo.working_place_sp" readonly >
</item>
</list-item>
<div class="alert">
<div class="alert-content">
<div class="title">
<img src="@/assets/homeImage/info.png" >
<span class="info-word">提示</span>
</div>
<p class="top-info">绑定成功后，您即可使用APP中合同查询、还款查询等功能。
<span>为了确保您的权益，请查看全部</span></p>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
baseInfo: {},
}
},
}
</script>
<style lang="less" scoped>
#rentInfo {
.top-userInfo {
height: 45px;
line-height: 45px;
text-decoration: underline;
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #00469c;
letter-spacing: 0;
padding-left: 16px;
background: rgba(0, 70, 156, 0.03);
}
.userInfo {
height: 45px;
line-height: 45px;
color: #00469c;
font-size: 15px;
margin-left: 16px;
position: relative;
}
.userInfo::before {
content: "";
display: block;
width: 4px;
height: 20px;
background-color: #00469c;
position: absolute;
left: -15px;
top: 12px;
}
.alert {
height: 93px;
width: 100%;
background: rgba(252, 200, 0, 0.16);
}
.alert-content {
width: 334px;
margin: 0 auto;
padding-top: 16px;
}
.info-word {
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #fcc800;
letter-spacing: 0.5px;
margin-left: 8px;
}
.title {
display: flex;
align-items: center;
}
.top-info {
font-family: PingFangSC-Regular;
font-size: 12px;
color: #656464;
letter-spacing: 0.37px;
margin-top: 7px;
line-height: 15px;
span{
color: #fcc800;
}
}
.alert img {
width: 18px;
height: 18px;
}
}
</style>
src/pages/userBind/np/bankInfo.vue
View file @ 9554d518
<template> <template>
<h-content> <div id="bank-card">
<div id="bank-card"> <div class="info">
<div class="info"> <div class="info-icon">
<div class="info-icon"> <img src="@/assets/userBind/info.png" >
<img src="@/assets/userBind/info.png" > <span>温馨提示</span>
<span>温馨提示</span>
</div>
<p>推荐使用农行卡，农行卡支付免收手续费!</p>
</div> </div>
<div class="my-card"> <p>推荐使用农行卡，农行卡支付免收手续费!</p>
<div class="top"> </div>
<div class="left"> <div class="my-card">
<img src="@/assets/userBind/bankIcon.png" class="icon" > <div class="top">
<span class="top-word"> <div class="left">
我的卡 <img src="@/assets/userBind/bankIcon.png" class="icon" >
<span class="sum">(共4张)</span> <span class="top-word">
</span> 我的卡
</div> <span class="sum">(共{{ getBankList.length }}张)</span>
<img src="@/assets/userBind/add.png" class="icon-right" @click="sendFlag" > </span>
</div> </div>
<div class="clear" /> <img src="@/assets/userBind/add.png" class="icon-right" @click="sendFlag" >
<div class="card-content"> </div>
<ul> <div class="clear" />
<li v-for="(item,index) in bankList" :key="index"> <div class="card-content">
<item-option class="slider"> <ul>
<div <li v-for="(item,index) in getBankList" :key="index">
:style="'background-image: url('+ changeBgImg (item) +')'" <item-option class="slider">
class="my-bank-card" <div
> :style="'background-image: url('+ changeBgImg (item) +')'"
<div class="card-info"> class="my-bank-card"
<span class="name">{{ item.bank_full_name }}</span> >
<span class="card-type">{{ item.bank_card_type }}</span> <div class="card-info">
<span class="number">卡号</span> <span class="name">{{ item.bank_full_name }}</span>
<span class="card-number">**** **** **** {{ selectLast (item) }}</span> <span class="card-type">{{ item.bank_card_type }}</span>
</div> <span class="number">卡号</span>
</div> <span class="card-number">**** **** **** {{ selectLast (item) }}</span>
<div slot="buttons" class="button">
<option-button text @click.native="deleteFun(item.bank_account_num)" />
</div> </div>
</item-option> </div>
</li> <div slot="buttons" class="button">
</ul> <option-button text @click.native="deleteFun(item.bank_account_num)" />
</div> </div>
</item-option>
</li>
</ul>
</div> </div>
</div> </div>
</h-content> </div>
</template> </template>
<script> <script>
import backImg1 from '@/assets/userBind/nong.png' import backImg1 from '@/assets/userBind/nong.png'
import backImg2 from '@/assets/userBind/unNong.png' import backImg2 from '@/assets/userBind/unNong.png'
export default { export default {
props: {
'getBankList': {
default: [],
type: Array,
},
},
data () { data () {
return { return {
backImg: null, backImg: null,
showModalValue: true, showModalValue: true,
bankList: [
{
bank_account_num: '1231123112311231',
bank_full_name: '中国农业银行',
bank_card_type: '信用卡',
},
{
bank_account_num: '2345763456980965',
bank_full_name: '中国建设银行',
bank_card_type: '储蓄卡',
},
{
bank_account_num: '2345763456980905',
bank_full_name: '中国建设银行',
bank_card_type: '储蓄卡',
},
],
} }
}, },
methods: { methods: {
......
src/pages/userBind/np/naturePerson.vue
View file @ 9554d518
This diff is collapsed.
src/pages/userBind/userBind.vue
View file @ 9554d518
...@@ -9,8 +9,8 @@ ...@@ -9,8 +9,8 @@
<h-content class="content"> <h-content class="content">
<div class="info"> <div class="info">
<div class="info-icon"> <div class="info-icon">
<span>温馨提示</span>
<img src="@/assets/userBind/info.png" > <img src="@/assets/userBind/info.png" >
<span>温馨提示</span>
</div> </div>
<p>绑定成功后，您即可使用APP中合同查询、还款查询等功能。</p> <p>绑定成功后，您即可使用APP中合同查询、还款查询等功能。</p>
</div> </div>
...@@ -71,6 +71,7 @@ export default { ...@@ -71,6 +71,7 @@ export default {
margin-left: 4px; margin-left: 4px;
} }
span { span {
color: #fff;
font-family: PingFangSC-Semibold; font-family: PingFangSC-Semibold;
margin-left: 16px; margin-left: 16px;
font-size: 17px; font-size: 17px;
...@@ -82,9 +83,10 @@ export default { ...@@ -82,9 +83,10 @@ export default {
.content { .content {
.info { .info {
height: 88px; height: 88px;
line-height: 88px;
background-color: rgba(142, 195, 30, 0.1); background-color: rgba(142, 195, 30, 0.1);
.info-icon { .info-icon {
height: 20px; height: 30px;
padding-top: 20px; padding-top: 20px;
display: flex; display: flex;
align-items: center; align-items: center;
......
src/router/index.js
View file @ 9554d518
...@@ -20,6 +20,8 @@ import UserBind from '@/pages/userBind/userBind' ...@@ -20,6 +20,8 @@ import UserBind from '@/pages/userBind/userBind'
import NaturePerson from '@/pages/userBind/np/naturePerson' import NaturePerson from '@/pages/userBind/np/naturePerson'
import Enterprise from '@/pages/userBind/org/enterprise' import Enterprise from '@/pages/userBind/org/enterprise'
// 进件审批
import Base from '@/pages/intoApproval/intoApproval/base'
Vue.use(Router) Vue.use(Router)
export default new Router({ export default new Router({
...@@ -83,6 +85,8 @@ export default new Router({ ...@@ -83,6 +85,8 @@ export default new Router({
{path: '/user-bind', component: UserBind, name: 'UserBind', meta: {keepAlive: false}}, {path: '/user-bind', component: UserBind, name: 'UserBind', meta: {keepAlive: false}},
{path: '/nature-person', component: NaturePerson, name: 'NaturePerson', meta: {keepAlive: false}}, {path: '/nature-person', component: NaturePerson, name: 'NaturePerson', meta: {keepAlive: false}},
{path: '/enterprise', component: Enterprise, name: 'Enterprise', meta: {keepAlive: false}}, {path: '/enterprise', component: Enterprise, name: 'Enterprise', meta: {keepAlive: false}},
// 进件审批
{path: '/base', component: Base, name: 'Base', meta: {keepAlive: true}},
], ],
scrollBehavior (to, from, savedPosition) { scrollBehavior (to, from, savedPosition) {
if (to.hash) { 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