|
|
@@ -0,0 +1,162 @@
|
|
|
+<template>
|
|
|
+ <div class="signature-container">
|
|
|
+ <!-- 签字按钮 -->
|
|
|
+ <button @click="showSignature = true" class="sign-btn">点击签字</button>
|
|
|
+
|
|
|
+ <!-- 签名弹窗 -->
|
|
|
+ <div v-if="showSignature" class="modal">
|
|
|
+ <div class="modal-content">
|
|
|
+ <h3>请在此处签字</h3>
|
|
|
+ <div class="canvas-container">
|
|
|
+ <canvas
|
|
|
+ ref="canvas"
|
|
|
+ width="400"
|
|
|
+ height="200"
|
|
|
+ @touchstart.prevent="startDrawing"
|
|
|
+ @touchmove.prevent="draw"
|
|
|
+ @touchend="stopDrawing"
|
|
|
+ @mousedown="startDrawing"
|
|
|
+ @mousemove="draw"
|
|
|
+ @mouseup="stopDrawing"
|
|
|
+ @mouseleave="stopDrawing"
|
|
|
+ ></canvas>
|
|
|
+ </div>
|
|
|
+ <div class="controls">
|
|
|
+ <button @click="clearCanvas">清空</button>
|
|
|
+ <button @click="saveSignature">确认签字</button>
|
|
|
+ <button @click="showSignature = false">取消</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "index",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showSignature: false,
|
|
|
+ isDrawing: false,
|
|
|
+ ctx: null,
|
|
|
+ canvas: null,
|
|
|
+ signatureData: null // 保存 base64 图片
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.initCanvas();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initCanvas() {
|
|
|
+ this.canvas = this.$refs.canvas;
|
|
|
+ this.ctx = this.canvas.getContext('2d');
|
|
|
+ this.ctx.lineCap = 'round';
|
|
|
+ this.ctx.lineJoin = 'round';
|
|
|
+ this.ctx.lineWidth = 3;
|
|
|
+ this.ctx.strokeStyle = '#000';
|
|
|
+ },
|
|
|
+ startDrawing(e) {
|
|
|
+ this.isDrawing = true;
|
|
|
+ const rect = this.canvas.getBoundingClientRect();
|
|
|
+ const x = (e.clientX || e.touches[0].clientX) - rect.left;
|
|
|
+ const y = (e.clientY || e.touches[0].clientY) - rect.top;
|
|
|
+ this.ctx.moveTo(x, y);
|
|
|
+ },
|
|
|
+ draw(e) {
|
|
|
+ if (!this.isDrawing) return;
|
|
|
+ const rect = this.canvas.getBoundingClientRect();
|
|
|
+ const x = (e.clientX || e.touches[0].clientX) - rect.left;
|
|
|
+ const y = (e.clientY || e.touches[0].clientY) - rect.top;
|
|
|
+ this.ctx.lineTo(x, y);
|
|
|
+ this.ctx.stroke();
|
|
|
+ },
|
|
|
+ stopDrawing() {
|
|
|
+ if (this.isDrawing) {
|
|
|
+ this.isDrawing = false;
|
|
|
+ this.ctx.closePath();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ clearCanvas() {
|
|
|
+ this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
|
+ },
|
|
|
+ saveSignature() {
|
|
|
+ this.signatureData = this.canvas.toDataURL('image/png');
|
|
|
+ this.showSignature = false;
|
|
|
+ // 将签名数据传递给父组件或其他处理逻辑
|
|
|
+ this.$emit('signature-complete', this.signatureData);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.signature-container {
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.sign-btn {
|
|
|
+ background-color: #007bff;
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ padding: 10px 20px;
|
|
|
+ font-size: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.modal {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ z-index: 999;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-content {
|
|
|
+ background: white;
|
|
|
+ padding: 20px;
|
|
|
+ border-radius: 8px;
|
|
|
+ width: 500px;
|
|
|
+ max-width: 90%;
|
|
|
+}
|
|
|
+
|
|
|
+.canvas-container {
|
|
|
+ margin: 20px 0;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 4px;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.controls {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.controls button {
|
|
|
+ padding: 8px 16px;
|
|
|
+ border: none;
|
|
|
+ border-radius: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.controls button:nth-child(1) {
|
|
|
+ background-color: #dc3545;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.controls button:nth-child(2) {
|
|
|
+ background-color: #28a745;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.controls button:nth-child(3) {
|
|
|
+ background-color: #6c757d;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+</style>
|