328 lines
7.4 KiB
Vue
328 lines
7.4 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 @tap="toImg" class="images" mode="aspectFit" :src="value"></image>
|
|||
|
|
<view v-if="!readonly" @click="toDeleteImg" class="icons">
|
|||
|
|
<view class="Deletes">×</view>
|
|||
|
|
</view>
|
|||
|
|
</div>
|
|||
|
|
<div v-if="!value && !readonly" class="explain" @click="toPop">
|
|||
|
|
{{placeholder?placeholder:'点击签名'}}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<view class="bottomPopup" v-if="showPopup" @touchmove.stop.prevent="moveHandle">
|
|||
|
|
<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="isHeight?'wgSignatureq':'wgSignature'">
|
|||
|
|
<div v-if="isHeight" key="999" style="width: 750rpx ;height: 100vh;">
|
|||
|
|
<jp-signature :beforeDelay="200" :landscape="true" disableScroll ref="signatureRef" :openSmooth="openSmooth" :penSize="6" :bounding-box="boundingBox"></jp-signature>
|
|||
|
|
</div>
|
|||
|
|
<div v-else key="888" style="width: 750rpx ;height: 35vh;">
|
|||
|
|
<jp-signature :beforeDelay="200" disableScroll ref="signatureRef" :openSmooth="openSmooth" :bounding-box="boundingBox" :penSize="3"></jp-signature>
|
|||
|
|
</div>
|
|||
|
|
<div v-if="!isHeight" class="appBut" >
|
|||
|
|
<div class="buts" @click="undo" >撤销</div>
|
|||
|
|
<div class="buts" @click="deleteImg" >清除</div>
|
|||
|
|
<div class="buts" style="background-color: #55aaff;color: #fff;" @click="Tomagnify" >全屏</div>
|
|||
|
|
</div>
|
|||
|
|
<div v-else class="appBut" style="height: 80px;">
|
|||
|
|
<div class="butx" @click="undo" >撤销</div>
|
|||
|
|
<div class="butx" @click="deleteImg">清除</div>
|
|||
|
|
<div class="butx" style="background-color: #55aaff;color: #fff;" @click="Tomagnify" >小屏</div>
|
|||
|
|
<div class="butx" @click="toclear">取消</div>
|
|||
|
|
<div class="butx" style="background-color: #E59C36;color: #fff;" @click="isEmpty">完成</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</transition>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<!-- 有项目需要开发的请联系 扣 - 371524845 -->
|
|||
|
|
<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,
|
|||
|
|
},
|
|||
|
|
openSmooth: {
|
|||
|
|
type: [Boolean, String],
|
|||
|
|
default: true,
|
|||
|
|
},
|
|||
|
|
boundingBox: {
|
|||
|
|
type: [Boolean, String],
|
|||
|
|
default: true,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
showPopup: false,
|
|||
|
|
isHeight: false,
|
|||
|
|
height1: uni.getSystemInfoSync().windowWidth / 2,
|
|||
|
|
width: uni.getSystemInfoSync().windowWidth, //实时屏幕宽度
|
|||
|
|
height: uni.getSystemInfoSync().windowHeight, //实时屏幕高度
|
|||
|
|
showPicker: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
moveHandle(){
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
toImg(){
|
|||
|
|
this.$emit('toImg',this.value)
|
|||
|
|
},
|
|||
|
|
undo() {
|
|||
|
|
this.$refs.signatureRef.undo()
|
|||
|
|
},
|
|||
|
|
toPop() {
|
|||
|
|
this.showPopup = true
|
|||
|
|
},
|
|||
|
|
toDeleteImg() {
|
|||
|
|
// #ifndef VUE3
|
|||
|
|
this.$emit('input','')
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef VUE3
|
|||
|
|
this.$emit('update:value','')
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
toclear() {
|
|||
|
|
this.isHeight = false
|
|||
|
|
this.showPopup = false
|
|||
|
|
},
|
|||
|
|
close() {
|
|||
|
|
this.isHeight = false
|
|||
|
|
this.showPopup = false
|
|||
|
|
const {signatureRef} = this.$refs
|
|||
|
|
signatureRef.clear()
|
|||
|
|
},
|
|||
|
|
deleteImg() {
|
|||
|
|
const {signatureRef} = this.$refs
|
|||
|
|
signatureRef.clear()
|
|||
|
|
},
|
|||
|
|
toDataURL(url) {
|
|||
|
|
// #ifndef VUE3
|
|||
|
|
this.$emit('input',url)
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef VUE3
|
|||
|
|
this.$emit('update:value',url)
|
|||
|
|
// #endif
|
|||
|
|
this.showPicker = false
|
|||
|
|
},
|
|||
|
|
Tomagnify() {
|
|||
|
|
this.isHeight = !this.isHeight
|
|||
|
|
const {signatureRef} = this.$refs
|
|||
|
|
signatureRef.clear()
|
|||
|
|
},
|
|||
|
|
isEmpty() {
|
|||
|
|
const {signatureRef} = this.$refs
|
|||
|
|
signatureRef.canvasToTempFilePath({
|
|||
|
|
quality: 0.8,
|
|||
|
|
success: (res) => {
|
|||
|
|
if (this.required) {
|
|||
|
|
if (!res.isEmpty) {
|
|||
|
|
// #ifndef VUE3
|
|||
|
|
this.$emit('input', res.tempFilePath)
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef VUE3
|
|||
|
|
this.$emit('update:value',res.tempFilePath)
|
|||
|
|
// #endif
|
|||
|
|
this.$emit('change', res.tempFilePath)
|
|||
|
|
this.isHeight = false
|
|||
|
|
this.showPopup = false
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请先签名',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// #ifndef VUE3
|
|||
|
|
this.$emit('input', res.tempFilePath)
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef VUE3
|
|||
|
|
this.$emit('update:value',res.tempFilePath)
|
|||
|
|
// #endif
|
|||
|
|
this.$emit('change', res.tempFilePath)
|
|||
|
|
this.isHeight = false
|
|||
|
|
this.showPopup = false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
beforeCreate() {},
|
|||
|
|
created() {}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.wgSignatureq{
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.appBut{
|
|||
|
|
display: flex;justify-content: flex-start;align-items: center;text-align: center;height: 50px;line-height: 35px;
|
|||
|
|
.buts{
|
|||
|
|
color: #333;flex: 1;margin: 0 15px;background-color: #ccc;border-radius: 5px;height: 35px;
|
|||
|
|
}
|
|||
|
|
.butx{
|
|||
|
|
color: #333;flex: 1;margin: 0 5px;background-color: #ccc;border-radius: 5px;height: 35px;
|
|||
|
|
transform: rotate(90deg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
</style>
|