From f1aaecc9dc0a3d680f2f693ee963d5d060e75734 Mon Sep 17 00:00:00 2001
From: jhzh <1628036192@qq.com>
Date: Fri, 09 Jan 2026 16:18:43 +0800
Subject: [PATCH] 1
---
src/page/newUser/about.vue | 137 +++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 136 insertions(+), 1 deletions(-)
diff --git a/src/page/newUser/about.vue b/src/page/newUser/about.vue
index 57085ec..31737ab 100644
--- a/src/page/newUser/about.vue
+++ b/src/page/newUser/about.vue
@@ -30,6 +30,25 @@
style="width: 100%; cursor: pointer;"
@click="showModal = true"
/>
+
+<!-- <div class="signature-area">
+ <h4>请完成电子签名</h4>
+ <vue-signature-pad
+ ref="mySignaturePad"
+ class="signature-canvas"
+ :options="signatureOptions"
+ ></vue-signature-pad>
+ <div class="signature-btns">
+ <button @click="clearSignature" class="btn-clear">清空签名</button>
+ <button @click="confirmSignature" class="btn-confirm" :disabled="!isAgree || !hasSignature">确认签名</button>
+ </div>
+ </div>
+
+ <div class="signature-preview" v-if="signatureImg">
+ <h4>签名预览</h4>
+ <img :src="signatureImg" alt="电子签名" />
+ </div> -->
+
<!-- 模态框，用于显示放大的图片 -->
<div
@@ -49,8 +68,12 @@
</template>
<script>
import * as api from "@/axios/api";
+import VueSignaturePad from 'vue-signature-pad'
export default {
name: "about",
+ components: {
+ VueSignaturePad
+ },
created() {
var that = this;
//接收页面传值
@@ -86,11 +109,25 @@
title: this.$t("jy314"),
type: 0,
userInfo: {},
- showModal: false
+ showModal: false,
+ signatureImg: '',
+ isAgree: false,
+ hasSignature: false,
+ signatureOptions: {
+ penColor: '#000000',
+ penWidth: 2,
+ },
+ signatureInstance: null
};
},
mounted() {
this.getUserInfo();
+ // vue-signature-pad@2.x 的实例在 this.$refs.xxx.signaturePad 里
+ this.signatureInstance = this.$refs.mySignaturePad.signaturePad
+ // 监听签名变化，更新 hasSignature 状态
+ this.$refs.mySignaturePad.$on('signatureChanged', (isEmpty) => {
+ this.hasSignature = !isEmpty
+ })
},
methods: {
async getUserInfo() {
@@ -100,6 +137,47 @@
this.userInfo = data.data;
} else {
}
+ },
+ // 清空签名（调用真实实例的方法）
+ clearSignature() {
+ if (this.signatureInstance) {
+ this.signatureInstance.clear()
+ this.signatureImg = ''
+ this.hasSignature = false
+ } else {
+ alert('签名组件未初始化！')
+ }
+ },
+ // 确认签名（调用真实实例的方法）
+ confirmSignature() {
+ if (!this.isAgree) {
+ alert('请先阅读并同意用户协议！')
+ return
+ }
+ if (this.signatureInstance) {
+ // 检查是否有签名
+ if (!this.signatureInstance.isEmpty()) {
+ // 导出 Base64 图片
+ this.signatureImg = this.signatureInstance.toDataURL('image/png')
+ this.hasSignature = true
+ this.submitAgreement()
+ } else {
+ alert('请先完成电子签名！')
+ }
+ } else {
+ alert('签名组件未初始化！')
+ }
+ },
+ // 提交协议
+ submitAgreement() {
+ const submitData = {
+ userId: '当前用户ID',
+ isAgree: this.isAgree,
+ signature: this.signatureImg,
+ agreeTime: new Date().getTime()
+ }
+ console.log('提交数据：', submitData)
+ alert('签名成功，协议已提交！')
}
}
};
@@ -107,6 +185,63 @@
<style scoped>
+ .agreement-page {
+ padding: 20px;
+ max-width: 800px;
+ margin: 0 auto;
+}
+.agreement-content {
+ margin-bottom: 30px;
+}
+.agreement-text {
+ height: 200px;
+ overflow-y: auto;
+ padding: 10px;
+ border: 1px solid #eee;
+ margin: 10px 0;
+}
+.agreement-check {
+ margin: 10px 0;
+ font-size: 14px;
+}
+.signature-area {
+ margin: 20px 0;
+}
+.signature-canvas {
+ width: 100%;
+ height: 200px;
+ border: 1px dashed #ccc;
+ margin: 10px 0;
+}
+.signature-btns {
+ margin: 10px 0;
+}
+.btn-clear, .btn-confirm {
+ padding: 8px 16px;
+ margin-right: 10px;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+}
+.btn-clear {
+ background: #eee;
+ color: #333;
+}
+.btn-confirm {
+ background: #409eff;
+ color: #fff;
+}
+.btn-confirm:disabled {
+ background: #ccc;
+ cursor: not-allowed;
+}
+.signature-preview {
+ margin-top: 20px;
+}
+.signature-preview img {
+ max-width: 300px;
+ border: 1px solid #eee;
+}
.modal {
position: fixed;
top: 0;
--
Gitblit v1.9.3