# gd-signature 使用文档
- 语雀文档: https://www.yuque.com/docs/share/7413f933-64d1-41d2-99ed-426203b7a01a?# 《gd-signature 使用文档》
- 
<a name="VruZX"></a>
### 一、插件依赖
> 动态加载，如果用户环境有这两个插件，则不加载

- jq
- pdf.js



<a name="gGQ7l"></a>
### 二、使用方法
<a name="dhEiW"></a>
#### 2.1、标签引入
```html
<script src="https://cdn.jsdelivr.net/npm/gd-signature"></script> 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gd-signature/dist/static/css/index.less">
```
<a name="suGW9"></a>
#### 2.2、npm
```shell
# 使用最新版本
npm i gd-signature -S

# 特定版本
npm i gd-signature@x.x.x -S
```
页面引用
```javascript
import GDsignature from 'gd-signature' 
// const GDsignature = require('gd-signature')
import 'gd-signature/dist/static/css/less.css'
```


<a name="Pq3LF"></a>
### 三、功能介绍
<a name="p2qIl"></a>
#### 3.1、更改插件主题色
覆盖less变量即可

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

标签方式修改主题色
```html
<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>
```


<a name="IOxXq"></a>
#### 3.2、半自动签署 `new GDsignature.manual({})`

- html
```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>
```
`new GDsignature.manual` <br />`start` 需要配置 `contract_id` 与 `user_id` 
```javascript
function handleclick() {
  const contract_id = $('#abc').val()
  const userId = $('#userId').val()
  signature.start({
    contract_id: contract_id,
    user_id: userId,
    success: function (res) {
      console.log(res)
    },
    error: function (err) {
      console.log(err)
    }
  })
}
const baseUrl = 'http://192.168.2.77:9998'   // 业务系统url
const signature = new GDsignature.manual({
  baseUrl: 'http://192.168.1.206:8000/api', // paas地址
  getToken() {
    return new Promise((reslove, reject) => {
      axios
        .post(`${baseUrl}/getToken`) // 根据实际需求做修改
        .then(res => {
        console.log(res)
        reslove(res.data.data.access_token)
      })
        .catch(err => {
        reject()
      })
    })
  },
  getSign(body) {
    return new Promise((reslove, reject) => {
      axios  // 地址根据实际需求做修改
        .post(`${baseUrl}/getSign`, body.data, {
        headers: {
          Authentication: body.token
        }
      })
        .then(res => {
        reslove(res.data.data.sign)
      })
        .catch(err => {
        console.log(err)
        reject()
      })
    })
  }
})
```
<a name="ITgF8"></a>
#### 3.3、自动签署 `new GDsignature.auto({})`

- html
```html
<div id="demo">
  <label for="预处理id" style="font-size:.24rem">预处理id：</label>
  <input id="preparid" placeholder="请输入预处理id" type="text" />
  <button onclick="handleclick()">签章</button>
</div>
```

<br />`new GDsignature.auto` <br />
<br />`start` 需要配置 `prepare_id` <br />

```javascript
function handleclick() {
  preparid = $('#preparid').val()
  signature.start({
    prepare_id: preparid, // 预处理id
    success: function (res) {
      console.log(res)
    },
    error: function (err) {
      console.log(err)
    },
  })
}
const baseUrl = 'http://192.168.2.77:9998'   // 业务系统url
const signature = new GDsignature.auto({
  baseUrl: 'http://192.168.1.206:8000/api', // paas地址
  getToken() {
    return new Promise((reslove, reject) => {
      axios
        .post(`${baseUrl}/getToken`) // 根据实际需求做修改
        .then(res => {
        console.log(res)
        reslove(res.data.data.access_token)
      })
        .catch(err => {
        reject()
      })
    })
  },
  getSign(body) {
    return new Promise((reslove, reject) => {
      axios  // 地址根据实际需求做修改
        .post(`${baseUrl}/getSign`, body.data, {
        headers: {
          Authentication: body.token
        }
      })
        .then(res => {
        reslove(res.data.data.sign)
      })
        .catch(err => {
        console.log(err)
        reject()
      })
    })
  }
})
```


<a name="wYHyD"></a>
#### 3.4、手写签章签署 + 拒签 `new GDsignature.appManual({})`

