zhangzl
/
nsgk_mobile
2
0
포크 0
코드 이슈 0 풀 리퀘스트 0 릴리즈 0 위키 활동
소스 검색

新增电子签名

wulanhaote
liuminjian 3 년 전
부모
56af0a90a5
커밋
708f172edf
6개의 변경된 파일과 354개의 추가작업 그리고 1개의 파일을 삭제
분할 보기
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -1
      package.json
  2. +9
    -0
      src/api/lawEnforcement/index.js
  3. +9
    -0
      src/router/index.js
  4. +11
    -0
      src/views/yinnong/my.vue
  5. +162
    -0
      src/views/yinnong/signature.vue
  6. +161
    -0
      src/views/yinnong/signatureUploadSignature.vue

+ 2
- 1
package.json 파일 보기

@@ -31,7 +31,8 @@
"vue": "^2.5.2",
"vue-baidu-map": "^0.21.22",
"vue-cookies": "^1.7.4",
"vue-esign": "^1.0.5",
"vue-cropper": "^0.5.8",
"vue-esign": "^1.1.4",
"vue-pdf": "^4.3.0",
"vue-qrcode-reader": "^3.1.0",
"vue-quill-editor": "^3.0.6",


+ 9
- 0
src/api/lawEnforcement/index.js 파일 보기

@@ -889,3 +889,12 @@ export function casePointList(query) {
})
}

// 用户上传签字
export function electronicSignature(data) {
return request({
url: '/system/user/profile/electronicSignature',
method: 'post',
data: data
})
}


+ 9
- 0
src/router/index.js 파일 보기

@@ -1824,6 +1824,15 @@ export const constantRoutes = [
hidden: true,
},
component: (resolve) => require(['@/views/yinnong/password'], resolve)
} ,
{
path: '/yinnong/signature',
name: 'yinnongSignature',
meta: {
title: '电子签名',
hidden: true,
},
component: (resolve) => require(['@/views/yinnong/signature'], resolve)
},
{
path: '/yinnong/livePay',


+ 11
- 0
src/views/yinnong/my.vue 파일 보기

@@ -79,6 +79,17 @@
/>
</template>
</van-cell>
<van-cell title="电子签名" is-link to="signature">
<template #icon>
<van-image
fit="contain"
height="22"
style="margin-right: 15px"
src="../../../static/images/onlineHome/myIcon7.png"
/>
</template>
</van-cell>
<van-cell title="修改密码" is-link to="password">
<template #icon>
<van-image


+ 162
- 0
src/views/yinnong/signature.vue 파일 보기

@@ -0,0 +1,162 @@
<template>
<div>
<van-nav-bar
title="电子签名"
left-arrow
@click-left="$router.back(-1)"
/>
<van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
<div class="signature-box">
<vue-esign
ref="esign"
class="mySign"
:width="500"
:height="225"
:isCrop="signature.isCrop"
:lineWidth="signature.lineWidth"
:lineColor="signature.lineColor"
:bgColor.sync="signature.bgColor"
/>
</div>

<div class="signature-footer">
<signatureUploadSignature @signaImg = "signaImgFun"/>
<van-button @click="handleGenerate" type="info" size="small"> 生成签字图片</van-button>
<van-button @click="handleReset" class="clearBtn" type="info" plain size="small">清空画板</van-button>
</div>

<div class="esigh-result">
<img :src="signatureImg" class="imgs" v-if="signatureImg!=''"/>
</div>
</van-cell-group>
</div>
</template>


<script>
import vueEsign from 'vue-esign'
import {getToken} from "@/utils/auth";
import axios from 'axios'
import { getUserProfile } from "@/api/lawEnforcement/index";
import signatureUploadSignature from './signatureUploadSignature';
export default {
name: "yinnongSignature",
components:{vueEsign,signatureUploadSignature},
data() {
return {
signatureImg:'',
//上传图片
uploadPictures:{
action:process.env.VUE_APP_BASE_API+'/system/user/profile/electronicSignature',
headers: { Authorization: "Bearer " + getToken() },
},
//电子签名
signature:{
lineWidth: 6, // 画笔的线条粗细
lineColor: "#000000", // 画笔的颜色
bgColor: "", // 画布的背景颜色
resultImg: "", // 最终画布生成的base64图片
isCrop: false, // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
}
}
},
mounted(){
this.getUser();
},
methods:{
getUser(){
getUserProfile().then(response => {
const baseImgUrl = this.$store.getters.baseRoutingUrl;
this.signatureImg = baseImgUrl+response.data.electronicSignature
if(baseImgUrl==''){
setTimeout(()=>{
const baseImgUrl = this.$store.getters.baseRoutingUrl;
this.signatureImg = baseImgUrl+response.data.electronicSignature
},1000)
}
});
},
signaImgFun(url){
this.signatureImg = url;
// console.log(url)
},

// 清空画板
handleReset() {
this.$refs.esign.reset();
},
// 生成签字图
handleGenerate() {
this.$refs.esign
.generate() // 使用生成器调用把签字的图片转换成为base64图片格式
.then((res) => {
console.log(res)
this.signature.resultImg = res;
let wj = this.dataURLtoBlob(res);
let param = new FormData() // 创建form对象
param.append('electronicSignaturefile', wj) // 通过append向form对象添加数据

let config = {
headers: this.uploadPictures.headers
}
// 添加请求头
axios.post(this.uploadPictures.action, param, config)
.then(res => {
let content = res.data;
if(content.code == 200){
const baseImgUrl = this.$store.getters.baseRoutingUrl;
this.signatureImg = baseImgUrl+content.esUrl;
}
})
})
.catch((err) => {
// 画布没有签字时会执行这里提示一下
this.$toast.fail('请签名后再生成签字图片');
});
},
dataURLtoBlob(dataurl) {
var arr = dataurl.split(',');
//注意base64的最后面中括号和引号是不转译的
var _arr = arr[1].substring(0,arr[1].length-2);
var mime = arr[0].match(/:(.*?);/)[1],
bstr =atob(_arr),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type: mime
});
},
}
}

