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

news2025/1/10 14:12:40

实现 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-option
        v-for="doc in documents"
        :key="doc.id"
        :label="doc.name"
        :value="doc.url"
      />
    </el-select>

    <!-- 显示合同内容 -->
    <div v-if="selectedDocument" class="contract-container">
      <iframe
        v-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',  // 合同 ID
        userId: '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');
});