uniapp 底部弹出框签字

你可以通过在 UniApp 中使用 uni-popup 组件来实现底部弹出框签字功能。下面是一个简单的示例代码：

<template>
  <view>
    <!-- 点击按钮触发弹出框 -->
    <button @click="showPopup">显示签字弹窗</button>

    <!-- 弹出框 -->
    <uni-popup :show="popupVisible" position="bottom">
      <canvas id="signature-canvas" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd"></canvas>
      <view>
        <button @click="clearSignature">清除签字</button>
        <button @click="confirmSignature">确认签字</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      popupVisible: false, // 弹出框是否显示
      ctx: null, // canvas 上下文
      lastX: 0,
      lastY: 0,
    };
  },
  methods: {
    showPopup() {
      this.popupVisible = true;
      // 初始化 canvas 上下文
      const canvas = uni.createSelectorQuery().select('#signature-canvas');
      this.ctx = canvas.getContext('2d');
    },
    handleTouchStart(e) {
      const { x, y } = e.touches;
      this.lastX = x;
      this.lastY = y;
    },
    handleTouchMove(e) {
      const { x, y } = e.touches;
      this.ctx.beginPath();
      this.ctx.moveTo(this.lastX, this.lastY);
      this.ctx.lineTo(x, y);
      this.ctx.stroke();
      this.lastX = x;
      this.lastY = y;
    },
    handleTouchEnd() {
      this.ctx.closePath();
    },
    clearSignature() {
      this.ctx.clearRect(0, 0, canvas.width, canvas.height);
      this.ctx.draw();
    },
    confirmSignature() {
      // 在这里处理确认签字的逻辑
      // 可以将 canvas 转换成图片保存或上传至服务器
      this.popupVisible = false;
    },
  },
};
</script>

这个示例中，使用了一个 `<uni-popup>` 组件作为底部弹出框的容器，并在其中放置了一个 `<canvas>` 元素用来绘制签字。通过监听 `<canvas>` 元素的触摸事件，可以实现在弹出框中进行签字的功能。最后，点击确认按钮时可以处理签字的逻辑，比如将签字转换成图片保存或上传至服务器。