manyi/static/app/js/marketing.js

var editMarketingObj = {};
// 打开编辑窗口
function initMarketingEdit(obj) {
    obj = editMarketingObj = obj || getMarketingCache();// 如果没有，则从缓存中取得
    bindMarketingEvent();//初始化事件

    // 活动类型名称
    $("#marketingTypeName").text(obj.onsaleType);

    // 基本信息显示
    var picInputDom = $("#marketingPic");
    if (obj.img) {
        picInputDom.siblings('.iconfont').addClass('mui-hidden');
        picInputDom.siblings('img').attr('src', obj.img).removeClass('mui-hidden');
        picInputDom.siblings('.delpic').removeClass('mui-hidden');
    } else {
        picInputDom.siblings('.iconfont').removeClass('mui-hidden');
        picInputDom.siblings('img').attr('src', '').addClass('mui-hidden');
        picInputDom.siblings('.delpic').addClass('mui-hidden');
    }
    //名称
    $("#marketingName").val(obj.name || "");

    //说明
    $("#marketingDesc").val(obj.desc || "");

    //初始化时间选择
    initTimeSelect();

    //选中设备初始化
    initDeviceList();

    //初始化自定义参数
    initMarketingParam();
}

//初始化时间选择
function initTimeSelect() {
    var objIn = editMarketingObj;

    function setTimeTitle() {
        $('#startTime .selected-text').text(objIn.startTime);
        $('#endTime .selected-text').text(objIn.endTime);
    }

    $('.datepicker .mui-button-row button').tap(function () {
        var range = $(this).attr('range');
        setTimeRange(range);//快速日期选择

        startTimePicker.setSelectedValue(objIn.startTime);
        endTimePicker.setSelectedValue(objIn.endTime);
    });

    function setTimeRange(range) {
        objIn.startTime = moment().format("YYYY-MM-DD");
        if (range && range > 0) {
            objIn.endTime = moment().add(range, "day").format("YYYY-MM-DD");
        }
        setTimeTitle();

        $('.datepicker .mui-button-row button').removeClass('active');
        $('.datepicker .mui-button-row button[range=' + range + ']').addClass('active');
    }

    // 如果日期为空，则默认为7天；如果是编辑，则按编辑的日期显示
    if (!objIn.startTime && !objIn.endTime) {
        setTimeRange(7)
    } else {
        setTimeTitle();
    }

    //可选日期范围
    var pickerBegin = moment().add(-2, "year").toDate();//控件可选最小时间
    var pickerEnd = moment().add(10, "year").toDate();//控件可选最大时间

    var options = {
        type: "date",
        beginDate: pickerBegin,
        endDate: pickerEnd
    };

    var startTimeBtn = $('#startTime');
    var startTimePicker = new mui.DtPicker(options);
    startTimePicker.setSelectedValue(objIn.startTime);
    startTimeBtn[0].addEventListener('tap', function () {
        startTimePicker.show(function (time) {
            objIn.startTime = time.y.text + '-' + time.m.text + '-' + time.d.text + '';
            $('#startTime .selected-text').text(objIn.startTime);
        });
    }, false);

    var endTimeBtn = $('#endTime');
    var endTimePicker = new mui.DtPicker(options);
    endTimePicker.setSelectedValue(objIn.endTime);
    endTimeBtn[0].addEventListener('tap', function () {
        endTimePicker.show(function (time) {
            objIn.endTime = time.y.text + '-' + time.m.text + '-' + time.d.text + '';
            $('#endTime .selected-text').text(objIn.endTime);
        });
    }, false);

}

