NN2019090901/public/static/weixin/js/photo.js

var app = new Vue({
    el: '#app',
    data: {
        // 用户信息
        memberInfo: {},
        // 当前编辑后图片
        editPic: '',
        // 剪切参数
        cropParams: {
            id: 0,
            src: '',
            cropSrc: '',
            min: 400,
            max: 200,
            boundx: 0,
            boundy: 0,
            width: 0,
            height: 0,
        },
        // 图片列表
        picList: [],
        // 预览状态
        cropPreviewStatus: false,
        // 上传状态
        submitting: false,
        // 打印方式
        printType: 1,
        colorType: 1,
        image: null,
        // 设备ID
        deviceId: 0,
        taskKey: '',
        // 剪切对象
        jc: null,
        id: 0,
    },
    created: function () {
        //this.getFileList();
        var printType = getParam('pt');
        this.id = getParam('id');
        this.printType = printType ? printType : 1;
        this.taskKey = getKey();
    },
    updated: function () {
        // 计时器
        var _this = this;
        var MAX = 100, MIN = 1;
        $('.weui-count__decrease').unbind('click').on('click', function (e) {
            if (_this.deviceId) {
                return false;
            }
            var $input = $(e.target).parent().find('.weui-count__number');
            var number = parseInt($input.val() || "0") - 1
            if (number < MIN) number = MIN;
            $input.val(number)
        })
        $('.weui-count__increase').unbind('click').on('click', function (e) {
            if (_this.deviceId) {
                return false;
            }
            var $input = $(e.target).parent().find('.weui-count__number');
            var number = parseInt($input.val() || "0") + 1
            if (number > MAX) number = MAX;
            $input.val(number)
        });
        $(".weui-count__number").blur(function () {
            var num = $.trim($(this).val());
            if (!/[1-9][0-9]{0,2}/.test(num) || num < MIN || num > MAX) {
                num = 1;
            }
            $(this).val(num);
        })
    },
    methods: {
        // 获取图片列表
        getFileList: function () {
            var _this = this;
            $.post('/weixin/print/getFileList', {}, function (res) {
                if (res.code == 'success') {
                    _this.picList = res.data
                } else if (res.code == 'login') {
                    login(res.data.url);
                }
            }, "json");
        },
        // 获取用户信息
        getMemberInfo: function () {
            var _this = this;
            $.post('/weixin/member/getMemberInfo', {}, function (res) {
                if (res.code == 'success') {
                    _this.memberInfo = res.data
                } else if (res.code == 'login') {
                    login(res.data.url);
                }
            }, "json");
        },
        // 提交
        doSubmit: function () {
            var _this = this;
            var count = 0;
            var formData = new FormData();
            if (_this.submitting) {
                return false;
            }

            if (_this.picList.length <= 0) {
                $.toast('请先选择图片', 'text');
                return false;
            }

            console.log('提交处理');
            var total = $(".print-pic").length;
            // $each(_this.picList,function (k, item) {
            $(".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 picId = $(this).attr('data-id');
                var fileData = typeof(_this.picList[k]) != 'undefined' ? _this.picList[k] : '';
                // var canvas = document.createElement("canvas");
                var scale = 12;
                var opts = {
                    scale: scale, // 添加的scale 参数
                    width: 119,
                    height: 169,
                    background: '#fff',
                };

                // 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 src = canvas.toDataURL('image/jpeg');
                //         var file = _this.dataURLtoFile(src, name ? name : '图片打印.jpeg');
                formData.append('type', 1);
                formData.append('taskKey', _this.taskKey);
                if (fileData) {
                    formData.append('image[]', fileData);
                    formData.append('nums[]', num);
                    formData.append('ids[]', id);
                    formData.append('colors[]', colorType);
                }

                count++;
            });

            if (count <= 0) {
                $.toast('请选择打印的图片');
                return false;
            }

            // 上传
            $.showLoading('文件上传处理中...');
            _this.submitting = true;
            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 () {
            var _this = this;
            $.closeModal();
            $.modal({
                title: "",
                autoClose: false,
                text: "<div class='scan'>填写/扫码打印设备</div><div class='tips'>设备号<input type='text' id='device_code' placeholder='请填写打印机设备号'></div>",
                buttons: [
                    {
                        text: "取消",
                        className: "default",
                        onClick: function () {
                            $.closeModal();
                            return false;
                        }
                    },
                    {
                        text: "扫码打印",
                        className: "warning",
                        onClick: function () {
                            _this.scan();
                        }
                    },
                    {
                        text: "填写打印",
                        className: "success",
                        onClick: function () {
                            _this.inputCode();
                            return false;
                        }
                    },
                ]
            });
        },
        // 输入设备号打印
        inputCode: function () {
            var _this = this;
            var deviceCode = $.trim($("#device_code").val());
            if (deviceCode == '' || deviceCode === null) {
                $.toast('请填写设备号');
                setTimeout(function () {
                    _this.showModal();
                }, 500)
                return false;
            }
            $.post('/weixin/print/checkDevice', {deviceCode: deviceCode}, function (res) {
                if (res.code == 'success') {
                    var deviceId = res.data.id;
                    $.closeModal();
                    $.modal({
                        title: "",
                        text: "<div class='scan'>设备验证成功</div><div class='info'></div><div class='tips'>点击下方确认下单</div>",
                        buttons: [
                            {
                                text: "取消",
                                className: "default",
                                onClick: function () {
                                    $.closeModal();
                                    setTimeout(function () {
                                        _this.showModal();
                                    }, 500)
                                    return false;
                                }
                            },
                            {
                                text: "确认下单",
                                className: "warning",
                                onClick: function () {
                                    var params = {
                                        clusterId: _this.id,
                                        deviceId: deviceId,
                                        printType: _this.printType,
                                        colorType: _this.colorType,
                                        taskKey: _this.taskKey,
                                        type: 1
                                    };

                                    $.showLoading('订单处理中...');
                                    $.post('/weixin/order/confirm', params, function (res) {
                                        $.hideLoading();
                                        if (res.code == 'success') {
                                            var msg = _this.id > 0 && _this.printType == 2 ? '参与拼团成功' : (_this.printType == 2 ? '发起拼团成功' : '下单成功');
                                            $.showLoading(msg + '，即将前往支付...');
                                            setTimeout(function () {
                                                location.href = '/weixin/order/pay?id=' + res.data;
                                            }, 800);

                                        } else if (res.code == 'login') {
                                            login(res.data.url);
                                        } else {
                                            $.closeModal();
                                            $.modal({
                                                title: "",
                                                text: "<div class='scan'>下单失败</div><div class='tips'>" + res.message + "</div>",
                                                buttons: [
                                                    {
                                                        text: "取消",
                                                        onClick: function () {
                                                            return false;
                                                        }
                                                    }
                                                ]
                                            });
                                        }

                                    }, "json")
                                }
                            },
                        ]
                    });
                } else {
                    $.toast(res.message);
                    setTimeout(function () {
                        _this.showModal();
                    }, 500)
                }
            }, 'json');
        },
        // 扫码设备
        scan: function () {
            var _this = this;
            $.post('/weixin/index/getJssdkParams', {url: location.href}, function (res) {
                var params = res.data;
                // 微信JSSDK
                wx.config({
                    debug: false, // 是否调试模式
                    appId: params.appId, // 必填，公众号的唯一标识
                    timestamp: params.timestamp, // 必填，生成签名的时间戳
                    nonceStr: params.nonceStr, // 必填，生成签名的随机串
                    signature: params.signature,// 必填，签名
                    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'scanQRCode'] // 必填，需要使用的JS接口列表
                });

                // 初始化处理
                wx.ready(function () {
                    // 微信扫一扫
                    $.closeModal();
                    wx.scanQRCode({
                        needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                        scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                        success: function (res) {
                            var deviceId = res.resultStr;
                            _this.deviceId = deviceId;
                            if (deviceId) {
                                $.closeModal();
                                $.modal({
                                    title: "",
                                    text: "<div class='scan'>扫码成功</div><div class='info'></div><div class='tips'>点击下方确认下单</div>",
                                    buttons: [
                                        {
                                            text: "取消",
                                            className: "default",
                                            onClick: function () {
                                                $.closeModal();
                                                setTimeout(function () {
                                                    _this.showModal();
                                                }, 500)
                                                return false;
                                            }
                                        },
                                        {
                                            text: "确认下单",
                                            className: "warning",
                                            onClick: function () {
                                                var params = {
                                                    clusterId: _this.id,
                                                    deviceId: deviceId,
                                                    printType: _this.printType,
                                                    colorType: _this.colorType,
                                                    taskKey: _this.taskKey,
                                                    type: 1
                                                };

                                                $.showLoading('订单处理中...');
                                                $.post('/weixin/order/confirm', params, function (res) {
                                                    $.hideLoading();
                                                    if (res.code == 'success') {
                                                        var msg = _this.id > 0 && _this.printType == 2 ? '参与拼团成功' : (_this.printType == 2 ? '发起拼团成功' : '下单成功');
                                                        $.showLoading(msg + '，即将前往支付...');
                                                        setTimeout(function () {
                                                            location.href = '/weixin/order/pay?id=' + res.data;
                                                        }, 800);

                                                    } else if (res.code == 'login') {
                                                        login(res.data.url);
                                                    } else {
                                                        $.closeModal();
                                                        $.modal({
                                                            title: "",
                                                            text: "<div class='scan'>下单失败</div><div class='tips'>" + res.message + "</div>",
                                                            buttons: [
                                                                {
                                                                    text: "取消",
                                                                    onClick: function () {
                                                                        return false;
                                                                    }
                                                                },
                                                                {
                                                                    text: "重新扫码下单",
                                                                    className: "warning",
                                                                    onClick: function () {
                                                                        _this.scan();
                                                                    }
                                                                },
                                                            ]
                                                        });
                                                    }

                                                }, "json")
                                            }
                                        },
                                    ]
                                });
                            } else {
                                $.toast('扫码信息错误');
                            }
                        }
                    });
                });
            }, "JSON");
        },
        // base转文件
        dataURLtoFile: function (dataurl, filename) {//将base64转换为文件
            var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new File([u8arr], filename, {type: mime});
        },
        // base转文件
        dataBlobtoFile: function (dataurl, filename) {//将base64转换为文件
            return new File([u8arr], filename, {type: 'image/jpeg'});
        },
        // 删除图片
        picDel: function (id) {
            var fileId = $("#pic_" + id).attr('data-id');
            $("#pic_" + id).detach();
            this.picList[id] = {};
            if (fileId) {
                $.post("/weixin/print/fileDel", {id: fileId})
            }
        },
        // 彩印
        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 {
                this.colorType = 2;
                $(".print-pic .op .color").attr('data-color', 2);
                $(".print-pic .op .color").text('彩印');
                $(".print-pic .pic-preview img").removeClass('gray');
            }
            $(".print-pic .op .color").toggleClass('active');
        },
        // 编辑图片
        picEdit: function (id) {
            var _this = this;
            $.closePopup();
            var src = $("#pic_img_" + id).attr('data-pic');
            $(".crop-img").html('<img id="cropImg" src="" alt="" off="">');
            _this.cropParams.id = id;
            _this.cropParams.url = src;
            _this.cropParams.preview = src;
            if (_this.cropParams.url == '') {
                $.toast('请重新添加图片');
                return false;
            }

            _this.image = new Image();
            _this.image.src = src;
            var iWidth = _this.image.width;
            var iHeight = _this.height;
            var rate = iWidth / iHeight;
            $("#cropImg").attr('src', _this.cropParams.url);
            $image = $("#cropImg");
            var imgWidth = $('body').width() * 0.6;

            $("#cropBox").popup();
            var options = {
                aspectRatio: 0,
                center: true,
                movable: true,
                zoomable: true,
                zoomOnTouch: true,
                zoomOnWheel: false,
                scalable: true,
                // cropBoxMovable: false,
                wheelZoomRatio: 0.1,
                background: false,
                responsive: true,
                guides: false,
                strict: false,
                width: width,
                dragMode: 'move',
                height: height,
                autoCropArea: 0,
                cropBoxMovable: false,
                cropBoxResizable: false,
                minContainerWidth: iWidth,
                minContainerHeight: iHeight,
                minCropBoxWidth: iWidth,
                maxCropBoxWidth: iWidth,
                minCropBoxHeight: iHeight,
                maxCropBoxHeight: iHeight,
                minCanvasWeight: iWidth,
                maxCanvasWeight: iWidth,
                minCanvasHeight: iHeight,
                maxCanvasHeight: iHeight,
                // preview: '.preview-img',
                viewMode: 1,
                crop: function (data) {
                    var cropData = {
                        x: Math.round(data.x),
                        y: Math.round(data.y),
                        height: Math.round(data.height),
                        width: Math.round(data.width),
                        rotate: Math.round(data.rotate),
                    };


                    /*      _this.picList[id].preview = canvas.toDataURL("image/jpeg", 1);
                          _this.cropParams.preview = canvas.toDataURL("image/jpeg", 1);*/
                    _this.cropParams.cropData = cropData;
                }
            }

            if (_this.jc != null) {
                $image.cropper(options);
                $image.cropper('replace', _this.cropParams.blobUrl);
            } else {
                $image.cropper(options);
                _this.jc = $image.cropper('replace', _this.cropParams.blobUrl);
            }

        },
        // 图片大小
        resetSizeImg: function (image, FitWidth, FitHeight) {
            var newImg = image;

            if (image.width > 0 && image.height > 0) {
                if (image.width / image.height >= FitWidth / FitHeight) {
                    if (image.width > FitWidth) {
                        image.width = FitWidth;
                        newImg.height = (image.height * FitWidth) / image.width;
                    } else {
                        newImg.width = image.width;
                        newImg.height = image.height;
                    }
                } else {
                    if (image.height > FitHeight) {
                        newImg.height = FitHeight;
                        newImg.width = (image.width * FitHeight) / image.height;
                    } else {
                        newImg.width = image.width;
                        newImg.height = image.height;
                    }
                }
            }
            return newImg;
        },
        // 取消剪切
        cropCancel: function () {
            $.closePopup();
            $("#previewBox").hide();
            if (this.jc != false) {
                $("#cropImg").cropper('destroy');
                this.jc = null;
                $("#cropImg").remove();
            }
        },
        // 预览剪切
        cropPreview: function () {
            this.cropPreviewStatus = true;
            $("#cropBox .crop-img").hide();
            // $("#cropImgPreview").attr('src', this.cropParams.cropSrc);
            $("#cropBox .crop-preview").show();
        },
        // 缩放
        cropZoom: function (ele, type) {
            $("#cropImg").cropper("zoom", type == 1 ? 0.1 : -0.1);
        },
        // 旋转
        rotateConfirm: function () {
            $("#cropImg").cropper("rotate", 45);
        },
        // 确定剪切
        cropConfirm: function () {
            var _this = this;
            $.closePopup();
            $("#previewBox").hide();
            $(".crop-img").show();
            $(".crop-preview").hide();
            this.cropPreviewStatus = false;
            if (this.jc != null) {
                $.showLoading('图片处理中...');
                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的图片格式
                    if (e != null) {
                        var timestamp = Date.parse(new Date());
                        e.name = timestamp + ".png";
                        url = URL.createObjectURL(e);
                        _this.picList[id].url = url;
                        _this.picList[id].preview = url;
                        _this.picList[id].fileData = _this.dataBlobtoFile(e, e.name);
                        _this.cropParams.preview = url;

                        setTimeout(function () {
                            $.hideLoading();
                            $("#cropImg").cropper('destroy');
                            this.jc = null;
                            $("#cropImg").remove();
                        }, 200);
                    }
                }, "image/jpeg");

            }

        },
        // 重新剪切
        cropReset: function () {
            this.cropPreviewStatus = false;
            $("#cropBox .crop-img").show();
            $("#cropBox .crop-preview").hide();
        },
        // 选择图片
        selectPic: function (ele) {
            var _this = this;
            var files = ele.target.files;
            if (files.length > 0) {
                var count = _this.picList.length;
                $.each(files, function (k, file) {
                    if (file) {
                        var reader = new FileReader();
                        reader.readAsDataURL(file);
                        var blobUrl = URL.createObjectURL(file);
                        reader.onloadend = function (even) {
                            var img = {
                                id: 0,
                                url: even.currentTarget.result,
                                // url: even.currentTarget.result,
                                preview: even.currentTarget.result,
                                name: file.name,
                                blobUrl: blobUrl,
                                file_size: file.size,
                                file_type: file.type
                            };
                            _this.picList.push(img);

                            _this.picEdit(id);
                        }
                    }
                })

                if (count > 0) {
                    _this.getFileList(0);
                }
            }

        }
    }
});