integrated_traffic_uniapp/components/landscape_sign/index.vue

<template>
  <view class="cu-dialog">
    <view class="cu-bar bg-white justify-end">
      <view class="content">签名</view>
      <view class="action" @tap="fnClose">
        <text class="cuIcon-close text-red"></text>
      </view>
    </view>
    <view class="sign-content">
      <sp-sign-board ref="signRef" horizontal bg-color="#fff"/>
    </view>
    <view class="cu-bar bg-white justify-center">
      <view class="action">
        <button class="cu-btn line-green text-green" @click="fnReset">重写</button>
        <button class="cu-btn bg-green margin-left" @click="fnGenerate">完成</button>
        <span class="text-red text-lg margin-left">*请横屏签名</span>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  mounted() {
    uni.$on("getSignImg", ({ base64, path }) => {
      this.$emit("confirm", { base64, path });
      uni.$off("getSignImg");
      this.fnClose();
    });
  },
  methods: {
    fnReset() {
      this.$refs.signRef.reset && this.$refs.signRef.reset();
    },
    fnGenerate() {
      this.$refs.signRef.confirm();
    },
    fnClose() {
      this.fnReset();
      this.$emit("cancel", '');
    },
  },
}
</script>
<style scoped lang="scss">
.sign-content {
  height: 80vh;
  border: 4upx dashed #e9e9e9;
  overflow: hidden;
  box-sizing: border-box;
}
</style>