|
|
@@ -5,12 +5,9 @@
|
|
|
strokeColor string 笔触颜色,默认 '#1a1a1a'
|
|
|
strokeWidth number 笔触宽度(逻辑像素),默认 2
|
|
|
height number 画布高度(px),默认 200
|
|
|
- requireAgree boolean 是否要求先勾选同意声明才能确认签名,默认 false
|
|
|
- agreeText string 同意声明文案,默认 '我已阅读并确认以上内容真实、准确'
|
|
|
Emits:
|
|
|
confirm dataUrl: string 画布转 base64 PNG data URL(点击「确认签名」时触发)
|
|
|
clear 画布被清空
|
|
|
- agree-change agreed: boolean 同意勾选状态变化(取消勾选时调用方应作废已确认签名)
|
|
|
用法:
|
|
|
<hand-signature @confirm="onSign" @clear="onClear" />
|
|
|
onSign(url) { this.signatureDataUrl = url }
|
|
|
@@ -35,18 +32,11 @@
|
|
|
class="signature-preview"
|
|
|
/>
|
|
|
</view>
|
|
|
- <!-- 同意声明(requireAgree=true 时显示,未勾选不可确认签名):置于签字框下方,与页面底部操作按钮成组 -->
|
|
|
- <view v-if="requireAgree" class="signature-agree" @click="toggleAgree">
|
|
|
- <view class="agree-box" :class="{ 'agree-box-on': agreed }">
|
|
|
- <text v-if="agreed" class="agree-tick">✓</text>
|
|
|
- </view>
|
|
|
- <text class="agree-text">{{ agreeText }}</text>
|
|
|
- </view>
|
|
|
<view class="signature-actions">
|
|
|
<button class="btn-sign-clear" :disabled="savingLive || !hasContent && !currentDataUrl" @click="handleClear">
|
|
|
{{ savingLive ? '处理中...' : '重写' }}
|
|
|
</button>
|
|
|
- <button class="btn-sign-confirm" :disabled="savingLive || !hasContent || (requireAgree && !agreed)" @click="handleConfirm">
|
|
|
+ <button class="btn-sign-confirm" :disabled="savingLive || !hasContent" @click="handleConfirm">
|
|
|
{{ savingLive ? '处理中...' : '确认签名' }}
|
|
|
</button>
|
|
|
</view>
|
|
|
@@ -64,12 +54,9 @@
|
|
|
* strokeColor string 笔触颜色,默认 '#1a1a1a'
|
|
|
* strokeWidth number 笔触宽度(逻辑像素),默认 2
|
|
|
* height number 画布高度(px),默认 200
|
|
|
- * requireAgree boolean 是否要求先勾选同意声明才能确认签名,默认 false
|
|
|
- * agreeText string 同意声明文案,默认 '我已阅读并确认以上内容真实、准确'
|
|
|
* Emits:
|
|
|
* confirm dataUrl: string 画布转 base64 PNG data URL(点击「确认签名」时触发)
|
|
|
* clear 画布被清空
|
|
|
- * agree-change agreed: boolean 同意勾选状态变化(取消勾选时调用方应作废已确认签名)
|
|
|
* 用法:
|
|
|
* <hand-signature @confirm="onSign" @clear="onClear" />
|
|
|
* onSign(url) { this.signatureDataUrl = url }
|
|
|
@@ -93,16 +80,6 @@ export default {
|
|
|
type: Number,
|
|
|
default: 200
|
|
|
},
|
|
|
- /** 是否要求先勾选同意声明才能确认签名 */
|
|
|
- requireAgree: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- /** 同意声明文案(requireAgree=true 时生效) */
|
|
|
- agreeText: {
|
|
|
- type: String,
|
|
|
- default: '我已阅读并确认以上内容真实、准确'
|
|
|
- }
|
|
|
},
|
|
|
data: function() {
|
|
|
return {
|
|
|
@@ -112,7 +89,6 @@ export default {
|
|
|
lastY: 0,
|
|
|
hasContent: false,
|
|
|
hasDrawn: false,
|
|
|
- agreed: false,
|
|
|
currentDataUrl: this.value || '',
|
|
|
savingLive: false,
|
|
|
/** 当前实例唯一 canvas id(多实例时避免 select('#hsCanvas') 命中错误节点,参照 RadarChart) */
|
|
|
@@ -307,18 +283,9 @@ export default {
|
|
|
onTouchEnd: function() {
|
|
|
this.drawing = false
|
|
|
},
|
|
|
- // 切换同意勾选;取消勾选时通知父组件作废已确认签名
|
|
|
- toggleAgree: function() {
|
|
|
- this.agreed = !this.agreed
|
|
|
- this.$emit('agree-change', this.agreed)
|
|
|
- },
|
|
|
handleConfirm: function() {
|
|
|
var self = this
|
|
|
if (this.savingLive) return
|
|
|
- if (this.requireAgree && !this.agreed) {
|
|
|
- uni.showToast({ title: '请先勾选同意声明', icon: 'none' })
|
|
|
- return
|
|
|
- }
|
|
|
// 未在画布上绘制、但有预填签名时:直接透传原签名,避免导出空白画布覆盖
|
|
|
if (!this.hasDrawn && this.currentDataUrl) {
|
|
|
this.$emit('confirm', this.currentDataUrl)
|
|
|
@@ -403,40 +370,6 @@ export default {
|
|
|
.hand-signature {
|
|
|
width: 100%;
|
|
|
}
|
|
|
-/* 同意声明 */
|
|
|
-.signature-agree {
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- margin-top: 12rpx;
|
|
|
-}
|
|
|
-.agree-box {
|
|
|
- flex: 0 0 16px;
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- margin-right: 12rpx;
|
|
|
- margin-top: 2rpx;
|
|
|
- border: 2rpx solid #c8c9cc;
|
|
|
- border-radius: 8rpx;
|
|
|
- background: $app-surface;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-}
|
|
|
-.agree-box-on {
|
|
|
- background: $accent-indigo;
|
|
|
- border-color: $accent-indigo;
|
|
|
-}
|
|
|
-.agree-tick {
|
|
|
- font-size: calc(11px * var(--font-scale, 1));
|
|
|
- color: $app-surface;
|
|
|
- line-height: 1;
|
|
|
-}
|
|
|
-.agree-text {
|
|
|
- flex: 1;
|
|
|
- font-size: calc(12px * var(--font-scale, 1));
|
|
|
- color: $facade-text-body;
|
|
|
- line-height: 1.5;
|
|
|
-}
|
|
|
.signature-canvas-wrap {
|
|
|
position: relative;
|
|
|
width: 100%;
|