first commit
This commit is contained in:
@@ -0,0 +1,159 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user