160 lines
5.7 KiB
HTML
160 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<!-- 在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值 -->
|
|
<meta name="viewport"
|
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
|
|
<title>签字</title>
|
|
<!-- 引入样式文件 -->
|
|
<!--<link rel="stylesheet" href="https://cdn.staticfile.org/vant/2.12.5/index.min.css">
|
|
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.2.0/weui.min.css">-->
|
|
<link rel="stylesheet" href="${base!}/assets/mobile/css/cdn.staticfile.org_vant_2.12.25_index.min.css"/>
|
|
<!-- <link rel="stylesheet" href="${base!}/assets/platform/plugins/vant/index.min.css"/>-->
|
|
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
|
|
<script src="${base!}/assets/platform/plugins/vue/vue.min.js"></script>
|
|
<script src="${base!}/assets/mobile/js/cdn.staticfile.org_vant_2.12.25_vant.min.js"></script>
|
|
<script src="/assets/platform/plugins/jquery/jquery-1.11.1.min.js"></script>
|
|
<script src="/assets/platform/plugins/moment/moment.min.js"></script>
|
|
<script src="/assets/platform/js/signature.min.js"></script>
|
|
</head>
|
|
<style>
|
|
[v-clock] {
|
|
display: none
|
|
}
|
|
</style>
|
|
<body style="height: 100%;width: 100%">
|
|
<div v-clock id="app" style="height: 100%;width: 100%">
|
|
<van-row style="margin-top: 10vh;text-align: center">
|
|
<h3 style="color: #1989fa">提示：请在下方区域签字！</h3>
|
|
</van-row>
|
|
<van-row style="margin-top: 20px">
|
|
<canvas id="canvas" style="border: rgb(220,220,220) 1px solid"></canvas>
|
|
</van-row>
|
|
<van-row style="margin-top: 20px">
|
|
<van-col span="24" style="text-align: center">
|
|
<van-row type="flex" justify="space-around">
|
|
<van-col span="11">
|
|
<van-button @click="reset" type="default" size="large">清 空</van-button>
|
|
</van-col>
|
|
<van-col span="11">
|
|
<van-button type="info" @click="doSub" size="large" :disabled="subDis">提 交</van-button>
|
|
</van-col>
|
|
</van-row>
|
|
</van-col>
|
|
</van-row>
|
|
</div>
|
|
|
|
<script>
|
|
document.body.addEventListener('touchmove', function (e) {
|
|
e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
|
|
}, {passive: false}); //passive 参数不能省略，用来兼容ios和android
|
|
|
|
function getQueryVariable(variable) {
|
|
var query = window.location.search.substring(1);
|
|
var vars = query.split("&");
|
|
for (var i = 0; i < vars.length; i++) {
|
|
var pair = vars[i].split("=");
|
|
if (pair[0] == variable) {
|
|
return pair[1];
|
|
}
|
|
}
|
|
return '';
|
|
}
|
|
|
|
var qmoption = {
|
|
el: '#canvas',
|
|
lineWidth: 4,
|
|
lineColor: '#000',
|
|
overflow: false,
|
|
background: '#fff'
|
|
}
|
|
var qm
|
|
|
|
var
|
|
vue = new Vue({
|
|
el: "#app",
|
|
data: function () {
|
|
return {
|
|
prefix: '',
|
|
id: '',
|
|
base64: '',
|
|
subDis: false,
|
|
isNull: function (val) {
|
|
if (val === null || val === undefined || val === '') {
|
|
return true
|
|
}
|
|
return false
|
|
},
|
|
}
|
|
},
|
|
filters: {
|
|
none2str: function (value) {
|
|
if (vue.isNull(value)) {
|
|
return '暂无'
|
|
}
|
|
return value
|
|
}
|
|
},
|
|
methods: {
|
|
reset() {
|
|
qm.reset()
|
|
},
|
|
doSub() {
|
|
qm.getContentBase64(false, (val) => {
|
|
this.base64 = val
|
|
})
|
|
|
|
$.post("/signature/doSub", {
|
|
prefix: this.prefix,
|
|
id: this.id,
|
|
base64: this.base64
|
|
}, (data) => {
|
|
if (data.code == 0) {
|
|
this.$notify({
|
|
message: data.msg,
|
|
type: 'success'
|
|
});
|
|
this.subDis = true
|
|
setTimeout(() => {
|
|
window.close()
|
|
}, 1000)
|
|
} else {
|
|
this.$notify({
|
|
message: data.msg,
|
|
type: 'danger'
|
|
});
|
|
}
|
|
}, "json");
|
|
}
|
|
},
|
|
mounted: () => {
|
|
canvas = document.getElementById("canvas");
|
|
if (canvas.width < window.innerWidth) {
|
|
canvas.width = window.innerWidth;
|
|
}
|
|
|
|
if (canvas.height < window.innerHeight) {
|
|
canvas.height = window.innerHeight * 0.5;
|
|
}
|
|
|
|
qm = new Signature(qmoption);
|
|
qm.create();
|
|
},
|
|
created: function () {
|
|
if (this.isNull(getQueryVariable("id")) || this.isNull(getQueryVariable("prefix"))) {
|
|
this.$notify({
|
|
message: '缺少参数！',
|
|
type: 'danger'
|
|
});
|
|
this.subDis = true
|
|
}
|
|
this.id = getQueryVariable("id")
|
|
this.prefix = getQueryVariable("prefix")
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|