You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
140 lines
4.5 KiB
140 lines
4.5 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title></title>
|
|
<link rel="stylesheet" href="../../../component/pear/css/pear.css" />
|
|
<style>
|
|
.box {
|
|
width: 430px;
|
|
height: 210px;
|
|
border: 1px solid #D1D1D1;
|
|
border-radius: 10px;
|
|
|
|
display: grid;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
|
|
margin: 10px;
|
|
|
|
}
|
|
|
|
.signature {
|
|
width: 400px;
|
|
height: 150px;
|
|
/* margin-bottom: 50px; */
|
|
border-bottom: 2px solid #999999;
|
|
}
|
|
|
|
.memo {
|
|
width: 400px;
|
|
height: 40px;
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
color: #999999;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="box">
|
|
<div class="signature" id="signature"></div>
|
|
<div class="memo">请在上方进行手写签名</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="bottom">
|
|
<div class="button-container">
|
|
<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" id="save">
|
|
<i class="layui-icon layui-icon-ok"></i>
|
|
签名确认
|
|
</button>
|
|
|
|
<button type="submit" class="pear-btn pear-border pear-btn-sm" lay-submit="" lay-filter="clear">
|
|
<i class="layui-icon layui-icon-fonts-clear"></i>
|
|
重新签名
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../../../component/layui/layui.js"></script>
|
|
<script src="../../../component/pear/pear.js"></script>
|
|
<script src="../../../admin/js/jquery-3.6.0.min.js"></script>
|
|
<script src="../../../component/jSignature/jSignature.min.js"></script>
|
|
|
|
<script>
|
|
layui.use(['form'], function () {
|
|
|
|
var form = layui.form;
|
|
|
|
var param = {
|
|
width: '400px', //签名区域的宽
|
|
height: '150px', //签名区域的高
|
|
UndoButton: false, //撤销按钮的状态 这个按钮的样式修改要去jSignature.js文件中去找
|
|
signatureLine: false, //去除默认画布上那条横线
|
|
lineWidth: '5' //画笔的大小
|
|
};
|
|
$("#signature").jSignature(param);
|
|
|
|
form.on('submit(clear)', function (data) {
|
|
$("#signature").jSignature("reset");
|
|
});
|
|
|
|
|
|
//提交
|
|
$('#save').click(function () {
|
|
|
|
if ($("#signature").jSignature('getData', 'native').length === 0) {
|
|
layer.msg("请签名后再确认！", {
|
|
icon: 2,
|
|
time: 2000
|
|
});
|
|
return;
|
|
}
|
|
//将签名的画布保存为base64编码字符串 默认是png的
|
|
var datapair = $("#signature").jSignature("getData", "image");
|
|
var i = new Image();
|
|
i.src = "data:" + datapair[0] + "," + datapair[1];
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: '/dsBase/base/writeDaKa',
|
|
data: { signature: i.src },
|
|
success: function (result) {
|
|
if (result.success) {
|
|
layer.msg("确认成功！", {
|
|
icon: 1,
|
|
time: 1300
|
|
}, function () {
|
|
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
|
parent.layui.table.reload("data-table");
|
|
});
|
|
} else {
|
|
layer.msg(result.message, {
|
|
icon: 2,
|
|
time: 2000
|
|
});
|
|
}
|
|
}
|
|
});
|
|
})
|
|
|
|
|
|
|
|
function GetQueryString(name, istop) {
|
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
|
var r = window.location.search.substr(1).match(reg);
|
|
if (typeof (istop) != "undefined") r = top.location.search.substr(1).match(reg);
|
|
|
|
if (r != null) return unescape(r[2]);
|
|
return null;
|
|
}
|
|
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |