89 lines
1.7 KiB
Vue
89 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<view class="exmaple1">
|
||
|
|
<button @click="onSign">去签名</button>
|
||
|
|
<view class="sign-preview">
|
||
|
|
<image
|
||
|
|
class="sign-image"
|
||
|
|
v-if="signBase64"
|
||
|
|
:src="signBase64"
|
||
|
|
mode="widthFix"
|
||
|
|
@click="onPreview"
|
||
|
|
></image>
|
||
|
|
<view v-else>签名预览</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { onShow } from '@dcloudio/uni-app'
|
||
|
|
import { ref, onUnmounted } from 'vue'
|
||
|
|
|
||
|
|
|
||
|
|
const signBase64 = ref('')
|
||
|
|
const signTempimg = ref('')
|
||
|
|
// 去签名页面
|
||
|
|
const onSign = () => {
|
||
|
|
// 移除之前的事件监听器避免重复
|
||
|
|
uni.$off('getSignImg')
|
||
|
|
|
||
|
|
uni.navigateTo({
|
||
|
|
url: '/pagesMine/signature',
|
||
|
|
success: () => {
|
||
|
|
// 监听签名返回事件
|
||
|
|
const eventHandler = (e) => {
|
||
|
|
console.log('getSignImg', e)
|
||
|
|
signBase64.value = e.base64
|
||
|
|
signTempimg.value = e.path
|
||
|
|
}
|
||
|
|
|
||
|
|
// 监听一次自定义事件
|
||
|
|
uni.$once('getSignImg', eventHandler)
|
||
|
|
|
||
|
|
// 页面卸载时移除监听（避免内存泄漏）
|
||
|
|
// uni.$off('getSignImg', eventHandler)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
// 预览签名图片
|
||
|
|
const onPreview = () => {
|
||
|
|
if (signTempimg.value) {
|
||
|
|
uni.previewImage({
|
||
|
|
urls: [signTempimg.value]
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
onShow(()=>{
|
||
|
|
// plus.screen.lockOrientation('portrait-primary');
|
||
|
|
console.log("竖屏")
|
||
|
|
})
|
||
|
|
|
||
|
|
// 组件卸载时移除事件监听器
|
||
|
|
// onUnmounted(() => {
|
||
|
|
// uni.$off('getSignImg')
|
||
|
|
// })
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.exmaple1 {
|
||
|
|
padding: 24rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sign-preview {
|
||
|
|
min-height: 1000rpx;
|
||
|
|
margin-top: 24rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
border: 1px solid #66ccff;
|
||
|
|
background-color: #f0f0f0;
|
||
|
|
color: #bbbbbb;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sign-image {
|
||
|
|
width: 640rpx;
|
||
|
|
}
|
||
|
|
</style>
|