NN2019090901/public/static/weixin/js/papers.js

var app = new Vue({
    el: '#app',
    data: {
        // 用户信息
        memberInfo: {},
        // 当前编辑后图片
        preview: true,
        editPic: '',
        // 剪切参数
        cropParams: {
            id: 0,
            url: '',
            preview: '',
            cropData: {},
        },
        // 图片列表
        picList: {
            img1: {url: '', preview: ''},
            img2: {url: '', preview: ''}
        },
        // 预览状态
        cropPreviewStatus: false,
        // 上传状态
        submitting: false,
        // 打印方式
        printType: 1,
        // 色彩
        colorType: 1,
        image: null,
        // 设备ID
        deviceId: 0,
        // 剪切对象
        jc: false,
        id: 0,
    },
    created: function () {
        //this.getFileList();
        var printType = getParam('pt');
        this.id = getParam('id');
        this.printType = printType ? printType : 1;
    },
    mounted: function () {
        var _this = this;
        // 计时器
        var MAX = 100, MIN = 1;
        $('.weui-count__decrease').on('click', function (e) {
            var $input = $(e.target).siblings('.weui-count__number');
            var number = parseInt($input.val() || "0") - 1
            if (number < MIN) number = MIN;
            $input.val(number)
        })
        $('.weui-count__increase').on('click', function (e) {
            var $input = $(e.target).siblings('.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);
        });

        $("#colorType").change(function(){
            if($(this).is(":checked")){
                _this.colorType = 2;
            }else{
                _this.colorType = 1;
            }
        })
        
        $("body").css('overflow','hidden');
    },
    methods: {
        // 获取图片列表
        getFileList: function () {
            var _this = this;
            $.post('/weixin/print/getFileList', {type: 3}, function (res) {
                if (res.code == 'success') {
                } 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.img1.preview == '' || typeof(_this.picList.img1.preview) == 'undefined') && (_this.picList.img2.preview == '' || typeof(_this.picList.img2.preview) == 'undefined')) {
                $.toast('请选择打印的图片');
                return false;
            }

            _this.preview = false;
            setTimeout(function(){
                $.closePopup();
                $("#previewBox").popup();
                // _this.colorType = $("#colorType").is(":checked") ? 2 : 1;
                var num = parseInt($("#papers-num").val());
                num = num > 0 ? num : 1;
                $("#previewBox").show();

                var $previewImg = document.getElementById("print-preview");
                html2canvas($previewImg, {scale: 3, useCORS: true}).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, '证件打印.jpeg');
                        formData.append('type', 3);
                        formData.append('image[]', file);
                        formData.append('nums[]', num);
                        formData.append('colors[]', _this.colorType);
                        $.hideLoading();
                        _this.saveImg(formData);
                    }
                );
            }, 200)


        },
        // 保存图片
        saveImg: function (formData) {
            // 上传
            var _this = this;
            $.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();
                    if (res.code == 'success') {
                        _this.showModal();
                    } else if (res.code == 'login') {
                        login(res.data.url);
                    } else {
                        $.toast(res.message);
                    }
                },
                error: function (res) {
                    $.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();
                            $.closePopup();
                            $("#previewBox").hide();
                            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,
                                        type: 3
                                    };

                                    $.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,
                                                    type: 3
                                                };

                                                $.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});
        },
        // 删除图片
        picDel: function (id) {
            this.picList[id] = {url: '', preview: ''};
            $("#upload_"+id).val('');
        },
        // 彩印
        picColor: function (k) {
            if ($("#color_" + k).hasClass('active')) {
                $("#color_" + k).attr('data-color', 1);
                $("#color_" + k).text('黑白');
            } else {
                $("#color_" + k).attr('data-color', 2);
                $("#color_" + k).text('彩印');
            }
            $("#color_" + k).toggleClass('active');
        },
        // 编辑图片
        picEdit: function (id) {
            var _this = this;
            $.closePopup();
            $(".crop-img").html('<img id="cropImg" src="" alt="" off="">');
            _this.cropParams = JSON.parse(JSON.stringify(_this.picList[id]));
            if (_this.cropParams.url == '') {
                $.toast('请选择图片');
                return false;
            }
            $("#cropImg").attr('src', _this.cropParams.url);
            $image = $("#cropImg");

            $("#cropBox").popup();
            var imgWidth = 243;
            var imgHeight = 153;
            var options = {
                // aspectRatio: parseFloat(16/9),
                aspectRatio: parseFloat(243/153),
                // movable: false,
                //resizable: false,
                //touchDragZoom: true,
                //zoomable: true,
                // autoCropArea: 0.8,
                // zoomOnTouch: false,
                zoomOnWheel: false,
                scalable: false,
                // touchDragZoom: false,
                responsive:false,
                minCropBoxWidth: imgWidth,
                minCropBoxHeight: imgHeight,
                // maxCropBoxWidth: imgWidth,
                // maxCropBoxHeight: imgHeight,
                preview: '.preview_' + id,
                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.cropParams.id = id;
                    _this.cropParams.cropData = {
                        width: data.width*20,
                        // width: imgWidth*20,
                        height: data.height*20,
                        // height: imgHeight*20,
                        rotate: data.rotate,
                        imageSmoothingQuality: 'high',
                        fillColor: '#fff',
                    };
                    // _this.picList[id].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);
            }

        },
        // 旋转图片处理
        rotateImg: function(img, direction,canvas) {
            //alert(img);
            //最小与最大旋转方向，图片旋转4次后回到原方向
            var min_step = 0;
            var max_step = 3;
            //var img = document.getElementById(pid);
            if (img == null)return;
            //img的高度和宽度不能在img元素隐藏后获取，否则会出错
            var height = img.height;
            var width = img.width;
            //var step = img.getAttribute('step');
            var step = 2;
            if (step == null) {
                step = min_step;
            }
            if (direction == 'right') {
                step++;
                //旋转到原位置，即超过最大值
                step > max_step && (step = min_step);
            } else {
                step--;
                step < min_step && (step = max_step);
            }
            //img.setAttribute('step', step);
            /*var canvas = document.getElementById('pic_' + pid);
            if (canvas == null) {
                img.style.display = 'none';
                canvas = document.createElement('canvas');
                canvas.setAttribute('id', 'pic_' + pid);
                img.parentNode.appendChild(canvas);
            }  */
            //旋转角度以弧度值为参数
            var degree = step * 90 * Math.PI / 180;
            var ctx = canvas.getContext('2d');
            switch (step) {
                case 0:
                    canvas.width = width;
                    canvas.height = height;
                    ctx.drawImage(img, 0, 0);
                    break;
                case 1:
                    canvas.width = height;
                    canvas.height = width;
                    ctx.rotate(degree);
                    ctx.drawImage(img, 0, -height);
                    break;
                case 2:
                    canvas.width = width;
                    canvas.height = height;
                    ctx.rotate(degree);
                    ctx.drawImage(img, -width, -height);
                    break;
                case 3:
                    canvas.width = height;
                    canvas.height = width;
                    ctx.rotate(degree);
                    ctx.drawImage(img, -width, 0);
                    break;
            }
        },
        // 取消剪切
        cropCancel: function () {
            $.closePopup();
            $("#previewBox").hide();
            this.preview = true;
            if (this.jc != false) {
                $("#cropImg").cropper('destroy');
                this.jc = null;
                $("#cropImg").remove();
            }
        },
        // 预览剪切
        cropPreview: function () {
            $.closePopup();
            $("#previewBox").hide();
            $("#previewBox").popup();
            if(this.picList.img1.url || this.picList.img2.url){
                this.preview = false;
            }
        },
        // 旋转
        rotateConfirm: function(){
            $("#cropImg").cropper("rotate", 45);
        },
        // 缩放
        cropZoom: function(ele, type){
            $("#cropImg").cropper("zoom", type==1? 0.1 : -0.1);
        },
        // 确定剪切
        cropConfirm: function () {
            var _this = this;
            $.closePopup();
            $("#previewBox").hide();
            if (this.jc != null) {
                $.showLoading('图片处理中...');
                $image = $("#cropImg");
                var id = _this.cropParams.id;
                var canvas = $image.cropper('getCroppedCanvas', _this.cropParams.cropData);
                var url = canvas.toDataURL('image/jpeg');
                _this.picList[id].url = url;
                _this.picList[id].preview = url;
                // _this.picList[id].fileData = _this.dataURLtoFile(e, e.name);

                setTimeout(function(){
                    $.hideLoading();
                    $("#cropImg").cropper('destroy');
                    _this.jc = null;
                    $("#cropImg").remove();
                }, 300)
                /*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.dataURLtoFile(e, e.name);

                        setTimeout(function(){
                            $.hideLoading();
                            $("#cropImg").cropper('destroy');
                            _this.jc = null;
                            $("#cropImg").remove();
                        }, 300)
                    }

                },"image/jpeg");*/

            }
        },
        // 选择图片
        selectPic: function (ele, id) {
            var _this = this;
            var files = ele.target.files;
            if (files.length > 0) {
                $.each(files, function (k, file) {
                    if (file) {
                        var Orientation = null;
                        //获取照片方向角属性，用户旋转控制
                        EXIF.getData(file, function() {
                            // alert(EXIF.pretty(this));
                            EXIF.getAllTags(this);
                            //alert(EXIF.getTag(this, 'Orientation'));
                            Orientation = EXIF.getTag(this, 'Orientation');
                            //return;
                        });

                        var reader = new FileReader();
                        reader.readAsDataURL(file);
                        var blobUrl = URL.createObjectURL(file);
                        reader.onloadend = function (even) {

                            var image = new Image();
                            image.src = even.currentTarget.result;
                            image.onload =  function(){
                                var expectWidth = this.naturalWidth;
                                var expectHeight = this.naturalHeight;

                                if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) {
                                    expectWidth = 800;
                                    expectHeight = expectWidth * this.naturalHeight / this.naturalWidth;
                                } else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) {
                                    expectHeight = 1200;
                                    expectWidth = expectHeight * this.naturalWidth / this.naturalHeight;
                                }
                                var canvas = document.createElement("canvas");
                                var ctx = canvas.getContext("2d");
                                canvas.width = expectWidth;
                                canvas.height = expectHeight;
                                ctx.drawImage(this, 0, 0, expectWidth, expectHeight);
                                var base64 = null;
                                //修复ios
                                if (navigator.userAgent.match(/iphone/i)) {
                                    //alert(expectWidth + ',' + expectHeight);
                                    //如果方向角不为1，都需要进行旋转 added by lzk
                                    if(Orientation != "" && Orientation != 1){
                                        alert('旋转处理');
                                        switch(Orientation){
                                            case 6://需要顺时针（向左）90度旋转
                                                alert('需要顺时针（向左）90度旋转');
                                                _this.rotateImg(this,'left',canvas);
                                                break;
                                            case 8://需要逆时针（向右）90度旋转
                                                alert('需要顺时针（向右）90度旋转');
                                                _this.rotateImg(this,'right',canvas);
                                                break;
                                            case 3://需要180度旋转
                                                alert('需要180度旋转');
                                                _this.rotateImg(this,'right',canvas);//转两次
                                                _this.rotateImg(this,'right',canvas);
                                                break;
                                        }
                                    }
                                    base64 = canvas.toDataURL("image/jpeg", 0.8);
                                }else if (navigator.userAgent.match(/Android/i)) {// 修复android
                                    var encoder = new JPEGEncoder();
                                    base64 = encoder.encode(ctx.getImageData(0, 0, expectWidth, expectHeight), 80);
                                }else{
                                    //alert(Orientation);
                                    if(Orientation != "" && Orientation != 1){
                                        //alert('旋转处理');
                                        switch(Orientation){
                                            case 6://需要顺时针（向左）90度旋转
                                                alert('需要顺时针（向左）90度旋转');
                                                _this.rotateImg(this,'left',canvas);
                                                break;
                                            case 8://需要逆时针（向右）90度旋转
                                                alert('需要顺时针（向右）90度旋转');
                                                _this.rotateImg(this,'right',canvas);
                                                break;
                                            case 3://需要180度旋转
                                                alert('需要180度旋转');
                                                _this.rotateImg(this,'right',canvas);//转两次
                                                _this.rotateImg(this,'right',canvas);
                                                break;
                                        }
                                    }

                                    base64 = canvas.toDataURL("image/jpeg", 0.8);
                                }
                                //uploadImage(base64);
                                //$("#myImage").attr("src", base64);

                                var img = {
                                    id: id,
                                    url: base64,
                                    preview: base64,
                                    blobUrl: blobUrl,
                                    name: file.name,
                                    file_size: file.size,
                                    file_type: file.type
                                };
                                _this.picList[id] = img;
                                setTimeout(function(){
                                    _this.picEdit(id);
                                }, 300)
                            }
                        }
                    }
                })
            }

        }
    }
});