更新签字版样式
This commit is contained in:
许允枞
parent
466f8f20d2
commit
c16f8df489
@ -257,7 +257,8 @@ export default {
|
||||
itemList: this.formatItem(this.selectedProj)
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '/pages-repair/signature/signature?data=' + JSON.stringify(data)
|
||||
// url: '/pages-repair/signature/signature?data=' + JSON.stringify(data)
|
||||
url: '/pages-repair/sign/sign?data=' + JSON.stringify(data)
|
||||
})
|
||||
// request({
|
||||
// url: '/admin-api/repair/tickets/create',
|
||||
|
||||
145
pages-repair/sign/pickerColor.vue
Normal file
145
pages-repair/sign/pickerColor.vue
Normal file
@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<view v-show="isShow">
|
||||
<view class="shade" @tap="hide">
|
||||
<view class="pop">
|
||||
<view class="list flex_col" v-for="(item,index) in colorArr" :key="index">
|
||||
<view v-for="(v,i) in item" :key="i" :style="{'backgroundColor':v}" :data-color="v"
|
||||
:data-index="index" :data-i="i" :class="{'active':(index==pickerArr[0] && i==pickerArr[1])}"
|
||||
@tap.stop="picker"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'picker-color',
|
||||
props: {
|
||||
isShow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
bottom: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
colorArr: [
|
||||
['#000000', '#111111', '#222222', '#333333', '#444444', '#666666', '#999999', '#CCCCCC', '#EEEEEE',
|
||||
'#FFFFFF'
|
||||
],
|
||||
['#ff0000', '#ff0033', '#ff3399', '#ff33cc', '#cc00ff', '#9900ff', '#cc00cc', '#cc0099', '#cc3399',
|
||||
'#cc0066'
|
||||
],
|
||||
['#cc3300', '#cc6600', '#ff9933', '#ff9966', '#ff9999', '#ff99cc', '#ff99ff', '#cc66ff', '#9966ff',
|
||||
'#cc33ff'
|
||||
],
|
||||
['#663300', '#996600', '#996633', '#cc9900', '#a58800', '#cccc00', '#ffff66', '#ffff99', '#ffffcc',
|
||||
'#ffcccc'
|
||||
],
|
||||
['#336600', '#669900', '#009900', '#009933', '#00cc00', '#66ff66', '#339933', '#339966', '#009999',
|
||||
'#33cccc'
|
||||
],
|
||||
['#003366', '#336699', '#3366cc', '#0099ff', '#000099', '#0000cc', '#660066', '#993366', '#993333',
|
||||
'#800000'
|
||||
]
|
||||
],
|
||||
pickerColor: '',
|
||||
pickerArr: [-1, -1]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
picker(e) {
|
||||
let data = e.currentTarget.dataset;
|
||||
this.pickerColor = data.color;
|
||||
this.pickerArr = [data.index, data.i];
|
||||
this.$emit("callback", this.pickerColor);
|
||||
},
|
||||
hide() {
|
||||
this.$emit("callback", '');
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.shade {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.pop {
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
z-index: 100;
|
||||
padding: 12upx;
|
||||
font-size: 32upx;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.flex_col {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.list {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.list>view {
|
||||
width: 60upx;
|
||||
height: 60upx;
|
||||
margin: 5upx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 2px #ccc;
|
||||
}
|
||||
|
||||
.list .active {
|
||||
box-shadow: 0 0 2px #09f;
|
||||
transform: scale(1.05, 1.05);
|
||||
}
|
||||
|
||||
.preview {
|
||||
width: 180upx;
|
||||
height: 60upx;
|
||||
}
|
||||
|
||||
.value {
|
||||
margin: 0 40upx;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.ok {
|
||||
width: 160upx;
|
||||
height: 60upx;
|
||||
line-height: 60upx;
|
||||
text-align: center;
|
||||
background-color: #ff9933;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
letter-spacing: 3px;
|
||||
font-size: 32upx;
|
||||
}
|
||||
|
||||
.ok:active {
|
||||
background-color: rgb(255, 107, 34);
|
||||
}
|
||||
</style>
|
||||
619
pages-repair/sign/sign.vue
Normal file
619
pages-repair/sign/sign.vue
Normal file
@ -0,0 +1,619 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="wrapper">
|
||||
<view class="handBtn">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<image @click="selectColorEvent('black','#1A1A1A')"
|
||||
:src="selectColor === 'black' ? '/static/other/color_black_selected.png' : '/static/other/color_black.png'"
|
||||
class="black-select"></image>
|
||||
<image @click="selectColorEvent('red','#ca262a')"
|
||||
:src="selectColor === 'red' ? '/static/other/color_red_selected.png' : '/static/other/color_red.png'"
|
||||
class="red-select"></image>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<div class="color_pic" :style="{background:lineColor}" @click="showPickerColor=true"></div>
|
||||
<!-- #endif -->
|
||||
<button @click="clear" class="delBtn">清空</button>
|
||||
<!-- <button @click="saveCanvasAsImg" class="saveBtn">保存</button>-->
|
||||
<!-- <button @click="previewCanvasImg" class="previewBtn">预览</button>-->
|
||||
<button @click="undo" class="saveBtn">撤销</button>
|
||||
<button @click="subCanvas" class="subBtn">完成</button>
|
||||
</view>
|
||||
<view class="handCenter">
|
||||
<canvas class="handWriting" :disable-scroll="true" @touchstart="uploadScaleStart"
|
||||
@touchmove="uploadScaleMove" @touchend="uploadScaleEnd" canvas-id="handWriting"></canvas>
|
||||
</view>
|
||||
<view class="handRight">
|
||||
<view class="handTitle">请签名</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<pickerColor :isShow="showPickerColor" :bottom="0" @callback='getPickerColor' />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pickerColor from "./pickerColor.vue"
|
||||
import upload from "@/utils/upload";
|
||||
import request from "@/utils/request";
|
||||
export default {
|
||||
components: {
|
||||
pickerColor
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data:{},
|
||||
showPickerColor: false,
|
||||
ctx: '',
|
||||
canvasWidth: 0,
|
||||
canvasHeight: 0,
|
||||
selectColor: 'black',
|
||||
lineColor: '#1A1A1A',
|
||||
points: [],
|
||||
historyList: [],
|
||||
canAddHistory: true,
|
||||
getImagePath: () => {
|
||||
return new Promise((resolve) => {
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'handWriting',
|
||||
fileType: 'png',
|
||||
quality: 1, //图片质量
|
||||
success: res => resolve(res.tempFilePath),
|
||||
})
|
||||
})
|
||||
},
|
||||
toDataURL: void 0,
|
||||
requestAnimationFrame: void 0,
|
||||
};
|
||||
},
|
||||
props: { //可用于修改的参数放在props里 也可单独放在外面做成组件调用 传值
|
||||
minSpeed: { //画笔最小速度
|
||||
type: Number,
|
||||
default: 1.5
|
||||
},
|
||||
minWidth: { //线条最小粗度
|
||||
type: Number,
|
||||
default: 3,
|
||||
},
|
||||
maxWidth: { //线条最大粗度
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
openSmooth: { //开启平滑线条（笔锋）
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
maxHistoryLength: { //历史最大长度
|
||||
type: Number,
|
||||
default: 20
|
||||
},
|
||||
maxWidthDiffRate: { //最大差异率
|
||||
type: Number,
|
||||
default: 20
|
||||
},
|
||||
bgColor: { //背景色
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
onLoad(data) {
|
||||
this.ctx = uni.createCanvasContext("handWriting");
|
||||
this.$nextTick(() => {
|
||||
uni.createSelectorQuery().select('.handCenter').boundingClientRect(rect => {
|
||||
this.canvasWidth = rect.width;
|
||||
this.canvasHeight = rect.height;
|
||||
this.drawBgColor()
|
||||
})
|
||||
.exec();
|
||||
});
|
||||
if (data.data){
|
||||
console.log('传递过来的内容', JSON.parse(data.data))
|
||||
this.data = JSON.parse(data.data)
|
||||
console.log('此时的data',this.data)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getPickerColor(color) {
|
||||
this.showPickerColor = false;
|
||||
if (color) {
|
||||
this.lineColor = color;
|
||||
}
|
||||
},
|
||||
// 笔迹开始
|
||||
uploadScaleStart(e) {
|
||||
this.canAddHistory = true
|
||||
this.ctx.setStrokeStyle(this.lineColor)
|
||||
this.ctx.setLineCap("round") //'butt'、'round'、'square'
|
||||
},
|
||||
// 笔迹移动
|
||||
uploadScaleMove(e) {
|
||||
let temX = e.changedTouches[0].x
|
||||
let temY = e.changedTouches[0].y
|
||||
this.initPoint(temX, temY)
|
||||
this.onDraw()
|
||||
},
|
||||
/**
|
||||
* 触摸结束
|
||||
*/
|
||||
uploadScaleEnd() {
|
||||
this.canAddHistory = true;
|
||||
this.points = [];
|
||||
},
|
||||
/**
|
||||
* 记录点属性
|
||||
*/
|
||||
initPoint(x, y) {
|
||||
var point = {
|
||||
x: x,
|
||||
y: y,
|
||||
t: Date.now()
|
||||
};
|
||||
var prePoint = this.points.slice(-1)[0];
|
||||
if (prePoint && (prePoint.t === point.t || prePoint.x === x && prePoint.y === y)) {
|
||||
return;
|
||||
}
|
||||
if (prePoint && this.openSmooth) {
|
||||
var prePoint2 = this.points.slice(-2, -1)[0];
|
||||
point.distance = Math.sqrt(Math.pow(point.x - prePoint.x, 2) + Math.pow(point.y - prePoint.y, 2));
|
||||
point.speed = point.distance / (point.t - prePoint.t || 0.1);
|
||||
point.lineWidth = this.getLineWidth(point.speed);
|
||||
if (prePoint2 && prePoint2.lineWidth && prePoint.lineWidth) {
|
||||
var rate = (point.lineWidth - prePoint.lineWidth) / prePoint.lineWidth;
|
||||
var maxRate = this.maxWidthDiffRate / 100;
|
||||
maxRate = maxRate > 1 ? 1 : maxRate < 0.01 ? 0.01 : maxRate;
|
||||
if (Math.abs(rate) > maxRate) {
|
||||
var per = rate > 0 ? maxRate : -maxRate;
|
||||
point.lineWidth = prePoint.lineWidth * (1 + per);
|
||||
}
|
||||
}
|
||||
}
|
||||
this.points.push(point);
|
||||
this.points = this.points.slice(-3);
|
||||
},
|
||||
/**
|
||||
* @param {Object}
|
||||
* 线宽
|
||||
*/
|
||||
getLineWidth(speed) {
|
||||
var minSpeed = this.minSpeed > 10 ? 10 : this.minSpeed < 1 ? 1 : this.minSpeed; //1.5
|
||||
var addWidth = (this.maxWidth - this.minWidth) * speed / minSpeed;
|
||||
var lineWidth = Math.max(this.maxWidth - addWidth, this.minWidth);
|
||||
return Math.min(lineWidth, this.maxWidth);
|
||||
},
|
||||
/**
|
||||
* 绘画逻辑
|
||||
*/
|
||||
onDraw() {
|
||||
if (this.points.length < 2) return;
|
||||
this.addHistory();
|
||||
var point = this.points.slice(-1)[0];
|
||||
var prePoint = this.points.slice(-2, -1)[0];
|
||||
let that = this
|
||||
var onDraw = function onDraw() {
|
||||
if (that.openSmooth) {
|
||||
that.drawSmoothLine(prePoint, point);
|
||||
} else {
|
||||
that.drawNoSmoothLine(prePoint, point);
|
||||
}
|
||||
};
|
||||
if (typeof this.requestAnimationFrame === 'function') {
|
||||
this.requestAnimationFrame(function() {
|
||||
return onDraw();
|
||||
});
|
||||
} else {
|
||||
onDraw();
|
||||
}
|
||||
},
|
||||
//添加历史图片地址
|
||||
addHistory() {
|
||||
if (!this.maxHistoryLength || !this.canAddHistory) return;
|
||||
this.canAddHistory = false;
|
||||
if (!this.getImagePath) {
|
||||
this.historyList.length++;
|
||||
return;
|
||||
}
|
||||
//历史地址 (暂时无用)
|
||||
let that = this
|
||||
that.getImagePath().then(function(url) {
|
||||
if (url) {
|
||||
that.historyList.push(url)
|
||||
that.historyList = that.historyList.slice(-that.maxHistoryLength);
|
||||
}
|
||||
});
|
||||
},
|
||||
//画平滑线
|
||||
drawSmoothLine(prePoint, point) {
|
||||
var dis_x = point.x - prePoint.x;
|
||||
var dis_y = point.y - prePoint.y;
|
||||
|
||||
if (Math.abs(dis_x) + Math.abs(dis_y) <= 2) {
|
||||
point.lastX1 = point.lastX2 = prePoint.x + dis_x * 0.5;
|
||||
point.lastY1 = point.lastY2 = prePoint.y + dis_y * 0.5;
|
||||
} else {
|
||||
point.lastX1 = prePoint.x + dis_x * 0.3;
|
||||
point.lastY1 = prePoint.y + dis_y * 0.3;
|
||||
point.lastX2 = prePoint.x + dis_x * 0.7;
|
||||
point.lastY2 = prePoint.y + dis_y * 0.7;
|
||||
}
|
||||
point.perLineWidth = (prePoint.lineWidth + point.lineWidth) / 2;
|
||||
if (typeof prePoint.lastX1 === 'number') {
|
||||
this.drawCurveLine(prePoint.lastX2, prePoint.lastY2, prePoint.x, prePoint.y, point.lastX1, point
|
||||
.lastY1, point.perLineWidth);
|
||||
if (prePoint.isFirstPoint) return;
|
||||
if (prePoint.lastX1 === prePoint.lastX2 && prePoint.lastY1 === prePoint.lastY2) return;
|
||||
var data = this.getRadianData(prePoint.lastX1, prePoint.lastY1, prePoint.lastX2, prePoint.lastY2);
|
||||
var points1 = this.getRadianPoints(data, prePoint.lastX1, prePoint.lastY1, prePoint.perLineWidth / 2);
|
||||
var points2 = this.getRadianPoints(data, prePoint.lastX2, prePoint.lastY2, point.perLineWidth / 2);
|
||||
this.drawTrapezoid(points1[0], points2[0], points2[1], points1[1]);
|
||||
} else {
|
||||
point.isFirstPoint = true;
|
||||
}
|
||||
},
|
||||
//画不平滑线
|
||||
drawNoSmoothLine(prePoint, point) {
|
||||
point.lastX = prePoint.x + (point.x - prePoint.x) * 0.5;
|
||||
point.lastY = prePoint.y + (point.y - prePoint.y) * 0.5;
|
||||
if (typeof prePoint.lastX === 'number') {
|
||||
this.drawCurveLine(prePoint.lastX, prePoint.lastY, prePoint.x, prePoint.y, point.lastX, point.lastY,
|
||||
this.maxWidth);
|
||||
}
|
||||
},
|
||||
//画线
|
||||
drawCurveLine(x1, y1, x2, y2, x3, y3, lineWidth) {
|
||||
lineWidth = Number(lineWidth.toFixed(1));
|
||||
this.ctx.setLineWidth && this.ctx.setLineWidth(lineWidth);
|
||||
this.ctx.lineWidth = lineWidth;
|
||||
this.ctx.beginPath();
|
||||
this.ctx.moveTo(Number(x1.toFixed(1)), Number(y1.toFixed(1)));
|
||||
this.ctx.quadraticCurveTo(Number(x2.toFixed(1)), Number(y2.toFixed(1)), Number(x3.toFixed(1)), Number(y3
|
||||
.toFixed(1)));
|
||||
this.ctx.stroke();
|
||||
this.ctx.draw && this.ctx.draw(true);
|
||||
},
|
||||
//画梯形
|
||||
drawTrapezoid(point1, point2, point3, point4) {
|
||||
this.ctx.beginPath();
|
||||
this.ctx.moveTo(Number(point1.x.toFixed(1)), Number(point1.y.toFixed(1)));
|
||||
this.ctx.lineTo(Number(point2.x.toFixed(1)), Number(point2.y.toFixed(1)));
|
||||
this.ctx.lineTo(Number(point3.x.toFixed(1)), Number(point3.y.toFixed(1)));
|
||||
this.ctx.lineTo(Number(point4.x.toFixed(1)), Number(point4.y.toFixed(1)));
|
||||
this.ctx.setFillStyle && this.ctx.setFillStyle(this.lineColor);
|
||||
this.ctx.fillStyle = this.lineColor;
|
||||
this.ctx.fill();
|
||||
this.ctx.draw && this.ctx.draw(true);
|
||||
},
|
||||
//获取弧度
|
||||
getRadianData(x1, y1, x2, y2) {
|
||||
var dis_x = x2 - x1;
|
||||
var dis_y = y2 - y1;
|
||||
if (dis_x === 0) {
|
||||
return {
|
||||
val: 0,
|
||||
pos: -1
|
||||
};
|
||||
}
|
||||
if (dis_y === 0) {
|
||||
return {
|
||||
val: 0,
|
||||
pos: 1
|
||||
};
|
||||
}
|
||||
var val = Math.abs(Math.atan(dis_y / dis_x));
|
||||
if (x2 > x1 && y2 < y1 || x2 < x1 && y2 > y1) {
|
||||
return {
|
||||
val: val,
|
||||
pos: 1
|
||||
};
|
||||
}
|
||||
return {
|
||||
val: val,
|
||||
pos: -1
|
||||
};
|
||||
},
|
||||
//获取弧度点
|
||||
getRadianPoints(radianData, x, y, halfLineWidth) {
|
||||
if (radianData.val === 0) {
|
||||
if (radianData.pos === 1) {
|
||||
return [{
|
||||
x: x,
|
||||
y: y + halfLineWidth
|
||||
}, {
|
||||
x: x,
|
||||
y: y - halfLineWidth
|
||||
}];
|
||||
}
|
||||
return [{
|
||||
y: y,
|
||||
x: x + halfLineWidth
|
||||
}, {
|
||||
y: y,
|
||||
x: x - halfLineWidth
|
||||
}];
|
||||
}
|
||||
var dis_x = Math.sin(radianData.val) * halfLineWidth;
|
||||
var dis_y = Math.cos(radianData.val) * halfLineWidth;
|
||||
if (radianData.pos === 1) {
|
||||
return [{
|
||||
x: x + dis_x,
|
||||
y: y + dis_y
|
||||
}, {
|
||||
x: x - dis_x,
|
||||
y: y - dis_y
|
||||
}];
|
||||
}
|
||||
return [{
|
||||
x: x + dis_x,
|
||||
y: y - dis_y
|
||||
}, {
|
||||
x: x - dis_x,
|
||||
y: y + dis_y
|
||||
}];
|
||||
},
|
||||
/**
|
||||
* 背景色
|
||||
*/
|
||||
drawBgColor() {
|
||||
if (!this.bgColor) return;
|
||||
this.ctx.setFillStyle && this.ctx.setFillStyle(this.bgColor);
|
||||
this.ctx.fillStyle = this.bgColor;
|
||||
this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
|
||||
this.ctx.draw && this.ctx.draw(true);
|
||||
},
|
||||
//图片绘制
|
||||
drawByImage(url) {
|
||||
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
|
||||
try {
|
||||
this.ctx.drawImage(url, 0, 0, this.canvasWidth, this.canvasHeight);
|
||||
this.ctx.draw && this.ctx.draw(true);
|
||||
} catch (e) {
|
||||
this.historyList.length = 0;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 清空
|
||||
*/
|
||||
clear() {
|
||||
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
|
||||
this.ctx.draw && this.ctx.draw();
|
||||
this.drawBgColor();
|
||||
this.historyList.length = 0;
|
||||
},
|
||||
//撤消
|
||||
undo() {
|
||||
if (!this.getImagePath || !this.historyList.length) return;
|
||||
var pngURL = this.historyList.splice(-1)[0];
|
||||
this.drawByImage(pngURL);
|
||||
if (this.historyList.length === 0) {
|
||||
this.clear();
|
||||
}
|
||||
},
|
||||
//是否为空
|
||||
isEmpty() {
|
||||
return this.historyList.length === 0;
|
||||
},
|
||||
/**
|
||||
* @param {Object} str
|
||||
* @param {Object} color
|
||||
* 选择颜色
|
||||
*/
|
||||
selectColorEvent(str, color) {
|
||||
this.selectColor = str;
|
||||
this.lineColor = color;
|
||||
this.ctx.setStrokeStyle(this.lineColor)
|
||||
},
|
||||
//完成
|
||||
subCanvas() {
|
||||
if (this.isEmpty()) {
|
||||
uni.showToast({
|
||||
title: '没有任何绘制内容哦',
|
||||
icon: 'none',
|
||||
});
|
||||
return
|
||||
}
|
||||
console.log(this.data,'uploa')
|
||||
const newData = this.data
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'handWriting',
|
||||
fileType: 'png',
|
||||
quality: 1, //图片质量
|
||||
success(res) {
|
||||
uni.showToast({
|
||||
title: '以保存'
|
||||
});
|
||||
upload({
|
||||
url: '/admin-api/common/upload',
|
||||
filePath: res.tempFilePath,
|
||||
}).then((res) => {
|
||||
console.log('服务器返回图片地址', res);
|
||||
console.log('打印data',newData)
|
||||
newData.image = res.data.url
|
||||
console.log('提交的内容', newData)
|
||||
request({
|
||||
url: '/admin-api/repair/tickets/create',
|
||||
method: 'POST',
|
||||
data: newData
|
||||
}).then(res => {
|
||||
uni.showToast({
|
||||
title: '创建工单成功',
|
||||
icon: 'success'
|
||||
})
|
||||
uni.navigateTo({
|
||||
url: `/pages-order/orderDetail/orderDetail?id=${res.data.id}&isDetail=0`
|
||||
});
|
||||
})
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
//保存到相册
|
||||
saveCanvasAsImg() {
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'handWriting',
|
||||
fileType: 'png',
|
||||
quality: 1, //图片质量
|
||||
success(res) {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success(res) {
|
||||
uni.showToast({
|
||||
title: '已保存到相册',
|
||||
duration: 2000
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
//预览
|
||||
previewCanvasImg() {
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'handWriting',
|
||||
fileType: 'jpg',
|
||||
quality: 1, //图片质量
|
||||
success(res) {
|
||||
uni.previewImage({
|
||||
urls: [res.tempFilePath] //预览图片 数组
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background: #fbfbfb;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
height: 95vh;
|
||||
margin: 40rpx 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.handWriting {
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
height: 95vh;
|
||||
}
|
||||
|
||||
.handRight {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.handCenter {
|
||||
border: 4rpx dashed #e9e9e9;
|
||||
flex: 5;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.handTitle {
|
||||
transform: rotate(90deg);
|
||||
flex: 1;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.handBtn button {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.handBtn {
|
||||
height: 95vh;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-content: space-between;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.delBtn {
|
||||
position: absolute;
|
||||
top: 250rpx;
|
||||
left: 0rpx;
|
||||
transform: rotate(90deg);
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.delBtn image {
|
||||
position: absolute;
|
||||
top: 13rpx;
|
||||
left: 25rpx;
|
||||
}
|
||||
|
||||
.subBtn {
|
||||
position: absolute;
|
||||
bottom: 52rpx;
|
||||
left: -3rpx;
|
||||
display: inline-flex;
|
||||
transform: rotate(90deg);
|
||||
background: #008ef6;
|
||||
color: #fff;
|
||||
margin-bottom: 30rpx;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/*Peach - 新增 - 保存*/
|
||||
|
||||
.saveBtn {
|
||||
position: absolute;
|
||||
top: 375rpx;
|
||||
left: 0rpx;
|
||||
transform: rotate(90deg);
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.previewBtn {
|
||||
position: absolute;
|
||||
top: 500rpx;
|
||||
left: 0rpx;
|
||||
transform: rotate(90deg);
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.undoBtn {
|
||||
position: absolute;
|
||||
top: 625rpx;
|
||||
left: 0rpx;
|
||||
transform: rotate(90deg);
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.black-select {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
position: absolute;
|
||||
top: 30rpx;
|
||||
left: 25rpx;
|
||||
}
|
||||
|
||||
.red-select {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
position: absolute;
|
||||
top: 140rpx;
|
||||
left: 25rpx;
|
||||
}
|
||||
|
||||
.color_pic {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 25px;
|
||||
position: absolute;
|
||||
top: 60rpx;
|
||||
left: 18rpx;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
</style>
|
||||
@ -6,12 +6,12 @@
|
||||
确定维修项目无误后请客户签字确认
|
||||
</view>
|
||||
<canvas
|
||||
canvas-id="signatureCanvas"
|
||||
class="canvas"
|
||||
:disable-scroll="true"
|
||||
@touchstart="startSign"
|
||||
@touchmove="drawSign"
|
||||
@touchend="endSign"
|
||||
canvas-id="signatureCanvas"
|
||||
class="canvas"
|
||||
:disable-scroll="true"
|
||||
@touchstart="startSign"
|
||||
@touchmove="drawSign"
|
||||
@touchend="endSign"
|
||||
></canvas>
|
||||
<view class="buttons">
|
||||
<button @click="clearSign">清除</button>
|
||||
@ -27,21 +27,21 @@ import VNavigationBar from "@/components/VNavigationBar.vue";
|
||||
import request from "@/utils/request";
|
||||
|
||||
export default {
|
||||
components: {VNavigationBar},
|
||||
components: { VNavigationBar },
|
||||
data() {
|
||||
return {
|
||||
context: null, // Canvas上下文
|
||||
isSigning: false, // 是否正在签名中
|
||||
data:{}
|
||||
data: {}
|
||||
};
|
||||
},
|
||||
onLoad(data) {
|
||||
// 获取 canvas 上下文
|
||||
this.context = uni.createCanvasContext("signatureCanvas", this);
|
||||
this.context.fillStyle = "white";
|
||||
if (data.data){
|
||||
console.log('传递过来的内容', JSON.parse(data.data))
|
||||
this.data = JSON.parse(data.data)
|
||||
if (data.data) {
|
||||
console.log('传递过来的内容', JSON.parse(data.data));
|
||||
this.data = JSON.parse(data.data);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -60,7 +60,7 @@ export default {
|
||||
this.context.setStrokeStyle("#000000"); // 设定笔触颜色
|
||||
this.context.setLineWidth(2); // 设定线条宽度
|
||||
this.context.setLineCap("round"); // 圆形笔触
|
||||
this.context.stroke();
|
||||
this.context.stroke(); // 实线
|
||||
this.context.draw(true); // 连续绘制
|
||||
},
|
||||
// 结束签名
|
||||
@ -87,8 +87,8 @@ export default {
|
||||
filePath: tempFilePath,
|
||||
}).then((res) => {
|
||||
console.log('服务器返回图片地址', res);
|
||||
this.data.image = res.data.url
|
||||
console.log('提交的内容', this.data)
|
||||
this.data.image = res.data.url;
|
||||
console.log('提交的内容', this.data);
|
||||
request({
|
||||
url: '/admin-api/repair/tickets/create',
|
||||
method: 'POST',
|
||||
@ -97,11 +97,11 @@ export default {
|
||||
uni.showToast({
|
||||
title: '创建工单成功',
|
||||
icon: 'success'
|
||||
})
|
||||
});
|
||||
uni.navigateTo({
|
||||
url: `/pages-order/orderDetail/orderDetail?id=${res.data.id}&isDetail=0`
|
||||
});
|
||||
})
|
||||
});
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
@ -149,7 +149,7 @@ export default {
|
||||
|
||||
.canvas {
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
height: 600rpx; /* 加宽画布高度以适配横屏 */
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
|
||||
@ -201,6 +201,12 @@
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "sign/sign",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user