Skip to content

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

新增弹出板块

parent 84d7aeaa
Show whitespace changes
Inline Side-by-side
Showing with 329 additions and 14 deletions
src/pages/home.vue
View file @ fbc9b058
......@@ -54,6 +54,11 @@ export default {
functionName: '用户绑定',
functionState: 'UserBind',
},
{
functionIcon: require('@/assets/intoApproval/introduce.png'),
functionName: '进件审批',
functionState: 'Base',
},
], // 全部应用
messageList: [
{
......
src/pages/intoApproval/intoApproval/accessory.vue
View file @ fbc9b058
<template>
<div id="accessory">
<list-item :item-height="44">
<item>
<item @click.native="type=1;sendDown()">
<div slot="name">身份证</div>
<span slot="content">
<img src="@/assets/intoApproval/download.png" >下载在线查看
</span>
</item>
<item>
<item @click.native="type=2;sendDown()">
<div slot="name">营业执照</div>
<span slot="content">
<img src="@/assets/intoApproval/download.png" >下载在线查看
</span>
</item>
<item>
<item @click.native="type=3;sendDown()">
<div slot="name">银行卡</div>
<span slot="content">
<img src="@/assets/intoApproval/download.png" >下载在线查看
</span>
</item>
<item>
<item @click.native="type=4;sendDown()">
<div slot="name">征信授权书</div>
<span slot="content">
<img src="@/assets/intoApproval/download.png" >下载在线查看
......@@ -32,9 +32,15 @@
export default {
data () {
return {
type: 0,
baseInfo: {},
}
},
methods: {
sendDown () {
this.$emit('down', this.type)
},
},
}
</script>
<style lang="less" scope>
......
src/pages/intoApproval/intoApproval/base.vue
View file @ fbc9b058
<template>
<h-view id="approval" class="public-style" title="进件审批">
<div v-if="!isConfirm" class="modal">
<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="[ischecked?'check':'uncheck']" @click="confirm">同意</button>
</div>
</div>
<div v-if="downNum" class="modal-show">
<div class="down">
<div class="top">
身份证
<img src="@/assets/intoApproval/close.png" @click="downNum=false" >
</div>
<div class="down-content">
<div>
<img src="@/assets/intoApproval/front.png" >
</div>
<div>
<img src="@/assets/intoApproval/back.png" >
</div>
</div>
<button class="check" @click="confirm">下载</button>
</div>
</div>
<h-header :proportion="[5,1,1]" class="header">
<div slot="left" class="h-header-btn" @click="$routeGo()">
<img src="@/assets/intoApproval/arrow.png" >
......@@ -114,19 +151,38 @@
</div>
</div>
<RentInfo v-show="tabNum==1" />
<AccessoryInfo v-show="tabNum==2"/>
<AccessoryInfo v-show="tabNum==2" @down="getDown" />
</h-content>
<bottom-tab class="footer-button">
<tab-button class="approve">
<tab-button class="approve" @click.native="showModalValue=true">
<img src="@/assets/intoApproval/approve.png" >审批
</tab-button>
</bottom-tab>
<h-modal ref="modal" v-model="showModalValue" position="bottom" cus-class="sign-modal">
<h-view>
<h-content class="approveContent">
<div class="approveBottom">
<span>审批意见<img src="@/assets/intoApproval/close1.png" @click="showModalValue=false"></span>
<textarea cols="8" rows="20" placeholder="请输入" />
</div>
</h-content>
<bottom-tab>
<tab-button class="reject" @click.native="showModalValue=true">
<img src="@/assets/intoApproval/reject.png" >拒绝
</tab-button>
<tab-button class="same" @click.native="showModalValue=true">
<img src="@/assets/intoApproval/approve.png" >同意
</tab-button>
</bottom-tab>
</h-view>
</h-modal>
</h-view>
</template>
<script>
import Tab from '@/pages/intoApproval/intoApproval/tab'
import RentInfo from '@/pages/intoApproval/intoApproval/rentInfo'
import AccessoryInfo from '@/pages/intoApproval/intoApproval/accessory'
import checkedImg from '@/assets/intoApproval/checked.png'
export default {
components: {
Tab,
......@@ -135,18 +191,51 @@ export default {
},
data () {
return {
showModalValue: false,
downNum: 0,
tabNum: 0,
ischecked: false,
isConfirm: false,
baseInfo: {},
checkedImg: checkedImg,
isDown: false,
}
},
mounted () {},
beforeRouteEnter (to, from, next) {
next(vm => {
vm.popProtocol()
})
},
methods: {
getTabNum (i) {
this.tabNum = i
},
getDown (i) {
this.downNum = i
},
select () {
this.ischecked = !this.ischecked
console.log(this.ischecked)
},
confirm () {
this.isConfirm = true
},
popProtocol () {
let modal = document.querySelector('.modal')
let alpha = 0
let addOpacity = setInterval(() => {
alpha += 1
modal.style.backgroundColor = `rgba(56,63,69,${alpha / 100})`
if (alpha >= 30) {
clearInterval(addOpacity)
}
}, 10)
},
},
}
</script>
<style lang="less" scoped type="text/less">
<style lang="less" scoped>
#approval {
font-family: PingFangSC-Regular;
input::placeholder {
......@@ -162,6 +251,7 @@ export default {
margin-left: 4px;
}
span {
color: #fff;
font-family: PingFangSC-Semibold;
margin-left: 16px;
font-size: 17px;
......@@ -171,6 +261,7 @@ export default {
}
}
.content {
height: 76%;
.userInfo {
height: 45px;
line-height: 45px;
......@@ -296,9 +387,6 @@ export default {
}
}
.footer-button {
padding-top: 10px;
padding-bottom: 41px;
height: 88px;
.approve {
width: 358.6px;
height: 44px;
......@@ -315,5 +403,206 @@ export default {
}
}
}
.modal {
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;
}
.check {
background-color: #00469c;
}
.uncheck {
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");
}
}
}
}
.modal-show {
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;
.down {
position: relative;
width: 301px;
height: 430px;
background-size: 301px 24.7px;
background-color: #fff;
}
.top {
width: 301px;
height: 44px;
font-family: PingFangSC-Semibold;
font-size: 16px;
letter-spacing: 0;
text-align: center;
line-height: 44px;
color: #fff;
background: #00469c;
img {
width: 16px;
height: 16px;
float: right;
margin-top: 13px;
margin-right: 20px;
}
}
.down-content {
margin-top: 8px;
div {
width: 224px;
margin: 0 auto;
height: 139px;
border: 1px dashed #ccc;
margin-top: 16px;
img {
width: 224px;
height: 139px;
}
}
}
button {
width: 240px;
height: 40px;
position: absolute;
color: #fff;
bottom: 16px;
left: 30.5px;
background-color: #00469c;
}
}
.approveContent {
position: absolute;
top: 50%;
background-color: #fafafa;
overflow-y: scroll;
}
.approveBottom {
width: 343px;
margin: 0 auto;
span {
display: block;
width: 100%;
font-family: PingFangSC-Semibold;
font-size: 15px;
color: #00469c;
height: 21px;
line-height: 21px;
margin: 16px 0;
img{
float:right;
}
}
textarea {
width: 343px;
height: 178px;
border-radius: 2px;
padding: 10px;
}
span::after {
content: "";
display: block;
position: relative;
left: 70px;
top: -17px;
width: 14px;
height: 14px;
background: url("../../../assets/intoApproval/approv.png");
background-size: 14px 14px;
}
}
.reject,
.same {
width: 175px;
height: 40px;
border-radius: 4px;
font-family: PingFangSC-Semibold;
font-size: 15px;
img{
width:13px;
height:13px;
}
}
.reject {
color: #656464;
border: 1px solid #656464;
}
.same {
color: #ffffff;
background: #00469c;
border: 1px solid #00469c;
}
}
.modal {
background-color: rgba(0, 0, 0, 0) !important;
}
</style>
src/pages/userBind/np/bankInfo.vue
View file @ fbc9b058
......@@ -77,12 +77,27 @@ export default {
return num.substring(num.length - 4)
},
deleteFun (e) {
let index = this.bankList.findIndex(item => {
let index = this.getBankList.findIndex(item => {
if (item.bank_account_num === e) {
return true
}
})
this.bankList.splice(index, 1)
this.getBankList.splice(index, 1)
let vm = this
let url = process.env.basePath + 'bp_bank_delete'
let param = {
'master': {
'bp_id': window.localStorage.user_id,
'bank_account_num': e,
},
}
vm.hlsPopup.showLoading('请稍候')
vm.hlsHttp.post(url, param).then(function (res) {
vm.hlsPopup.hideLoading()
if (res.result === 'S') {
console.log(res)
}
})
},
},
}
......
src/pages/userBind/np/naturePerson.vue
View file @ fbc9b058
......@@ -157,7 +157,7 @@
<tab-button class="put" @click.native="putData">提交</tab-button>
<tab-button class="save" @click.native="verified">保存</tab-button>
</bottom-tab>
<h-modal ref="modal" v-model="showModalValue" position="bottom" cus-class="search-modal">
<h-modal ref="modal" v-model="showModalValue" position="bottom" cus-class="sign-modal">
<h-view>
<h-content class="modal-content">
<notify v-model="show1" content="请输入本人的银行卡" type="warning" class="notice" />
......@@ -168,7 +168,7 @@
<img src="@/assets/userBind/close.png" @click="hideModal" >
</div>
<img src="@/assets/userBind/addBack.png" class="addBack" >
<list-item :item-height="44" class="card-Info">
<list-item :item-height="44" class="card-Info" >
<item>
<div slot="name">银行卡卡号</div>
<input slot="content" v-model="bank.bank_account_num" placeholder="银行卡卡号自动填充" >
......
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