<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>