</script>


<style scoped lang="scss">
.signature-box{
border:1px dashed #666;
margin:2px 20px;
}
.signature-footer{
margin:15px 20px 0;
display: flex;
.clearBtn{
margin-left: 15px;
}
}
.esigh-result{
margin:15px 20px;
// height: 110px;
border:1px solid #666;
font-size: 0;
.imgs{
width: 100%;
}
}
</style>

+ 161
- 0
src/views/yinnong/signatureUploadSignature.vue 파일 보기

@@ -0,0 +1,161 @@
<template>
<div class="update_main">
<van-button @click="editCropper" type="info" size="small">上传签字图片</van-button>
<van-popup v-model="open" position="bottom" :style="{ height: '60%' }">
<div class="screenshots_main">
<vue-cropper
ref="cropper"
:img="options.img"
:info="true"
:autoCrop="options.autoCrop"
:autoCropWidth="options.autoCropWidth"
:autoCropHeight="options.autoCropHeight"
:fixedBox="options.fixedBox"
@realTime="realTime"
v-if="visible"
/>
</div>
<div class="avatar-upload-main">
<div class="avatar-upload-preview">
<img :src="previews.url" :style="previews.img" />
</div>
</div>
<div class="steup_main">
<van-uploader :after-read="afterRead">
<van-button icon="plus" type="primary" size="small">上传文件</van-button>
</van-uploader>
<van-button @click="changeScale(1)" icon="plus" size="small"></van-button>
<van-button @click="changeScale(-1)" icon="minus" size="small"></van-button>
<van-button @click="rotateLeft()" icon="replay" size="small" class="xzmt"></van-button>
<van-button @click="rotateRight()" icon="replay" size="small"></van-button>
<van-button @click="uploadImg" type="info" size="small">提交</van-button>
</div>

</van-popup>

</div>
</template>

<script>

import { electronicSignature } from "@/api/lawEnforcement/index";
import { VueCropper } from "vue-cropper";
export default {
components: { VueCropper },
data() {
return {
// 是否显示弹出层
open: false,
// 是否显示cropper
visible: false,
// 弹出层标题
title: "上传PNG签名图片",
options: {
img: '', //裁剪图片的地址
autoCrop: true, // 是否默认生成截图框
autoCropWidth: 244, // 默认生成截图框宽度
autoCropHeight: 110, // 默认生成截图框高度
fixedBox: true // 固定截图框大小 不允许改变
},
previews: {}
}
},
created(){

},
methods:{
// 编辑头像
editCropper() {
this.open = true;
this.visible = true;
},
// 实时预览
realTime(data) {
this.previews = data;
},
afterRead(file){
this.options.img = file.content;
},
// 图片缩放
changeScale(num) {
num = num || 1;
this.$refs.cropper.changeScale(num);
},
// 向左旋转
rotateLeft() {
this.$refs.cropper.rotateLeft();
},
// 向右旋转
rotateRight() {
this.$refs.cropper.rotateRight();
},
// 上传图片
uploadImg() {
this.$refs.cropper.getCropBlob(data => {
let formData = new FormData();
formData.append("electronicSignaturefile", data);

electronicSignature(formData).then(response => {
this.open = false;
this.options.img = this.$store.getters.baseRoutingUrl + response.esUrl;

this.$emit('signaImg', this.options.img)
// this.msgSuccess("修改成功");
this.$toast.success('成功文案');
this.visible = false;
});
});
},
}

}
</script>

<style scoped lang="scss">
.img-circle {
border-radius: 50%;
}

.img-lg {
width: 120px;
height: 120px;
}

.avatar-upload-main{
position: relative;
width: 100%;
height: 160px;
}
.avatar-upload-preview {
position: absolute;
top: 50%;
transform: translate(50%, -50%);
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: 0 0 4px #ccc;
overflow: hidden;
}

.update_main{
margin-right: 15px;
}
.screenshots_main{
height: 350px;
padding:20px 20px 0;
}
.avatar-upload-preview{
width: 244px;
height: 110px;
border-radius: 0;
left: 50%;
margin-left: -244px;
}
.steup_main{
margin:0 20px;
text-align: center;
.xzmt{
transform: rotate(180deg);
}
}
</style>

쓰기 미리보기
불러오는 중...
취소
저장