From 62c351d1f1d1a604f2788a1b51b92899e99e52c3 Mon Sep 17 00:00:00 2001 From: Panzihang <819652404@qq.com> Date: Mon, 13 Nov 2023 10:11:34 +0800 Subject: [PATCH] 11.13 --- components/head-info/head-info.vue | 5 +- manifest.json | 3 +- pages.json | 6 + pages/discharge/index.vue | 59 +- pages/discharge/instruct.vue | 723 ++++++++------- pages/discharge/instructDetails.vue | 2 + pages/index/index.vue | 60 +- pages/index/instruct.vue | 849 ++++++++---------- pages/index/instructDetails.vue | 2 + pages/login/index.vue | 6 +- pages/quality/details.vue | 363 ++++---- pages/quality/edit.vue | 52 +- pages/quality/index.vue | 189 ++-- pages/quality/sign.vue | 15 +- pages/quality/zsEdit.vue | 143 +-- pages/receipt/index.vue | 8 +- pages/receipt/sign.vue | 8 +- pages/shipWork/index.vue | 23 +- pages/shipWork/mixSign.vue | 5 +- pages/shipWork/shiftAdd.vue | 40 +- pages/shipWork/sign.vue | 6 +- pages/shipWork/untieAdd.vue | 3 - static/images/cjhIcon.png | Bin 0 -> 1382 bytes static/images/cpIcon.png | Bin 0 -> 1416 bytes static/images/editBtn.png | Bin 0 -> 1433 bytes static/images/zs2.jpg | Bin 0 -> 66658 bytes static/images/zsIcon.png | Bin 0 -> 1331 bytes static/images/zxIcon.png | Bin 0 -> 1567 bytes uni_modules/jp-signature.rar | Bin 0 -> 32427 bytes uni_modules/jp-signature/changelog.md | 6 + .../jp-signature-popup/jp-signature-popup.vue | 448 +++++++++ .../components/jp-signature/context.js | 118 +++ .../components/jp-signature/jp-signature.vue | 475 ++++++++++ .../components/jp-signature/props.js | 59 ++ .../components/jp-signature/render.js | 140 +++ .../components/jp-signature/signature.js | 1 + .../components/jp-signature/utils.js | 161 ++++ .../jp-signature/hybrid/html/index.html | 151 ++++ .../jp-signature/hybrid/html/signature.js | 1 + .../hybrid/html/uni.webview.1.5.3.js | 1 + uni_modules/jp-signature/package.json | 77 ++ .../jp-signature/pages/index/index.vue | 34 + uni_modules/jp-signature/readme.md | 129 +++ 43 files changed, 3190 insertions(+), 1181 deletions(-) create mode 100644 static/images/cjhIcon.png create mode 100644 static/images/cpIcon.png create mode 100644 static/images/editBtn.png create mode 100644 static/images/zs2.jpg create mode 100644 static/images/zsIcon.png create mode 100644 static/images/zxIcon.png create mode 100644 uni_modules/jp-signature.rar create mode 100644 uni_modules/jp-signature/changelog.md create mode 100644 uni_modules/jp-signature/components/jp-signature-popup/jp-signature-popup.vue create mode 100644 uni_modules/jp-signature/components/jp-signature/context.js create mode 100644 uni_modules/jp-signature/components/jp-signature/jp-signature.vue create mode 100644 uni_modules/jp-signature/components/jp-signature/props.js create mode 100644 uni_modules/jp-signature/components/jp-signature/render.js create mode 100644 uni_modules/jp-signature/components/jp-signature/signature.js create mode 100644 uni_modules/jp-signature/components/jp-signature/utils.js create mode 100644 uni_modules/jp-signature/hybrid/html/index.html create mode 100644 uni_modules/jp-signature/hybrid/html/signature.js create mode 100644 uni_modules/jp-signature/hybrid/html/uni.webview.1.5.3.js create mode 100644 uni_modules/jp-signature/package.json create mode 100644 uni_modules/jp-signature/pages/index/index.vue create mode 100644 uni_modules/jp-signature/readme.md diff --git a/components/head-info/head-info.vue b/components/head-info/head-info.vue index bf91c36..61cee82 100644 --- a/components/head-info/head-info.vue +++ b/components/head-info/head-info.vue @@ -406,7 +406,10 @@ border-radius: 1px; display: flex; justify-content: space-between; - position: relative; + position: fixed; + top: 0; + left: 0; + z-index: 999; .infoLeft { display: flex; diff --git a/manifest.json b/manifest.json index f8285f3..69957ab 100644 --- a/manifest.json +++ b/manifest.json @@ -19,7 +19,8 @@ }, /* 模块配置 */ "modules" : { - "SQLite" : {} + "SQLite" : {}, + "Camera" : {} }, /* 应用发布信息 */ "distribute" : { diff --git a/pages.json b/pages.json index 38e8f8d..59fa77e 100644 --- a/pages.json +++ b/pages.json @@ -261,6 +261,12 @@ "navigationBarTitleText": "质损详情" } }, + { + "path": "pages/quality/zsEdit", + "style": { + "navigationBarTitleText": "绘制残损图" + } + }, { "path": "pages/quality/sign", "style": { diff --git a/pages/discharge/index.vue b/pages/discharge/index.vue index 87e5cce..3a1b213 100644 --- a/pages/discharge/index.vue +++ b/pages/discharge/index.vue @@ -9,7 +9,8 @@ placeholder="请选择贸易类型" v-model="tradeName" @select="tradeSelect"> + placeholder="请选择船名/航次" v-model="vvyShip" @select="shipSelect" + @input="shipInput"> @@ -52,10 +53,10 @@ - + @@ -86,6 +87,7 @@ vvyId: "", shipId: "", shipName: '', + shipValue: "", shipList: [], // 分页 @@ -102,6 +104,10 @@ this.loginObj = uni.getStorageSync('loginObj') this.getShip() }, + onReachBottom() { + this.current++ + this.initData() + }, onBackPress(options) { // 触发返回就会调用此方法，这里实现的是禁用物理返回，顶部导航栏的自定义返回 uni.navigateBack 仍可使用 if (options.from == 'backbutton') { @@ -134,6 +140,11 @@ this.vvyId = e.vvyId this.vvyShip = e.vvyShip }, + // 选择船输入框 + shipInput(e) { + this.shipValue = e + this.getShip() + }, // 获取船舶 getShip() { if (this.tradeName == '外贸') { @@ -145,7 +156,7 @@ let key = "" let spmId = "" uni.request({ - url: `${this.$local}/api/shipInstructions/queryByKey?ieType=${ieType}&key=${ieType}&pamId=${this.portObj.portId}&spmId=${spmId}&tradeType=${this.tradeType}`, + url: `${this.$local}/api/shipInstructions/queryByKey?ieType=${ieType}&key=${this.shipValue}&pamId=${this.portObj.portId}&spmId=${spmId}&tradeType=${this.tradeType}`, header: { 'Content-Type': 'application/json', //自定义请求头信息 'Authorization': `Bearer ${this.loginObj.access_token}` @@ -182,7 +193,7 @@ method: 'GET', //请求方式，必须为大写 success: (res) => { this.total = res.data.data.total - this.itemList = res.data.data.records + this.itemList.push(...res.data.data.records) } }) }, @@ -206,18 +217,22 @@ \ No newline at end of file diff --git a/pages/discharge/instruct.vue b/pages/discharge/instruct.vue index 0960159..0cdfed0 100644 --- a/pages/discharge/instruct.vue +++ b/pages/discharge/instruct.vue @@ -2,24 +2,37 @@ + + + + + - - - + + + + + + + - - - - @@ -104,6 +117,10 @@ 备件数量： {{item.sparePartsCount}} + + 总指令发送人： + {{item.totalSendUser}} + @@ -115,12 +132,6 @@ {{item.totalSendTime}} - - - 总指令发送人： - {{item.totalSendUser}} - - 展开 @@ -174,18 +185,21 @@ - - - + + + + + + + + - - - - @@ -225,251 +239,119 @@ - - - + @@ -489,9 +371,6 @@ placeholder="车型" v-model="bvmName" @select="bvmSelect"> - - - - + @@ -86,6 +87,7 @@ vvyId: "", shipId: "", shipName: '', + shipValue: "", shipList: [], // 分页 @@ -97,6 +99,10 @@ portObj: {} } }, + onReachBottom() { + this.current++ + this.initData() + }, onLoad() { this.portObj = uni.getStorageSync('portObj') this.loginObj = uni.getStorageSync('loginObj') @@ -134,6 +140,11 @@ this.vvyId = e.vvyId this.vvyShip = e.vvyShip }, + // 选择船输入框 + shipInput(e) { + this.shipValue = e + this.getShip() + }, // 获取船舶 getShip() { if (this.tradeName == '外贸') { @@ -145,13 +156,14 @@ let key = "" let spmId = "" uni.request({ - url: `${this.$local}/api/shipInstructions/queryByKey?ieType=${ieType}&key=${ieType}&pamId=${this.portObj.portId}&spmId=${spmId}&tradeType=${this.tradeType}`, + url: `${this.$local}/api/shipInstructions/queryByKey?ieType=${ieType}&key=${this.shipValue}&pamId=${this.portObj.portId}&spmId=${spmId}&tradeType=${this.tradeType}`, header: { 'Content-Type': 'application/json', //自定义请求头信息 'Authorization': `Bearer ${this.loginObj.access_token}` }, method: 'GET', //请求方式，必须为大写 success: (res) => { + console.log(res) if (res.data.status == "200") { this.shipList = res.data.data this.shipList.forEach(v => { @@ -185,7 +197,7 @@ success: (res) => { console.log(res) this.total = res.data.data.total - this.itemList = res.data.data.records + this.itemList.push(...res.data.data.records) } }) }, @@ -214,18 +226,22 @@ \ No newline at end of file diff --git a/pages/index/instruct.vue b/pages/index/instruct.vue index cab60c5..4305fd6 100644 --- a/pages/index/instruct.vue +++ b/pages/index/instruct.vue @@ -1,27 +1,41 @@ - + @@ -176,20 +193,24 @@ - - - - + + + + + + + + + - - - - @@ -229,255 +250,125 @@ - - - + + @@ -485,19 +376,22 @@ - - - - + + + + + + + + - - - - + - - - - - - - - + PORT OF DESTINATION @@ -878,13 +762,13 @@ - + - + 装船要求 @@ -913,9 +797,6 @@ loginObj: {}, tabsValue: 0, // 0(总指令) 1(分指令) shipInfo: {}, // 船只数据 - - tabsValue2: 0, // 分指令状态 0(未发送) 1(已发送) - // 搜索框 mnfBl: '', // 提单号 mnfBlItem: {}, @@ -935,6 +816,16 @@ potName: '', potItem: {}, potList: [], + // 发送状态 + sendList: [{ + vale: "1", + text: "已发送" + }, { + vale: "0", + text: "未发送" + }], + sendValue: "", + sendText: "", // 指令下发弹窗负责人 directorId: "", directorValue: "", @@ -960,6 +851,7 @@ zTjType: true, zTjActive: -1, zTjList: {}, + shipDeck: "", optionValue: "", optionList: [{ @@ -986,9 +878,9 @@ placeTabs: 0, // 分页 - total: 0, - pageSize: 5, - current: 1, + // total: 0, + // pageSize: 4, + // current: 1, // 配载图港口 pzPotList: [], @@ -1001,7 +893,7 @@ computed: { itemSum() { return function(item, item2) { - let sum = ((item / item2) * 100).toFixed(2) + let sum = ((item / item2) * 100).toFixed(1) return sum }; }, @@ -1039,9 +931,10 @@ this.bvmName = '' this.potName = '' this.itemList = [] + this.sendValue = '' this.tabsValue = e.value - this.tabsValue2 = 0 this.zTjActive = -1 + this.shipDeck = "" if (e.value == 1 || e.value == 2) { this.loadOtherOrder() } else if (e.value == 0) { @@ -1054,15 +947,9 @@ this.directorList = [] this.getRoleId() }, - // 点击分指令tabs - changeTabs2(e) { - this.tabsValue2 = e.value - this.itemList = [] - this.loadOtherOrder() - }, // 点击搜索 search() { - if (this.tabsValue == 1) { + if (this.tabsValue == 1 || this.tabsValue == 2) { this.loadOtherOrder() } else if (this.tabsValue == 0) { this.loadSumOrder() @@ -1072,7 +959,7 @@ changePage(e) { console.log(e) this.current = e.current; - if (this.tabsValue == 1) { + if (this.tabsValue == 1 || this.tabsValue == 2) { this.loadOtherOrder() } else if (this.tabsValue == 0) { this.loadSumOrder() @@ -1090,10 +977,11 @@ // 点击总指令统计列表 clickTjList(item, index, type) { this.zTjActive = index + this.shipDeck = item.shipDeck if (type == 'zzl') { - this.loadSumOrder(item.shipDeck) + this.loadSumOrder() } else if (type == 'fzl') { - this.loadOtherOrder(item.shipDeck) + this.loadOtherOrder() } }, // 获取统计列表 @@ -1128,22 +1016,18 @@ }) }, // 获取总指令列表 - loadSumOrder(num) { - let shipDeck = "" - if (num != undefined) { - shipDeck = num - } + loadSumOrder() { uni.request({ - url: `${this.$local}/api/shipInstructions/page?vvyId=${this.shipInfo.vvyId}&brdId=${this.brdId}&mnfBl=${this.mnfBl}&potId=${this.potId}&bvmId=${this.bvmId}&shipDeck=${shipDeck}`, + url: `${this.$local}/api/shipInstructions/page?vvyId=${this.shipInfo.vvyId}&brdId=${this.brdId}&mnfBl=${this.mnfBl}&potId=${this.potId}&bvmId=${this.bvmId}&shipDeck=${this.shipDeck}`, + // &size=${this.pageSize}¤t=${this.current} header: { 'Content-Type': 'application/json', //自定义请求头信息 'Authorization': `Bearer ${this.loginObj.access_token}` }, method: 'GET', //请求方式，必须为大写 success: (res) => { - console.log(res) this.itemList = res.data.data.records - this.total = this.itemList.length + this.total = res.data.data.total this.itemList.forEach((v, index) => { // if (v.branchPlanStatus == 0) { this.zzlLwpIdList.push(v.lwpId) @@ -1154,18 +1038,14 @@ }) }, // 获取分指令列表 - loadOtherOrder(num) { - let shipDeck = "" - if (num != undefined) { - shipDeck = num - } + loadOtherOrder() { let teamFlag = "" if (this.tabsValue == 2) { teamFlag = true - this.tabsValue2 = 1 + this.sendValue = 1 } uni.request({ - url: `${this.$local}/api/shipInstructions/pageCommandForBranch?vvyId=${this.shipInfo.vvyId}&brdId=${this.brdId}&mnfBl=${this.mnfBl}&potId=${this.potId}&bvmId=${this.bvmId}&sendStatus=${this.tabsValue2}&size=${this.pageSize}¤t=${this.current}&shipDeck=${shipDeck}&teamFlag=${teamFlag}`, + url: `${this.$local}/api/shipInstructions/pageCommandForBranch?vvyId=${this.shipInfo.vvyId}&brdId=${this.brdId}&mnfBl=${this.mnfBl}&potId=${this.potId}&bvmId=${this.bvmId}&sendStatus=${this.sendValue}&shipDeck=${this.shipDeck}&teamFlag=${teamFlag}`, // &size=${this.pageSize}¤t=${this.current} header: { 'Content-Type': 'application/json', //自定义请求头信息 'Authorization': `Bearer ${this.loginObj.access_token}` @@ -1173,7 +1053,7 @@ method: 'GET', //请求方式，必须为大写 success: (res) => { this.itemList = res.data.data.records - this.total = this.itemList.length + this.total = res.data.data.total this.itemList.forEach((v, index) => { this.getBottomInfo(v.lwpId, index) }) @@ -1488,6 +1368,12 @@ zcCancel() { this.$refs.popup2.close() }, + // 选择发送状态 + sendSelect(e) { + this.sendText = e.text + this.sendValue = e.vale + this.loadOtherOrder() + }, // 获取品牌 getBrand() { uni.request({ @@ -1646,8 +1532,10 @@ color: #108ee9; } - .content { + .content2 { background-color: #F6F7F9; + position: relative; + overflow: hidden; /deep/.tab .tab-bar { height: 66px; @@ -1660,7 +1548,9 @@ line-height: 66px; font-size: 18px; color: #23262E; + font-weight: bold; font-family: PingFangSC-Semibold; + padding: 0 24px !important; } /deep/.tab .tab-bar-item.active { @@ -1685,20 +1575,58 @@ margin-top: 20px; } + /deep/.tab .tab-cont { + padding: 0; + } + .form { - display: flex; - justify-content: space-between; - padding: 10px; + background: #FAFAFA; + border-top: 1px solid #EEEEEE; + border-bottom: 1px solid #EEEEEE; .inputBox { + width: 100%; display: flex; + justify-content: space-between; + padding: 5px 10px; + + .leftInput { + width: 400px; + } + + /deep/.uni-easyinput { + width: 400px; + + /deep/.content-clear-icon { + padding-right: 16px; + } + } + + /deep/.is-input-border { + border-radius: 18.5px; + } + + .rightInput { + display: flex; + gap: 10px; + } } .input { - width: 120px; + width: 100px; height: 35px; line-height: 35px; - margin-left: 20px; + background: transparent; + border: none; + + /deep/.superwei-combox__input { + text-align: right; + padding-right: 6px; + } + + /deep/.superwei-combox__input-plac { + color: #000; + } } .btn { @@ -1711,6 +1639,10 @@ .buttonlist { padding: 10px; + position: absolute; + top: 5px; + right: 0px; + z-index: 999; .button { display: inline-block; @@ -1763,7 +1695,7 @@ } .tjList { - width: 256px; + width: 240px; background: #EBEDF1; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.10); float: left; @@ -1879,21 +1811,24 @@ } } + .itemBox { + height: 465px; + overflow: scroll; + } + .itemList { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0 12px; - max-height: 70vh; - overflow: scroll; .exp { - width: 100%; - // width: 49.5%; + // width: 100%; + width: 49.5%; margin-bottom: 15px; background: #FFFFFF; border-radius: 8px; - padding: 16px; + padding: 12px; padding-right: 0; position: relative; @@ -1906,6 +1841,7 @@ .row { display: flex; + padding: 5px 0; .title { display: flex; @@ -1916,14 +1852,15 @@ .titleImg { width: 18px; height: 18px; - margin-right: 10px; + margin-right: 5px; + margin-top: 2px; } } .schedule { padding: 5px 8px; background: #F7F7F7; - margin-left: 16px; + margin-left: 8px; display: flex; .text { @@ -1932,7 +1869,7 @@ } .progressBox { - width: 100px; + width: 50px; margin-top: 5px; margin: 5px 8px; } @@ -1992,13 +1929,10 @@ flex-direction: column; font-size: 14px; width: 48%; - margin-right: 1%; margin-top: 10px; border-right: 1px solid #eee; - - .col:first-child { - margin-bottom: 12px; - } + gap: 12px; + margin-left: 10px; text:first-child { color: #999999; @@ -2290,8 +2224,6 @@ } } - - .field { padding: 20px; background-color: #000; @@ -2490,22 +2422,22 @@ } .popupBox { - width: 500px; + width: 400px; background-color: #fff; - padding: 30px; + border-radius: 8px; .popupTitle { font-size: 20px; font-weight: bold; border-bottom: 1px solid #ccc; - padding-bottom: 20px; + padding: 15px 0; } .popupInfo { display: flex; margin-top: 20px; line-height: 35px; - padding: 30px 0; + margin-left: 20px; /deep/.superwei-combox { border: none; @@ -2523,6 +2455,8 @@ /deep/.uni-easyinput { margin-top: 20px; + width: 460px; + margin-left: 20px; } /deep/.uni-select__input-placeholder { @@ -2535,20 +2469,33 @@ .popupBtn { margin-top: 20px; - padding-top: 20px; - border-top: 1px solid #ccc; + padding: 14px 0; display: flex; - justify-content: flex-end; + justify-content: center; .btnList { display: flex; .button { - margin-left: 10px; + width: 125px; + height: 36px; + line-height: 36px; + margin-left: 15px; + border-radius: 4px; + } + + .button:first-child { + background-color: #fff; + border: 1px solid #0067CF; + color: #0067CF; } } } } + + .popupBox2 { + width: 500px; + } } \ No newline at end of file diff --git a/pages/index/instructDetails.vue b/pages/index/instructDetails.vue index de26ea1..3be26af 100644 --- a/pages/index/instructDetails.vue +++ b/pages/index/instructDetails.vue @@ -416,6 +416,8 @@ margin-bottom: 12px; display: flex; font-size: 14px; + height: 20px; + line-height: 20px; p { color: #999; diff --git a/pages/login/index.vue b/pages/login/index.vue index 9de383e..c9b0f0a 100644 --- a/pages/login/index.vue +++ b/pages/login/index.vue @@ -62,11 +62,11 @@ data() { return { // rtoswuhan1 - account: 'rtoswuhan1', + account: '', // q123456 - password: 'q123456', + password: '', // 登录类型 pad - mediaType: "app", + mediaType: "pad", // 登录失败提示 errorTitle: "", // 弹框状态 diff --git a/pages/quality/details.vue b/pages/quality/details.vue index 54ce474..a1bbcef 100644 --- a/pages/quality/details.vue +++ b/pages/quality/details.vue @@ -1,145 +1,155 @@ @@ -148,6 +158,7 @@ export default { data() { return { + title: "", ygqId: "", loginObj: {}, infoData: {}, @@ -186,6 +197,7 @@ console.log('接口返回------', res); if (res.statusCode == 200) { this.infoData = res.data.data + this.title = `${this.infoData.vinCode} - 质损详情` // 获取板车照片 this.infoData.boardCarPhotos.forEach(v => { this.initImg(v.filePath, "1") @@ -249,7 +261,8 @@ \ No newline at end of file diff --git a/uni_modules/jp-signature/components/jp-signature/context.js b/uni_modules/jp-signature/components/jp-signature/context.js new file mode 100644 index 0000000..4cf01f8 --- /dev/null +++ b/uni_modules/jp-signature/components/jp-signature/context.js @@ -0,0 +1,118 @@ +export const uniContext = (canvasId, context) => { + let ctx = uni.createCanvasContext(canvasId, context) + if (!ctx.uniDrawImage) { + ctx.uniDrawImage = ctx.drawImage + ctx.drawImage = (image, ...agrs) => { + ctx.uniDrawImage(image.src, ...agrs) + } + } + if (!ctx.getImageData) { + ctx.getImageData = (x, y, width, height) => { + return new Promise((resolve, reject) => { + // #ifdef MP || VUE2 + if (context.proxy) context = context.proxy + // #endif + uni.canvasGetImageData({ + canvasId, + x, + y, + width, + height, + success(res) { + resolve(res) + }, + fail(error) { + reject(error) + } + }, context) + }) + } + } + + return ctx +} + +class Image { + constructor() { + this.currentSrc = null + this.naturalHeight = 0 + this.naturalWidth = 0 + this.width = 0 + this.height = 0 + this.tagName = 'IMG' + } + set src(src) { + this.currentSrc = src + uni.getImageInfo({ + src, + success: (res) => { + this.naturalWidth = this.width = res.width + this.naturalHeight = this.height = res.height + this.onload() + }, + fail: () => { + this.onerror() + } + }) + } + get src() { + return this.currentSrc + } +} + +export const createImage = () => { + return new Image() +} +export function useCurrentPage() { + const pages = getCurrentPages(); + return pages[pages.length - 1]; +} +export const toDataURL = (canvasId, context, options = {}) => { + // #ifdef MP-QQ + // context = context.$scope + // #endif + // #ifdef MP-ALIPAY + context = '' + // #endif + return new Promise((resolve, reject) => { + let {canvas, width, height, destWidth = 0, destHeight = 0, x = 0, y = 0} = options + + // #ifdef MP-ALIPAY + const {pixelRatio} =uni.getSystemInfoSync() + if(!destWidth || !destHeight) { + destWidth = width * pixelRatio; + destHeight = height * pixelRatio; + width = destWidth; + height = destHeight; + x = x * pixelRatio + y = y * pixelRatio + } + // #endif + const params = { + ...options, + canvasId, + id: canvasId, + // #ifdef MP-ALIPAY + x, + y, + width, + height, + destWidth, + destHeight, + // #endif + canvas, + success: (res) => { + resolve(res.tempFilePath) + }, + fail: (err) => { + reject(err) + } + } + if(canvas && canvas.toTempFilePath) { + canvas.toTempFilePath(params) + } else { + uni.canvasToTempFilePath(params, context) + } + }) + +} \ No newline at end of file diff --git a/uni_modules/jp-signature/components/jp-signature/jp-signature.vue b/uni_modules/jp-signature/components/jp-signature/jp-signature.vue new file mode 100644 index 0000000..42f1c6a --- /dev/null +++ b/uni_modules/jp-signature/components/jp-signature/jp-signature.vue @@ -0,0 +1,475 @@ + + + + + + + \ No newline at end of file diff --git a/uni_modules/jp-signature/components/jp-signature/props.js b/uni_modules/jp-signature/components/jp-signature/props.js new file mode 100644 index 0000000..fa283b1 --- /dev/null +++ b/uni_modules/jp-signature/components/jp-signature/props.js @@ -0,0 +1,59 @@ +export default { + styles: String, + disableScroll: { + type: Boolean, + default: true + }, + type: { + type: String, + default: '2d' + }, + // 画笔颜色 + penColor: { + type: String, + default: 'black' + }, + penSize: { + type: Number, + default: 2 + }, + // 画板背景颜色 + background: String, + // 笔锋 + openSmooth: Boolean, + // 画笔最小值 + minLineWidth: { + type: Number, + default: 2 + }, + // 画笔最大值 + maxLineWidth: { + type: Number, + default: 6 + }, + // 画笔达到最小宽度所需最小速度(px/ms)，取值范围1.0-10.0，值越小，画笔越容易变细，笔锋效果会比较明显，可以自行调整查看效果，选出自己满意的值。 + minSpeed: { + type: Number, + default: 1.5 + }, + // 相邻两线宽度增(减)量最大百分比，取值范围1-100，为了达到笔锋效果，画笔宽度会随画笔速度而改变，如果相邻两线宽度差太大，过渡效果就会很突兀，使用maxWidthDiffRate限制宽度差，让过渡效果更自然。可以自行调整查看效果，选出自己满意的值。 + maxWidthDiffRate: { + type: Number, + default: 20 + }, + // 限制历史记录数，即最大可撤销数，传入0则关闭历史记录功能 + maxHistoryLength: { + type: Number, + default: 20 + }, + beforeDelay: { + type: Number, + default: 10 + }, + landscape: { + type: Boolean + }, + boundingBox: { + type: Boolean + } +} \ No newline at end of file diff --git a/uni_modules/jp-signature/components/jp-signature/render.js b/uni_modules/jp-signature/components/jp-signature/render.js new file mode 100644 index 0000000..9fc6382 --- /dev/null +++ b/uni_modules/jp-signature/components/jp-signature/render.js @@ -0,0 +1,140 @@ +// #ifdef APP-VUE +// import { Signature } from '@signature' +import { Signature } from './signature' +export default { + data() { + return { + canvasid: null, + signature: null, + observer: null, + options: {}, + saveCount: 0, + } + }, + mounted() { + this.$nextTick(this.init) + }, + methods: { + init() { + const el = this.$refs.limeSignature||this.$ownerInstance.$el; + const canvas = document.createElement('canvas') + canvas.style = 'width: 100%; height: 100%;' + el.appendChild(canvas) + this.signature = new Signature({ + el: canvas + }) + this.signature.pen.setOption(this.options) + const width = this.signature.canvas.get('width') + const height = this.signature.canvas.get('height') + + this.emit({ + changeSize: { + width, + height + } + }) + }, + undo(v) { + if (v && this.signature) { + this.signature.undo() + } + }, + clear(v) { + if (v && this.signature) { + this.signature.clear() + } + }, + save(param) { + let {fileType = 'png', quality = 1, n} = JSON.parse(param) + const type = `image/${fileType}`.replace(/jpg/, 'jpeg'); + if (n !== this.saveCount) { + this.saveCount = n; + const {background, landscape, boundingBox} = this.options + const flag = landscape || background || boundingBox + console.log('type', type) + console.log('flag', flag) + const image = this.signature.canvas.get('el').toDataURL(!flag && type, !flag && quality) + console.log('image', image.length) + if (flag) { + const canvas = document.createElement('canvas') + const pixelRatio = this.signature.canvas.get('pixelRatio') + let width = this.signature.canvas.get('width') + let height = this.signature.canvas.get('height') + let x = 0 + let y = 0 + + const next = () => { + const size = [width, height] + console.log('size width', width) + console.log('size height', height) + console.log('size pixelRatio', pixelRatio) + if(landscape) {size.reverse()} + canvas.width = size[0] * pixelRatio + canvas.height = size[1] * pixelRatio + const param = [x, y, width, height, 0 , 0, width, height].map(item => item * pixelRatio) + const context = canvas.getContext('2d') + // context.scale(pixelRatio, pixelRatio) + if (landscape) { + context.translate(0, width * pixelRatio) + context.rotate(-Math.PI / 2) + } + console.log('background', background) + if (background) { + context.fillStyle = background + context.fillRect(0, 0, width * pixelRatio, height * pixelRatio) + } + // param + context.drawImage(this.signature.canvas.get('el'), ...param) + this.emit({ + save: canvas.toDataURL(type, quality) + }) + canvas.remove() + } + if(boundingBox) { + const res = this.signature.getContentBoundingBox() + width = res.width + height = res.height + x = res.startX + y = res.startY + next() + } else { + next() + } + + } else { + this.emit({ + save: image + }) + } + } + }, + isEmpty(v) { + if (v && this.signature) { + const isEmpty = this.signature.isEmpty() + this.emit({ + isEmpty + }) + } + }, + emit(event) { + this.$ownerInstance.callMethod('onMessage', { + detail: { + data: [{ + event + }] + } + }) + }, + update(v) { + if (v) { + if (this.signature) { + this.options = v + this.signature.pen.setOption(v) + } else { + this.options = v + } + } + } + } +} +// #endif \ No newline at end of file diff --git a/uni_modules/jp-signature/components/jp-signature/signature.js b/uni_modules/jp-signature/components/jp-signature/signature.js new file mode 100644 index 0000000..580d71b --- /dev/null +++ b/uni_modules/jp-signature/components/jp-signature/signature.js @@ -0,0 +1 @@ +function t(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,i)}return n}function e(e){for(var n=1;arguments.length>n;n++){var i=null!=arguments[n]?arguments[n]:{};n%2?t(Object(i),!0).forEach((function(t){a(e,t,i[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):t(Object(i)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))}))}return e}function n(t){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},n(t)}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){for(var n=0;e.length>n;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function r(t,e,n){return e&&o(t.prototype,e),n&&o(t,n),Object.defineProperty(t,"prototype",{writable:!1}),t}function a(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function s(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&h(t,e)}function u(t){return u=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)},u(t)}function h(t,e){return h=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t},h(t,e)}function c(t,e){if(e&&("object"==typeof e||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t)}function l(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var n,i=u(t);if(e){var o=u(this).constructor;n=Reflect.construct(i,arguments,o)}else n=i.apply(this,arguments);return c(this,n)}}var v=function(t){var e=n(t);return null!==t&&"object"===e||"function"===e},f={}.toString,d=function(t,e){return f.call(t)==="[object "+e+"]"},y=function(t){return d(t,"String")},p=function(t){return d(t,"Number")},g=function(t){return d(t,"Function")},m=function(){function t(){i(this,t),this.__events=void 0,this.__events={}}return r(t,[{key:"on",value:function(t,e){if(t&&e){var n=this.__events[t]||[];n.push(e),this.__events[t]=n}}},{key:"emit",value:function(t,e){var n=this;if(v(t)&&(t=(e=t)&&e.type),t){var i=this.__events[t];i&&i.length&&i.forEach((function(t){t.call(n,e)}))}}},{key:"off",value:function(t,e){var n=this.__events,i=n[t];if(i&&i.length)if(e)for(var o=0,r=i.length;r>o;o++)i[o]===e&&(i.splice(o,1),o--);else delete n[t]}},{key:"getEvents",value:function(){return this.__events}}]),t}(),x=function(t){s(n,m);var e=l(n);function n(t,o){var r;return i(this,n),(r=e.call(this)).context=void 0,r.canvas=void 0,r.attrs=void 0,r.isCanvasElement=void 0,r.context=t,r.canvas=o.canvas||t.canvas||{width:o.width||0,height:o.height||0},r.attrs=o||{},r.isCanvasElement=!0,r}return r(n,[{key:"width",get:function(){return this.canvas.width},set:function(t){this.canvas.width=t}},{key:"height",get:function(){return this.canvas.height},set:function(t){this.canvas.height=t}},{key:"getContext",value:function(){return this.context}},{key:"getBoundingClientRect",value:function(){var t=this.attrs||{},e=t.top,n=t.right,i=t.width,o=t.height,r=t.left,a=t.bottom;return{top:void 0===e?0:e,width:void 0===i?0:i,right:void 0===n?0:n,height:void 0===o?0:o,bottom:void 0===a?0:a,left:void 0===r?0:r}}},{key:"setAttribute",value:function(t,e){this.attrs[t]=e}},{key:"addEventListener",value:function(t,e){this.on(t,e)}},{key:"removeEventListener",value:function(t,e){this.off(t,e)}},{key:"dispatchEvent",value:function(t,e){this.emit(t,e)}}]),n}();var w=function(t,e){return t?function(t){if(!t)return!1;if(1!==t.nodeType||!t.nodeName||"canvas"!==t.nodeName.toLowerCase())return!1;var e=!1;try{t.addEventListener("eventTest",(function(){e=!0})),t.dispatchEvent(new Event("eventTest"))}catch(t){e=!1}return e}(t.canvas)?t.canvas:new x(t,e):null};function b(t,e){try{return t.currentStyle?t.currentStyle[e]:document.defaultView&&document.defaultView.getComputedStyle(t,null).getPropertyValue(e)}catch(t){return{width:300,height:150}[e]}}function k(t,e){var n=e.get("el");if(!n)return t;var i=n.getBoundingClientRect(),o=i.top,r=void 0===o?0:o,a=i.left,s=void 0===a?0:a,u=parseFloat(b(n,"padding-left"))||0,h=parseFloat(b(n,"padding-top"))||0;return{x:t.x-s-u,y:t.y-r-h}}function _(t,e){var n=e.get("landscape");if(!n)return t;if(g(n))return n(t,e);var i=e.get("height");return{x:t.y,y:i-t.x}}var E=function(t,e){var n=t.touches;if(!n||!n.length)return[_(k({x:t.clientX,y:t.clientY},e),e)];n.length||(n=t.changedTouches||[]);for(var i=[],o=0,r=n.length;r>o;o++){var a=n[o],s=a.x,u=a.y,h=a.clientX,c=a.clientY,l=void 0;l=p(s)||p(u)?{x:s,y:u}:k({x:h,y:c},e),i.push(_(l,e))}return i},L=function(t,e){var n=e.x-t.x,i=e.y-t.y;return Math.abs(n)>Math.abs(i)?n>0?"right":"left":i>0?"down":"up"},M=function(t,e){var n=Math.abs(e.x-t.x),i=Math.abs(e.y-t.y);return Math.sqrt(n*n+i*i)},P=function(){function t(e){var n=this,o=e.canvas,r=e.el;i(this,t),this.processEvent=void 0,this.canvas=void 0,this.startTime=0,this.endTime=0,this.startPoints=null,this.startDistance=0,this.center=null,this.pressTimeout=void 0,this.eventType=null,this.direction=null,this.lastMoveTime=0,this.prevMovePoints=null,this.prevMoveTime=0,this.lastMovePoints=null,this.pinch=!1,this._click=function(t){var e=E(t,n.canvas);t.points=e,n.emitEvent("click",t)},this._start=function(t){var e,i,o=E(t,n.canvas);o&&(t.points=o,n.emitEvent("touchstart",t),n.reset(),n.startTime=Date.now(),n.startPoints=o,o.length>1?(n.startDistance=M(o[0],o[1]),n.center={x:(e=o[0]).x+((i=o[1]).x-e.x)/2,y:e.y+(i.y-e.y)/2}):n.pressTimeout=setTimeout((function(){var e="press",i="none";t.direction=i,n.emitStart(e,t),n.emitEvent(e,t),n.eventType=e,n.direction=i}),250))},this._move=function(t){var e=E(t,n.canvas);if(e){t.points=e,n.emitEvent("touchmove",t);var i=n.startPoints;if(i)if(e.length>1){var o=n.startDistance,r=M(e[0],e[1]);t.zoom=r/o,t.center=n.center,n.emitStart("pinch",t),n.emitEvent("pinch",t)}else{var a=e[0].x-i[0].x,s=e[0].y-i[0].y,u=n.direction||L(i[0],e[0]);n.direction=u;var h=n.getEventType(e);t.direction=u,t.deltaX=a,t.deltaY=s,n.emitStart(h,t),n.emitEvent(h,t);var c=n.lastMoveTime,l=Date.now();l-c>0&&(n.prevMoveTime=c,n.prevMovePoints=n.lastMovePoints,n.lastMoveTime=l,n.lastMovePoints=e)}}},this._end=function(t){var e=E(t,n.canvas);t.points=e,n.emitEnd(t),n.emitEvent("touchend",t);var i=n.lastMoveTime;if(100>Date.now()-i){var o=i-(n.prevMoveTime||n.startTime);if(o>0){var r=n.prevMovePoints||n.startPoints,a=n.lastMovePoints;if(!r||!a)return;var s=M(r[0],a[0])/o;s>.3&&(t.velocity=s,t.direction=L(r[0],a[0]),n.emitEvent("swipe",t))}}n.reset();var u=t.touches;u&&u.length>0&&n._start(t)},this._cancel=function(t){n.emitEvent("touchcancel",t),n.reset()},this.canvas=o,this.delegateEvent(r),this.processEvent={}}return r(t,[{key:"delegateEvent",value:function(t){t.addEventListener("click",this._click),t.addEventListener("touchstart",this._start),t.addEventListener("touchmove",this._move),t.addEventListener("touchend",this._end),t.addEventListener("touchcancel",this._cancel)}},{key:"emitEvent",value:function(t,e){this.canvas.emit(t,e)}},{key:"getEventType",value:function(t){var e,n=this.eventType,i=this.startTime,o=this.startPoints;if(n)return n;var r=this.canvas.__events.pan;if(r&&r.length){var a=Date.now();if(!o)return;e=a-i>250&&10>M(o[0],t[0])?"press":"pan"}else e="press";return this.eventType=e,e}},{key:"enable",value:function(t){this.processEvent[t]=!0}},{key:"isProcess",value:function(t){return this.processEvent[t]}},{key:"emitStart",value:function(t,e){this.isProcess(t)||(this.enable(t),this.emitEvent("".concat(t,"start"),e))}},{key:"emitEnd",value:function(t){}},{key:"clearPressTimeout",value:function(){this.pressTimeout&&(clearTimeout(this.pressTimeout),this.pressTimeout=null)}},{key:"reset",value:function(){this.clearPressTimeout(),this.startTime=0,this.startPoints=null,this.startDistance=0,this.direction=null,this.eventType=null,this.pinch=!1,this.prevMoveTime=0,this.prevMovePoints=null,this.lastMoveTime=0,this.lastMovePoints=null}}]),t}(),T=function(t){s(o,m);var e=l(o);function o(t){var n;i(this,o),(n=e.call(this))._attrs={},n._isWindow=void 0,n._attrs=Object.assign({},t),n._isWindow="undefined"!=typeof window,n._initPixelRatio(),n._initCanvas();return["createImage","toDataURL","requestAnimationFrame"].forEach((function(e){n._initAttrs(e,t.canvas||n.get("el"))})),n}return r(o,[{key:"get",value:function(t){return this._attrs[t]}},{key:"set",value:function(t,e){this._attrs[t]=e}},{key:"_initAttrs",value:function(t,e){var n=this;if(!this.get(t)){this.set(t,(function(){return e[t]?e[t].apply(e,arguments):n._isWindow?window[t]?(i=window)[t].apply(i,arguments):"createImage"==t?new Image:null:void 0;var i}))}}},{key:"_initCanvas",value:function(){var t,e,n=this.get("el"),i=this.get("context");if(!n&&!i)throw Error("请指定 id、el 或 context!");t=n?y(n)?(e=n)?document.getElementById(e):null:n:w(i,this._attrs),i&&t&&!t.getContext&&(t.getContext=function(){return i});var o=this.get("width")||function(t){var e=b(t,"width");return"auto"===e&&(e=t.offsetWidth),parseFloat(e)}(t)||t.width,r=this.get("height")||function(t){var e=b(t,"height");return"auto"===e&&(e=t.offsetHeight),parseFloat(e)}(t)||t.height;this.set("canvas",this),this.set("el",t),this.set("context",i||t.getContext("2d")),this.changeSize(o,r);var a=new P({canvas:this,el:t,parent:this.get("parent")});this.set("eventController",a)}},{key:"_initPixelRatio",value:function(){this.get("pixelRatio")||this.set("pixelRatio",window&&window.devicePixelRatio||1)}},{key:"changeSize",value:function(t,e){var i,o=this.get("pixelRatio"),r=this.get("el");(r.style&&(r.style.width=t+"px",r.style.height=e+"px"),(i=r)&&"object"===n(i)&&(1===i.nodeType&&i.nodeName||i.isCanvasElement))&&(r.width=t*o,r.height=e*o,1!==o&&this.get("context").scale(o,o));this.set("width",t),this.set("height",e)}},{key:"destroy",value:function(){if(!this.get("destroyed")){var t=this.get("el");t.width=0,t.height=0,this.clear(),this._attrs={},this.set("destroyed",!0)}}},{key:"clear",value:function(){}},{key:"isDestroyed",value:function(){return this.get("destroyed")}}]),o}();var S={penColor:"black",backgroundColor:"",openSmooth:!0,penSize:2,minLineWidth:2,maxLineWidth:6,minSpeed:1.5,maxWidthDiffRate:20,maxHistoryLength:20},D=null,O=function(){function t(e){var n=this;i(this,t),this.canAddHistory=!0,this.points=[],this.historyList=[],this.canvas=void 0,this._isEmpty=!0,this.active=!1,this.getLineWidth=function(t){var e=n.get("options"),i=e.minSpeed,o=e.minLineWidth,r=n.getMaxLineWidth();return Math.min(Math.max(r-(r-o)*t/Math.max(Math.min(i,10),1),o),r)},this.drawTrapezoid=function(t,e,i,o){var r=n.get("context");r.beginPath(),r.moveTo(Number(t.x.toFixed(1)),Number(t.y.toFixed(1))),r.lineTo(Number(e.x.toFixed(1)),Number(e.y.toFixed(1))),r.lineTo(Number(i.x.toFixed(1)),Number(i.y.toFixed(1))),r.lineTo(Number(o.x.toFixed(1)),Number(o.y.toFixed(1))),r.fillStyle=n.get("options").penColor,r.fill(),r.draw&&r.draw(!0)},this.drawNoSmoothLine=function(t,e){e.lastX=t.x+.5*(e.x-t.x),e.lastY=t.y+.5*(e.y-t.y),"number"==typeof t.lastX&&n.drawCurveLine(t.lastX,t.lastY,t.x,t.y,e.lastX,e.lastY,n.getMaxLineWidth())},this.drawCurveLine=function(t,e,i,o,r,a,s){s=Number(s.toFixed(1));var u=n.get("context");u.lineWidth=s,u.beginPath(),u.moveTo(Number(t.toFixed(1)),Number(e.toFixed(1))),u.quadraticCurveTo(Number(i.toFixed(1)),Number(o.toFixed(1)),Number(r.toFixed(1)),Number(a.toFixed(1))),u.stroke(),u.draw&&u.draw(!0)},this.getRadianData=function(t,e,n,i){var o=n-t,r=i-e;if(0===o)return{val:0,pos:-1};if(0===r)return{val:0,pos:1};var a=Math.abs(Math.atan(r/o));return n>t&&e>i||t>n&&i>e?{val:a,pos:1}:{val:a,pos:-1}},this.getRadianPoints=function(t,e,n,i){if(0===t.val)return 1===t.pos?[{x:e,y:n+i},{x:e,y:n-i}]:[{y:n,x:e+i},{y:n,x:e-i}];var o=Math.sin(t.val)*i,r=Math.cos(t.val)*i;return 1===t.pos?[{x:e+o,y:n+r},{x:e-o,y:n-r}]:[{x:e+o,y:n-r},{x:e-o,y:n+r}]},this.drawSmoothLine=function(t,e){var i=e.x-t.x,o=e.y-t.y;if(Math.abs(i)+Math.abs(o)>2?(e.lastX1=t.x+.3*i,e.lastY1=t.y+.3*o,e.lastX2=t.x+.7*i,e.lastY2=t.y+.7*o):(e.lastX1=e.lastX2=t.x+.5*i,e.lastY1=e.lastY2=t.y+.5*o),e.perLineWidth=(t.lineWidth+e.lineWidth)/2,"number"==typeof t.lastX1){if(n.drawCurveLine(t.lastX2,t.lastY2,t.x,t.y,e.lastX1,e.lastY1,e.perLineWidth),t.isFirstPoint)return;if(t.lastX1===t.lastX2&&t.lastY1===t.lastY2)return;var r=n.getRadianData(t.lastX1,t.lastY1,t.lastX2,t.lastY2),a=n.getRadianPoints(r,t.lastX1,t.lastY1,t.perLineWidth/2),s=n.getRadianPoints(r,t.lastX2,t.lastY2,e.perLineWidth/2);n.drawTrapezoid(a[0],s[0],s[1],a[1])}else e.isFirstPoint=!0},this.addHistory=function(){var t=n.get("options").maxHistoryLength;if(t&&n.canAddHistory)if(n.canAddHistory=!1,n.get("createImage")){var e=null;e=n.get("createImage")();var i=n.get("toDataURL")&&n.get("toDataURL")();y(i)?e.src=i:i.then((function(t){e.src=t})),e.onload=function(){var i=D;D=e,n.historyList.push(i),n.historyList=n.historyList.slice(-t)}}else n.historyList.length++},this.drawByImage=function(t){var e=n.get("context"),i=n.get("width"),o=n.get("height");e.clearRect(0,0,i,o);try{t&&e.drawImage(t,0,0,i,o),e.draw&&e.draw(!0)}catch(t){n.historyList.length=0}},this.isEmpty=function(){return n.get("options").maxHistoryLength>0?0===n.historyList.length:n._isEmpty},this.clear=function(){var t=n.get("context");t.clearRect(0,0,n.get("width"),n.get("height")),t.draw&&t.draw(),n._isEmpty=!0,D=null,n.historyList.length=0},this.undo=function(){if(0===n.get("options").maxHistoryLength&&n.clear(),n.get("createImage")&&n.historyList.length){var t=n.historyList.splice(-1)[0];n.drawByImage(t),0===n.historyList.length&&n.clear()}},this.canvas=e,this.canvas.set("pen",S),this.init()}return r(t,[{key:"getOption",value:function(){}},{key:"setOption",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e({},t),i=n.maxLineWidth;if(i&&t.penSize&&i==S.maxLineWidth){var o=Math.max(i,t.penSize);n.maxLineWidth=o}this.canvas.set("pen",Object.assign({},S,n))}},{key:"get",value:function(t){return this.canvas.get("options"==t?"pen":t)}},{key:"init",value:function(){var t=this;this.get("context").lineCap="round",this.canvas.on("touchstart",(function(e){return t.onDrawStart(e)})),this.canvas.on("touchmove",(function(e){return t.onDrawMove(e)})),this.canvas.on("touchend",(function(e){return t.onDrawEnd(e)}))}},{key:"drawBackground",value:function(){var t=this.get("context"),e=this.get("width"),n=this.get("height"),i=this.get("options"),o=i.backgroundColor,r=i.backgroundImage;o&&(t.fillStyle=o,t.fillRect(0,0,e,n),t.draw&&t.draw(!0)),r&&this.drawByImage(r)}},{key:"getContentBoundingBox",value:function(t){var e=this.get("pixelRatio"),n=this.get("width"),i=this.get("height"),o=this.get("el"),r="CANVAS"===o.nodeName,a=r?n:o.width,s=r?i:o.height;e=r?1:e;var u=function(n){for(var i=a,o=s,r=0,u=0,h=0;n.length>h;h+=4){if(n[h+3]>0){var c=h/4%a,l=Math.floor(h/4/a);i=Math.min(i,c),o=Math.min(o,l),r=Math.max(r,c),u=Math.max(u,l)}}var v={width:(r-i+1)/e,height:(u-o+1)/e,startX:i/e,startY:o/e};return t&&t(v),v};if("CANVAS"===o.nodeName){var h=document.createElement("canvas");h.width=n,h.height=i;var c=h.getContext("2d");c.drawImage(o,0,0,n,i);var l=c.getImageData(0,0,n,i).data;return u(l)}var f,d=this.get("context").getImageData(0,0,a,s);return v(f=d)&&g(f.then)&&g(f.catch)?(d.then((function(t){return u(t.data)})),null):u(d.data)}},{key:"remove",value:function(){var t=this;this.canvas.off("touchstart",(function(e){return t.onDrawStart(e)})),this.canvas.off("touchmove",(function(e){return t.onDrawMove(e)})),this.canvas.off("touchend",(function(e){return t.onDrawEnd(e)}))}},{key:"disableScroll",value:function(t){t.preventDefault&&this.get("options").disableScroll&&t.preventDefault()}},{key:"onDrawStart",value:function(t){this.disableScroll(t);var e=t.points;if(this.active){this.canAddHistory=!0,this.get("context").strokeStyle=this.get("options").penColor;var n=e[0];this.initPoint(n.x,n.y)}}},{key:"onDrawMove",value:function(t){if(this.disableScroll(t),this.active){var e=t.points[0];this.initPoint(e.x,e.y),this.onDraw()}}},{key:"onDrawEnd",value:function(t){this.active&&(this.addHistory(),this.canAddHistory=!0,this.points=[])}},{key:"onDraw",value:function(){var t=this,e=this.get("context");if(this.points.length>=2){e.lineWidth=this.get("options").penSize||2;var n=this.points.slice(-1)[0],i=this.points.slice(-2,-1)[0],o=function(){t._isEmpty=!1,t.get("options").openSmooth?t.drawSmoothLine(i,n):t.drawNoSmoothLine(i,n)},r=this.get("el").canvas;r&&r.requestAnimationFrame?r.requestAnimationFrame((function(){return o()})):"function"==typeof requestAnimationFrame?requestAnimationFrame((function(){return o()})):o()}}},{key:"getMaxLineWidth",value:function(){var t=this.get("options");return Math.min(t.penSize,t.maxLineWidth)}},{key:"initPoint",value:function(t,e){var n={x:t,y:e,t:Date.now()},i=this.points.slice(-1)[0];if(!i||i.t!==n.t&&(i.x!==t||i.y!==e)){if(this.get("options").openSmooth&&i){var o=this.points.slice(-2,-1)[0];if(n.distance=Math.sqrt(Math.pow(n.x-i.x,2)+Math.pow(n.y-i.y,2)),n.speed=n.distance/(n.t-i.t||.1),n.lineWidth=this.getLineWidth(n.speed),o&&o.lineWidth&&i.lineWidth){var r=(n.lineWidth-i.lineWidth)/i.lineWidth,a=this.get("options").maxWidthDiffRate/100;if(a=a>1?1:.01>a?.01:a,Math.abs(r)>a)n.lineWidth=i.lineWidth*(1+(r>0?a:-a))}}this.points.push(n),this.points=this.points.slice(-3)}}}]),t}(),W=function(){function t(e){i(this,t),this.canvas=void 0,this._ee=void 0,this.pen=void 0;var n=new T(e);n.set("parent",this),this.canvas=n,this._ee=new m,this.pen=new O(n),this.init()}return r(t,[{key:"init",value:function(){this.pen.active=!0}},{key:"destroy",value:function(){this.canvas.destroy()}},{key:"clear",value:function(){this.pen.clear()}},{key:"undo",value:function(){this.pen.undo()}},{key:"save",value:function(){}},{key:"getContentBoundingBox",value:function(t){return this.pen.getContentBoundingBox(t)}},{key:"isEmpty",value:function(){return this.pen.isEmpty()}},{key:"on",value:function(t,e){this._ee.on(t,e)}},{key:"emit",value:function(t,e){this._ee.emit(t,e)}},{key:"off",value:function(t,e){this._ee.off(t,e)}}]),t}();export default W;export{W as Signature}; diff --git a/uni_modules/jp-signature/components/jp-signature/utils.js b/uni_modules/jp-signature/components/jp-signature/utils.js new file mode 100644 index 0000000..499ef6d --- /dev/null +++ b/uni_modules/jp-signature/components/jp-signature/utils.js @@ -0,0 +1,161 @@ +export function compareVersion(v1, v2) { + v1 = v1.split('.') + v2 = v2.split('.') + const len = Math.max(v1.length, v2.length) + while (v1.length < len) { + v1.push('0') + } + while (v2.length < len) { + v2.push('0') + } + for (let i = 0; i < len; i++) { + const num1 = parseInt(v1[i], 10) + const num2 = parseInt(v2[i], 10) + + if (num1 > num2) { + return 1 + } else if (num1 < num2) { + return -1 + } + } + return 0 +} +let {platform, SDKVersion} = uni.getSystemInfoSync() +function gte(version) { + // #ifdef MP-ALIPAY + SDKVersion = my.SDKVersion + // #endif + return compareVersion(SDKVersion, version) >= 0; +} + +export const isPC = /windows|mac/.test(platform) +export function canIUseCanvas2d() { + // #ifdef MP-WEIXIN + return gte('2.9.0'); + // #endif + // #ifdef MP-ALIPAY + return gte('2.7.0'); + // #endif + // #ifdef MP-TOUTIAO + return gte('1.78.0'); + // #endif + return false +} + + +export const wrapEvent = (e) => { + if (!e) return; + if (!e.preventDefault) { + e.preventDefault = function() {}; + } + return e; +} + +export const requestAnimationFrame = (cb) => { + setTimeout(cb, 30) +} + +// #ifdef MP +export const prefix = () => { + // #ifdef MP-TOUTIAO + return tt + // #endif + // #ifdef MP-WEIXIN + return wx + // #endif + // #ifdef MP-BAIDU + return swan + // #endif + // #ifdef MP-ALIPAY + return my + // #endif + // #ifdef MP-QQ + return qq + // #endif + // #ifdef MP-360 + return qh + // #endif +} +// #endif + +/** + * base64转路径 + * @param {Object} base64 + */ +export function base64ToPath(base64) { + const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64) || []; + return new Promise((resolve, reject) => { + // #ifdef MP + const p = prefix() + const fs = p.getFileSystemManager() + //自定义文件名 + if (!format) { + reject(new Error('ERROR_BASE64SRC_PARSE')) + } + const time = new Date().getTime(); + const filePath = `${p.env.USER_DATA_PATH}/${time}.${format}`; + fs.writeFile({ + filePath, + data: base64.split(',')[1], + encoding: 'base64', + success() { + resolve(filePath) + }, + fail(err) { + reject(err) + } + }) + // #endif + // #ifdef APP-PLUS + const bitmap = new plus.nativeObj.Bitmap('bitmap' + Date.now()) + bitmap.loadBase64Data(base64, () => { + if (!format) { + reject(new Error('ERROR_BASE64SRC_PARSE')) + } + const time = new Date().getTime(); + const filePath = `_doc/uniapp_temp/${time}.${format}` + bitmap.save(filePath, {}, + () => { + bitmap.clear() + resolve(filePath) + }, + (error) => { + bitmap.clear() + reject(error) + }) + }, (error) => { + bitmap.clear() + reject(error) + }) + // #endif + }) +} + + +export function sleep(delay) { + return new Promise(resolve => setTimeout(resolve, delay)) +} + +export function getRect(selector, options = {}) { + const typeDefault = 'boundingClientRect' + const { context, type = typeDefault} = options + return new Promise((resolve, reject) => { + const dom = uni.createSelectorQuery().in(context).select(selector); + const result = (rect) => { + if(rect) { + resolve(rect) + } else { + reject() + } + } + if(type == typeDefault) { + dom[type](result).exec() + } else { + dom[type]({ + node: true, + size: true, + rect: true + }, result).exec() + } + }); +}; \ No newline at end of file diff --git a/uni_modules/jp-signature/hybrid/html/index.html b/uni_modules/jp-signature/hybrid/html/index.html new file mode 100644 index 0000000..1a2f2d9 --- /dev/null +++ b/uni_modules/jp-signature/hybrid/html/index.html @@ -0,0 +1,151 @@ + + + + + + + + + + + + + + + + + diff --git a/uni_modules/jp-signature/hybrid/html/signature.js b/uni_modules/jp-signature/hybrid/html/signature.js new file mode 100644 index 0000000..1020ac1 --- /dev/null +++ b/uni_modules/jp-signature/hybrid/html/signature.js @@ -0,0 +1 @@ +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Signature={})}(this,(function(t){"use strict";function e(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,i)}return n}function n(t){for(var n=1;arguments.length>n;n++){var i=null!=arguments[n]?arguments[n]:{};n%2?e(Object(i),!0).forEach((function(e){s(t,e,i[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(i)):e(Object(i)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(i,e))}))}return t}function i(t){return i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},i(t)}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function r(t,e){for(var n=0;e.length>n;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function a(t,e,n){return e&&r(t.prototype,e),n&&r(t,n),Object.defineProperty(t,"prototype",{writable:!1}),t}function s(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function u(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&c(t,e)}function h(t){return h=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)},h(t)}function c(t,e){return c=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t},c(t,e)}function l(t,e){if(e&&("object"==typeof e||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t)}function v(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var n,i=h(t);if(e){var o=h(this).constructor;n=Reflect.construct(i,arguments,o)}else n=i.apply(this,arguments);return l(this,n)}}var f=function(t){var e=i(t);return null!==t&&"object"===e||"function"===e},d={}.toString,y=function(t,e){return d.call(t)==="[object "+e+"]"},p=function(t){return y(t,"String")},g=function(t){return y(t,"Number")},m=function(t){return y(t,"Function")},x=function(){function t(){o(this,t),this.__events=void 0,this.__events={}}return a(t,[{key:"on",value:function(t,e){if(t&&e){var n=this.__events[t]||[];n.push(e),this.__events[t]=n}}},{key:"emit",value:function(t,e){var n=this;if(f(t)&&(t=(e=t)&&e.type),t){var i=this.__events[t];i&&i.length&&i.forEach((function(t){t.call(n,e)}))}}},{key:"off",value:function(t,e){var n=this.__events,i=n[t];if(i&&i.length)if(e)for(var o=0,r=i.length;r>o;o++)i[o]===e&&(i.splice(o,1),o--);else delete n[t]}},{key:"getEvents",value:function(){return this.__events}}]),t}(),w=function(t){u(n,t);var e=v(n);function n(t,i){var r;return o(this,n),(r=e.call(this)).context=void 0,r.canvas=void 0,r.attrs=void 0,r.isCanvasElement=void 0,r.context=t,r.canvas=i.canvas||t.canvas||{width:i.width||0,height:i.height||0},r.attrs=i||{},r.isCanvasElement=!0,r}return a(n,[{key:"width",get:function(){return this.canvas.width},set:function(t){this.canvas.width=t}},{key:"height",get:function(){return this.canvas.height},set:function(t){this.canvas.height=t}},{key:"getContext",value:function(){return this.context}},{key:"getBoundingClientRect",value:function(){var t=this.attrs||{},e=t.top,n=t.right,i=t.width,o=t.height,r=t.left,a=t.bottom;return{top:void 0===e?0:e,width:void 0===i?0:i,right:void 0===n?0:n,height:void 0===o?0:o,bottom:void 0===a?0:a,left:void 0===r?0:r}}},{key:"setAttribute",value:function(t,e){this.attrs[t]=e}},{key:"addEventListener",value:function(t,e){this.on(t,e)}},{key:"removeEventListener",value:function(t,e){this.off(t,e)}},{key:"dispatchEvent",value:function(t,e){this.emit(t,e)}}]),n}(x);var b=function(t,e){return t?function(t){if(!t)return!1;if(1!==t.nodeType||!t.nodeName||"canvas"!==t.nodeName.toLowerCase())return!1;var e=!1;try{t.addEventListener("eventTest",(function(){e=!0})),t.dispatchEvent(new Event("eventTest"))}catch(t){e=!1}return e}(t.canvas)?t.canvas:new w(t,e):null};function k(t,e){try{return t.currentStyle?t.currentStyle[e]:document.defaultView&&document.defaultView.getComputedStyle(t,null).getPropertyValue(e)}catch(t){return{width:300,height:150}[e]}}function _(t,e){var n=e.get("el");if(!n)return t;var i=n.getBoundingClientRect(),o=i.top,r=void 0===o?0:o,a=i.left,s=void 0===a?0:a,u=parseFloat(k(n,"padding-left"))||0,h=parseFloat(k(n,"padding-top"))||0;return{x:t.x-s-u,y:t.y-r-h}}function E(t,e){var n=e.get("landscape");if(!n)return t;if(m(n))return n(t,e);var i=e.get("height");return{x:t.y,y:i-t.x}}var M=function(t,e){var n=t.touches;if(!n||!n.length)return[E(_({x:t.clientX,y:t.clientY},e),e)];n.length||(n=t.changedTouches||[]);for(var i=[],o=0,r=n.length;r>o;o++){var a=n[o],s=a.x,u=a.y,h=a.clientX,c=a.clientY,l=void 0;l=g(s)||g(u)?{x:s,y:u}:_({x:h,y:c},e),i.push(E(l,e))}return i},P=function(t,e){var n=e.x-t.x,i=e.y-t.y;return Math.abs(n)>Math.abs(i)?n>0?"right":"left":i>0?"down":"up"},L=function(t,e){var n=Math.abs(e.x-t.x),i=Math.abs(e.y-t.y);return Math.sqrt(n*n+i*i)},T=function(){function t(e){var n=this,i=e.canvas,r=e.el;o(this,t),this.processEvent=void 0,this.canvas=void 0,this.startTime=0,this.endTime=0,this.startPoints=null,this.startDistance=0,this.center=null,this.pressTimeout=void 0,this.eventType=null,this.direction=null,this.lastMoveTime=0,this.prevMovePoints=null,this.prevMoveTime=0,this.lastMovePoints=null,this.pinch=!1,this._click=function(t){var e=M(t,n.canvas);t.points=e,n.emitEvent("click",t)},this._start=function(t){var e,i,o=M(t,n.canvas);o&&(t.points=o,n.emitEvent("touchstart",t),n.reset(),n.startTime=Date.now(),n.startPoints=o,o.length>1?(n.startDistance=L(o[0],o[1]),n.center={x:(e=o[0]).x+((i=o[1]).x-e.x)/2,y:e.y+(i.y-e.y)/2}):n.pressTimeout=setTimeout((function(){var e="press",i="none";t.direction=i,n.emitStart(e,t),n.emitEvent(e,t),n.eventType=e,n.direction=i}),250))},this._move=function(t){var e=M(t,n.canvas);if(e){t.points=e,n.emitEvent("touchmove",t);var i=n.startPoints;if(i)if(e.length>1){var o=n.startDistance,r=L(e[0],e[1]);t.zoom=r/o,t.center=n.center,n.emitStart("pinch",t),n.emitEvent("pinch",t)}else{var a=e[0].x-i[0].x,s=e[0].y-i[0].y,u=n.direction||P(i[0],e[0]);n.direction=u;var h=n.getEventType(e);t.direction=u,t.deltaX=a,t.deltaY=s,n.emitStart(h,t),n.emitEvent(h,t);var c=n.lastMoveTime,l=Date.now();l-c>0&&(n.prevMoveTime=c,n.prevMovePoints=n.lastMovePoints,n.lastMoveTime=l,n.lastMovePoints=e)}}},this._end=function(t){var e=M(t,n.canvas);t.points=e,n.emitEnd(t),n.emitEvent("touchend",t);var i=n.lastMoveTime;if(100>Date.now()-i){var o=i-(n.prevMoveTime||n.startTime);if(o>0){var r=n.prevMovePoints||n.startPoints,a=n.lastMovePoints;if(!r||!a)return;var s=L(r[0],a[0])/o;s>.3&&(t.velocity=s,t.direction=P(r[0],a[0]),n.emitEvent("swipe",t))}}n.reset();var u=t.touches;u&&u.length>0&&n._start(t)},this._cancel=function(t){n.emitEvent("touchcancel",t),n.reset()},this.canvas=i,this.delegateEvent(r),this.processEvent={}}return a(t,[{key:"delegateEvent",value:function(t){t.addEventListener("click",this._click),t.addEventListener("touchstart",this._start),t.addEventListener("touchmove",this._move),t.addEventListener("touchend",this._end),t.addEventListener("touchcancel",this._cancel)}},{key:"emitEvent",value:function(t,e){this.canvas.emit(t,e)}},{key:"getEventType",value:function(t){var e,n=this.eventType,i=this.startTime,o=this.startPoints;if(n)return n;var r=this.canvas.__events.pan;if(r&&r.length){var a=Date.now();if(!o)return;e=a-i>250&&10>L(o[0],t[0])?"press":"pan"}else e="press";return this.eventType=e,e}},{key:"enable",value:function(t){this.processEvent[t]=!0}},{key:"isProcess",value:function(t){return this.processEvent[t]}},{key:"emitStart",value:function(t,e){this.isProcess(t)||(this.enable(t),this.emitEvent("".concat(t,"start"),e))}},{key:"emitEnd",value:function(t){}},{key:"clearPressTimeout",value:function(){this.pressTimeout&&(clearTimeout(this.pressTimeout),this.pressTimeout=null)}},{key:"reset",value:function(){this.clearPressTimeout(),this.startTime=0,this.startPoints=null,this.startDistance=0,this.direction=null,this.eventType=null,this.pinch=!1,this.prevMoveTime=0,this.prevMovePoints=null,this.lastMoveTime=0,this.lastMovePoints=null}}]),t}(),S=function(t){u(n,t);var e=v(n);function n(t){var i;o(this,n),(i=e.call(this))._attrs={},i._isWindow=void 0,i._attrs=Object.assign({},t),i._isWindow="undefined"!=typeof window,i._initPixelRatio(),i._initCanvas();return["createImage","toDataURL","requestAnimationFrame"].forEach((function(e){i._initAttrs(e,t.canvas||i.get("el"))})),i}return a(n,[{key:"get",value:function(t){return this._attrs[t]}},{key:"set",value:function(t,e){this._attrs[t]=e}},{key:"_initAttrs",value:function(t,e){var n=this;if(!this.get(t)){this.set(t,(function(){return e[t]?e[t].apply(e,arguments):n._isWindow?window[t]?(i=window)[t].apply(i,arguments):"createImage"==t?new Image:null:void 0;var i}))}}},{key:"_initCanvas",value:function(){var t,e,n=this.get("el"),i=this.get("context");if(!n&&!i)throw Error("请指定 id、el 或 context!");t=n?p(n)?(e=n)?document.getElementById(e):null:n:b(i,this._attrs),i&&t&&!t.getContext&&(t.getContext=function(){return i});var o=this.get("width")||function(t){var e=k(t,"width");return"auto"===e&&(e=t.offsetWidth),parseFloat(e)}(t)||t.width,r=this.get("height")||function(t){var e=k(t,"height");return"auto"===e&&(e=t.offsetHeight),parseFloat(e)}(t)||t.height;this.set("canvas",this),this.set("el",t),this.set("context",i||t.getContext("2d")),this.changeSize(o,r);var a=new T({canvas:this,el:t,parent:this.get("parent")});this.set("eventController",a)}},{key:"_initPixelRatio",value:function(){this.get("pixelRatio")||this.set("pixelRatio",window&&window.devicePixelRatio||1)}},{key:"changeSize",value:function(t,e){var n,o=this.get("pixelRatio"),r=this.get("el");(r.style&&(r.style.width=t+"px",r.style.height=e+"px"),(n=r)&&"object"===i(n)&&(1===n.nodeType&&n.nodeName||n.isCanvasElement))&&(r.width=t*o,r.height=e*o,1!==o&&this.get("context").scale(o,o));this.set("width",t),this.set("height",e)}},{key:"destroy",value:function(){if(!this.get("destroyed")){var t=this.get("el");t.width=0,t.height=0,this.clear(),this._attrs={},this.set("destroyed",!0)}}},{key:"clear",value:function(){}},{key:"isDestroyed",value:function(){return this.get("destroyed")}}]),n}(x);var D={penColor:"black",backgroundColor:"",openSmooth:!0,penSize:2,minLineWidth:2,maxLineWidth:6,minSpeed:1.5,maxWidthDiffRate:20,maxHistoryLength:20},O=null,W=function(){function t(e){var n=this;o(this,t),this.canAddHistory=!0,this.points=[],this.historyList=[],this.canvas=void 0,this._isEmpty=!0,this.active=!1,this.getLineWidth=function(t){var e=n.get("options"),i=e.minSpeed,o=e.minLineWidth,r=n.getMaxLineWidth();return Math.min(Math.max(r-(r-o)*t/Math.max(Math.min(i,10),1),o),r)},this.drawTrapezoid=function(t,e,i,o){var r=n.get("context");r.beginPath(),r.moveTo(Number(t.x.toFixed(1)),Number(t.y.toFixed(1))),r.lineTo(Number(e.x.toFixed(1)),Number(e.y.toFixed(1))),r.lineTo(Number(i.x.toFixed(1)),Number(i.y.toFixed(1))),r.lineTo(Number(o.x.toFixed(1)),Number(o.y.toFixed(1))),r.fillStyle=n.get("options").penColor,r.fill(),r.draw&&r.draw(!0)},this.drawNoSmoothLine=function(t,e){e.lastX=t.x+.5*(e.x-t.x),e.lastY=t.y+.5*(e.y-t.y),"number"==typeof t.lastX&&n.drawCurveLine(t.lastX,t.lastY,t.x,t.y,e.lastX,e.lastY,n.getMaxLineWidth())},this.drawCurveLine=function(t,e,i,o,r,a,s){s=Number(s.toFixed(1));var u=n.get("context");u.lineWidth=s,u.beginPath(),u.moveTo(Number(t.toFixed(1)),Number(e.toFixed(1))),u.quadraticCurveTo(Number(i.toFixed(1)),Number(o.toFixed(1)),Number(r.toFixed(1)),Number(a.toFixed(1))),u.stroke(),u.draw&&u.draw(!0)},this.getRadianData=function(t,e,n,i){var o=n-t,r=i-e;if(0===o)return{val:0,pos:-1};if(0===r)return{val:0,pos:1};var a=Math.abs(Math.atan(r/o));return n>t&&e>i||t>n&&i>e?{val:a,pos:1}:{val:a,pos:-1}},this.getRadianPoints=function(t,e,n,i){if(0===t.val)return 1===t.pos?[{x:e,y:n+i},{x:e,y:n-i}]:[{y:n,x:e+i},{y:n,x:e-i}];var o=Math.sin(t.val)*i,r=Math.cos(t.val)*i;return 1===t.pos?[{x:e+o,y:n+r},{x:e-o,y:n-r}]:[{x:e+o,y:n-r},{x:e-o,y:n+r}]},this.drawSmoothLine=function(t,e){var i=e.x-t.x,o=e.y-t.y;if(Math.abs(i)+Math.abs(o)>2?(e.lastX1=t.x+.3*i,e.lastY1=t.y+.3*o,e.lastX2=t.x+.7*i,e.lastY2=t.y+.7*o):(e.lastX1=e.lastX2=t.x+.5*i,e.lastY1=e.lastY2=t.y+.5*o),e.perLineWidth=(t.lineWidth+e.lineWidth)/2,"number"==typeof t.lastX1){if(n.drawCurveLine(t.lastX2,t.lastY2,t.x,t.y,e.lastX1,e.lastY1,e.perLineWidth),t.isFirstPoint)return;if(t.lastX1===t.lastX2&&t.lastY1===t.lastY2)return;var r=n.getRadianData(t.lastX1,t.lastY1,t.lastX2,t.lastY2),a=n.getRadianPoints(r,t.lastX1,t.lastY1,t.perLineWidth/2),s=n.getRadianPoints(r,t.lastX2,t.lastY2,e.perLineWidth/2);n.drawTrapezoid(a[0],s[0],s[1],a[1])}else e.isFirstPoint=!0},this.addHistory=function(){var t=n.get("options").maxHistoryLength;if(t&&n.canAddHistory)if(n.canAddHistory=!1,n.get("createImage")){var e=null;e=n.get("createImage")();var i=n.get("toDataURL")&&n.get("toDataURL")();p(i)?e.src=i:i.then((function(t){e.src=t})),e.onload=function(){var i=O;O=e,n.historyList.push(i),n.historyList=n.historyList.slice(-t)}}else n.historyList.length++},this.drawByImage=function(t){var e=n.get("context"),i=n.get("width"),o=n.get("height");e.clearRect(0,0,i,o);try{t&&e.drawImage(t,0,0,i,o),e.draw&&e.draw(!0)}catch(t){n.historyList.length=0}},this.isEmpty=function(){return n.get("options").maxHistoryLength>0?0===n.historyList.length:n._isEmpty},this.clear=function(){var t=n.get("context");t.clearRect(0,0,n.get("width"),n.get("height")),t.draw&&t.draw(),n._isEmpty=!0,O=null,n.historyList.length=0},this.undo=function(){if(0===n.get("options").maxHistoryLength&&n.clear(),n.get("createImage")&&n.historyList.length){var t=n.historyList.splice(-1)[0];n.drawByImage(t),0===n.historyList.length&&n.clear()}},this.canvas=e,this.canvas.set("pen",D),this.init()}return a(t,[{key:"getOption",value:function(){}},{key:"setOption",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=n({},t),i=e.maxLineWidth;if(i&&t.penSize&&i==D.maxLineWidth){var o=Math.max(i,t.penSize);e.maxLineWidth=o}this.canvas.set("pen",Object.assign({},D,e))}},{key:"get",value:function(t){return this.canvas.get("options"==t?"pen":t)}},{key:"init",value:function(){var t=this;this.get("context").lineCap="round",this.canvas.on("touchstart",(function(e){return t.onDrawStart(e)})),this.canvas.on("touchmove",(function(e){return t.onDrawMove(e)})),this.canvas.on("touchend",(function(e){return t.onDrawEnd(e)}))}},{key:"drawBackground",value:function(){var t=this.get("context"),e=this.get("width"),n=this.get("height"),i=this.get("options"),o=i.backgroundColor,r=i.backgroundImage;o&&(t.fillStyle=o,t.fillRect(0,0,e,n),t.draw&&t.draw(!0)),r&&this.drawByImage(r)}},{key:"getContentBoundingBox",value:function(t){var e=this.get("pixelRatio"),n=this.get("width"),i=this.get("height"),o=this.get("el"),r="CANVAS"===o.nodeName,a=r?n:o.width,s=r?i:o.height;e=r?1:e;var u=function(n){for(var i=a,o=s,r=0,u=0,h=0;n.length>h;h+=4){if(n[h+3]>0){var c=h/4%a,l=Math.floor(h/4/a);i=Math.min(i,c),o=Math.min(o,l),r=Math.max(r,c),u=Math.max(u,l)}}var v={width:(r-i+1)/e,height:(u-o+1)/e,startX:i/e,startY:o/e};return t&&t(v),v};if("CANVAS"===o.nodeName){var h=document.createElement("canvas");h.width=n,h.height=i;var c=h.getContext("2d");c.drawImage(o,0,0,n,i);var l=c.getImageData(0,0,n,i).data;return u(l)}var v,d=this.get("context").getImageData(0,0,a,s);return f(v=d)&&m(v.then)&&m(v.catch)?(d.then((function(t){return u(t.data)})),null):u(d.data)}},{key:"remove",value:function(){var t=this;this.canvas.off("touchstart",(function(e){return t.onDrawStart(e)})),this.canvas.off("touchmove",(function(e){return t.onDrawMove(e)})),this.canvas.off("touchend",(function(e){return t.onDrawEnd(e)}))}},{key:"disableScroll",value:function(t){t.preventDefault&&this.get("options").disableScroll&&t.preventDefault()}},{key:"onDrawStart",value:function(t){this.disableScroll(t);var e=t.points;if(this.active){this.canAddHistory=!0,this.get("context").strokeStyle=this.get("options").penColor;var n=e[0];this.initPoint(n.x,n.y)}}},{key:"onDrawMove",value:function(t){if(this.disableScroll(t),this.active){var e=t.points[0];this.initPoint(e.x,e.y),this.onDraw()}}},{key:"onDrawEnd",value:function(t){this.active&&(this.addHistory(),this.canAddHistory=!0,this.points=[])}},{key:"onDraw",value:function(){var t=this,e=this.get("context");if(this.points.length>=2){e.lineWidth=this.get("options").penSize||2;var n=this.points.slice(-1)[0],i=this.points.slice(-2,-1)[0],o=function(){t._isEmpty=!1,t.get("options").openSmooth?t.drawSmoothLine(i,n):t.drawNoSmoothLine(i,n)},r=this.get("el").canvas;r&&r.requestAnimationFrame?r.requestAnimationFrame((function(){return o()})):"function"==typeof requestAnimationFrame?requestAnimationFrame((function(){return o()})):o()}}},{key:"getMaxLineWidth",value:function(){var t=this.get("options");return Math.min(t.penSize,t.maxLineWidth)}},{key:"initPoint",value:function(t,e){var n={x:t,y:e,t:Date.now()},i=this.points.slice(-1)[0];if(!i||i.t!==n.t&&(i.x!==t||i.y!==e)){if(this.get("options").openSmooth&&i){var o=this.points.slice(-2,-1)[0];if(n.distance=Math.sqrt(Math.pow(n.x-i.x,2)+Math.pow(n.y-i.y,2)),n.speed=n.distance/(n.t-i.t||.1),n.lineWidth=this.getLineWidth(n.speed),o&&o.lineWidth&&i.lineWidth){var r=(n.lineWidth-i.lineWidth)/i.lineWidth,a=this.get("options").maxWidthDiffRate/100;if(a=a>1?1:.01>a?.01:a,Math.abs(r)>a)n.lineWidth=i.lineWidth*(1+(r>0?a:-a))}}this.points.push(n),this.points=this.points.slice(-3)}}}]),t}(),C=function(){function t(e){o(this,t),this.canvas=void 0,this._ee=void 0,this.pen=void 0;var n=new S(e);n.set("parent",this),this.canvas=n,this._ee=new x,this.pen=new W(n),this.init()}return a(t,[{key:"init",value:function(){this.pen.active=!0}},{key:"destroy",value:function(){this.canvas.destroy()}},{key:"clear",value:function(){this.pen.clear()}},{key:"undo",value:function(){this.pen.undo()}},{key:"save",value:function(){}},{key:"getContentBoundingBox",value:function(t){return this.pen.getContentBoundingBox(t)}},{key:"isEmpty",value:function(){return this.pen.isEmpty()}},{key:"on",value:function(t,e){this._ee.on(t,e)}},{key:"emit",value:function(t,e){this._ee.emit(t,e)}},{key:"off",value:function(t,e){this._ee.off(t,e)}}]),t}();t.Signature=C,t.default=C,Object.defineProperty(t,"__esModule",{value:!0})})); diff --git a/uni_modules/jp-signature/hybrid/html/uni.webview.1.5.3.js b/uni_modules/jp-signature/hybrid/html/uni.webview.1.5.3.js new file mode 100644 index 0000000..d6524fa --- /dev/null +++ b/uni_modules/jp-signature/hybrid/html/uni.webview.1.5.3.js @@ -0,0 +1 @@ +!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e=e||self).uni=n()}(this,(function(){"use strict";try{var e={};Object.defineProperty(e,"passive",{get:function(){!0}}),window.addEventListener("test-passive",null,e)}catch(e){}var n=Object.prototype.hasOwnProperty;function i(e,i){return n.call(e,i)}var t=[];function o(){return window.__dcloud_weex_postMessage||window.__dcloud_weex_}var r=function(e,n){var i={options:{timestamp:+new Date},name:e,arg:n};if(o()){if("postMessage"===e){var r={data:[n]};return window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessage(r):window.__dcloud_weex_.postMessage(JSON.stringify(r))}var a={type:"WEB_INVOKE_APPSERVICE",args:{data:i,webviewIds:t}};window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessageToService(a):window.__dcloud_weex_.postMessageToService(JSON.stringify(a))}if(!window.plus)return window.parent.postMessage({type:"WEB_INVOKE_APPSERVICE",data:i,pageId:""},"*");if(0===t.length){var d=plus.webview.currentWebview();if(!d)throw new Error("plus.webview.currentWebview() is undefined");var s=d.parent(),w="";w=s?s.id:d.id,t.push(w)}if(plus.webview.getWebviewById("__uniapp__service"))plus.webview.postMessageToUniNView({type:"WEB_INVOKE_APPSERVICE",args:{data:i,webviewIds:t}},"__uniapp__service");else{var u=JSON.stringify(i);plus.webview.getLaunchWebview().evalJS('UniPlusBridge.subscribeHandler("'.concat("WEB_INVOKE_APPSERVICE",'",').concat(u,",").concat(JSON.stringify(t),");"))}},a={navigateTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;r("navigateTo",{url:encodeURI(n)})},navigateBack:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.delta;r("navigateBack",{delta:parseInt(n)||1})},switchTab:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;r("switchTab",{url:encodeURI(n)})},reLaunch:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;r("reLaunch",{url:encodeURI(n)})},redirectTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;r("redirectTo",{url:encodeURI(n)})},getEnv:function(e){o()?e({nvue:!0}):window.plus?e({plus:!0}):e({h5:!0})},postMessage:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};r("postMessage",e.data||{})}},d=/uni-app/i.test(navigator.userAgent),s=/Html5Plus/i.test(navigator.userAgent),w=/complete|loaded|interactive/;var u=window.my&&navigator.userAgent.indexOf("AlipayClient")>-1;var g=window.swan&&window.swan.webView&&/swan/i.test(navigator.userAgent);var c=window.qq&&window.qq.miniProgram&&/QQ/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var v=window.tt&&window.tt.miniProgram&&/toutiaomicroapp/i.test(navigator.userAgent);var m=window.wx&&window.wx.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var p=window.qa&&/quickapp/i.test(navigator.userAgent);var f=window.ks&&window.ks.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var l=window.tt&&window.tt.miniProgram&&/Lark|Feishu/i.test(navigator.userAgent);var _=window.jd&&window.jd.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);for(var E,b=function(){window.UniAppJSBridge=!0,document.dispatchEvent(new CustomEvent("UniAppJSBridgeReady",{bubbles:!0,cancelable:!0}))},h=[function(e){if(d||s)return window.__dcloud_weex_postMessage||window.__dcloud_weex_?document.addEventListener("DOMContentLoaded",e):window.plus&&w.test(document.readyState)?setTimeout(e,0):document.addEventListener("plusready",e),a},function(e){if(m)return window.WeixinJSBridge&&window.WeixinJSBridge.invoke?setTimeout(e,0):document.addEventListener("WeixinJSBridgeReady",e),window.wx.miniProgram},function(e){if(c)return window.QQJSBridge&&window.QQJSBridge.invoke?setTimeout(e,0):document.addEventListener("QQJSBridgeReady",e),window.qq.miniProgram},function(e){if(u){document.addEventListener("DOMContentLoaded",e);var n=window.my;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){if(g)return document.addEventListener("DOMContentLoaded",e),window.swan.webView},function(e){if(v)return document.addEventListener("DOMContentLoaded",e),window.tt.miniProgram},function(e){if(p){window.QaJSBridge&&window.QaJSBridge.invoke?setTimeout(e,0):document.addEventListener("QaJSBridgeReady",e);var n=window.qa;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){if(f)return window.WeixinJSBridge&&window.WeixinJSBridge.invoke?setTimeout(e,0):document.addEventListener("WeixinJSBridgeReady",e),window.ks.miniProgram},function(e){if(l)return document.addEventListener("DOMContentLoaded",e),window.tt.miniProgram},function(e){if(_)return window.JDJSBridgeReady&&window.JDJSBridgeReady.invoke?setTimeout(e,0):document.addEventListener("JDJSBridgeReady",e),window.jd.miniProgram},function(e){return document.addEventListener("DOMContentLoaded",e),a}],y=0;y + + + {{image}} + 自定义样式，弹框调用 + + {{image2}} + + + + + diff --git a/uni_modules/jp-signature/readme.md b/uni_modules/jp-signature/readme.md new file mode 100644 index 0000000..eb89b42 --- /dev/null +++ b/uni_modules/jp-signature/readme.md @@ -0,0 +1,129 @@ +# jp-signature及jp-signature-popup 写字板 +## jp-signature 写字板，可用业务签名等场景，方便用户自行改造 +## jp-signature-popup 小白专用弹框签名组件，方便小白开发使用，和输入框一样使用简单 + +# 有项目需要开发的请联系 QQ:371524845 +## 开发不易，如果帮助到你的，请支持 有问题请留言，作者会积极更新 + +## 平台兼容 +| H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ 小程序 | App | +| --- | ---------- | ------------ | ---------- | ---------- | --------- | --- | +| √ | √ | √ | 未测 | 未测 | 未测 | √ | + + +## 代码演示 + +### jp-signature 基本用法 +```html + + + + + + + + + +export default { + data() { + return { + url: '', + } + }, + methods: { + save(){ + this.$refs.signatureRef.canvasToTempFilePath({ + success: (res) => { + // 是否为空画板 无签名 + console.log(res.isEmpty) + // 生成图片的临时路径 + // H5 生成的是base64 + this.url = res.tempFilePath + } + }) + }, + clear(){ + this.$refs.signatureRef.clear() + }, + undo(){ + this.$refs.signatureRef.undo() + }, + } +} + +``` + +## API +### Props + +| 参数 | 说明 | 类型 | 默认值 | +| -------------- | ------------ | ---------------- | ------------ | +| penSize | 画笔大小 | number | `2` | +| minLineWidth | 线条最小宽 | number | `2` | +| maxLineWidth | 线条最大宽 | number | `6` | +| penColor | 画笔颜色 | string | `black` | +| backgroundColor | 背景颜色 | string | `` | +| type | 指定 canvas 类型 | string | `2d` | +| openSmooth | 是否模拟压感 | boolean | `false` | +| beforeDelay | 延时初始化，在放在弹窗里可以使用 （毫秒） | number | `0` | +| maxHistoryLength | 限制历史记录数，即最大可撤销数，传入0则关闭历史记录功能 | boolean | `20` | +| landscape | 横屏 | boolean | `` | +| disableScroll | 当在写字时，禁止屏幕滚动以及下拉刷新 | boolean | `true` | +| boundingBox | 只生成内容区域，即未画部分不生成，有性能的损耗（微信小程序pc不支持） | boolean | `false` | + + +### 事件 Events + +| 事件名 | 说明 | 回调 | +| ------- | ------------ | -------------- | +| undo | 撤消，回退到上一步 | | +| clear | 清空，清空画板 | | +| canvasToTempFilePath | 保存，生成图片，与官方保持一致，但不需要传canvasId | | + +### 常见问题 +- 放在弹窗里时，尺寸不对 可以延时手写板出现时机，给手写板加vif或beforeDelay="300" +- boundingBox 微信小程序 pc 不支持, 因为获取不到 ImageData 数据 + + + +## jp-signature-popup 基础用法 +```html + + +``` + +####参数 +| 参数名 | 类型 | 默认值 | 说明 | +| -------- | -------- | --------| --------| +| value | String | | 签名内容，可以通过v-model绑定 | +| label | String | 手写签名 | | +| popup | Boolean | false | 是否隐藏原有样式，该模式只使用弹框 | +| required | Boolean | false | | +| placeholder | String | 点击签名 | 签名说明 | +| readonly | Boolean | false | 是否只能可读 | + + +####方法 +| 方法名 | 返回参数 | 说明 | +| -------- | -------- | --------| +| toPop | | 打开弹窗 | +| close | | 关闭弹窗 | +| deleteImg | | 删除内容 | + +####事假 +| 事件名 | 返回参数 | 说明 | +| -------- | -------- | --------| +| input | 签名内容 | 签名内容 |