134 lines
2.4 KiB
Vue
134 lines
2.4 KiB
Vue
<template>
|
|
<u-modal
|
|
:show="signShow"
|
|
:show-confirm-button="false"
|
|
class="esign_dialog"
|
|
width="100vw"
|
|
>
|
|
<view class="footer">
|
|
<view class="button" @click="fnReset">
|
|
<view>重</view>
|
|
<view>签</view>
|
|
</view>
|
|
<view class="button" @click="fnGenerate">
|
|
<view>确</view>
|
|
<view>定</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="signShow" class="content">
|
|
<sp-sign-board
|
|
ref="signRef"
|
|
horizontal
|
|
bg-color="#fff"
|
|
:need-back="false"
|
|
/>
|
|
</view>
|
|
<view class="header">
|
|
<view></view>
|
|
<view>
|
|
<view class="title">签</view>
|
|
<view class="title">字</view>
|
|
</view>
|
|
<view>
|
|
<u-icon name="close" size="26" color="#000" @click="fnClose" />
|
|
</view>
|
|
</view>
|
|
</u-modal>
|
|
</template>
|
|
|
|
<script >
|
|
export default {
|
|
props: {
|
|
signShow: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
unTouch:false,
|
|
}
|
|
},
|
|
methods: {
|
|
fnReset() {
|
|
this.$refs.signRef?.reset && this.$refs.signRef.reset();
|
|
},
|
|
fnGenerate() {
|
|
if (this.unTouch) return;
|
|
this.unTouch = true;
|
|
this.$refs.signRef.confirm();
|
|
setTimeout(() => {
|
|
this.unTouch = false;
|
|
}, 500)
|
|
},
|
|
fnClose() {
|
|
this.fnReset();
|
|
this.$emit("cancel", false);
|
|
}
|
|
},
|
|
mounted() {
|
|
uni.$on("getSignImg", ({base64, path, tempFile}) => {
|
|
this.$emit('confirm', {base64, path, tempFile});
|
|
this.fnClose();
|
|
});
|
|
},
|
|
beforeDestroy() {
|
|
uni.$off("getSignImg");
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.header {
|
|
padding: 50rpx 0;
|
|
width: 80rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
text-align: center;
|
|
font-size: 40rpx;
|
|
color: #000;
|
|
margin-right: -25rpx;
|
|
|
|
.title {
|
|
margin-top: 10rpx;
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
|
|
.content {
|
|
flex: 1;
|
|
//display: flex;
|
|
//align-items: center;
|
|
//justify-content: center;
|
|
height: 95vh;
|
|
border: 1rpx dashed #dcdee0;
|
|
}
|
|
|
|
.footer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: -25rpx;
|
|
|
|
.button {
|
|
border: 0;
|
|
border-radius: 0;
|
|
flex: 1;
|
|
border-top: 1rpx solid #dcdee0;
|
|
display: block;
|
|
padding-top: 25vh;
|
|
padding-left: 14rpx;
|
|
padding-right: 30rpx;
|
|
|
|
&:first-child {
|
|
border: 0;
|
|
}
|
|
|
|
view {
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
}
|
|
</style>
|