1

jhzh

2026-01-09 f1aaecc9dc0a3d680f2f693ee963d5d060e75734

 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;