Skip to content

H
hls-webapp-cli
Commit 149cc32d authored by JingChao's avatar JingChao
Browse files
Options

esign

parent 2ba89dff
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 970 additions and 253 deletions
template/index.html
View file @ 149cc32d
......@@ -10,10 +10,6 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<!-- <script type="text/javascript" src="../../cordova.js"></script>-->
<script src="./static/signature-pad-min.js"></script>
<!-- <script src="./static/jquery-2-1-1.js"></script>-->
<script src="./static/jquery-touch-punch-min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/f2/3.3.5/f2-all.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/lodash-4.17.4.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
......
template/src/pages/applications/esign/BankVerified.vue 0 → 100755
View file @ 149cc32d
<template>
<h-view class="public-style bank-account" title="四要素验证">
<!-- <h-header>
<div slot="left" class="h-header-btn" @click="$routeGo()">
<i class="ion-ios-arrow-back"/>
</div>
<div slot="center">四要素验证</div>
</h-header>-->
<h-content>
<list-item>
<item>
<section slot="name" class="required">姓名</section>
<input slot="content" v-model="personName" placeholder="输入姓名">
</item>
<item :show-arrow="true">
<section slot="name" class="required" >证件类型</section>
<input
slot="content" v-model="idType_n" placeholder="请选择证件类型" readonly>
</item>
<item>
<section slot="name" class="required">证件号</section>
<input
slot="content" v-model="identificationNumber" class="required" placeholder="输入证件号"
type="number">
</item>
<item>
<section slot="name" class="required" >银行卡号</section>
<input slot="content" v-model="bankCardNumber" placeholder="银行卡号" type="number">
</item>
<item>
<section slot="name" class="required">银行预留手机号</section>
<input slot="content" v-model="bankReservedPhoneNumber" placeholder="输入手机号" type="tel">
</item>
<item :show-name="false" :item-height="30" class="tip-item">
<section slot="content" class="tips">我们收集您的个人信息仅用于实名认证，请放心填写</section>
</item>
</list-item>
<section class="button">
<h-button @click.native="verified()">验证</h-button>
</section>
</h-content>
</h-view>
</template>
<script>
export default {
data () {
return {
personName: this.$route.params.item['bpName'],
idType: '1',
idType_n: '身份证',
identificationNumber: '',
bankCardNumber: '',
bankReservedPhoneNumber: '',
}
},
activated: function () {
/* // 海马汇桥接获取个人信息
hmapLogin('local').then(res => {
}) */
},
updated: function () {
},
methods: {
/**
* 演示用 不调用验证接口
* url=$config.rootPath+'/electronicSignature/bankVerified'
* 金格 2001 实名认证(银行卡四要素验证)
* 参数为data里面参数
*/
verified () {
let vm = this
if (!vm.idType || !vm.personName || !vm.identificationNumber || !vm.bankCardNumber || !vm.bankReservedPhoneNumber) {
vm.hlsPopup.showLongCenter('必输字端不能为空！')
return
}
if (vm.hlsUtil.isCardID(vm.identificationNumber)) {
vm.hlsPopup.showLongCenter('身份证号有误')
return
}
if (vm.hlsUtil.isBankAccount(vm.bankCardNumber)) {
vm.hlsPopup.showLongCenter('银行卡号有误!')
return
}
if (!vm.hlsUtil.phoneNumber(vm.bankReservedPhoneNumber)) {
vm.hlsPopup.showLongCenter('手机号码有误!')
return
}
vm.hlsPopup.showLoading('认证中!')
// TODO 此处应该调用金格个人开户接口去做开户请求 但由于演示环境开户完成后并无实际效果，故不调用接口
setTimeout(() => {
vm.hlsPopup.hideLoading()
vm.hlsPopup.showSuccess('认证成功')
setTimeout(() => {
vm.$router.push({
name: 'PersonAccount',
params: {
personName: vm.personName,
identificationNumber: vm.identificationNumber,
phoneNumber: vm.bankReservedPhoneNumber,
},
})
}, 500)
}, 2000)
},
},
}
</script>
<style lang="less" type="text/less">
.bank-account {
.content {
.hls-list-item{
.tip-item{
.contents{
.add-content{
.tips{
font-size: 12px;
}
}
}
}
}
.button{
width: 100%;
margin-top: 40px;
display: flex;
justify-content: center;
.hls-h-button{
background-color: @headerColor;
border: none;
border-radius: 20px;
width: 140px;
height: 40px;
color: #fff;
}
}
}
}
// iPhoneX适配
@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
.platform-ios {
#home {
}
}
}
// iPhoneX Max适配
@media (device-width: 414px) and (device-height: 896px) {
.platform-ios {
.platform-ios {
#home {
}
}
}
}
</style>
template/src/pages/applications/esign/Esign.vue 0 → 100644
View file @ 149cc32d
<template>
<h-view id="home" class="public-style" title="合同签署">
<!-- <h-header>
<div slot="left" class="h-header-btn" @click="$hlsExit()">
<i class="ion-ios-arrow-back"/>
</div>
<div slot="center">合同列表</div>
</h-header>-->
<h-content>
<list-item v-for="(item,index) in conList" :item-height="90" :key="index">
<item :has-border="false" :show-arrow="true" :proportion="[0,9]" @click.native="goPerson(index)">
<div slot="left-icon" class="left"/>
<section slot="content" class="content">
<section class="line">
<section class="name">经销商</section>
<section class="value">\{{ item.bpAgent }}</section>
</section>
<section class="line">
<section class="name">合同号</section>
<section class="value">\{{ item.conNum }}</section>
</section>
<section class="line">
<section class="name">车架号</section>
<section class="value">\{{ item.vin }}</section>
</section>
</section>
</item>
<item :proportion="[3,1]" :item-height="40" style="padding: 0 0 0 .3rem">
<section slot="name">\{{ item.bpName }}+\{{ item.bpAgent }}</section>
<section slot="content" style="color: #5D98F6" @click="previewPdf()">合同预览</section>
</item>
</list-item>
</h-content>
</h-view>
</template>
<script>
/**
* 金格电子签章 演示使用，不进行实际接口调用
* 此演示做了大致流程，
* 1.实名认证（银行卡四要素验证/人脸验证）此处使用银行卡
* 2.个人开户
* 3.签章
*/
export default {
data () {
return {
conList: [{
bpAgent: '雷厉风行租赁有限公司',
conNum: 'CON2019000070001',
vin: 'ER45GTF8HU86RDLPIN',
bpName: '李达',
}, {
bpAgent: '盛州汽车销售有限公司',
conNum: 'CON2019000070012',
vin: 'GHTY67R4DF2EG5RY7',
bpName: '李锂',
}, {
bpAgent: '上海汉得融资租赁有限公司',
conNum: 'CON2019000060024',
vin: 'SDFVY453ER4325TRKLUK',
bpName: '张裕',
}, {
bpAgent: '智慧租赁有限公司',
conNum: 'CON2018000050013',
vin: 'AS785TGHFR43ED5RW',
bpName: '张弛',
}, {
bpAgent: '品德百盛汽车贸易公司',
conNum: 'CON2019000100047',
vin: 'WIN6TF4RDE5W3FLM9',
bpName: '李亮',
}],
}
},
activated: function () {
// 海马汇桥接获取个人信息
hmapLogin('local').then(res => {
})
},
updated: function () {
},
methods: {
previewPdf () {
window.open('http://hlsapp.hand-china.com/file/jinge/RZZLCON.pdf', '_system')
},
goPerson (index) {
let vm = this
this.$router.push({
name: 'BankVerified',
params: {
item: vm.conList[index],
},
})
},
},
}
</script>
<style lang="less" type="text/less">
@import "../../../styles/vue-1px.less";
#home {
.content {
.hls-list-item {
.hls-item {
padding: 0;
.content {
background-color: #fff;
&:after {
.setBottomLine()
}
}
}
.left {
width: .1rem;
height: 0.6rem;
background-color: #596F9D;
margin-right: .2rem;
}
.line {
display: flex;
width: 100%;
height: 30px;
font-size: 14px;
line-height: 30px;
.name {
color: #666;
margin-right: 15px;
}
.value {
color: #555B70;
}
}
}
}
}
// iPhoneX适配
@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
.platform-ios {
#home {
}
}
}
// iPhoneX Max适配
@media (device-width: 414px) and (device-height: 896px) {
.platform-ios {
.platform-ios {
#home {
}
}
}
}
</style>
template/src/pages/applications/esign/PersonAccount.vue 0 → 100755
View file @ 149cc32d
<template>
<h-view class="public-style person-account" title="实名开户">
<!-- <h-header>
<div slot="left" class="h-header-btn" @click="$routeGo()">
<i class="ion-ios-arrow-back"/>
</div>
<div slot="center">实名开户</div>
</h-header>-->
<h-content>
<list-item>
<item>
<section slot="name" class="required">姓名</section>
<input slot="content" v-model="personName" placeholder="输入姓名">
</item>
<item :show-arrow="true">
<section slot="name" class="required" >证件类型</section>
<input
slot="content" v-model="idType_n" placeholder="请选择证件类型"
readonly @click="seelctIdType">
</item>
<item>
<section slot="name" class="required">证件号</section>
<input
slot="content" v-model="identificationNumber" class="required" placeholder="输入证件号"
type="number">
</item>
<item>
<section slot="name" class="required" >手机号</section>
<input slot="content" v-model="phoneNumber" placeholder="输入手机号" type="tel">
</item>
<item>
<section slot="name" >住宅</section>
<input slot="content" v-model="location" placeholder="输入居住地址" type="text">
</item>
<item>
<section slot="name">邮箱</section>
<input slot="content" v-model="email" placeholder="输入邮箱" type="email">
</item>
<item :show-name="false" :item-height="30" class="tip-item">
<section slot="content" class="tips">我们收集您的个人信息仅用于电子签章开户，请放心填写</section>
</item>
</list-item>
<section class="button">
<h-button @click.native="sign()">确认开户</h-button>
</section>
</h-content>
</h-view>
</template>
<script>
export default {
data () {
return {
personName: this.$route.params.personName,
idType: '1',
idType_n: '身份证',
identificationNumber: this.$route.params.identificationNumber,
phoneNumber: this.$route.params.phoneNumber,
location: '',
email: '',
idTypeList: [
{
'code': '1',
'code_name': '身份证',
}, {
'code': '2',
'code_name': '护照',
}],
}
},
activated: function () {
/* // 海马汇桥接获取个人信息
hmapLogin('local').then(res => {
}) */
},
updated: function () {
},
methods: {
seelctIdType () {
let vm = this
vm.hlsPopup.selectList({
list: vm.idTypeList,
code: 'idType',
object: {},
returnItem (index) {
vm.idType = vm.idTypeList[index].code
vm.idType_n = vm.idTypeList[index].code_name
},
})
},
/**
* 演示用 不调用接口开户
* url=$config.rootPath+'/electronicSignature/personalAccountOpen'
* 金格 1001个人开户
* 参数为data里面参数
*/
sign () {
let vm = this
if (!vm.idType || !vm.personName || !vm.identificationNumber || !vm.phoneNumber) {
vm.hlsPopup.showLongCenter('必输字端不能为空！')
return
}
if (vm.idType === '1') {
let result = vm.hlsUtil.isCardID(vm.identificationNumber)
if (result) {
vm.hlsPopup.showLongCenter(result)
return
}
}
if (!vm.hlsUtil.phoneNumber(vm.phoneNumber)) {
vm.hlsPopup.showLongCenter('手机号码有误!')
return
}
vm.hlsPopup.showLoading('开户中!')
// TODO 此处应该调用金格个人开户接口去做开户请求 但由于演示环境开户完成后并无实际效果，故不调用接口
setTimeout(() => {
vm.hlsPopup.hideLoading()
vm.hlsPopup.showSuccess('开户成功')
setTimeout(() => {
vm.$router.push({
name: 'SignPdf',
params: {
personName: vm.personName,
identificationNumber: vm.identificationNumber,
},
})
}, 500)
}, 2000)
},
},
}
</script>
<style lang="less" type="text/less">
.person-account {
.content {
.hls-list-item{
.tip-item{
.contents{
.add-content{
.tips{
font-size: 12px;
}
}
}
}
}
.button{
width: 100%;
margin-top: 40px;
display: flex;
justify-content: center;
.hls-h-button{
background-color: @headerColor;
border: none;
border-radius: 20px;
width: 140px;
height: 40px;
color: #fff;
}
}
}
}
// iPhoneX适配
@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
.platform-ios {
#home {
}
}
}
// iPhoneX Max适配
@media (device-width: 414px) and (device-height: 896px) {
.platform-ios {
.platform-ios {
#home {
}
}
}
}
</style>
template/src/pages/applications/esign/ViewPicture.Vue 0 → 100644
View file @ 149cc32d
<template>
<h-view class="public-style">
<!-- <h-header>
<div slot="left" class="h-header-btn" @click="$routeGo()">
<i class="ion-ios-arrow-back"/>
</div>
<div slot="center">在线预览</div>
</h-header>-->
<h-content>
<div v-for="(list,index) in pirtureList" :key="index" class="esign-wrap">
<img v-lazy="list.imgUrl">
</div>
</h-content>
</h-view>
</template>
<script>
export default {
data () {
return {
pirtureList: this.$route.params.pirtureList,
}
},
methods: {},
}
</script>
<style scoped lang="less" rel="stylesheet">
.public-style {
.content {
img {
width: 100%;
}
}
}
</style>
template/src/router/index.js
View file @ 149cc32d
......@@ -63,7 +63,11 @@ import Robot from '@/pages/applications/robot/robot'
{{#esign}}
// E 签宝
import Esign from '@/pages/applications/esign/esign'
import Esign from '@/pages/applications/esign/Esign'
import BankVerified from '@/pages/applications/esign/BankVerified'
import PersonAccount from '@/pages/applications/esign/PersonAccount'
import SignPdf from '@/pages/applications/esign/SignPdf'
import ViewPicture from '@/pages/applications/esign/ViewPicture'
{{/esign}}
{{#report}}
......@@ -275,7 +279,11 @@ export default new Router({
{path: '/Robot', component: Robot, name: 'Robot', meta: {keepAlive: false}},
{{/robot}}
{{#esign}}
{path: '/Esign', component: Esign, name: 'Esign', meta: {keepAlive: false}},
{path: '/Esign', component: Esign, name: 'Esign', meta: {keepAlive: false}},
{path: '/BankVerified', component: BankVerified, name: 'BankVerified', meta: {keepAlive: true}},
{path: '/PersonAccount', component: PersonAccount, name: 'PersonAccount', meta: {keepAlive: true}},
{path: '/SignPdf', component: SignPdf, name: 'SignPdf', meta: {keepAlive: true}},
{path: '/ViewPicture', component: ViewPicture, name: 'ViewPicture', meta: {keepAlive: true}},
{{/esign}}
{{#riskstrom}}
// 风报
......
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