- html
```html
<div id="demo">
  <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>
</div>
```
`new GDsignature.appManual` 
```javascript
function handleclick() {
  let contract_id = $('#abc').val()
  let userId = $('#userId').val()
  signature.start({
    contract_id: contract_id,
    user_id: userId,
    //加入此回调，证明业务需要拒签，需要自己业务实现
    refuseSign: function(re) {
      // 使用此回调插件会显示拒签按钮，re里面的数据是用户ID跟合同ID，拒签实际操作逻辑还需业务系统自己去写
      console.log('re', re);
    },
    success: function (res) {
      console.log(res)
    },
    error: function (err) {
      console.log(err)
    }
  })
}
const baseUrl = 'http://192.168.2.77:9998'   // 业务系统url
const signature = new GDsignature.appManual({
  baseUrl: 'http://192.168.1.206:8000/api', // paas地址
  getToken() {
    return new Promise((reslove, reject) => {
      axios
        .post(`${baseUrl}/getToken`) // 根据实际需求做修改
        .then(res => {
        console.log(res)
        reslove(res.data.data.access_token)
      })
        .catch(err => {
        reject()
      })
    })
  },
  getSign(body) {
    return new Promise((reslove, reject) => {
      axios  // 地址根据实际需求做修改
        .post(`${baseUrl}/getSign`, body.data, {
        headers: {
          Authentication: body.token
        }
      })
        .then(res => {
        reslove(res.data.data.sign)
      })
        .catch(err => {
        console.log(err)
        reject()
      })
    })
  }
})
```
#### 3.5、签名域签章 `new GDsignature.signDomain({})`

- html
```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>
```
`new GDsignature.signDomain` <br />`start` 需要配置 `contract_id` 与 `user_id`
```javascript
function handleclick() {
  const contract_id = $('#abc').val()
  const userId = $('#userId').val()
  signature.start({
    contract_id: contract_id,
    user_id: userId,
    domain: [
            {x: 300, y: 170, page: 1, name: '财务章区域1'},
            {x: 500, y: 470, page: 1, name: '财务章区域2'},
            {x: 350, y: 180, page: 4, name: '人事章区域'}
          ],//需要填充的签名域坐标集合
    success: function (res) {
      console.log(res)
    },
    error: function (err) {
      console.log(err)
    }
  })
}
const baseUrl = 'http://192.168.2.77:9998'   // 业务系统url
const signature = new GDsignature.signDomain({
  baseUrl: 'http://192.168.1.206:8000/api', // paas地址

  getToken() {
    return new Promise((reslove, reject) => {
      axios
        .post(`${baseUrl}/getToken`) // 根据实际需求做修改
        .then(res => {
        console.log(res)
        reslove(res.data.data.access_token)
      })
        .catch(err => {
        reject()
      })
    })
  },
  getSign(body) {
    return new Promise((reslove, reject) => {
      axios  // 地址根据实际需求做修改
        .post(`${baseUrl}/getSign`, body.data, {
        headers: {
          Authentication: body.token
        }
      })
        .then(res => {
        reslove(res.data.data.sign)
      })
        .catch(err => {
        console.log(err)
        reject()
      })
    })
  }
})
```
#### 3.6、移动端h5坐标签章 `new GDsignature.AppPositionSign({})`

- html
```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>
```
`new GDsignature.AppPositionSign` <br />`start` 需要配置 `contract_id` 与 `user_id`
```javascript
function handleclick() {
  const contract_id = $('#abc').val()
  const userId = $('#userId').val()
  signature.start({
    contract_id: contract_id,
    user_id: userId,
    domain: [
            {x: 100, y: 170, page: 1},
            {x: 300, y: 470, page: 2},
            {x: 350, y: 180, page: 4}
          ],//需要填充的签名域坐标集合
    success: function (res) {
      console.log(res)
    },
    error: function (err) {
      console.log(err)
    }
  })
}
const baseUrl = 'http://192.168.2.77:9998'   // 业务系统url
const signature = new GDsignature.AppPositionSign({
  baseUrl: 'http://192.168.1.206:8000/api', // paas地址

  getToken() {
    return new Promise((reslove, reject) => {
      axios
        .post(`${baseUrl}/getToken`) // 根据实际需求做修改
        .then(res => {
        console.log(res)
        reslove(res.data.data.access_token)
      })
        .catch(err => {
        reject()
      })
    })
  },
  getSign(body) {
    return new Promise((reslove, reject) => {
      axios  // 地址根据实际需求做修改
        .post(`${baseUrl}/getSign`, body.data, {
        headers: {
          Authentication: body.token
        }
      })
        .then(res => {
        reslove(res.data.data.sign)
      })
        .catch(err => {
        console.log(err)
        reject()
      })
    })
  }
})
```
<a name="QNLnH"></a>
### 四、属性，回调函数
<a name="grkZZ"></a>
#### 4.1、baseUrl
`paas api` 接口<br />

