NN2019090901/public/static/weixin/js/photo_back.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,
        image: null,
        // 设备ID
        deviceId: 0,
        // 剪切对象
        jc: null,
        id: 0,
    },
    created: function () {
        this.getFileList();
        var printType = getParam('pt');
        this.id = getParam('id');
        this.printType = printType ? printType : 1;
    },
    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;
            }
            $(".print-pic").each(function (k, item) {
                var _img = $(this).find('.pic-img');
                var src = $.trim(_img.attr('src'));
                var pic = $.trim(_img.attr('data-pic'));
                var id = $.trim($(this).attr('data-id'));
                var name = $.trim(_img.attr('alt'));
                var num = parseInt($(this).find('.pic-num').val());
                if (src && (id == 0 || pic != src)) {
                    var file = _this.dataURLtoFile(src, name);
                    if (file) {
                        count++;
                        formData.append('image[]', file);
                        formData.append('nums[]', num);
                    }
                } else if (id > 0) {
                    count++;
                }
            });

            if (count <= 0) {
                $.toast('请选择打印的图片');
                return 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();
                    if (res.code == 'success') {
                        $.modal({
                            title: "",
                            text: "<div class='scan'>请扫一扫设备上的二维码</div><div class='tips'>获取设备信息</div>",
                            buttons: [
                                {
                                    text: "扫一扫",
                                    className: "warning",
                                    onClick: function () {
                                        _this.scan();
                                    }
                                },
                            ]
                        });
                    } 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();
                    }
                }
            })
        },
        // 扫码设备
        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 () {
                    // 微信扫一扫
                    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: "warning",
                                            onClick: function () {
                                                var params = {
                                                    clusterId: _this.id,
                                                    deviceId: deviceId,
                                                    printType: _this.printType,
                                                    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 {
                                webToast('扫码信息错误', "middle", 1000)
                            }
                        }
                    });
                });
            }, "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) {
            var fileId = $("#pic_" + id).attr('data-id');
            $("#pic_" + id).detach();
            if (fileId) {
                $.post("/weixin/print/fileDel", {id: fileId})
            }
        },
        // 编辑图片
        picEdit: function (id) {
            var _this = this;
            $.closePopup();
            _this.cropCancel();
            _this.cropCancel();

            var imgWidth = $('body').width();
            $("#cropBox .crop-img").html(" ");
            var src = $("#pic_img_" + id).attr('data-pic');
            _this.cropParams = {id: id, src: src, cropSrc: src};
            _this.image = new Image();
            _this.image.src = src;
            _this.image.id = 'cropImg_' + id;
            _this.image.setAttribute('class', 'img');
            // image.setAttribute('data-pic', src);
            _this.image.style.width = imgWidth + 'px !important';
            _this.image.style.display = 'block !important';

            var canvas = document.createElement('canvas');
            canvas.id = 'cut';
            canvas.style.display = 'none';
            canvas.style.width = '100%';
            canvas.style.height = '100%';
            $("#cropBox .crop-img").append(_this.image);
            $("#cropBox .crop-img").append(canvas);
            $("#cropBox .crop-preview").html('<div id="preview" class="preview"><img id="cropImgPreview" src="" alt=""></div>');
            //_this.loadCrop(id, _this.image);
            $("#cropBox").popup();
            _this.image.onload = function () {
                if (_this.jc != null) {
                    _this.jc.destroy();
                }
                _this.loadCrop(id, _this.image);
            }

        },
        // 加载剪切处理
        loadCrop: function (id, image) {
            var _this = this;
            _this.cropPreviewStatus = false;
            if (_this.jc != null) {
                _this.jc.setImage(image.src)
                _this.jc.destroy();
            }
            var imgWidth = $(".crop-img").outerWidth();
            var imgHeight = $(".crop-img").outerHeight();
            var iWidth = image.width;
            var iHeight = image.height;
            _this.cropParams.width = iWidth;
            _this.cropParams.height = iHeight;
            $("#cropBox .crop-img").show();
            $("#cropBox .crop-preview").hide()

            $("#cropImg_" + id).Jcrop({
                aspectRatio: 0,
                allowSelect: false,
                allowResize: true,
                // boxWidth: 640,
                // boxHeight: imgHeight,
                setSelect: [(imgWidth) / 4, 0, imgWidth * (3 / 4), imgHeight],
                maxSize: [imgWidth, imgHeight],
                minSize: [imgWidth / 3, imgHeight / 2],
                onChange: function (c) {
                    if (parseInt(c.w) > 0 && c.x <= (imgWidth - c.w)) {
                        var width = c.w > imgWidth ? imgWidth : c.w;
                        $("#cropImgPreview").attr('src', image.src);
                        $("#preview").css({
                            width: width + 'px',
                            height: c.h + 'px',
                            margin: '0 auto',
                            overflow: 'hidden'
                        });
                        //$.toptip('当前数据：W：' + imgWidth + 'H：' + imgHeight + '+' + JSON.stringify(c), 10000, 'error');
                        $("#cropImgPreview").css({
                            width: imgWidth + 'px',
                            height: 'px',
                            marginLeft: '-' + c.x + 'px',
                            marginTop: '-' + c.y + 'px'
                        });
                        console.log(c.x, c.y, c.w, c.h);
                    }
                },
            }, function () {
                _this.jc = this;
            });
        },
        // 图片大小
        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 () {
            if (this.jc != null) {
                this.jc.destroy();
            }
            this.cropParams = {id: 0, src: '', cropSrc: ''};
            $("#cropBox .crop-preview").hide();
            $("#cropBox .crop-preview").html("");
            $(".crop-img").html("");
            $.closePopup();
        },
        // 预览剪切
        cropPreview: function () {
            this.cropPreviewStatus = true;
            $("#cropBox .crop-img").hide();
            // $("#cropImgPreview").attr('src', this.cropParams.cropSrc);
            $("#cropBox .crop-preview").show();
        },
        // 确定剪切
        cropConfirm: function () {
            var _this = this;
            _this.jc.destroy();
            $(".crop-img").html("");
            $.showLoading('图片剪切处理中...');
            var $previewImg = document.getElementById("preview");
            html2canvas($previewImg).then(function (canvas) {
                var src = canvas.toDataURL('image/jpeg');
                $("#cropBox .crop-preview").hide();
                $("#cropBox .crop-preview").html("");
                $("#pic_img_" + _this.cropParams.id).attr('src', src);
                _this.cropParams = {id: 0, src: '', cropSrc: ''};
                $.closePopup();
                $.hideLoading();
            });
        },
        // 重新剪切
        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) {
                $.each(files, function (k, file) {
                    if (file) {
                        var reader = new FileReader();
                        reader.readAsDataURL(file);
                        reader.onloadend = function (even) {
                            var img = {
                                id: 0,
                                url: even.currentTarget.result,
                                name: file.name,
                                file_size: file.size,
                                file_type: file.type
                            };
                            _this.picList.push(img);
                        }
                    }
                })
            }

        }
    }
});