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 @@
<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/contractSign/signModal.vue
View file @ 149cc32d
......@@ -12,7 +12,15 @@
</div>
<div id="draw" class="draw">
<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>
......@@ -21,193 +29,250 @@
</template>
<script>
export default {
props: {
info: Object,
},
data () {
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)
})
}
})
}
export default {
props: {
info: {
type: Object,
default: function () {
return { }
},
},
},
getSignPdf (name, id_no, imgData, table_name, table_pk_value, attachment_id, file_name, user_id, sign_type) {
let vm = this
// debugger;
// 只签名客户"userPages":[{"page": "1", "x":505, "y":340},{"page": "2", "x":115, "y":410}]
// 签名客户和公司"userPages":[{"page": "1", "x":510, "y":245},{"page": "4", "x":460, "y":135}],
// "selfPages":[{"page": "1", "x":200, "y":235},{"page": "4", "x":100, "y":135}],
var userPages = []
var selfPages = []
if (sign_type === 'BOTH') {
/* userPages = [{"page": "1", "x": 500, "y": 235}, {"page": "4", "x": 460, "y": 135}];
selfPages = [{"page": "1", "x": 200, "y": 235}, {"page": "4", "x": 100, "y": 135}]; */
// 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,
data () {
return {
image_base64: '',
canvas: {},
context: {},
height: '',
hasSignature: false,
last: null,
config: {
strokeStyle: '#ff0000',
lineWidth: 3,
},
'personArea': 0,
'sealData': imgData,
mousePress: false,
}
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)
}) */
}
})
},
changeSize () {
let vm = this
created: function () {
// console.log(this.timeInfo)
},
mounted: function () {
this.canvas = document.getElementById('canvas')
this.context = this.canvas.getContext('2d')
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 {
$('#canvas').attr({'height': (window.innerHeight - 100), 'width': window.innerWidth})
$('html,body').animate({scrollTop: 0}, 'slow')
this.resizeCanvas(window.innerWidth, window.innerHeight - 50)
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转图片预览
PDF (attachment_id) {
let vm = this
hlsPopup.showLoading('正在预览请稍等!')
var url = process.env.rootPath + '/app/pdf/png?sysName=HLS_APP&apiName=attment_view&attachment_id=' + attachment_id
var param = {}
vm.$post(url, param).then(function (res) {
if (res.success) {
var length = res.message
// PDF装图片数组
var pirtureList = []
for (var i = 0; i < length; i++) {
pirtureList.push({pic: process.env.file_url + 'esign/' + attachment_id + '/temp/' + 'temp_' + (i + 1) + '.png'})
methods: {
hideModal () {
this.$emit('closeModal')
},
cleanData () {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
this.hasSignature = false
},
beginDraw (e) {
this.mousePress = true
},
endDraw (e) {
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.alpviewimg(pirtureList)
vm.$post(url, param).then(function (res) {
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 {
hlsPopup.hideLoading()
hlsPopup.showLongCenter('预览文件失败')
userPages = [
{ page: '1', x: 505, y: 205 },
{ page: '2', x: 105, y: 230 },
]
}
})
},
alpviewimg (pirtureList) {
this.$router.push({
name: 'EsignPicture',
params: {
pirtureList: pirtureList,
},
})
let url = process.env.rootPath + '/app/sign/pdf'
let param = {
idNo: idNo,
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: 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>
<style scoped lang="less" rel="stylesheet">
/* //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 {
transition: all .3s ease;
transition: all 0.3s ease;
}
.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-leave-active for below version 2.1.8 */ {
......@@ -215,55 +280,37 @@ export default {
opacity: 0;
}
/*//bounce
.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{
.sign-modal {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.1);
position: fixed;
z-index: 100;
bottom: 0;
.pane{
.pane {
background-color: #fff;
position: absolute;
width: 100%;
height: 50%;
bottom: 0;
padding: 10px 15px;
.layout{
.layout {
height: 20px;
font-size: 16px;
color:#1e82d2;
color: #1e82d2;
line-height: 20px;
display: flex;
display: -webkit-flex;
justify-content:space-between;
-webkit-justify-content:space-between;
justify-content: space-between;
-webkit-justify-content: space-between;
}
.draw {
width: 100%;
height: 95%;
.sig{
.sig {
width: 100%;
height: 100%;
canvas{
canvas {
width: 100%;
height: 100%;
}
......@@ -271,5 +318,4 @@ export default {
}
}
}
</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>
<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>
<list-item>
<item :proportion="[3,1]">
......@@ -8,20 +14,38 @@
</item>
<item>
<div slot="name">姓名</div>
<div slot="content">\{{ info.description }}</div>
<div slot="content">\{{ personName }}</div>
</item>
<item>
<div slot="name">身份证号</div>
<div slot="content">\{{ info.id_card_no }}</div>
<div slot="content">\{{ identificationNumber }}</div>
</item>
<item style="background-color: #eee">
<div slot="content" class="create" @click="createSign">+创建签名</div>
</list-item>
<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>
</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-modal ref="modal" v-model="show" position="bottom" cus-class="sign-modal">
<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="cleanData" slot="right" class="h-header-btn">清除</div>
</h-header>
......@@ -41,16 +65,15 @@
</h-modal>
</h-view>
</template>
<script>
export default {
name: 'Sign',
data () {
return {
info: {
description: '张三',
id_card_no: '361021197607154329',
},
signType: 'hand',
radioValue: 76,
personName: this.$route.params.personName,
identificationNumber: this.$route.params.identificationNumber,
// sign
show: false,
signData: '',
// canvas参数
......@@ -67,8 +90,6 @@ export default {
hasSignature: false,
}
},
created: function () {
},
mounted () {
this.canvas = document.getElementById('canvas')
this.context = this.canvas.getContext('2d')
......@@ -81,29 +102,55 @@ export default {
}
},
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 () {
this.show = true
},
/**
* 隐藏窗口
* */
* 隐藏窗口
* */
hideModal () {
this.$refs.modal.hideModal()
},
/**
* 清空画布
* */
* 清空画布
* */
cleanData () {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
this.hasSignature = false
},
/**
* 获取画图内容
*
* */
* 获取画图内容
*
* */
confirm () {
let vm = this
if (!this.hasSignature) {
......@@ -116,15 +163,15 @@ export default {
// 先创建账号
let url = process.env.rootPath + '/app/sign/register'
let param = {
'idNo': vm.info.id_card_no,
'name': vm.info.description,
'idNo': vm.identificationNumber,
'name': vm.personName,
}
hlsHttp.post(url, param).then(function (res) {
if (!res.success) {
// 如果成功进行签名
// success_atm = []
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 {
vm.hlsPopup.hideLoading()
vm.hlsPopup.showPopup('', '签名失败请返回重试', function () {
......@@ -141,7 +188,7 @@ export default {
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}]
userPages = [{'page': '1', 'x': 510, 'y': 250}, {'page': '4', 'x': 445, 'y': 165}]
}
let url = $config.rootPath + '/app/sign/pdf'
let param = {
......@@ -166,14 +213,12 @@ export default {
hlsHttp.post(url, param).then(function (res) {
vm.hlsPopup.hideLoading()
if (res.success) {
vm.hlsPopup.showConfirm({
vm.hlsPopup.showPopup({
title: '签名成功',
content: '是否预览合同',
onConfirm: function (index) {
if (index === 1) {
// 签名合同预览
vm.fileToPdf(parseInt(res.message))
}
onConfirm () {
// 签名合同预览
vm.fileToPdf(parseInt(res.message))
},
})
} else {
......@@ -184,28 +229,48 @@ export default {
fileToPdf (attachmentId) {
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/downLoadPdf?sysName=HLS_APP&apiName=attment_view&attachment_id=' + attachmentId
let param = {}
hlsHttp.post(url, param).then(function (res) {
if (res.success) {
let length = res.message
// PDF装图片数组
let pirtureList = []
for (var i = 0; i < length; i++) {
pirtureList.push({pic: process.env.file_url + 'esign/' + attachmentId + '/temp/' + 'temp_' + (i + 1) + '.png'})
for (let i = 0; i < length; i++) {
pirtureList.push({imgUrl: process.env.file_url + 'esign/' + attachmentId + '/temp/' + 'temp_' + (i + 1) + '.png'})
}
vm.hlsPopup.hideLoading()
/* setTimeout(() => {
window.open('http://hlsapp.hand-china.com/file/esign/' + attachmentId + '/temp.pdf', '_system')
}, 1000) */
vm.alpviewimg(pirtureList)
} else {
vm.hlsPopup.hideLoading()
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) {
this.$router.push({
name: 'EsignPicture',
let vm = this
/* vm.hlsPopup.showBigPicture({
startPosition: 0,
imgList: pirtureList,
}) */
vm.$router.push({
name: 'ViewPicture',
params: {
pirtureList: pirtureList,
},
......@@ -220,8 +285,8 @@ export default {
this.last = null
},
/**
* 开始绘画
* */
* 开始绘画
* */
drawing (e) {
e.preventDefault()
if (!this.hasSignature) {
......@@ -264,10 +329,10 @@ export default {
}
},
/**
* 重置画布操作
* @param {*} w 画布宽
* @param {*} h 画布高
*/
* 重置画布操作
* @param {*} w 画布宽
* @param {*} h 画布高
*/
resizeCanvas (w, h) {
let nc = this.canvas
this.canvas.width = w
......@@ -276,20 +341,58 @@ export default {
this.context.lineWidth = this.config.lineWidth
this.context.drawImage(nc, 0, 0, w, h, 0, 0, w, h)
},
},
},
}
</script>
<style lang="less">
.signature {
background-color: #FFFFFF;
<style lang="less" type="text/less">
@import "../../../styles/vue-1px.less";
.show-picture-backdrop .hls-swipe .hls-swipe-track .hls-swipe-item img{
height: 100% !important;
width: 100% !important;
}
#sign {
.content {
width: 100%;
background-color: #eeeeee;
.create {
font-size: 14px;
color: #e84544;
.add-content{
.radio-group{
display: flex;
.h-radio {
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 {
......@@ -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>
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