<a name="yK7Vl"></a>
#### 4.2、auto_close
签章成功后是否自动关闭 默认值 `false` <br />

<a name="r4UFI"></a>
#### 4.3、showClose 
是否显示关闭按钮 默认是 `true` <br />

<a name="UyMQa"></a>
#### 4.4、VerifyCode
是否开启签章验证码校验 默认值 `true` <br />

<a name="DHd5w"></a>
#### 4.5、authSign 
是否使用认证服务签章 默认值 `false` <br />

<a name="WhWYV"></a>
#### 4.6、authBaseUrl
认证服务器地址， `authSign` 为 `true` 时必须传<br />

<a name="ldYox"></a>
#### 4.7、flowId
认证服务器需要的流程id， `authSign` 为 `true` 时必须传<br />

<a name="8fHSd"></a>
#### 4.8、success `Function(res)` 

- start()中使用
- 签署成功的回调函数



<a name="XnVZB"></a>
#### 4.9、error `Function(error)` 

- start()中使用
- 签署失败的回调函数


#### 4.9.1、onBack `Function()` 

- start()中使用
- 左上角返回的回调函数


<a name="uOIo4"></a>
#### 4.10、refuseSign `Function(data)` 

- start()中使用
- 拒签回调函数

<a name="WhWYV"></a>
#### 4.11、lastPageSign
是否最后页签章， `lastPageSign` 为 `true` 限定最后页签章，默认false<br />
#### 4.12、domain 签名域签章时使用
业务需要签名的区域集合，数组类型，结构如下：<br /> 
```javascript
{
  x:"",  // x 坐标  A4当前页面绝对坐标值  必填
  y:"",  // y 坐标  A4当前页面绝对坐标值  必填
  page:"",  // 页码值 待签署页码  必填
  size: "50*20"  // 签名尺寸  ***** 可设置签名的尺寸
}
```
#### 4.13、certType
证书类型配置: {person: 'event', company: 'common'}，默认{person: 'event', company: 'common'} 可选类型：event或common<br />
```javascript
  certType: {person: 'event', company: 'common'},//证书类型
```
#### 使用示例
```javascript
const signature = new GDsignature.AppPositionSign({
	baseUrl: 'https://open.aiosign.com/api', // paas-api接口 写死这个地址就好
  auto_close:true,// 签章成功后是否自动关闭签章 默认falase
  showClose: false, // 是否显示关闭按钮，默认为true
  VerifyCode:true, // 是否开启签章验证码校验，默认为true
  authSign: false, //使用认证服务器签章-默认为false
  authBaseUrl: 'http://192.168.2.199:8099/', //认证服务器地址-authSign为true时必须传
  flowId: '744918968410198016',
  getToken() {}, // 获取token
  getSign() {} // 获取sign
})

signature.start({
	...
  success: function(res) {
    console.log(res) // 签章成功回调
  },
  //加入此回调，证明业务需要拒签，需要自己业务实现
  refuseSign: function(re) {
    console.log('re', re);
  },
  error: function(err) {
    console.log(err) // 签章失败回调
  }
})
```
<a name="kAmPz"></a>
### 六、对接demo文件
[插件对接使用demo.rar](https://www.yuque.com/attachments/yuque/0/2020/rar/239504/1598510670833-9b0e20ac-0f89-4ee3-940b-6a4407667e0d.rar?_lake_card=%7B%22uid%22%3A%221598510672215-0%22%2C%22src%22%3A%22https%3A%2F%2Fwww.yuque.com%2Fattachments%2Fyuque%2F0%2F2020%2Frar%2F239504%2F1598510670833-9b0e20ac-0f89-4ee3-940b-6a4407667e0d.rar%22%2C%22name%22%3A%22%E6%8F%92%E4%BB%B6%E5%AF%B9%E6%8E%A5%E4%BD%BF%E7%94%A8demo.rar%22%2C%22size%22%3A4233%2C%22type%22%3A%22%22%2C%22ext%22%3A%22rar%22%2C%22progress%22%3A%7B%22percent%22%3A99%7D%2C%22status%22%3A%22done%22%2C%22percent%22%3A0%2C%22id%22%3A%22RGJzr%22%2C%22card%22%3A%22file%22%7D)