gd-signature-jining 使用文档

一、插件依赖

动态加载，如果用户环境有这两个插件，则不加载

• jquey

二、使用方法

2.1、标签引入

<script src="https://cdn.jsdelivr.net/npm/gd-signature-jining/dist/main.bundle.js"></script> 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gd-signature-jining/dist/static/css/index.css">

2.2、npm

# 使用最新版本
npm i gd-signature-jining -S

# 特定版本
npm i [email protected] -S

页面引用

import GDsignature from 'gd-signature-jining' 
// const GDsignature = require('gd-signature-jining')
import ' gd-signature-jining/dist/static/css/less.css'

三、功能介绍

3.1、更改插件主题色

覆盖less变量即可

• @--color-primary 主题色覆盖
• @--color-primary-border border颜色覆盖

标签方式修改主题色

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
<script>
  less.modifyVars({
    '@--color-primary': '#DE2921', // 主题修改为红色
    '@--color-primary-border': '#DE2921' // border颜色修改
  })
</script>

预览签章历史 new SignLog({})

• html

<div>
  <label for="用户id">用户id：</label>
  <input id="userId" placeholder="请输入用户id" type="text" />
</div>
<div>
  <label for="合同id">合同id：</label>
  <input id="abc" placeholder="请输入合同id" type="text" />
</div>
<button onclick="handleclick()">签章</button>

function handleclick() {
  const contract_id = $('#abc').val()
  const userId = $('#userId').val()
  signature.start({
    contract_id: contract_id,//合同id
    user_id: userId,//用户id
  })
}
const businessUrl = 'http://119.163.197.219:9000/paas_app_server'   // 业务系统url
const signature = new SignLog({
  baseUrl: 'http://119.163.197.219:8000/api', // paas地址
  getToken() {
             return new Promise((reslove, reject) => {
                 axios
                     .post(`${businessUrl}/getToken`, {}, {})
                     .then(res => {
                         console.log(res)
                         reslove(res.data.data.access_token)
                     })
                     .catch(err => {
                         reject()
                     })
             })
         },
         getSign(body) {
             return new Promise((reslove, reject) => {
                 axios({
                     method: 'POST',
                     url: `${businessUrl}/getSign`,
                     data: body.data,
                     headers: {
                         token: body.token,
                     }
                 }).then(res => {
                     reslove(res.data.data.sign)
                 })
             })
         }
})

四、参数说明

4.1、baseUrl

paas api接口地址

4.2、businessUrl

业务系统地址提供token和sign的校验:sdk参考大众签章：https://github.com/aiosign/sign-sdk-java

4.3、getToken

业务系统地址提供token回调方法

4.4、getSign

业务系统地址提供sign回调方法