NN2019090901/public/static/weixin/js/files.js

var app = new Vue({
    el: '#app',
    data: {
        // 用户信息
        memberInfo: {},
        // 当前文件
        fileData: {},
        // 剪切参数
        cropParams: {
            id: 0,
            src: '',
            cropSrc: '',
            min: 400,
            max: 200,
            boundx: 0,
            boundy: 0,
            width: 0,
            height: 0,
        },
        // 打印的图片参数
        files: [],
        // 图片列表
        picList: [],
        // 打印方式
        printType: 1,
        // 提交状态
        submitting: false,
        // 预览状态
        cropPreviewStatus: false,
        // 剪切对象
        jc: null,
        // 设备ID
        deviceId: 0,
        // 色彩
        colorType: 1,
        pageType: 1,
        id: 0,
    },
    created: function () {
        var printType = getParam('pt');
        this.printType = printType ? printType : 1;
        this.id = getParam('id');
        this.getFileList();
    },
    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);
        })

        $(".page-type .btn").unbind('click').on('click', function(){
            var index = $(this).index();
            _this.pageType = index+1;
            $(".page-type").each(function(){
                $(this).find('.btn').eq(index).addClass('active').siblings().removeClass('active');
            })
        });

        $(".print-type .btn").unbind('click').on('click', function(){
            var index = $(this).index();
            _this.colorType = index+1;
            $(".print-type").each(function(){
                $(this).find('.btn').eq(index).addClass('active').siblings().removeClass('active');
            })
        });

    },
    methods: {
        // 获取图片列表
        getFileList: function(){
            var _this = this;
            $.post('/weixin/print/getFileList', {type: 2}, 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;
            if (_this.submitting) {
                return false;
            }

            $(".file-box").each(function (k, item) {
                var name = $.trim($(this).find('.file-name').text());
                var nums = parseInt($(this).find('.file-num').val());
                var page_type = parseInt($(this).find('.page-type .btn.active').index() + 1);
                var print_type = parseInt($(this).find('.print-type .btn.active').index() + 1);
                var page_start = parseInt($(this).find('.page-start').val());
                var page_end = parseInt($(this).find('.page-end').val());
                var id = $(this).attr('data-id');
                if (id) {
                    var file = {
                        id: id,
                        name: name,
                        nums: nums,
                        page_type: page_type,
                        print_type: print_type,
                        page_start: page_start,
                        page_end: page_end
                    };
                    _this.files.push(file);
                }
            });

            if (_this.files.length <= 0) {
                $.toast('请选择打印的文件');
                return false;
            }


            _this.showModal();

        },
        // 显示填写窗口
        showModal: function(){
            var _this = this;
            $.closeModal();
            setTimeout(function(){
                $.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();
                                return false;
                            }
                        },
                        {
                            text: "扫码打印",
                            className: "warning",
                            onClick: function () {
                                _this.scan();
                            }
                        },
                        {
                            text: "填写打印",
                            className: "success",
                            onClick: function () {
                                _this.inputCode();
                                return false;
                            }
                        },
                    ]
                });
            }, 500)
        },
        // 输入设备号打印
        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();
                    setTimeout(function(){
                        $.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,
                                            pageType: _this.pageType,
                                            files: _this.files,
                                            type: 2
                                        };

                                        $.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();
                                                setTimeout(function(){
                                                    $.modal({
                                                        title: "",
                                                        text: "<div class='scan'>下单失败</div><div class='tips'>"+res.message+"</div>",
                                                        buttons: [
                                                            {
                                                                text: "取消",
                                                                onClick: function () {
                                                                    return false;
                                                                }
                                                            }
                                                        ]
                                                    });
                                                },200)
                                            }

                                        }, "json")
                                    }
                                },
                            ]
                        });
                    }, 200);
                }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 () {
                    // 微信扫一扫
                    wx.scanQRCode({
                        needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                        scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                        success: function (res) {
                            var deviceId = res.resultStr;
                            _this.deviceId = deviceId;
                            if (deviceId) {
                                $.closeModal();
                                setTimeout(function(){
                                    $.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 () {
                                                    $.showLoading('订单处理中...');
                                                    $.post('/weixin/order/confirm', {
                                                        clusterId: _this.id,
                                                        deviceId: deviceId,
                                                        printType: _this.printType,
                                                        colorType: _this.colorType,
                                                        pageType: _this.pageType,
                                                        files: _this.files,
                                                        type: 2
                                                    }, 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 {
                                                            $.toast(res.message);
                                                            $.closeModal();
                                                            setTimeout(function(){
                                                                $.modal({
                                                                    title: "",
                                                                    text: "<div class='scan'>请扫一扫设备上的二维码</div><div class='tips'>获取设备信息</div>",
                                                                    buttons: [
                                                                        {
                                                                            text: "扫一扫",
                                                                            className: "warning",
                                                                            onClick: function () {
                                                                                _this.scan();
                                                                            }
                                                                        },
                                                                    ]
                                                                });
                                                            })
                                                        }

                                                    }, "json")
                                                }
                                            },
                                        ]
                                    });
                                }, 200)
                            } else {
                                webToast('扫码信息错误', "middle", 1000)
                            }
                        }
                    });
                });
            }, "JSON");
        },
        // 删除图片
        picDel: function (id) {
            var fileId = $("#pic_" + id).attr('data-id');
            $("#pic_" + id).detach();
            $("#weui-actions input").val("");
            if (fileId) {
                $.post("/weixin/print/fileDel", {id: fileId})
            }
        },
        // 切换预览
        hidePreview: function () {
            $.closePopup();
        },
        // 预览
        preview: function (file) {
            // this.fileData = file;
            // var url = 'http://'+document.domain+'/weixin/index/preview?t='+file.file_type+'&url=';
            // $("#preview").attr('src', url+file.preview);
            // location.href = url;
            // window.open(url);
            /*alert(url+file.preview);
            $("#previewBox").popup();
            console.log(file)*/
        },
        // 选择图片
        selectFile: function (ele) {
            var _this = this;
            var files = ele.target.files;
            if (files.length > 0) {
                var _this = this;
                var count = 0;
                var formData = new FormData();
                var error = false;
                $.each(files, function (k, file) {
                    var fileType = (file.name).substring((file.name).lastIndexOf(".")).toLowerCase();
                    if(!new RegExp("(xls|xlsx|doc|docx|pdf|ppt|pptx)+","gi").test(fileType)){
                        $.toast("文件类型不支持，必须是xls|xlsx|doc|docx|pdf|ppt|pptx格式文件",'text');
                        $(ele.target).val("");
                        error = true;
                        return false;
                    }

                    if (file.size / 1024 / 1024 > 20) {
                        $.toast('上传文件大小不能超过20M','text');
                        $(ele.target).val("");
                        error = true;
                        return false;
                    }

                    if (file) {
                        count++;
                        formData.append('file', file);
                        $(ele.target).val("");
                    }
                });

                if(error){
                    return false;
                }

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

                // 上传
                $.showLoading('文件上传处理中...');
                var ajax = $.ajax({
                    url: '/weixin/upload/file',
                    data: formData,
                    type: "post",
                    dataType: 'json',
                    cache: false,
                    contentType: false,
                    processData: false,
                    timeout: 30000,
                    // timeout: 30000,
                    success: function (res) {
                        $.hideLoading();
                        if (res.code == 'success') {
                            $.toast('文件上传完成');
                            if (res.data) {
                                _this.picList.push(res.data);
                            }
                        } 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();
                        }
                    }
                })
            }

        },
    }
});