|
|
@@ -45,7 +45,7 @@ var app = new Vue({
|
|
|
// 计时器
|
|
|
var _this = this;
|
|
|
var MAX = 100, MIN = 1;
|
|
|
- $('.weui-count__decrease').unbind('click').on('click',function (e) {
|
|
|
+ $('.weui-count__decrease').unbind('click').on('click', function (e) {
|
|
|
if (_this.deviceId) {
|
|
|
return false;
|
|
|
}
|
|
|
@@ -54,7 +54,7 @@ var app = new Vue({
|
|
|
if (number < MIN) number = MIN;
|
|
|
$input.val(number)
|
|
|
})
|
|
|
- $('.weui-count__increase').unbind('click').on('click',function (e) {
|
|
|
+ $('.weui-count__increase').unbind('click').on('click', function (e) {
|
|
|
if (_this.deviceId) {
|
|
|
return false;
|
|
|
}
|
|
|
@@ -103,92 +103,91 @@ var app = new Vue({
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
+ console.log('提交处理');
|
|
|
var total = $(".print-pic").length;
|
|
|
$(".print-pic").each(function (k, item) {
|
|
|
var _img = $(this).find('.pic-img');
|
|
|
var name = $.trim(_img.attr('alt'));
|
|
|
var num = parseInt($(this).find('.pic-num').val());
|
|
|
var colorType = $(this).find('.color').attr('data-color');
|
|
|
- var $previewImg = document.getElementById("pic_preview_"+k);
|
|
|
+ var $previewImg = document.getElementById("pic_preview_" + k);
|
|
|
var id = $(this).attr('data-id');
|
|
|
- var opts = {
|
|
|
- scale: 12, // 添加的scale 参数
|
|
|
- // width: 119,
|
|
|
- // height: 169,
|
|
|
- background: '#fff',
|
|
|
- };
|
|
|
-
|
|
|
- if(id<=0){
|
|
|
- setTimeout(function(){
|
|
|
- html2canvas($previewImg, opts).then( function (canvas) {
|
|
|
- const context = canvas.getContext('2d');
|
|
|
- context.translate(0.5,0.5);
|
|
|
- context.mozImageSmoothingEnabled = false;
|
|
|
- context.webkitImageSmoothingEnabled = false;
|
|
|
- context.msImageSmoothingEnabled = false;
|
|
|
- context.imageSmoothingEnabled = false;
|
|
|
+ var opts = {
|
|
|
+ scale: 12, // 添加的scale 参数
|
|
|
+ // width: 119,
|
|
|
+ // height: 169,
|
|
|
+ background: '#fff',
|
|
|
+ };
|
|
|
|
|
|
- var src = canvas.toDataURL('image/jpeg');
|
|
|
- var file = _this.dataURLtoFile(src, name? name : '图片打印.jpeg');
|
|
|
- formData.append('type', 1);
|
|
|
- formData.append('taskKey', _this.taskKey);
|
|
|
- formData.append('image[]', file);
|
|
|
- formData.append('nums[]', num);
|
|
|
- formData.append('ids[]', id);
|
|
|
- formData.append('colors[]', colorType);
|
|
|
- count++;
|
|
|
|
|
|
- if(total <= (k+1)){
|
|
|
- if(count<=0){
|
|
|
- $.toast('请选择打印的图片');
|
|
|
- return false;
|
|
|
- }
|
|
|
- _this.submitting = true;
|
|
|
+ html2canvas($previewImg, opts).then(function (canvas) {
|
|
|
+ const context = canvas.getContext('2d');
|
|
|
+ context.translate(0.5, 0.5);
|
|
|
+ context.mozImageSmoothingEnabled = false;
|
|
|
+ context.webkitImageSmoothingEnabled = false;
|
|
|
+ context.msImageSmoothingEnabled = false;
|
|
|
+ context.imageSmoothingEnabled = false;
|
|
|
|
|
|
- // 上传
|
|
|
- $.showLoading('文件上传处理中...');
|
|
|
- var ajax = $.ajax({
|
|
|
- url: '/weixin/upload/image',
|
|
|
- data: formData,
|
|
|
- type: "post",
|
|
|
- dataType: 'json',
|
|
|
- cache: false,
|
|
|
- contentType: false,
|
|
|
- processData: false,
|
|
|
- timeout: 30000,
|
|
|
- success: function (res) {
|
|
|
- $.hideLoading();
|
|
|
- _this.submitting = false;
|
|
|
- if (res.code == 'success') {
|
|
|
- _this.showModal();
|
|
|
- } else if (res.code == 'login') {
|
|
|
- login(res.data.url);
|
|
|
- } else {
|
|
|
- $.toast(res.message);
|
|
|
- }
|
|
|
- },
|
|
|
- error: function(res){
|
|
|
- _this.submitting = false;
|
|
|
- $.toast('服务器错误');
|
|
|
- },
|
|
|
- complete: function (XMLHttpRequest, status) {
|
|
|
- if(status == 'timeout'){
|
|
|
- ajax.abort();
|
|
|
- $.toast('请求超时，请重新提交');
|
|
|
- location.reload();
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
+ var src = canvas.toDataURL('image/jpeg');
|
|
|
+ var file = _this.dataURLtoFile(src, name ? name : '图片打印.jpeg');
|
|
|
+ formData.append('type', 1);
|
|
|
+ formData.append('taskKey', _this.taskKey);
|
|
|
+ formData.append('image[]', file);
|
|
|
+ formData.append('nums[]', num);
|
|
|
+ formData.append('ids[]', id);
|
|
|
+ formData.append('colors[]', colorType);
|
|
|
+ count++;
|
|
|
|
|
|
- }
|
|
|
+ if (total <= (k + 1)) {
|
|
|
+ if (count <= 0) {
|
|
|
+ $.toast('请选择打印的图片');
|
|
|
+ return false;
|
|
|
}
|
|
|
- );
|
|
|
- }, 100)
|
|
|
- }
|
|
|
+ _this.submitting = true;
|
|
|
+
|
|
|
+ // 上传
|
|
|
+ $.showLoading('文件上传处理中...');
|
|
|
+ var ajax = $.ajax({
|
|
|
+ url: '/weixin/upload/image',
|
|
|
+ data: formData,
|
|
|
+ type: "post",
|
|
|
+ dataType: 'json',
|
|
|
+ cache: false,
|
|
|
+ contentType: false,
|
|
|
+ processData: false,
|
|
|
+ timeout: 30000,
|
|
|
+ success: function (res) {
|
|
|
+ $.hideLoading();
|
|
|
+ _this.submitting = false;
|
|
|
+ if (res.code == 'success') {
|
|
|
+ _this.showModal();
|
|
|
+ } else if (res.code == 'login') {
|
|
|
+ login(res.data.url);
|
|
|
+ } else {
|
|
|
+ $.toast(res.message);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ error: function (res) {
|
|
|
+ _this.submitting = false;
|
|
|
+ $.toast('服务器错误');
|
|
|
+ },
|
|
|
+ complete: function (XMLHttpRequest, status) {
|
|
|
+ if (status == 'timeout') {
|
|
|
+ ajax.abort();
|
|
|
+ $.toast('请求超时，请重新提交');
|
|
|
+ location.reload();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
+
|
|
|
});
|
|
|
},
|
|
|
// 显示填写窗口
|
|
|
- showModal: function(){
|
|
|
+ showModal: function () {
|
|
|
var _this = this;
|
|
|
$.closeModal();
|
|
|
$.modal({
|
|
|
@@ -223,18 +222,18 @@ var app = new Vue({
|
|
|
});
|
|
|
},
|
|
|
// 输入设备号打印
|
|
|
- inputCode: function(){
|
|
|
+ inputCode: function () {
|
|
|
var _this = this;
|
|
|
var deviceCode = $.trim($("#device_code").val());
|
|
|
- if(deviceCode == '' || deviceCode === null){
|
|
|
+ if (deviceCode == '' || deviceCode === null) {
|
|
|
$.toast('请填写设备号');
|
|
|
- setTimeout(function(){
|
|
|
+ setTimeout(function () {
|
|
|
_this.showModal();
|
|
|
}, 500)
|
|
|
return false;
|
|
|
}
|
|
|
$.post('/weixin/print/checkDevice', {deviceCode: deviceCode}, function (res) {
|
|
|
- if(res.code == 'success'){
|
|
|
+ if (res.code == 'success') {
|
|
|
var deviceId = res.data.id;
|
|
|
$.closeModal();
|
|
|
$.modal({
|
|
|
@@ -261,7 +260,7 @@ var app = new Vue({
|
|
|
deviceId: deviceId,
|
|
|
printType: _this.printType,
|
|
|
colorType: _this.colorType,
|
|
|
- taskKey: _this.taskKey,
|
|
|
+ taskKey: _this.taskKey,
|
|
|
type: 1
|
|
|
};
|
|
|
|
|
|
@@ -281,7 +280,7 @@ var app = new Vue({
|
|
|
$.closeModal();
|
|
|
$.modal({
|
|
|
title: "",
|
|
|
- text: "<div class='scan'>下单失败</div><div class='tips'>"+res.message+"</div>",
|
|
|
+ text: "<div class='scan'>下单失败</div><div class='tips'>" + res.message + "</div>",
|
|
|
buttons: [
|
|
|
{
|
|
|
text: "取消",
|
|
|
@@ -298,13 +297,13 @@ var app = new Vue({
|
|
|
},
|
|
|
]
|
|
|
});
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
$.toast(res.message);
|
|
|
- setTimeout(function(){
|
|
|
+ setTimeout(function () {
|
|
|
_this.showModal();
|
|
|
}, 500)
|
|
|
}
|
|
|
- },'json');
|
|
|
+ }, 'json');
|
|
|
},
|
|
|
// 扫码设备
|
|
|
scan: function () {
|
|
|
@@ -357,7 +356,7 @@ var app = new Vue({
|
|
|
deviceId: deviceId,
|
|
|
printType: _this.printType,
|
|
|
colorType: _this.colorType,
|
|
|
- taskKey: _this.taskKey,
|
|
|
+ taskKey: _this.taskKey,
|
|
|
type: 1
|
|
|
};
|
|
|
|
|
|
@@ -377,7 +376,7 @@ var app = new Vue({
|
|
|
$.closeModal();
|
|
|
$.modal({
|
|
|
title: "",
|
|
|
- text: "<div class='scan'>下单失败</div><div class='tips'>"+res.message+"</div>",
|
|
|
+ text: "<div class='scan'>下单失败</div><div class='tips'>" + res.message + "</div>",
|
|
|
buttons: [
|
|
|
{
|
|
|
text: "取消",
|
|
|
@@ -428,13 +427,13 @@ var app = new Vue({
|
|
|
}
|
|
|
},
|
|
|
// 彩印
|
|
|
- picColor: function(k){
|
|
|
- if($("#color_"+k).hasClass('active')){
|
|
|
+ picColor: function (k) {
|
|
|
+ if ($("#color_" + k).hasClass('active')) {
|
|
|
this.colorType = 1;
|
|
|
$(".print-pic .op .color").attr('data-color', 1);
|
|
|
$(".print-pic .op .color").text('黑白');
|
|
|
$(".print-pic .pic-preview img").addClass('gray');
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
this.colorType = 2;
|
|
|
$(".print-pic .op .color").attr('data-color', 2);
|
|
|
$(".print-pic .op .color").text('彩印');
|
|
|
@@ -460,10 +459,10 @@ var app = new Vue({
|
|
|
_this.image.src = src;
|
|
|
var iWidth = _this.image.width;
|
|
|
var iHeight = _this.height;
|
|
|
- var rate = iWidth/iHeight;
|
|
|
+ var rate = iWidth / iHeight;
|
|
|
$("#cropImg").attr('src', _this.cropParams.url);
|
|
|
$image = $("#cropImg");
|
|
|
- var imgWidth = $('body').width()*0.6;
|
|
|
+ var imgWidth = $('body').width() * 0.6;
|
|
|
|
|
|
$("#cropBox").popup();
|
|
|
var options = {
|
|
|
@@ -473,7 +472,7 @@ var app = new Vue({
|
|
|
zoomOnWheel: false,
|
|
|
scalable: false,
|
|
|
touchDragZoom: false,
|
|
|
- responsive:false,
|
|
|
+ responsive: false,
|
|
|
// autoCropArea: 0.8,
|
|
|
minCropBoxWidth: 80,
|
|
|
minCropBoxHeight: 80,
|
|
|
@@ -488,18 +487,22 @@ var app = new Vue({
|
|
|
rotate: Math.round(data.rotate),
|
|
|
};
|
|
|
|
|
|
- var canvas = $image.cropper('getCroppedCanvas', {width: data.height*15, height: data.width*15, rotate: data.rotate});
|
|
|
- var url = canvas.toBlob(function(e){
|
|
|
+ var canvas = $image.cropper('getCroppedCanvas', {
|
|
|
+ width: data.height * 15,
|
|
|
+ height: data.width * 15,
|
|
|
+ rotate: data.rotate
|
|
|
+ });
|
|
|
+ var url = canvas.toBlob(function (e) {
|
|
|
console.log(e); //生成Blob的图片格式
|
|
|
var timestamp = Date.parse(new Date());
|
|
|
- e.name=timestamp+".png";
|
|
|
+ e.name = timestamp + ".png";
|
|
|
url = URL.createObjectURL(e);
|
|
|
_this.picList[id].url = url;
|
|
|
_this.picList[id].preview = url;
|
|
|
_this.cropParams.preview = url;
|
|
|
- },"image/jpeg");
|
|
|
- /* _this.picList[id].preview = canvas.toDataURL("image/jpeg", 1);
|
|
|
- _this.cropParams.preview = canvas.toDataURL("image/jpeg", 1);*/
|
|
|
+ }, "image/jpeg");
|
|
|
+ /* _this.picList[id].preview = canvas.toDataURL("image/jpeg", 1);
|
|
|
+ _this.cropParams.preview = canvas.toDataURL("image/jpeg", 1);*/
|
|
|
_this.cropParams.cropData = cropData;
|
|
|
}
|
|
|
}
|
|
|
@@ -556,11 +559,11 @@ var app = new Vue({
|
|
|
$("#cropBox .crop-preview").show();
|
|
|
},
|
|
|
// 缩放
|
|
|
- cropZoom: function(ele, type){
|
|
|
- $("#cropImg").cropper("zoom", type==1? 0.1 : -0.1);
|
|
|
+ cropZoom: function (ele, type) {
|
|
|
+ $("#cropImg").cropper("zoom", type == 1 ? 0.1 : -0.1);
|
|
|
},
|
|
|
// 旋转
|
|
|
- rotateConfirm: function(){
|
|
|
+ rotateConfirm: function () {
|
|
|
$("#cropImg").cropper("rotate", 45);
|
|
|
},
|
|
|
// 确定剪切
|
|
|
@@ -588,7 +591,7 @@ var app = new Vue({
|
|
|
var _this = this;
|
|
|
var files = ele.target.files;
|
|
|
if (files.length > 0) {
|
|
|
- var count = _this.picList.length;
|
|
|
+ var count = _this.picList.length;
|
|
|
$.each(files, function (k, file) {
|
|
|
if (file) {
|
|
|
var reader = new FileReader();
|
|
|
@@ -609,9 +612,9 @@ var app = new Vue({
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
-
|
|
|
- if(count>0){
|
|
|
- _this.getFileList(0);
|
|
|
+
|
|
|
+ if (count > 0) {
|
|
|
+ _this.getFileList(0);
|
|
|
}
|
|
|
}
|
|
|
|
