111 lines
2.3 KiB
Vue
111 lines
2.3 KiB
Vue
<template>
|
|
<section class="drawInPhone" @touchmove.prevent>
|
|
<div class="endPage" v-if="finished">操作结束请关闭页面</div>
|
|
<ai-drawer :seal.sync="sealData" placeholder="请签名" :width="device.width" :height="device.height">
|
|
<template #tools>
|
|
<div class="writeInPhone" slot="reference" @click.stop="handleSubmit">
|
|
<ai-icon icon="iconPublish"/>
|
|
<span>提交</span>
|
|
</div>
|
|
</template>
|
|
</ai-drawer>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "drawInPhone",
|
|
inject: ['signature'],
|
|
data() {
|
|
return {
|
|
sealData: null,
|
|
device: {width: 0, height: 0},
|
|
finished: false
|
|
}
|
|
},
|
|
created() {
|
|
this.device.width = document.body.clientWidth
|
|
this.device.height = document.body.clientHeight
|
|
window.onresize = () => {
|
|
this.device.width = document.body.clientWidth
|
|
this.device.height = document.body.clientHeight
|
|
}
|
|
},
|
|
methods: {
|
|
handleSubmit() {
|
|
let sealData = this.sealData?.replace(/data:image\/png;base64,/, ''),
|
|
{userId} = this.$route.query
|
|
if (!userId) return alert("缺少必要参数")
|
|
sealData && this.signature.instance({
|
|
url: '/app/syssignaccount/upload-sealdata',
|
|
headers: {"Content-Type": "application/json"},
|
|
method: 'post',
|
|
params: {userId},
|
|
data: sealData,
|
|
withoutToken: true
|
|
}).then(res => {
|
|
if (res?.code == 0) {
|
|
alert("添加成功!")
|
|
this.finished = true
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.drawInPhone {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 20210205932;
|
|
|
|
.endPage {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 20210205933;
|
|
background: rgba(#000, .8);
|
|
color: #999;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 32px;
|
|
}
|
|
|
|
.AiDrawer {
|
|
margin: 0;
|
|
}
|
|
|
|
.writeInPhone {
|
|
position: absolute;
|
|
width: 72px;
|
|
height: 32px;
|
|
background: rgba(#000, .5);
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
color: rgba(#fff, .6);
|
|
cursor: pointer;
|
|
left: 16px;
|
|
top: 16px;
|
|
|
|
.AiIcon {
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
&:hover {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|