448 lines
14 KiB
Vue
448 lines
14 KiB
Vue
<template>
|
||
<div class="signature">
|
||
<div class="inputs" v-if="!popup">
|
||
<div class="label" :class="required?'labelqr':''">{{label}}</div>
|
||
<div>
|
||
<div v-if="value" class="images">
|
||
<image class="images" mode="aspectFit" :src="value"></image>
|
||
<view v-if="!readonly" @click="toDeleteImg" class="icons">
|
||
<!-- #ifndef MP-WEIXIN -->
|
||
<svg t="1685617606397" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="3710" width="32" height="32">
|
||
<path
|
||
d="M202.666667 256h-42.666667a32 32 0 0 1 0-64h704a32 32 0 0 1 0 64H266.666667v565.333333a53.333333 53.333333 0 0 0 53.333333 53.333334h384a53.333333 53.333333 0 0 0 53.333333-53.333334V352a32 32 0 0 1 64 0v469.333333c0 64.8-52.533333 117.333333-117.333333 117.333334H320c-64.8 0-117.333333-52.533333-117.333333-117.333334V256z m224-106.666667a32 32 0 0 1 0-64h170.666666a32 32 0 0 1 0 64H426.666667z m-32 288a32 32 0 0 1 64 0v256a32 32 0 0 1-64 0V437.333333z m170.666666 0a32 32 0 0 1 64 0v256a32 32 0 0 1-64 0V437.333333z"
|
||
fill="#d81e06" p-id="3711"></path>
|
||
</svg>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<view class="Deletes">X</view>
|
||
<!-- #endif -->
|
||
</view>
|
||
</div>
|
||
<div v-if="!value && !readonly" class="explain" @click="toPop">
|
||
{{placeholder?placeholder:'点击签名'}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<view class="bottomPopup" v-if="showPopup">
|
||
<transition name="slide-up" appear>
|
||
<view class="popup-content">
|
||
<view class="popup">
|
||
<div class="hader" v-if="!isHeight">
|
||
<div @click="toclear">取消</div>
|
||
<div class="text">{{label}}</div>
|
||
<div @click="isEmpty">确定</div>
|
||
</div>
|
||
<div class="wgSignature">
|
||
<div v-if="isHeight" key="999" style="width: 750rpx ;height: 100vh;">
|
||
<jp-signature v-if="" :beforeDelay="200" landscape disableScroll ref="signatureRef"
|
||
:openSmooth="true" :penSize="6" :bounding-box="true"></jp-signature>
|
||
</div>
|
||
<div v-else key="888" style="width: 750rpx ;height: 35vh;">
|
||
<jp-signature :beforeDelay="200" :penSize="4" disableScroll ref="signatureRef" :openSmooth="true"
|
||
:bounding-box="true"></jp-signature>
|
||
</div>
|
||
<div v-if="!isHeight" class="magnify" @click="Tomagnify">
|
||
<!-- #ifndef MP-WEIXIN -->
|
||
<svg t="1686894300542" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="3201" width="32" height="32">
|
||
<path
|
||
d="M853.333333 0h-682.666666C75.093333 0 0 75.093333 0 170.666667v682.666666C0 948.906667 75.093333 1024 170.666667 1024h682.666666c95.573333 0 170.666667-75.093333 170.666667-170.666667v-682.666666C1024 75.093333 948.906667 0 853.333333 0zM955.733333 853.333333c0 54.613333-47.786667 102.4-102.4 102.4h-682.666666c-54.613333 0-102.4-47.786667-102.4-102.4v-682.666666C68.266667 116.053333 116.053333 68.266667 170.666667 68.266667h682.666666c54.613333 0 102.4 47.786667 102.4 102.4v682.666666z"
|
||
fill="#777777" p-id="3202"></path>
|
||
<path
|
||
d="M402.773333 573.44L204.8 771.413333V648.533333c0-20.48-13.653333-34.133333-34.133333-34.133333s-34.133333 13.653333-34.133334 34.133333v204.8c0 20.48 13.653333 34.133333 34.133334 34.133334h204.8c20.48 0 34.133333-13.653333 34.133333-34.133334s-13.653333-34.133333-34.133333-34.133333H252.586667l197.973333-197.973333c13.653333-13.653333 13.653333-34.133333 0-47.786667-13.653333-13.653333-34.133333-13.653333-47.786667 0zM853.333333 136.533333h-204.8c-20.48 0-34.133333 13.653333-34.133333 34.133334s13.653333 34.133333 34.133333 34.133333h122.88L573.44 402.773333c-13.653333 13.653333-13.653333 34.133333 0 47.786667 13.653333 13.653333 34.133333 13.653333 47.786667 0L819.2 252.586667v122.88c0 20.48 13.653333 34.133333 34.133333 34.133333s34.133333-13.653333 34.133334-34.133333v-204.8c0-20.48-13.653333-34.133333-34.133334-34.133334z"
|
||
fill="#777777" p-id="3203"></path>
|
||
</svg>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
全屏
|
||
<!-- #endif -->
|
||
</div>
|
||
<!-- #ifndef MP-WEIXIN -->
|
||
<div v-if="isHeight" class="magnify" @click="Tomagnify">
|
||
<svg t="1685611713082" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="1741" width="32" height="32">
|
||
<path
|
||
d="M872.3 899.1h-718c-14.3 0-26-11.7-26-26v-718c0-14.3 11.7-26 26-26h718c14.3 0 26 11.7 26 26v718c0 14.3-11.6 26-26 26z m-711.9-32h706v-706h-706v706z"
|
||
fill="" p-id="1742"></path>
|
||
<path
|
||
d="M487.4 488.6l-166.1-0.2c-8.8 0-16-7.2-16-16s7.2-16 16-16l134.1 0.1 0.1-134.1c0-8.8 7.2-16 16-16s16 7.2 16 16l-0.1 166.2z"
|
||
fill="" p-id="1743"></path>
|
||
<path
|
||
d="M438.5 461.1L256 278.6c-6.2-6.2-6.2-16.4 0-22.6 6.2-6.2 16.4-6.2 22.6 0l182.5 182.5c6.2 6.2 6.2 16.4 0 22.6-6.3 6.2-16.4 6.2-22.6 0zM553.2 719.7c-8.8 0-16-7.2-16-16l0.2-166.1 166.1 0.2c8.8 0 16 7.2 16 16s-7.2 16-16 16l-134.1-0.1-0.1 134.1c-0.1 8.8-7.3 15.9-16.1 15.9z"
|
||
fill="" p-id="1744"></path>
|
||
<path
|
||
d="M745.2 767.9L548.5 572.6l22.5-22.7 196.7 195.3c6.3 6.2 6.3 16.4 0.1 22.6-6.2 6.3-16.4 6.3-22.6 0.1z"
|
||
fill="" p-id="1745"></path>
|
||
</svg>
|
||
</div>
|
||
<!-- #endif -->
|
||
|
||
<div v-if="isHeight" class="gather">
|
||
<div class="imgs" @click="undo">
|
||
<!-- #ifndef MP-WEIXIN -->
|
||
<svg t="1692082493252" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="4026" width="22" height="22">
|
||
<path
|
||
d="M396.8 200.533333l64 64L384 341.333333h298.666667c119.466667 0 213.333333 93.866667 213.333333 213.333334s-93.866667 213.333333-213.333333 213.333333H298.666667v-85.333333h384c72.533333 0 128-55.466667 128-128s-55.466667-128-128-128H170.666667l226.133333-226.133334z"
|
||
fill="#444444" p-id="4027"></path>
|
||
</svg>
|
||
<!-- #endif -->
|
||
<text>撤销</text>
|
||
</div>
|
||
<div class="imgs" @click="deleteImg">
|
||
<!-- #ifndef MP-WEIXIN -->
|
||
<svg t="1686205282563" class="icon" viewBox="0 0 1050 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="2409" width="20" height="20">
|
||
<path
|
||
d="M1024 1024H26.25641a26.25641 26.25641 0 1 1 0-52.512821h997.74359a26.25641 26.25641 0 0 1 0 52.512821zM630.153846 887.466667l-21.005128 31.507692H262.564103l-180.434052-155.017846L36.758974 729.928205l31.507693-42.010256L503.020308 12.077949l36.023795-8.086975L966.235897 288.820513l45.42359 30.299897-30.877538 42.482872zM532.795077 63.015385l-422.203077 656.410256L262.564103 867.774359V866.461538h318.542769l355.98441-534.002871z"
|
||
fill="#484D55" p-id="2410"></path>
|
||
<path
|
||
d="M525.128205 26.25641l472.615385 262.564103-210.051282 315.076923-472.615385-262.564103z"
|
||
fill="#484D55" p-id="2411"></path>
|
||
</svg>
|
||
<!-- #endif -->
|
||
<text>清除</text>
|
||
</div>
|
||
<div class="qx" @click="toclear">取消</div>
|
||
<div class="wc" @click="isEmpty">完成</div>
|
||
</div>
|
||
<div v-else class="gather2">
|
||
<div class="imgs" @click="undo">
|
||
<!-- #ifndef MP-WEIXIN -->
|
||
<svg t="1692082493252" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="4026" width="30" height="30">
|
||
<path
|
||
d="M396.8 200.533333l64 64L384 341.333333h298.666667c119.466667 0 213.333333 93.866667 213.333333 213.333334s-93.866667 213.333333-213.333333 213.333333H298.666667v-85.333333h384c72.533333 0 128-55.466667 128-128s-55.466667-128-128-128H170.666667l226.133333-226.133334z"
|
||
fill="#444444" p-id="4027"></path>
|
||
</svg>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
撤销
|
||
<!-- #endif -->
|
||
</div>
|
||
<div class="imgs" @click="deleteImg">
|
||
<!-- #ifndef MP-WEIXIN -->
|
||
<svg t="1686205282563" class="icon" viewBox="0 0 1050 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="2409" width="25" height="25">
|
||
<path
|
||
d="M1024 1024H26.25641a26.25641 26.25641 0 1 1 0-52.512821h997.74359a26.25641 26.25641 0 0 1 0 52.512821zM630.153846 887.466667l-21.005128 31.507692H262.564103l-180.434052-155.017846L36.758974 729.928205l31.507693-42.010256L503.020308 12.077949l36.023795-8.086975L966.235897 288.820513l45.42359 30.299897-30.877538 42.482872zM532.795077 63.015385l-422.203077 656.410256L262.564103 867.774359V866.461538h318.542769l355.98441-534.002871z"
|
||
fill="#484D55" p-id="2410"></path>
|
||
<path
|
||
d="M525.128205 26.25641l472.615385 262.564103-210.051282 315.076923-472.615385-262.564103z"
|
||
fill="#484D55" p-id="2411"></path>
|
||
</svg>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
清除
|
||
<!-- #endif -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</view>
|
||
</view>
|
||
</transition>
|
||
</view>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* 手写签名组件
|
||
* 用于手写签名（弹框签名支持小屏和全屏）
|
||
*
|
||
*********参数********
|
||
* label 选项名称
|
||
* value 初始值String（支持bas64，url 等图片显示）
|
||
* required 是否显示必填
|
||
* placeholder 默认值
|
||
* readonly 是否只读
|
||
*
|
||
* *********回调********
|
||
* @input(e) 点击确认 e生成的图片数据(bas64)
|
||
*
|
||
*********方法********
|
||
* isEmpty() 生成图片
|
||
* deleteImg() 删除图片
|
||
*/
|
||
export default {
|
||
props: {
|
||
popup: {
|
||
type: [Boolean, String],
|
||
default: false,
|
||
},
|
||
label: {
|
||
type: String,
|
||
default: '手写签名',
|
||
},
|
||
value: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
required: {
|
||
type: [Boolean, String],
|
||
default: false,
|
||
},
|
||
placeholder: {
|
||
type: String,
|
||
default: '点击签名',
|
||
},
|
||
readonly: {
|
||
type: [Boolean, String],
|
||
default: false,
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
showPopup: false,
|
||
isHeight: false,
|
||
height1: uni.getSystemInfoSync().windowWidth / 2,
|
||
width: uni.getSystemInfoSync().windowWidth, //实时屏幕宽度
|
||
height: uni.getSystemInfoSync().windowHeight, //实时屏幕高度
|
||
showPicker: false
|
||
}
|
||
},
|
||
methods: {
|
||
undo() {
|
||
this.$refs.signatureRef.undo()
|
||
},
|
||
toPop() {
|
||
this.showPopup = true
|
||
},
|
||
toDeleteImg() {
|
||
this.$emit('input', '')
|
||
},
|
||
toclear() {
|
||
this.isHeight = false
|
||
this.showPopup = false
|
||
},
|
||
close() {
|
||
this.isHeight = false
|
||
this.showPopup = false
|
||
this.$refs.signatureRef.clear()
|
||
},
|
||
deleteImg() {
|
||
this.$refs.signatureRef.clear()
|
||
},
|
||
toDataURL(url) {
|
||
this.$emit('input', url)
|
||
this.showPicker = false
|
||
console.log(url)
|
||
},
|
||
Tomagnify() {
|
||
this.isHeight = !this.isHeight
|
||
this.$refs.signatureRef.clear()
|
||
},
|
||
isEmpty() {
|
||
this.$refs.signatureRef.canvasToTempFilePath({
|
||
quality: 0.8,
|
||
success: (res) => {
|
||
if (this.required) {
|
||
if (!res.isEmpty) {
|
||
this.$emit('input', res.tempFilePath)
|
||
this.isHeight = false
|
||
this.showPopup = false
|
||
} else {
|
||
uni.showToast({
|
||
title: '请先签名',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
} else {
|
||
this.$emit('input', res.tempFilePath)
|
||
this.isHeight = false
|
||
this.showPopup = false
|
||
}
|
||
|
||
}
|
||
})
|
||
},
|
||
},
|
||
beforeCreate() {},
|
||
created() {}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.bottomPopup {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
right: 0;
|
||
z-index: 999;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
|
||
.popup-content {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
// top: 0;
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
.slide-up-enter-active,
|
||
.slide-up-leave-active {
|
||
transition: all .3s ease;
|
||
}
|
||
|
||
.slide-up-enter,
|
||
.slide-up-leave-to {
|
||
transform: translateY(100%);
|
||
}
|
||
}
|
||
|
||
.signature {
|
||
.inputs {
|
||
background-color: #fff;
|
||
padding: 10px 16px;
|
||
|
||
.label {
|
||
line-height: 35px;
|
||
position: relative;
|
||
}
|
||
|
||
.labelqr:before {
|
||
content: "*";
|
||
color: #f00;
|
||
}
|
||
|
||
.explain {
|
||
width: 100%;
|
||
background-color: #f1f1f1;
|
||
text-align: center;
|
||
line-height: 40px;
|
||
border: 1px dotted #ccc;
|
||
color: #999;
|
||
}
|
||
|
||
.Deletes {
|
||
border: 1px solid #f00;
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
border-radius: 50%;
|
||
color: #f00;
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
line-height: 30rpx;
|
||
}
|
||
}
|
||
|
||
.images {
|
||
width: 300rpx;
|
||
height: 150rpx;
|
||
position: relative;
|
||
|
||
.icons {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.popup {
|
||
background-color: #fff;
|
||
}
|
||
|
||
.hader {
|
||
display: flex;
|
||
justify-content: center;
|
||
text-align: center;
|
||
height: 45px;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
align-items: center;
|
||
|
||
div {
|
||
text-align: center;
|
||
width: 80px;
|
||
color: #E59C36;
|
||
}
|
||
|
||
.text {
|
||
color: #333;
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
.wgSignature {
|
||
position: relative;
|
||
|
||
.gather2 {
|
||
color: #00aaff;
|
||
position: absolute;
|
||
bottom: 20rpx;
|
||
right: 0rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
z-index: 2;
|
||
|
||
.imgs {
|
||
margin-right: 15px;
|
||
}
|
||
}
|
||
|
||
.gather {
|
||
position: absolute;
|
||
z-index: 2;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
transform: rotate(90deg);
|
||
bottom: 160px;
|
||
left: -250rpx;
|
||
|
||
text {
|
||
margin-left: 3px;
|
||
}
|
||
|
||
div {
|
||
width: 80px;
|
||
margin: 5px;
|
||
text-align: center;
|
||
line-height: 40px;
|
||
}
|
||
|
||
.qx {
|
||
background-color: #f5f5f5;
|
||
border-radius: 20px;
|
||
}
|
||
|
||
.wc {
|
||
color: #fff;
|
||
background-color: #E59C36;
|
||
border-radius: 20px;
|
||
}
|
||
|
||
img {
|
||
width: 25px;
|
||
height: 25px;
|
||
}
|
||
}
|
||
|
||
.magnify {
|
||
position: absolute;
|
||
top: 5px;
|
||
right: 5px;
|
||
z-index: 3;
|
||
color: #00aaff;
|
||
|
||
uni-image {
|
||
width: 25px;
|
||
height: 25px;
|
||
}
|
||
}
|
||
|
||
.eliminate {
|
||
position: absolute;
|
||
bottom: 5px;
|
||
right: 5px;
|
||
|
||
uni-image {
|
||
width: 25px;
|
||
height: 25px;
|
||
}
|
||
}
|
||
}
|
||
</style> |