cellsysArt/components/Signature/write.vue

<template>
  <div class="signature-pad">
    <div class="container">
      <vue-signature-pad
        ref="signaturePadRef"
        :scaleToDevicePixelRatio="false"
        :options="options"
      ></vue-signature-pad>
    </div>
    <div class="dialog-footer">
      <el-button style="margin-left: 20px" @click="close"> 取消 </el-button>
      <el-button type="danger" style="margin-left: 20px" @click="clear">
        清除
      </el-button>
      <el-button plain type="primary" style="margin-left: 20px" @click="save">
        保存
      </el-button>
    </div>
  </div>
</template>

<script>
import { artApi } from "../../artApi.js";
import { ElMessageBox } from "element-plus";

export default {
  name: "write",
  props: {
    role: String,
    id: Number,
  },
  data() {
    return {
      signaturePadKey: 0,

      dialogVisible: false,
      options: {
        penColor: "#000",
        onBegin: () => {
          //该签名组件有bug，在非移动端环境下需要重新渲染canvas的尺寸才能正常使用
          this.$refs.signaturePadRef.resizeCanvas();
        },
      },
      uploadApi: `/v2${artApi.artUploadPicture}`, //事件图片上传api地址
    };
  },
  mounted() {
    // 如果是移动端设备，强制横屏
    if (window.innerWidth < window.innerHeight) {
      this.lockOrientation();
    }
  },

  methods: {
    // 退出全屏并恢复竖屏
    exitFullscreenAndRestoreOrientation() {
      // 恢复屏幕方向
      if (screen.orientation && screen.orientation.unlock) {
        // screen.orientation.unlock();
        screen.orientation.lock("portrait");
      } // 退出全屏
      if (document.exitFullscreen && document.fullscreenElement !== null) {
        document.exitFullscreen();
      }
    },
    lockOrientation() {
      if (document.documentElement.requestFullscreen) {
        document.documentElement
          .requestFullscreen()
          .then(() => {
            // 全屏成功后锁定横屏
            screen.orientation.lock("landscape").catch((err) => {
              console.error("无法锁定横屏:", err);
            });
          })
          .catch((err) => {
            console.error("全屏失败:", err);
            ElMessageBox.alert("请使用横屏进行签名", "提示", {
              confirmButtonText: "确定",
              callback: () => {
                this.lockOrientation();
              },
            });
          });
      } else {
        console.error("当前浏览器不支持全屏API");
      }
    },

    close() {
      this.exitFullscreenAndRestoreOrientation();
      this.$emit("close");
    },
    clear() {
      this.$refs.signaturePadRef.clearSignature();
    },

    save() {
      const signatureData = this.$refs.signaturePadRef.saveSignature();
      this.$emit("save", signatureData);
    },
  },
};
</script>

<style scoped>
.signature-pad {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 5px;
}
.container {
  width: 100%;
  height: 100%;
  padding: 8px;
  border: 1px solid;
}
.dialog-footer {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;

  .otherSet {
    width: 40%;
    display: flex;
    align-items: center;

    .b1 {
      width: 4px;
      height: 4px;
    }

    .b2 {
      width: 6px;
      height: 6px;
    }

    .b3 {
      width: 8px;
      height: 8px;
    }

    .b1,
    .b2,
    .b3 {
      display: inline-block;
      background: #000;
      border-radius: 50%;
    }

    .active {
      border: 1px dashed #0074d9;
    }

    .circleWrap {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 18px;
      height: 18px;
      cursor: pointer;
      margin-right: 20px;
    }

    .penTxt {
      width: 70px;
      font-size: 12px;
      color: #000;
    }
  }
}
:deep(.el-card) {
  height: 25%;
  width: 50%;
}
:deep(.el-card__body) {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.svgClass {
  width: 5rem;
  height: 5rem;
  margin-bottom: 2rem;
}
</style>