|
|
|
@ -1,15 +1,9 @@ |
|
|
|
<template> |
|
|
|
<view class="contract-sign-container"> |
|
|
|
<!-- 自定义导航栏 --> |
|
|
|
<view class="custom-nav"> |
|
|
|
<view class="nav-left" @click="goBack"> |
|
|
|
<text class="iconfont icon-arrow-left"></text> |
|
|
|
</view> |
|
|
|
<view class="nav-title">合同签订</view> |
|
|
|
<view class="nav-right"> |
|
|
|
<view class="clear-btn" @click="clearSignature"> |
|
|
|
<text class="clear-text">清除</text> |
|
|
|
</view> |
|
|
|
<!-- 顶部操作栏 --> |
|
|
|
<view class="top-actions"> |
|
|
|
<view class="clear-btn" @click="clearSignature"> |
|
|
|
<text class="clear-text">清除签名</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
@ -341,7 +335,7 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
// 提交签名信息 |
|
|
|
const response = await apiRoute.post('contract/sign', { |
|
|
|
const response = await apiRoute.post('/contract/sign', { |
|
|
|
contract_id: this.contractId, |
|
|
|
sign_file: uploadResult.url |
|
|
|
}) |
|
|
|
@ -414,22 +408,6 @@ export default { |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
// 返回上一页 |
|
|
|
goBack() { |
|
|
|
if (this.hasSigned) { |
|
|
|
uni.showModal({ |
|
|
|
title: '提示', |
|
|
|
content: '您的签名尚未保存，确定要离开吗？', |
|
|
|
success: (res) => { |
|
|
|
if (res.confirm) { |
|
|
|
uni.navigateBack() |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
} else { |
|
|
|
uni.navigateBack() |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
@ -437,53 +415,24 @@ export default { |
|
|
|
<style lang="scss" scoped> |
|
|
|
.contract-sign-container { |
|
|
|
min-height: 100vh; |
|
|
|
background-color: #f5f5f5; |
|
|
|
background-color: #1a1a1a; |
|
|
|
padding-bottom: 120rpx; |
|
|
|
} |
|
|
|
|
|
|
|
/* 自定义导航栏 */ |
|
|
|
.custom-nav { |
|
|
|
/* 顶部操作栏 */ |
|
|
|
.top-actions { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
height: 88rpx; |
|
|
|
padding: 0 32rpx; |
|
|
|
background-color: #fff; |
|
|
|
border-bottom: 1rpx solid #e5e5e5; |
|
|
|
position: sticky; |
|
|
|
top: 0; |
|
|
|
z-index: 100; |
|
|
|
|
|
|
|
.nav-left { |
|
|
|
width: 80rpx; |
|
|
|
height: 80rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
.iconfont { |
|
|
|
font-size: 36rpx; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
} |
|
|
|
justify-content: flex-end; |
|
|
|
padding: 20rpx 32rpx; |
|
|
|
|
|
|
|
.nav-title { |
|
|
|
font-size: 36rpx; |
|
|
|
font-weight: 600; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
.clear-btn { |
|
|
|
padding: 12rpx 24rpx; |
|
|
|
background-color: #29d3b4; |
|
|
|
border-radius: 8rpx; |
|
|
|
|
|
|
|
.nav-right { |
|
|
|
width: 80rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
.clear-btn { |
|
|
|
.clear-text { |
|
|
|
font-size: 28rpx; |
|
|
|
color: #007ACC; |
|
|
|
} |
|
|
|
.clear-text { |
|
|
|
font-size: 28rpx; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -493,22 +442,23 @@ export default { |
|
|
|
padding: 20rpx; |
|
|
|
|
|
|
|
.info-card { |
|
|
|
background-color: #fff; |
|
|
|
background-color: #2a2a2a; |
|
|
|
border-radius: 16rpx; |
|
|
|
padding: 32rpx; |
|
|
|
text-align: center; |
|
|
|
border: 1rpx solid #444; |
|
|
|
|
|
|
|
.contract-name { |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: 600; |
|
|
|
color: #333; |
|
|
|
color: #fff; |
|
|
|
display: block; |
|
|
|
margin-bottom: 16rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.sign-tip { |
|
|
|
font-size: 26rpx; |
|
|
|
color: #666; |
|
|
|
color: #999; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -525,7 +475,7 @@ export default { |
|
|
|
.title-text { |
|
|
|
font-size: 30rpx; |
|
|
|
font-weight: 600; |
|
|
|
color: #333; |
|
|
|
color: #fff; |
|
|
|
display: block; |
|
|
|
margin-bottom: 8rpx; |
|
|
|
} |
|
|
|
@ -543,7 +493,7 @@ export default { |
|
|
|
border-radius: 16rpx; |
|
|
|
margin-bottom: 32rpx; |
|
|
|
overflow: hidden; |
|
|
|
border: 2rpx dashed #e5e5e5; |
|
|
|
border: 2rpx dashed #29d3b4; |
|
|
|
|
|
|
|
.signature-canvas { |
|
|
|
width: 100%; |
|
|
|
@ -574,9 +524,10 @@ export default { |
|
|
|
|
|
|
|
/* 签名工具栏 */ |
|
|
|
.signature-tools { |
|
|
|
background-color: #fff; |
|
|
|
background-color: #2a2a2a; |
|
|
|
border-radius: 16rpx; |
|
|
|
padding: 24rpx; |
|
|
|
border: 1rpx solid #444; |
|
|
|
|
|
|
|
.tool-group { |
|
|
|
display: flex; |
|
|
|
@ -589,7 +540,7 @@ export default { |
|
|
|
|
|
|
|
.tool-label { |
|
|
|
font-size: 26rpx; |
|
|
|
color: #666; |
|
|
|
color: #ccc; |
|
|
|
margin-right: 20rpx; |
|
|
|
min-width: 120rpx; |
|
|
|
} |
|
|
|
@ -607,7 +558,7 @@ export default { |
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
&.active { |
|
|
|
border-color: #007ACC; |
|
|
|
border-color: #29d3b4; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -627,8 +578,8 @@ export default { |
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
&.active { |
|
|
|
border-color: #007ACC; |
|
|
|
background-color: #f0f8ff; |
|
|
|
border-color: #29d3b4; |
|
|
|
background-color: rgba(41, 211, 180, 0.1); |
|
|
|
} |
|
|
|
|
|
|
|
.width-preview { |
|
|
|
@ -647,15 +598,16 @@ export default { |
|
|
|
.preview-title { |
|
|
|
font-size: 30rpx; |
|
|
|
font-weight: 600; |
|
|
|
color: #333; |
|
|
|
color: #fff; |
|
|
|
text-align: center; |
|
|
|
margin-bottom: 24rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.preview-image-container { |
|
|
|
background-color: #fff; |
|
|
|
background-color: #2a2a2a; |
|
|
|
border-radius: 16rpx; |
|
|
|
padding: 32rpx; |
|
|
|
border: 1rpx solid #444; |
|
|
|
|
|
|
|
.preview-image { |
|
|
|
width: 100%; |
|
|
|
@ -670,9 +622,9 @@ export default { |
|
|
|
bottom: 0; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
background-color: #fff; |
|
|
|
background-color: #2a2a2a; |
|
|
|
padding: 24rpx 32rpx; |
|
|
|
border-top: 1rpx solid #e5e5e5; |
|
|
|
border-top: 1rpx solid #444; |
|
|
|
display: flex; |
|
|
|
gap: 24rpx; |
|
|
|
z-index: 100; |
|
|
|
@ -689,25 +641,25 @@ export default { |
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
&.primary { |
|
|
|
background-color: #007ACC; |
|
|
|
background-color: #29d3b4; |
|
|
|
color: #fff; |
|
|
|
|
|
|
|
&:active:not(:disabled) { |
|
|
|
background-color: #0056b3; |
|
|
|
background-color: #22b39a; |
|
|
|
} |
|
|
|
|
|
|
|
&:disabled { |
|
|
|
background-color: #ccc; |
|
|
|
background-color: #666; |
|
|
|
color: #999; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&.secondary { |
|
|
|
background-color: #f5f5f5; |
|
|
|
color: #666; |
|
|
|
background-color: #444; |
|
|
|
color: #ccc; |
|
|
|
|
|
|
|
&:active { |
|
|
|
background-color: #e5e5e5; |
|
|
|
background-color: #555; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -791,7 +743,7 @@ export default { |
|
|
|
border: none; |
|
|
|
|
|
|
|
&.primary { |
|
|
|
background-color: #007ACC; |
|
|
|
background-color: #29d3b4; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
|