// 初始化选中设备列表
function initDeviceList() {
    var data = {
        "pageIndex": 1,
        "pageSize": 1000,// 暂定默认获取1000台
        "sort": "devType",//默认按分组排序，然后会按设备类型排序
    };

    var logicalCodeList = editMarketingObj.logicalCodeList || [];
    $(".deviceTotal").text("已选" + logicalCodeList.length + "台");

    sendRequest("/dealer/equipmentList?random=" + Math.random() * 1000, "GET", data, function (res) {
        var panelDom = $(".deviceList");
        var list = res.para.dataList;
        var groupId = null;
        var groupDom = null;

        for (var index in list) {
            var obj = list[index];

            // 如果遍历到新的分组，则新建分组dom
            if (obj.groupId != groupId) {

                // 如果不是该设备的管理员，则直接忽略该分组的数据
                if (!obj.isManager) {
                    continue
                }

                groupId = obj.groupId;

                groupDom = $('<div class="group-container"><div class="mui-table-view-cell dev-select-row"><div class="mui-checkbox">' +
                    '<label for="dev-group-' + groupId + '" class="mui-text-left font-16 "><i class="c-green iconfont icon-shop"></i> <span class="font-bold font-b-6">' + obj.name + '</span></label>' +
                    '<input id="dev-group-' + groupId + '" class="checkbox-btn dev-group-all" type="checkbox"></div></div>' +
                    '<div class="group-list-container"></div>' +
                    '</div>');
                panelDom.append(groupDom);
            }

            var deviceStatusObj = getDeviceStatus(obj);
            var onlineStatus = deviceStatusObj.onlineStatus;
            var onlineClass = deviceStatusObj.onlineClass;
            var workStatus = deviceStatusObj.workStatus;
            var workClass = deviceStatusObj.workClass;

            var thisDom = $('<div class="mui-table-view-cell dev-select-row"><div class="mui-checkbox padding-l-10">' +
                '<label for="dev-id-' + index + '" class="mui-text-left font-14"><i class="c-blue iconfont ' + getDevIconName(obj.type) + '"></i> ' + obj.type + '-' + obj.logicalCode +
                '<em class="' + onlineClass + '">' + onlineStatus + '</em>' +
                (workStatus ? ('<span class="mui-pull-right ' + workClass + '">' + workStatus + '</span>') : "") +
                '</label>' +
                '<input id="dev-id-' + index + '" class="checkbox-btn checkbox-btn-sub" value="' + obj.logicalCode + '" type="checkbox"/>' +
                '</div></div>');

            groupDom.find(".group-list-container").append(thisDom);

            for (var codeIndex in logicalCodeList) {
                var code = logicalCodeList[codeIndex];
                if (code == obj.logicalCode) {
                    thisDom.find(".checkbox-btn-sub").prop("checked", true);
                    break;
                }
            }

        }
    })
}

function getDeviceStatus(obj) {
    var onlineStatus = "";//离线状态文字
    var onlineClass = "";//在线状态样式
    var workStatus = null;//工作状态文字
    var workClass = null;//工作状态样式

    //如果是纯蓝牙设备，则不展示离线、在线
    if (obj.channelType && obj.channelType.indexOf('BlueTooth') > -1 && obj.channelType.indexOf('GPRS') == -1) {
        onlineStatus = "蓝牙";
        onlineClass = "mark-blue iconfont icon-lanya";
    } else {
        if (obj.online == 1) {
            onlineStatus = "在线";
            onlineClass = "online";
        } else if (obj.online == 0) {
            onlineStatus = "离线";
            onlineClass = "offline";

            //需要显示离线文字，离线和离线繁忙都是获取不到设备状态的，所有不展示信号
            if (obj.offlineTimeLong == 0 || obj.offlineTimeLong == null) {
            } else {
                onlineStatus = moment().set('second', -obj.offlineTimeLong).fromNow() + "离线";
            }
        }
    }

    // 设备工作信息，1正常，2异常
    if (obj.status == 0) {
        workClass = "c-success";
        workStatus = "空闲";
    }
    if (obj.status == 1) {
        workClass = "c-lgreen";
        workStatus = obj.statusInfo || "繁忙";
    }
    if (obj.status == 2) {
        workClass = "c-red";
        workStatus = obj.statusInfo || "故障";
    }

    //设备管理状态【人为设置的故障优先展示】
    if (obj.isFault == true) {
        workStatus = "设备故障";
        workClass = "c-red";
    }

    return {
        onlineStatus: onlineStatus,
        onlineClass: onlineClass,
        workStatus: workStatus,
        workClass: workClass
    }
}

// 初始化自定义参数
function initMarketingParam() {
    var obj = editMarketingObj;
    var detailDict = editMarketingObj.detailDict || {};
    $("#custom-modal [key]").each(function () {
        var key = $(this).attr("key");
        $(this).find("input").val(detailDict[key]);
    });

    if (obj.onsaleType == "首次使用送金币" || obj.onsaleType == "京东新人1分购") {
        $("[key='coins']").removeClass("mui-hidden").siblings().remove();
    }

    else if (obj.onsaleType == "首次免费按摩" || obj.onsaleType == "手机实名免费用") {
        $("[key='duration']").removeClass("mui-hidden").siblings().remove();
    }

    else {
        $("#custom-modal").remove()
    }
}

function setMarketingCache(data) {
    localStorage.marketingCache = JSON.stringify(data);
}

function getMarketingCache() {
    return localStorage.marketingCache ? JSON.parse(localStorage.marketingCache) : null;
}

function getMarketingParam() {
    // 暂时只有input，如果以后其他的输入方式，得进一步优化
    var detailDict = {};
    $("#custom-modal [key]").each(function () {
        var key = $(this).attr("key");
        detailDict[key] = $(this).find("input").val();
    });
    return detailDict;
}

