Skip to content

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

esign

parent 2ba89dff
Hide whitespace changes
Inline Side-by-side
Showing with 970 additions and 253 deletions
template/index.html
View file @ 149cc32d
...@@ -10,10 +10,6 @@ ...@@ -10,10 +10,6 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <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="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/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/lodash-4.17.4.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script> <script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
......
template/src/pages/applications/contractSign/signModal.vue
View file @ 149cc32d
...@@ -12,7 +12,15 @@ ...@@ -12,7 +12,15 @@
</div> </div>
<div id="draw" class="draw"> <div id="draw" class="draw">
<div id="sig" class="sig"> <div id="sig" class="sig">
<canvas id="canvas"/> <canvas
id="canvas"
@mousedown="beginDraw"
@mouseup="endDraw"
@mousemove="drawing"
@touchstart="beginDraw"
@touchend="endDraw"
@touchmove="drawing"
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -21,193 +29,250 @@ ...@@ -21,193 +29,250 @@
</template> </template>
<script> <script>
export default {
export default { props: {
props: { info: {
info: Object, type: Object,
}, default: function () {
data () { return { }
return { },
signaturePad: {}, },
image_base64: '',
}
},
created: function () {
// console.log(this.timeInfo)
},
mounted: function () {
this.changeSize()
},
activated: function () {
},
deactivated: function () {
},
methods: {
hideModal () {
this.$emit('closeModal')
},
cleanData () {
let vm = this
vm.signaturePad.clear()
},
// 确认签名
confirmData () {
let vm = this
if (vm.signaturePad.isEmpty()) {
hlsPopup.showLongCenter('未创建签名!')
} else {
vm.hideModal()
var canvas = document.getElementById('canvas')
var canvasData = canvas.toDataURL('image/png')
vm.image_base64 = canvasData.split(',')[1]
hlsPopup.showLoading('正在签名请稍等!')
// 先创建账号
var url = process.env.rootPath + '/app/sign/register'
var param = {
'idNo': vm.info.id_number,
'name': vm.info.name,
}
vm.$post(url, param).then(function (res) {
if (!res.success) {
// 如果成功进行签名
// success_atm = []
var file_name = '测试e签宝' + '-盖章.pdf'
vm.getSignPdf(vm.info.name, vm.info.id_number, vm.image_base64, '', '', '', file_name, '', 'BOTH')
} else {
hlsPopup.hideLoading()
hlsPopup.showPopup('', '签名失败请返回重试', function () {
// window.history.go(-1)
})
}
})
}
}, },
getSignPdf (name, id_no, imgData, table_name, table_pk_value, attachment_id, file_name, user_id, sign_type) { data () {
let vm = this return {
// debugger; image_base64: '',
// 只签名客户"userPages":[{"page": "1", "x":505, "y":340},{"page": "2", "x":115, "y":410}] canvas: {},
// 签名客户和公司"userPages":[{"page": "1", "x":510, "y":245},{"page": "4", "x":460, "y":135}], context: {},
// "selfPages":[{"page": "1", "x":200, "y":235},{"page": "4", "x":100, "y":135}], height: '',
var userPages = [] hasSignature: false,
var selfPages = [] last: null,
if (sign_type === 'BOTH') { config: {
/* userPages = [{"page": "1", "x": 500, "y": 235}, {"page": "4", "x": 460, "y": 135}]; strokeStyle: '#ff0000',
selfPages = [{"page": "1", "x": 200, "y": 235}, {"page": "4", "x": 100, "y": 135}]; */ lineWidth: 3,
// uat
// userPages=[{"page": "1", "x": 510, "y": 245}, {"page": "4", "x": 445, "y": 135}];
// selfPages=[{"page": "1", "x": 200, "y": 245}, {"page": "4", "x": 120, "y": 135}];
userPages = [{'page': '1', 'x': 510, 'y': 250}, {'page': '4', 'x': 445, 'y': 165}]
selfPages = [{'page': '1', 'x': 200, 'y': 250}, {'page': '4', 'x': 120, 'y': 165}]
} else {
userPages = [{'page': '1', 'x': 505, 'y': 205}, {'page': '2', 'x': 105, 'y': 230}]
}
var url = process.env.rootPath + '/app/sign/pdf'
var param = {
'idNo': id_no,
'name': name,
'userPages': userPages,
'selfPages': selfPages,
'attachmentInfo': {
'downloadApiName': 'attment_view',
'downloadSysName': 'HLS_APP',
'attachmentId': 6,
'uploadApiName': 'attachment_upload',
'uploadSysName': 'HLS_APP',
'userId': 1,
'sourceType': 'HLS_DOC_FILE_TEMPLET',
'pkValue': 42,
'fileName': file_name,
}, },
'personArea': 0, mousePress: false,
'sealData': imgData,
} }
vm.$post(url, param).then(function (res) {
hlsPopup.hideLoading()
if (res.success) {
hlsPopup.showConfirm({
title: '签名成功',
content: '是否预览合同',
onConfirm: function (index) {
if (index === 1) {
// 签名合同预览
vm.PDF(parseInt(res.message))
}
},
})
} else {
hlsPopup.hideLoading()
hlsPopup.showLongCenter('签名失败请重试')
/* hlsPopup.showPopup('', '签名失败请返回重试', function () {
// 调用删除
// window.history.go(-1)
}) */
}
})
}, },
created: function () {
changeSize () { // console.log(this.timeInfo)
let vm = this },
mounted: function () {
this.canvas = document.getElementById('canvas')
this.context = this.canvas.getContext('2d')
if (window.innerHeight > window.innerWidth) { if (window.innerHeight > window.innerWidth) {
$('#canvas').attr({'height': ((window.innerHeight / 2) - 100), 'width': window.innerWidth}) this.height = window.innerHeight / 2 + 50
this.resizeCanvas(window.innerWidth, window.innerHeight / 2 - 50)
} else { } else {
$('#canvas').attr({'height': (window.innerHeight - 100), 'width': window.innerWidth}) this.resizeCanvas(window.innerWidth, window.innerHeight - 50)
$('html,body').animate({scrollTop: 0}, 'slow') this.height = window.innerHeight + 50
} }
var canvasX = $('#canvas')[0]
vm.signaturePad = new SignaturePad(canvasX, {
dotSize: 0,
velocityFilterWeight: 1,
minWidth: 2.0,
maxWidth: 5.2,
penColor: '#FF0000',
backgroundColor: 'rgba(0,0,0,0)',
})
}, },
// pdf转图片预览 methods: {
PDF (attachment_id) { hideModal () {
let vm = this this.$emit('closeModal')
hlsPopup.showLoading('正在预览请稍等!') },
var url = process.env.rootPath + '/app/pdf/png?sysName=HLS_APP&apiName=attment_view&attachment_id=' + attachment_id cleanData () {
var param = {} this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
vm.$post(url, param).then(function (res) { this.hasSignature = false
if (res.success) { },
var length = res.message beginDraw (e) {
// PDF装图片数组 this.mousePress = true
var pirtureList = [] },
for (var i = 0; i < length; i++) { endDraw (e) {
pirtureList.push({pic: process.env.file_url + 'esign/' + attachment_id + '/temp/' + 'temp_' + (i + 1) + '.png'}) this.mousePress = false
e.preventDefault()
this.last = null
},
drawing (e) {
e.preventDefault()
if (!this.hasSignature) {
this.hasSignature = true
}
if (!this.mousePress) {
return
}
let xy = this.getCoordinate(e)
if (this.last !== null) {
this.context.beginPath()
this.context.moveTo(this.last.x, this.last.y)
this.context.lineTo(xy.x, xy.y)
this.context.stroke()
}
// 开始移动，将坐标赋值给last。那么下次再移动就会通过上面的操作从上一个xy移动到当前的xy处
this.last = xy
},
getCoordinate (e) {
let x, y
if (this.isTouch(e)) {
x = e.touches[0].pageX // 修改
y = e.touches[0].pageY - this.height
} else {
x = e.offsetX + e.target.offsetLeft
y = e.offsetY + e.target.offsetTop + this.height
// return false;
}
return {
x: x,
y: y,
}
},
/**
* 重置画布操作
* @param {*} w 画布宽
* @param {*} h 画布高
*/
resizeCanvas (w, h) {
let nc = this.canvas
this.canvas.width = w
this.canvas.height = h
this.context.strokeStyle = this.config.strokeStyle
this.context.lineWidth = this.config.lineWidth
this.context.drawImage(nc, 0, 0, w, h, 0, 0, w, h)
},
isTouch (e) {
let type = e.type
if (type.indexOf('touch') >= 0) {
return true
} else {
return false
}
},
// 确认签名
confirmData () {
let vm = this
if (!this.hasSignature) {
vm.hlsPopup.showLongCenter('未创建签名!')
} else {
vm.hideModal()
let canvas = document.getElementById('canvas')
let canvasData = canvas.toDataURL('image/png')
vm.image_base64 = canvasData.split(',')[1]
vm.hlsPopup.showLoading('正在签名请稍等!')
// 先创建账号
let url = process.env.rootPath + '/app/sign/register'
let param = {
idNo: vm.info.id_number,
name: vm.info.name,
} }
hlsPopup.hideLoading() vm.$post(url, param).then(function (res) {
vm.alpviewimg(pirtureList) if (!res.success) {
// 如果成功进行签名
let fileName = '测试e签宝' + '-盖章.pdf'
vm.getSignPdf(vm.info.name, vm.info.id_number, vm.image_base64, '', '', '', fileName, '', 'BOTH')
} else {
vm.hlsPopup.hideLoading()
vm.hlsPopup.showPopup('', '签名失败请返回重试', function () {
// window.history.go(-1)
})
}
})
}
},
getSignPdf (name, idNo, imgData, tableName, tablePkValue, attachmentId, fileName, userId, signType) {
let vm = this
let userPages = []
let selfPages = []
if (signType === 'BOTH') {
userPages = [
{ page: '1', x: 510, y: 250 },
{ page: '4', x: 445, y: 165 },
]
selfPages = [
{ page: '1', x: 200, y: 250 },
{ page: '4', x: 120, y: 165 },
]
} else { } else {
hlsPopup.hideLoading() userPages = [
hlsPopup.showLongCenter('预览文件失败') { page: '1', x: 505, y: 205 },
{ page: '2', x: 105, y: 230 },
]
} }
}) let url = process.env.rootPath + '/app/sign/pdf'
}, let param = {
alpviewimg (pirtureList) { idNo: idNo,
this.$router.push({ name: name,
name: 'EsignPicture', userPages: userPages,
params: { selfPages: selfPages,
pirtureList: pirtureList, attachmentInfo: {
}, downloadApiName: 'attment_view',
}) downloadSysName: 'HLS_APP',
attachmentId: 6,
uploadApiName: 'attachment_upload',
uploadSysName: 'HLS_APP',
userId: 1,
sourceType: 'HLS_DOC_FILE_TEMPLET',
pkValue: 42,
fileName: fileName,
},
personArea: 0,
sealData: imgData,
}
vm.$post(url, param).then(function (res) {
vm.hlsPopup.hideLoading()
if (res.success) {
vm.hlsPopup.showConfirm({
title: '签名成功',
content: '是否预览合同',
onConfirm: function (index) {
if (index === 1) {
// 签名合同预览
vm.PDF(parseInt(res.message))
}
},
})
} else {
vm.hlsPopup.hideLoading()
vm.hlsPopup.showLongCenter('签名失败请重试')
}
})
},
// pdf转图片预览
PDF (attachmentId) {
let vm = this
vm.hlsPopup.showLoading('正在预览请稍等!')
let url = process.env.rootPath + '/app/pdf/png?sysName=HLS_APP&apiName=attment_view&attachment_id=' + attachmentId
let param = {}
vm.$post(url, param).then(function (res) {
if (res.success) {
let length = res.message
// PDF装图片数组
let pirtureList = []
for (let i = 0; i < length; i++) {
pirtureList.push({
pic: process.env.file_url + 'esign/' + attachmentId + '/temp/' + 'temp_' + (i + 1) + '.png',
})
}
vm.hlsPopup.hideLoading()
vm.alpviewimg(pirtureList)
} else {
vm.hlsPopup.hideLoading()
vm.hlsPopup.showLongCenter('预览文件失败')
}
})
},
alpviewimg (pirtureList) {
this.$router.push({
name: 'EsignPicture',
params: {
pirtureList: pirtureList,
},
})
},
}, },
}, }
}
</script> </script>
<style scoped lang="less" rel="stylesheet"> <style scoped lang="less" rel="stylesheet">
/* //name="modal-fade" /* //name="modal-fade"
.modal-fade-enter, .modal-fade-leave-active { opacity: 0; } .modal-fade-enter-active, .modal-fade-leave-active { transition: opacity .5s ease }*/ .modal-fade-enter, .modal-fade-leave-active { opacity: 0; } .modal-fade-enter-active, .modal-fade-leave-active { transition: opacity .5s ease }*/
/* 可以设置不同的进入和离开动画 */ /* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */ /* 设置持续时间和动画函数 */
.slide-fade-enter-active { .slide-fade-enter-active {
transition: all .3s ease; transition: all 0.3s ease;
} }
.slide-fade-leave-active { .slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
} }
.slide-fade-enter, .slide-fade-leave-to .slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ { /* .slide-fade-leave-active for below version 2.1.8 */ {
...@@ -215,55 +280,37 @@ export default { ...@@ -215,55 +280,37 @@ export default {
opacity: 0; opacity: 0;
} }
/*//bounce .sign-modal {
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}*/
.sign-modal{
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1);
position: fixed; position: fixed;
z-index: 100; z-index: 100;
bottom: 0; bottom: 0;
.pane{ .pane {
background-color: #fff; background-color: #fff;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 50%; height: 50%;
bottom: 0; bottom: 0;
padding: 10px 15px; padding: 10px 15px;
.layout{ .layout {
height: 20px; height: 20px;
font-size: 16px; font-size: 16px;
color:#1e82d2; color: #1e82d2;
line-height: 20px; line-height: 20px;
display: flex; display: flex;
display: -webkit-flex; display: -webkit-flex;
justify-content:space-between; justify-content: space-between;
-webkit-justify-content:space-between; -webkit-justify-content: space-between;
} }
.draw { .draw {
width: 100%; width: 100%;
height: 95%; height: 95%;
.sig{ .sig {
width: 100%; width: 100%;
height: 100%; height: 100%;
canvas{ canvas {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
...@@ -271,5 +318,4 @@ export default { ...@@ -271,5 +318,4 @@ export default {
} }
} }
} }
</style> </style>
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/esign.vue → template/src/pages/applications/esign/SignPdf.vue 100644 → 100755
View file @ 149cc32d
<template> <template>
<h-view class="public-style signature" title="电子签名"> <h-view id="sign" class="public-style" 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> <h-content>
<list-item> <list-item>
<item :proportion="[3,1]"> <item :proportion="[3,1]">
...@@ -8,20 +14,38 @@ ...@@ -8,20 +14,38 @@
</item> </item>
<item> <item>
<div slot="name">姓名</div> <div slot="name">姓名</div>
<div slot="content">\{{ info.description }}</div> <div slot="content">\{{ personName }}</div>
</item> </item>
<item> <item>
<div slot="name">身份证号</div> <div slot="name">身份证号</div>
<div slot="content">\{{ info.id_card_no }}</div> <div slot="content">\{{ identificationNumber }}</div>
</item> </item>
<item style="background-color: #eee"> </list-item>
<div slot="content" class="create" @click="createSign">+创建签名</div> <list-item>
<item :proportion="[1,3]">
<section slot="name">选择签章类型</section>
<radio-group slot="content" v-model="signType" style="display:flex;">
<h-radio :checked="true" name="hand" title="手写签名"/>
<h-radio name="key" title="关键字签章"/>
</radio-group>
</item> </item>
</list-item> </list-item>
<radio-group v-show="signType==='key'" v-model="radioValue">
<h-radio :checked="true" name="76" title="出租人盖章"/>
<h-radio name="77" title="合同签章"/>
<h-radio name="78" title="上海汉得"/>
</radio-group>
<section v-show="signType==='key'" class="button">
<h-button @click.native="sign()">签章</h-button>
</section>
<section v-show="signType==='hand'" class="button">
<h-button @click.native="createSign()">创建签名</h-button>
</section>
</h-content> </h-content>
<h-modal ref="modal" v-model="show" position="bottom" cus-class="sign-modal"> <h-modal ref="modal" v-model="show" position="bottom" cus-class="sign-modal">
<h-view> <h-view>
<h-header> <h-header style="padding-top: 0 !important;">
<div v-tap="confirm" slot="left" class="h-header-btn">确定</div> <div v-tap="confirm" slot="left" class="h-header-btn">确定</div>
<div v-tap="cleanData" slot="right" class="h-header-btn">清除</div> <div v-tap="cleanData" slot="right" class="h-header-btn">清除</div>
</h-header> </h-header>
...@@ -41,16 +65,15 @@ ...@@ -41,16 +65,15 @@
</h-modal> </h-modal>
</h-view> </h-view>
</template> </template>
<script> <script>
export default { export default {
name: 'Sign',
data () { data () {
return { return {
info: { signType: 'hand',
description: '张三', radioValue: 76,
id_card_no: '361021197607154329', personName: this.$route.params.personName,
}, identificationNumber: this.$route.params.identificationNumber,
// sign
show: false, show: false,
signData: '', signData: '',
// canvas参数 // canvas参数
...@@ -67,8 +90,6 @@ export default { ...@@ -67,8 +90,6 @@ export default {
hasSignature: false, hasSignature: false,
} }
}, },
created: function () {
},
mounted () { mounted () {
this.canvas = document.getElementById('canvas') this.canvas = document.getElementById('canvas')
this.context = this.canvas.getContext('2d') this.context = this.canvas.getContext('2d')
...@@ -81,29 +102,55 @@ export default { ...@@ -81,29 +102,55 @@ export default {
} }
}, },
methods: { methods: {
reviewPdf () {
cordova.InAppBrowser.open('http://hlsapp.hand-china.com/file/jinge/RZZLCON.pdf','_system')
},
/**
* 演示用 不调用接口
* url = $config.rootPath+'/electronicSignature/createContractFile'
* 金格 1011创建合同(文件上传方式)
* 此接口在项目实际开发需要按需改造，合同附件应从业务系统传输过来
* 完成签名后调用 1019 进行下载
*/
sign () {
// TODO 此处应该调用金格电子电子签章 1011创建合同进行盖章
let vm = this
vm.hlsPopup.showLoading('正在签章请稍等！')
setTimeout(function () {
vm.hlsPopup.hideLoading()
vm.hlsPopup.showPopup({
title: '签章成功',
content: '预览合同',
onConfirm () {
cordova.InAppBrowser.open('http://hlsapp.hand-china.com/file/jinge/ZL201907180000000' + vm.radioValue + '.pdf', '_system')
},
})
}, 2000)
},
/** /**
* 弹出窗口 * 弹出窗口
* */ * */
createSign () { createSign () {
this.show = true this.show = true
}, },
/** /**
* 隐藏窗口 * 隐藏窗口
* */ * */
hideModal () { hideModal () {
this.$refs.modal.hideModal() this.$refs.modal.hideModal()
}, },
/** /**
* 清空画布 * 清空画布
* */ * */
cleanData () { cleanData () {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height) this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
this.hasSignature = false this.hasSignature = false
}, },
/** /**
* 获取画图内容 * 获取画图内容
* *
* */ * */
confirm () { confirm () {
let vm = this let vm = this
if (!this.hasSignature) { if (!this.hasSignature) {
...@@ -116,15 +163,15 @@ export default { ...@@ -116,15 +163,15 @@ export default {
// 先创建账号 // 先创建账号
let url = process.env.rootPath + '/app/sign/register' let url = process.env.rootPath + '/app/sign/register'
let param = { let param = {
'idNo': vm.info.id_card_no, 'idNo': vm.identificationNumber,
'name': vm.info.description, 'name': vm.personName,
} }
hlsHttp.post(url, param).then(function (res) { hlsHttp.post(url, param).then(function (res) {
if (!res.success) { if (!res.success) {
// 如果成功进行签名 // 如果成功进行签名
// success_atm = [] // success_atm = []
let fileName = '测试e签宝-盖章.pdf' let fileName = '测试e签宝-盖章.pdf'
vm.getSignPdf(vm.info.description, vm.info.id_card_no, signData, '', '', '', fileName, '', 'BOTH') vm.getSignPdf(vm.personName, vm.identificationNumber, signData, '', '', '', fileName, '', '')
} else { } else {
vm.hlsPopup.hideLoading() vm.hlsPopup.hideLoading()
vm.hlsPopup.showPopup('', '签名失败请返回重试', function () { vm.hlsPopup.showPopup('', '签名失败请返回重试', function () {
...@@ -141,7 +188,7 @@ export default { ...@@ -141,7 +188,7 @@ export default {
userPages = [{'page': '1', 'x': 510, 'y': 250}, {'page': '4', 'x': 445, 'y': 165}] userPages = [{'page': '1', 'x': 510, 'y': 250}, {'page': '4', 'x': 445, 'y': 165}]
selfPages = [{'page': '1', 'x': 200, 'y': 250}, {'page': '4', 'x': 120, 'y': 165}] selfPages = [{'page': '1', 'x': 200, 'y': 250}, {'page': '4', 'x': 120, 'y': 165}]
} else { } else {
userPages = [{'page': '1', 'x': 505, 'y': 205}, {'page': '2', 'x': 105, 'y': 230}] userPages = [{'page': '1', 'x': 510, 'y': 250}, {'page': '4', 'x': 445, 'y': 165}]
} }
let url = $config.rootPath + '/app/sign/pdf' let url = $config.rootPath + '/app/sign/pdf'
let param = { let param = {
...@@ -166,14 +213,12 @@ export default { ...@@ -166,14 +213,12 @@ export default {
hlsHttp.post(url, param).then(function (res) { hlsHttp.post(url, param).then(function (res) {
vm.hlsPopup.hideLoading() vm.hlsPopup.hideLoading()
if (res.success) { if (res.success) {
vm.hlsPopup.showConfirm({ vm.hlsPopup.showPopup({
title: '签名成功', title: '签名成功',
content: '是否预览合同', content: '是否预览合同',
onConfirm: function (index) { onConfirm () {
if (index === 1) { // 签名合同预览
// 签名合同预览 vm.fileToPdf(parseInt(res.message))
vm.fileToPdf(parseInt(res.message))
}
}, },
}) })
} else { } else {
...@@ -184,28 +229,48 @@ export default { ...@@ -184,28 +229,48 @@ export default {
fileToPdf (attachmentId) { fileToPdf (attachmentId) {
let vm = this let vm = this
vm.hlsPopup.showLoading('正在预览请稍等!') vm.hlsPopup.showLoading('预览请稍等!')
let url = process.env.rootPath + '/app/pdf/png?sysName=HLS_APP&apiName=attment_view&attachment_id=' + attachmentId let url = process.env.rootPath + '/app/pdf/png?sysName=HLS_APP&apiName=attment_view&attachment_id=' + attachmentId
// let url = process.env.rootPath + '/app/downLoadPdf?sysName=HLS_APP&apiName=attment_view&attachment_id=' + attachmentId
let param = {} let param = {}
hlsHttp.post(url, param).then(function (res) { hlsHttp.post(url, param).then(function (res) {
if (res.success) { if (res.success) {
let length = res.message let length = res.message
// PDF装图片数组 // PDF装图片数组
let pirtureList = [] let pirtureList = []
for (var i = 0; i < length; i++) { for (let i = 0; i < length; i++) {
pirtureList.push({pic: process.env.file_url + 'esign/' + attachmentId + '/temp/' + 'temp_' + (i + 1) + '.png'}) pirtureList.push({imgUrl: process.env.file_url + 'esign/' + attachmentId + '/temp/' + 'temp_' + (i + 1) + '.png'})
} }
vm.hlsPopup.hideLoading() vm.hlsPopup.hideLoading()
/* setTimeout(() => {
window.open('http://hlsapp.hand-china.com/file/esign/' + attachmentId + '/temp.pdf', '_system')
}, 1000) */
vm.alpviewimg(pirtureList) vm.alpviewimg(pirtureList)
} else { } else {
vm.hlsPopup.hideLoading() vm.hlsPopup.hideLoading()
vm.hlsPopup.showLongCenter('预览文件失败') vm.hlsPopup.showLongCenter('预览文件失败')
} }
}) })
/* let pirtureList = [{
imgUrl: 'http://hlsapp.hand-china.com/file/esign/185/temp/temp_1.png',
}, {
imgUrl: 'http://hlsapp.hand-china.com/file/esign/185/temp/temp_2.png',
}, {
imgUrl: 'http://hlsapp.hand-china.com/file/esign/185/temp/temp_3.png',
}, {
imgUrl: 'http://hlsapp.hand-china.com/file/esign/185/temp/temp_4.png',
}]
vm.alpviewimg(pirtureList) */
}, },
alpviewimg (pirtureList) { alpviewimg (pirtureList) {
this.$router.push({ let vm = this
name: 'EsignPicture', /* vm.hlsPopup.showBigPicture({
startPosition: 0,
imgList: pirtureList,
}) */
vm.$router.push({
name: 'ViewPicture',
params: { params: {
pirtureList: pirtureList, pirtureList: pirtureList,
}, },
...@@ -220,8 +285,8 @@ export default { ...@@ -220,8 +285,8 @@ export default {
this.last = null this.last = null
}, },
/** /**
* 开始绘画 * 开始绘画
* */ * */
drawing (e) { drawing (e) {
e.preventDefault() e.preventDefault()
if (!this.hasSignature) { if (!this.hasSignature) {
...@@ -264,10 +329,10 @@ export default { ...@@ -264,10 +329,10 @@ export default {
} }
}, },
/** /**
* 重置画布操作 * 重置画布操作
* @param {*} w 画布宽 * @param {*} w 画布宽
* @param {*} h 画布高 * @param {*} h 画布高
*/ */
resizeCanvas (w, h) { resizeCanvas (w, h) {
let nc = this.canvas let nc = this.canvas
this.canvas.width = w this.canvas.width = w
...@@ -276,20 +341,58 @@ export default { ...@@ -276,20 +341,58 @@ export default {
this.context.lineWidth = this.config.lineWidth this.context.lineWidth = this.config.lineWidth
this.context.drawImage(nc, 0, 0, w, h, 0, 0, w, h) this.context.drawImage(nc, 0, 0, w, h, 0, 0, w, h)
}, },
},
},
} }
</script> </script>
<style lang="less" type="text/less">
<style lang="less"> @import "../../../styles/vue-1px.less";
.signature { .show-picture-backdrop .hls-swipe .hls-swipe-track .hls-swipe-item img{
background-color: #FFFFFF; height: 100% !important;
width: 100% !important;
}
#sign {
.content { .content {
width: 100%; .add-content{
background-color: #eeeeee; .radio-group{
.create { display: flex;
font-size: 14px; .h-radio {
color: #e84544; margin-right: 10px;
justify-content: flex-end;
&:after {
border: none;
}
}
}
}
.radio-group {
width: 100%;
background-color: #fff;
padding-left: 15px;
.h-radio {
height: 44px;
position: relative;
&:after {
.setBottomLine()
}
}
}
.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;
}
} }
} }
.sign-modal { .sign-modal {
...@@ -299,4 +402,22 @@ export default { ...@@ -299,4 +402,22 @@ export default {
} }
} }
} }
// 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> </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' ...@@ -63,7 +63,11 @@ import Robot from '@/pages/applications/robot/robot'
{{#esign}} {{#esign}}
// E 签宝 // 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}} {{/esign}}
{{#report}} {{#report}}
...@@ -275,7 +279,11 @@ export default new Router({ ...@@ -275,7 +279,11 @@ export default new Router({
{path: '/Robot', component: Robot, name: 'Robot', meta: {keepAlive: false}}, {path: '/Robot', component: Robot, name: 'Robot', meta: {keepAlive: false}},
{{/robot}} {{/robot}}
{{#esign}} {{#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}} {{/esign}}
{{#riskstrom}} {{#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