feat: 支持合同专用章

This commit is contained in:
richarjiang
2026-10-29 08:27:55 +08:00
parent 96c0244831
commit 9afdb60824
10 changed files with 97 additions and 17 deletions

View File

@@ -24,17 +24,19 @@
<text class="contract-doc__commitment">{{ document.commitment }}</text>
<view v-if="signature" class="contract-doc__signatures">
<view v-if="signature || document.partyBSeal" class="contract-doc__signatures">
<view class="contract-doc__sign">
<text class="contract-doc__sign-label">甲方(签名)</text>
<image class="contract-doc__sign-image" :src="signature.memberSignature" mode="aspectFit" />
<text class="contract-doc__sign-meta">{{ signature.signerName }}</text>
<image v-if="signature" class="contract-doc__sign-image" :src="signature.memberSignature" mode="aspectFit" />
<text v-else class="contract-doc__sign-meta">待会员签署</text>
<text v-if="signature" class="contract-doc__sign-meta">{{ signature.signerName }}</text>
<text class="contract-doc__sign-meta">{{ signedAtText }}</text>
</view>
<view class="contract-doc__sign">
<text class="contract-doc__sign-label">乙方(签章)</text>
<image v-if="signature.partyBSignature" class="contract-doc__sign-image" :src="signature.partyBSignature" mode="aspectFit" />
<text class="contract-doc__sign-meta">{{ signature.partyBName }}</text>
<image v-if="signature?.partyBSignature" class="contract-doc__sign-image" :src="signature.partyBSignature" mode="aspectFit" />
<image v-if="document.partyBSeal" class="contract-doc__seal-image" :src="document.partyBSeal" mode="aspectFit" />
<text class="contract-doc__sign-meta">{{ partyBName }}</text>
<text class="contract-doc__sign-meta">{{ signedAtText }}</text>
</view>
</view>
@@ -59,6 +61,8 @@ const groups = computed(() => [
])
const signedAtText = computed(() => props.signature ? `签署于 ${formatDateTimeFull(props.signature.signedAt)}` : '')
const partyBName = computed(() => props.signature?.partyBName
|| props.document.partyB.find(row => row.label === '经营者名称')?.value || '')
</script>
<style lang="scss" scoped>
@@ -79,6 +83,7 @@ const signedAtText = computed(() => props.signature ? `签署于 ${formatDateTim
&__sign { flex: 1; min-width: 0; padding: 20rpx; border-radius: 16rpx; background: #faf6f1; }
&__sign-label { display: block; font-size: 23rpx; color: #8b7f74; }
&__sign-image { display: block; width: 100%; height: 140rpx; margin: 10rpx 0; }
&__seal-image { display: block; width: 100%; height: 220rpx; margin: 10rpx 0; }
&__sign-meta { display: block; font-size: 21rpx; line-height: 1.7; color: #8b7f74; overflow-wrap: anywhere; }
&__digest { display: block; margin-top: 20rpx; font-size: 19rpx; line-height: 1.6; color: #b0a498; word-break: break-all; }
}

View File

@@ -73,8 +73,13 @@
</view>
<view class="panel">
<view class="panel-heading"><text class="section-number">03</text><text class="section-title">经营者签名</text></view>
<text class="hint">签名会作为乙方签章出现在每份合同中,签署时自动加载。建议由经营者本人书写。</text>
<view class="panel-heading"><text class="section-number">03</text><text class="section-title">乙方合同专用章</text></view>
<text class="hint">已默认加载场馆合同专用章,签署、查看及导出合同均会展示。合同章随签署内容保存,已签合同不受后续修改影响。</text>
<view class="seal-preview">
<image v-if="config?.sealImage" :src="config.sealImage" mode="aspectFit" class="seal-image" />
</view>
<text class="field-label">经营者签名(选填)</text>
<text class="hint">可由经营者本人书写,与合同章一同展示。</text>
<template v-if="signing">
<SignaturePad ref="pad" :height="360" placeholder="请经营者本人手写签名" @change="onSignatureChange" />
<view class="sign-actions">
@@ -273,6 +278,8 @@ button[disabled] { opacity: .42; }
.segment .selected { background: #fffdf8; color: #4f6243; }
.signature-preview { height: 200rpx; border-radius: 16rpx; background: #f5f4ec; display: flex; align-items: center; justify-content: center; margin-bottom: 20rpx; }
.signature-image { width: 100%; height: 180rpx; }
.seal-preview { display: flex; justify-content: center; margin-bottom: 24rpx; background: #fff; border-radius: 16rpx; }
.seal-image { width: 300rpx; height: 300rpx; }
.add-button { width: 100%; height: 84rpx; border: 1rpx dashed #bdc6ab; background: #f3f5eb; color: #74835f; }
.sign-actions { display: flex; gap: 16rpx; margin-top: 20rpx; }
.ghost-button { flex: 1; height: 80rpx; background: #eef0e6; color: #6d7a5d; }