wsnet
/
pad-app
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

封装测试

dev2
wangchen 2023-08-01 17:28:15 +08:00
parent 15dd186cb9
commit 29498a07a3
4 changed files with 3358 additions and 564 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
common/util.js
View File

@ -1,26 +1,63 @@
const formatTime = date => { module.exports = {
const year = date.getFullYear() formatTime(date) {
const month = date.getMonth() + 1 const year = date.getFullYear()
const day = date.getDate() const month = date.getMonth() + 1
const hour = date.getHours() const day = date.getDate()
const minute = date.getMinutes() const hour = date.getHours()
const second = date.getSeconds() const minute = date.getMinutes()
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') const second = date.getSeconds()
} return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(
const formatDate = date => { ':')
const year = date.getFullYear() },
const month = date.getMonth() + 1 formatDate(date) {
const day = date.getDate() const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
return [year, month, day].map(formatNumber).join('-')
}
const formatNumber = n => { return [year, month, day].map(formatNumber).join('-')
n = n.toString() },
return n[1] ? n : '0' + n formatNumber(n) {
} n = n.toString()
return n[1] ? n : '0' + n
module.exports = { },
formatTime: formatTime,
formatDate: formatDate compress(base64String, w, quality) {
console.log(base64String.length);
var getMimeType = (urlData) => {
var arr = urlData.split(",");
var mime = arr[0].match(/:(.*?);/)[1];
// return mime.replace("image/", "");
return mime;
};
var newImage = new Image();
var imgWidth, imgHeight;
var promise = new Promise((resolve) => (newImage.onload = resolve));
newImage.src = base64String;
return promise.then(() => {
imgWidth = newImage.width;
imgHeight = newImage.height;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
if (Math.max(imgWidth, imgHeight) > w) {
if (imgWidth > imgHeight) {
canvas.width = w;
canvas.height = (w * imgHeight) / imgWidth;
} else {
canvas.height = w;
canvas.width = (w * imgWidth) / imgHeight;
}
} else {
canvas.width = imgWidth;
canvas.height = imgHeight;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(newImage, 0, 0, canvas.width, canvas.height);
var base64 = canvas.toDataURL(getMimeType(base64String), quality);
console.log(base64);
return base64;
});
}
} }

3349
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

46
package.json
View File

@ -1,23 +1,27 @@
{ {
"id": "fjj-condition", "id": "fjj-condition",
"name": "tongtong-条件筛选", "name": "tongtong-条件筛选",
"version": "1.0.6", "version": "1.0.6",
"description": "支持单选多选筛选、日期范围筛选、数量或金额范围筛选， 兼容h5、微信小程序、其它端未测试", "description": "支持单选多选筛选、日期范围筛选、数量或金额范围筛选， 兼容h5、微信小程序、其它端未测试",
"keywords": [ "keywords": [
"筛选", "筛选",
"条件筛选", "条件筛选",
"多选", "多选",
"单选", "单选",
"日期筛选" "日期筛选"
], ],
"dcloudext": { "dcloudext": {
"category": [ "category": [
"前端组件", "前端组件",
"通用组件" "通用组件"
] ]
}, },
"dependencies": { "dependencies": {
"uuid": "^9.0.0", "imagemin": "^8.0.1",
"vant": "^2.12.54" "imagemin-mozjpeg": "^10.0.0",
} "imagemin-pngquant": "^9.0.2",
"imagemin-svgo": "^10.0.1",
"uuid": "^9.0.0",
"vant": "^2.12.54"
}
} }

440
pages/shipWork/sign.vue
View File

@ -1,220 +1,222 @@
<template> <template>
<view class="container"> <view class="container">
<view class="sign-box"> <view class="sign-box">
<canvas class="mycanvas" :style="{width:width +'px',height:height +'px'}" canvas-id="mycanvas" <canvas class="mycanvas" :style="{width:width +'px',height:height +'px'}" canvas-id="mycanvas"
@touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas> @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
<canvas canvas-id="camCacnvs" :style="{width:height +'px',height:width +'px'}" class="canvsborder"></canvas> <canvas canvas-id="camCacnvs" :style="{width:height +'px',height:width +'px'}" class="canvsborder"></canvas>
</view> </view>
<view class="sigh-btns"> <view class="sigh-btns">
<van-button class="btn" type="default" @tap="handleCancel">取消</van-button> <van-button class="btn" type="default" @tap="handleCancel">取消</van-button>
<van-button class="btn" type="default" @tap="handleReset">重写</van-button> <van-button class="btn" type="default" @tap="handleReset">重写</van-button>
<van-button class="btn" type="default" @tap="handleConfirm">确认</van-button> <van-button class="btn" type="default" @tap="handleConfirm">确认</van-button>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
var x = 20; import utils from '@/common/util.js';
var y = 20; var x = 20;
var tempPoint = []; //用来存放当前画纸上的轨迹点 var y = 20;
var id = 0; var tempPoint = []; //用来存放当前画纸上的轨迹点
var type = ''; var id = 0;
let that; var type = '';
let canvasw; let that;
let canvash; let canvasw;
export default { let canvash;
data() { export default {
return { data() {
ctx: '', //绘图图像 return {
points: [], //路径点集合, ctx: '', //绘图图像
width: 0, points: [], //路径点集合,
height: 0 width: 0,
}; height: 0
}, };
mounted() {}, },
onLoad(option) { mounted() {},
that = this; onLoad(option) {
console.log(option); that = this;
id = option.id; console.log(option);
type = option.type; id = option.id;
this.ctx = uni.createCanvasContext('mycanvas', this); //创建绘图对象 type = option.type;
//设置画笔样式 this.ctx = uni.createCanvasContext('mycanvas', this); //创建绘图对象
this.ctx.lineWidth = 4; //设置画笔样式
this.ctx.lineCap = 'round'; this.ctx.lineWidth = 4;
this.ctx.lineJoin = 'round'; this.ctx.lineCap = 'round';
this.ctx.lineJoin = 'round';
uni.getSystemInfo({
success: function(res) { uni.getSystemInfo({
console.log(res); success: function(res) {
that.width = res.windowWidth * 0.8; console.log(res);
that.height = res.windowHeight * 0.85; that.width = res.windowWidth * 0.8;
} that.height = res.windowHeight * 0.85;
}); }
}, });
},
methods: {
//触摸开始，获取到起点 methods: {
touchstart: function(e) { //触摸开始，获取到起点
let startX = e.changedTouches[0].x; touchstart: function(e) {
let startY = e.changedTouches[0].y; let startX = e.changedTouches[0].x;
let startPoint = { let startY = e.changedTouches[0].y;
X: startX, let startPoint = {
Y: startY X: startX,
}; Y: startY
};
/* **************************************************
#由于uni对canvas的实现有所不同，这里需要把起点存起来 /* **************************************************
* **************************************************/ #由于uni对canvas的实现有所不同，这里需要把起点存起来
this.points.push(startPoint); * **************************************************/
this.points.push(startPoint);
//每次触摸开始，开启新的路径
this.ctx.beginPath(); //每次触摸开始，开启新的路径
}, this.ctx.beginPath();
},
//触摸移动，获取到路径点
touchmove: function(e) { //触摸移动，获取到路径点
let moveX = e.changedTouches[0].x; touchmove: function(e) {
let moveY = e.changedTouches[0].y; let moveX = e.changedTouches[0].x;
let movePoint = { let moveY = e.changedTouches[0].y;
X: moveX, let movePoint = {
Y: moveY X: moveX,
}; Y: moveY
this.points.push(movePoint); //存点 };
let len = this.points.length; this.points.push(movePoint); //存点
if (len >= 2) { let len = this.points.length;
this.draw(); //绘制路径 if (len >= 2) {
} this.draw(); //绘制路径
tempPoint.push(movePoint); }
}, tempPoint.push(movePoint);
},
// 触摸结束，将未绘制的点清空防止对后续路径产生干扰
touchend: function() { // 触摸结束，将未绘制的点清空防止对后续路径产生干扰
this.points = []; touchend: function() {
}, this.points = [];
},
/* ***********************************************
# 绘制笔迹 /* ***********************************************
# 1.为保证笔迹实时显示，必须在移动的同时绘制笔迹 # 绘制笔迹
# 2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo) # 1.为保证笔迹实时显示，必须在移动的同时绘制笔迹
# 3.将上一次的终点作为下一次绘制的起点（即清除第一个点） # 2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)
************************************************ */ # 3.将上一次的终点作为下一次绘制的起点（即清除第一个点）
draw: function() { ************************************************ */
let point1 = this.points[0]; draw: function() {
let point2 = this.points[1]; let point1 = this.points[0];
this.points.shift(); let point2 = this.points[1];
this.ctx.moveTo(point1.X, point1.Y); this.points.shift();
this.ctx.lineTo(point2.X, point2.Y); this.ctx.moveTo(point1.X, point1.Y);
this.ctx.stroke(); this.ctx.lineTo(point2.X, point2.Y);
this.ctx.draw(true); this.ctx.stroke();
}, this.ctx.draw(true);
},
handleCancel() {
uni.navigateBack({ handleCancel() {
delta: 1 uni.navigateBack({
}); delta: 1
}, });
},
//清空画布
handleReset: function() { //清空画布
console.log('handleReset'); handleReset: function() {
that.ctx.clearRect(0, 0, that.width, that.height); console.log('handleReset');
that.ctx.draw(true); that.ctx.clearRect(0, 0, that.width, that.height);
tempPoint = []; that.ctx.draw(true);
}, tempPoint = [];
},
//将签名笔迹上传到服务器，并将返回来的地址存到本地
handleConfirm: function() { //将签名笔迹上传到服务器，并将返回来的地址存到本地
if (tempPoint.length == 0) { handleConfirm: function() {
uni.showToast({ if (tempPoint.length == 0) {
title: '请先签名', uni.showToast({
icon: 'none', title: '请先签名',
duration: 2000 icon: 'none',
}); duration: 2000
return; });
} return;
uni.canvasToTempFilePath({ }
canvasId: 'mycanvas', uni.canvasToTempFilePath({
success: function(res) { canvasId: 'mycanvas',
let tempPath = res.tempFilePath; success: function(res) {
console.log(tempPath) let tempPath = res.tempFilePath;
console.log(tempPath,'压缩前')
const ctx = uni.createCanvasContext('camCacnvs', that); // 示例用法
ctx.translate(0, that.width); let compressBase64Img = utils.compress(tempPath, 500, 0.3); //conpress封装的压缩方法
ctx.rotate((-90 * Math.PI) / 180); console.log(compressBase64Img,'压缩后');
ctx.drawImage(tempPath, 0, 0, that.width, that.height); const ctx = uni.createCanvasContext('camCacnvs', that);
ctx.draw(); ctx.translate(0, that.width);
setTimeout(() => { ctx.rotate((-90 * Math.PI) / 180);
ctx.drawImage(tempPath, 0, 0, that.width, that.height);
//保存签名图片到本地 ctx.draw();
uni.canvasToTempFilePath({ setTimeout(() => {
canvasId: 'camCacnvs',
success: function(res) { //保存签名图片到本地
//这是签名图片文件的本地临时地址 uni.canvasToTempFilePath({
let path = res.tempFilePath; canvasId: 'camCacnvs',
success: function(res) {
}, //这是签名图片文件的本地临时地址
fail: err => { let path = res.tempFilePath;
console.log('fail', err);
} },
}, fail: err => {
this console.log('fail', err);
); }
}, 200); },
} this
}); );
} }, 200);
}
} });
}; },
</script> }
};
<style lang="scss" scoped> </script>
.container {
height: calc(100vh - 44px); <style lang="scss" scoped>
padding-bottom: 30px; .container {
background-color: #fff; height: calc(100vh - 44px);
} padding-bottom: 30px;
background-color: #fff;
.sign-box { }
width: 80%;
height: 90%; .sign-box {
margin: auto; width: 80%;
display: flex; height: 90%;
flex-direction: column; margin: auto;
text-align: center; display: flex;
} flex-direction: column;
text-align: center;
.sign-view { }
height: 100%;
} .sign-view {
height: 100%;
.sigh-btns { }
display: flex;
justify-content: center; .sigh-btns {
} display: flex;
justify-content: center;
.btn { }
margin: 30px 10px 0;
} .btn {
margin: 30px 10px 0;
/deep/.van-button { }
width: 100px;
height: 50px; /deep/.van-button {
background-color: #fff; width: 100px;
} height: 50px;
background-color: #fff;
.mycanvas { }
margin: auto 0rpx;
background-color: #ececec; .mycanvas {
} margin: auto 0rpx;
background-color: #ececec;
.canvsborder { }
border: 1rpx solid #333;
position: fixed; .canvsborder {
top: 0; border: 1rpx solid #333;
left: 10000rpx; position: fixed;
} top: 0;
left: 10000rpx;
}
</style> </style>