// 编辑窗口事件绑定
function bindMarketingEvent() {
    // 编辑窗口保存事件
    $("#editMarketingPanel").on("submit", function (evt) {
        //阻止submit默认表单提交行为
        evt.preventDefault();

        if (editMarketingObj.startTime > editMarketingObj.endTime) {
            mui.alert('开始日期不能大于结束日期', '温馨提示', '确定');
            return false;
        }

        //获取自定义参数
        var detailDict = getMarketingParam();

        // 获取选中的逻辑码
        var logicalCodeList = [];
        $(".checkbox-btn-sub:checked").each(function () {
            logicalCodeList.push($(this).val());
        });

        var data = {
            "name": $("#marketingName").val(),
            "img": $("#showPic").attr("src"),
            "desc": $("#marketingDesc").val(),
            "logicalCodeList": logicalCodeList,
            "startTime": editMarketingObj.startTime,
            "endTime": editMarketingObj.endTime,
            "detailDict": detailDict
        };

        var url = "/dealer/editOnsale";
        if (editMarketingObj.id) {
            data.id = editMarketingObj.id;
            url = "/dealer/editOnsale";
        } else {
            // 如果没有id，则为新增营销活动
            url = "/dealer/createOnsale";

            // 创建需要指定活动类型
            data.onsaleType = $("#marketingTypeName").text();

        }
        var saveBtn = $("#saveBtn")[0];
        saveBtn.disabled = true;

        sendRequest({
            url: url,
            type: "POST",
            mask: "正在保存...",
            data: data,
            contentType: "json",
            success: function (res) {
                if (res.result == 1) {
                    if (editMarketingObj.id) {
                        mui.toast("修改成功");
                        setTimeout(function () {
                            history.back();
                        }, 800)
                    } else {
                        mui.toast("新增成功");
                        setTimeout(function () {
                            history.go(-2);
                        }, 800)
                    }
                } else {
                    mui.toast(res.description);
                }

                saveBtn.disabled = false;
            }
        });

        evt.stopPropagation();
    });

    function myImageCompressor(file, callback) {
        if (window.ImageCompressor) {
            const imageCompressor = new ImageCompressor();
            if (file) {
                imageCompressor.compress(file, {
                    quality: .7,
                    // 图片尺寸
                    maxWidth: 1920,
                    maxHeight: 1920,
                    success: function (result) {
                        var formData = new FormData();
                        formData.append('file', result, result.name);

                        if (callback) {
                            callback(formData);
                        }
                    }
                })
            }
        } else {
            //图片插件未加载完成提示
            mui.toast("图片上传工具未加载，刷新页面重试...");
        }
    }

    // 删除图片
    $('.delpic').tap(function (e) {
        var self = $(this);
        self.siblings('img').attr('src', '').addClass('mui-hidden');
        self.addClass('mui-hidden');
        self.siblings('.iconfont').removeClass('mui-hidden');
        self.siblings('input').show();
        return false;
    });

    // 图片选择事件
    var picUpload = $("#marketingPic");
    if (typeof FileReader === 'undefined') {
        picUpload.attr('disabled', true);
        picUpload.tap(function () {
            mui.alert('当前微信浏览器版本过低，请升级微信后再试！', '温馨提示', '我知道了');
        });
    } else {
        picUpload.change(function (e) {
            var self = $(this);
            var file = picUpload[0].files[0];
            // 大小限制 10M
            if (file && file.size > 10000 * 1024) {
                msgPopup('温馨提示', '图片大小超出规定范围！', '知道了');
                return;
            }
            if (!(/^image\/.*$/i.test(file.type))) {
                mui.toast('该文件不是图片，请重新选择！');
                return;
            } else {
                myImageCompressor(file, function (formData) {
                    var url = '/dealer/uploadCreative';
                    myAjax({
                        url: url,
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        beforeSend: function () {
                            showLoading('上传中...');
                        },
                        success: function (res) {
                            if (res.result == 1) {
                                self.hide();
                                self.siblings('.iconfont').addClass('mui-hidden');
                                self.siblings('img').attr('src', res.para).removeClass('mui-hidden');
                                self.siblings('.delpic').removeClass('mui-hidden');
                            } else {
                                mui.toast('上传失败，请重试');
                            }
                        },
                        complete: function () {
                            hideLoading();

                            //重置文件路径，避免选中重复不触发onchange
                            var imgUpload = $("#marketingPic");
                            imgUpload[0].value = "";
                        }
                    });
                });

            }
        });
    }

    // 全选事件
    $(".deviceList ").on("change", "input[type=checkbox]", function () {
        var inputDom = $(this);
        if (inputDom.hasClass("dev-all")) {
            if (inputDom[0].checked) {
                $(".checkbox-btn-sub,.dev-group-all").prop("checked", true);
            } else {
                $(".checkbox-btn-sub,.dev-group-all").prop("checked", false);
            }
        } else if (inputDom.hasClass("dev-group-all")) {
            if (inputDom[0].checked) {
                inputDom.closest(".group-container").find(".group-list-container .checkbox-btn-sub").prop("checked", true);
            } else {
                inputDom.closest(".group-container").find(".group-list-container .checkbox-btn-sub").prop("checked", false);
            }
        }

        var checkedLength = $(".checkbox-btn-sub:checked").length;
        $(".deviceTotal").text("已选" + checkedLength + "台");
    });
}