在 Vue 3 集成 e签宝电子合同签署功能

实现 Vue 3 + e签宝电子合同签署功能，需要使用 e签宝提供的实际 SDK 或 API。

e签宝通常提供针对不同平台（如 Web、Android、iOS）的 SDK，而 Web 端一般通过 WebView 或直接使用嵌入式 iframe 来加载合同签署页面。

下面举个 🌰 说明：

前提条件

1、获取 e签宝 API 接口：首先需要从 e签宝获取 API 密钥、签署链接、合同模板和签署所需的相关接口。

2、后端支持：e签宝的 API 需要通过后端服务器调用，因此需要后端来处理签署请求，生成签署链接，处理回调等操作。

步骤 1：后端生成签署链接

假设已经通过后端 API 调用 e签宝的接口，生成了一个合同签署的链接。给前端提供该链接，前端将使用这个链接加载合同签署页面。

以下是一个假设的后端接口：

- 生成签署链接的后端接口：/api/generate-signature-link

- 该接口会返回一个签署 URL，前端将通过该 URL 在 iframe 中加载签署页面。

接口返回结果示例：

{"status": "success","data": {"signUrl": "https://e-signature.example.com/contract-sign?contractId=12345&userId=67890"}
}

步骤 2：前端实现 Vue 3 项目

1、创建 Vue 3 项目：如果还没有创建项目，可以使用 Vite 创建一个新的 Vue 项目

npm create vite@latest my-e-sign-app --template vue
cd my-e-sign-app
npm install
npm install element-plus

2、创建 ESignature.vue 组件：这是展示合同签署页面的 Vue 组件。

<template><div class="e-signature"><h2>电子合同签署</h2><!-- 选择合同 --><el-select v-model="selectedDocument" placeholder="请选择合同" style="width: 200px;"><el-optionv-for="doc in documents":key="doc.id":label="doc.name":value="doc.url"/></el-select><!-- 显示合同内容 --><div v-if="selectedDocument" class="contract-container"><iframev-bind:src="selectedDocument"width="100%"height="600px"frameborder="0"></iframe></div><div class="sign-result"><el-button @click="handleSign" type="primary">开始签署</el-button><p v-if="signResult">签署结果: {{ signResult }}</p></div></div>
</template><script setup>
import { ref } from 'vue';const documents = ref([{ id: 1, name: '合同1', url: 'https://e-signature.example.com/contract-sign?contractId=12345&userId=67890' },{ id: 2, name: '合同2', url: 'https://e-signature.example.com/contract-sign?contractId=12346&userId=67891' },
]);// 当前选中的合同 URL
const selectedDocument = ref('');// 签署结果
const signResult = ref('');// 开始签署的处理函数
const handleSign = async () => {try {const response = await fetch('/api/generate-signature-link');const result = await response.json();if (result.status === 'success') {selectedDocument.value = result.data.signUrl;signResult.value = '合同加载中...';} else {signResult.value = '签署链接获取失败';}} catch (error) {signResult.value = '发生错误: ' + error.message;}
};
</script><style scoped>
.e-signature {margin: 20px;
}.contract-container {margin-top: 20px;border: 1px solid #ddd;padding: 10px;
}.sign-result {margin-top: 20px;
}
</style>

步骤 3：在 App.vue 中使用 ESignature.vue 组件

<template><div id="app"><ESignature /></div>
</template><script setup>
import ESignature from './components/ESignature.vue';
</script><style>
@import "~element-plus/packages/theme-chalk/src/base.scss";
</style>

步骤 4：后端实现生成签署链接

伪代码简单实现一下后端处理逻辑

// 假设已经有 e签宝的 API 密钥和其他必要信息
const E_SIGN_API_URL = 'https://api.esign.com/generate-signature-link';
const API_KEY = 'E_SIGN_API_KEY';// 生成签署链接
app.get('/api/generate-signature-link', async (req, res) => {try {const response = await fetch(E_SIGN_API_URL, {method: 'POST',headers: {'Content-Type': 'application/json','Authorization': `Bearer ${API_KEY}`,},body: JSON.stringify({contractId: '12345',  // 合同 IDuserId: '67890',      // 用户 ID}),});const result = await response.json();if (result.status === 'success') {res.json({status: 'success',data: { signUrl: result.data.signUrl },});} else {res.json({status: 'error',message: 'Failed to generate signature link',});}} catch (error) {res.status(500).json({ status: 'error', message: error.message });}
});app.listen(3000, () => {console.log('Server running on http://localhost:3000');
});