dayuan
/
manyi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485
							<!DOCTYPE html>
<html class="remModel">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Cache-Control" content="no-cache,no-store,no-siteapp,must-revalidate">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta name="author" content="">
    <meta name="description" content=""/>
    <meta name="keywords" content="扫码支付，线上投币，运营数据，物联网"/>
    <meta name="format-detection" content="telephone=no,email=no">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title>营销活动</title>
    <link rel="stylesheet" href="https://cdn.washpayer.com/components/lib/mui.min.css">
    <link rel="stylesheet" href="https://cdn.washpayer.com/components/lib/mui.picker.min.css"/>
    <link rel="stylesheet" href="https://cdn.washpayer.com/components/lib/photoswipe/photoswipe.css">
    <link rel="stylesheet" href="https://cdn.washpayer.com/components/lib/photoswipe/default-skin/default-skin.css">
    <link rel="stylesheet" href="../components/custom/css/common.css">
    <link rel="stylesheet" href="css/xyf.common.min.css">
    <style>
        .mui-card{
            background-position: center;
            background-size: cover;
        }
        .mui-card[status="start"] .icon-start {
            display: none;
        }

        .mui-card[status="stop"] .icon-pause {
            display: none;
        }

        .mui-card-link{
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="mui-input-group mui-reset">
    <form class="mui-row" action="">
        <div class="mui-col-xs-9 mui-col-sm-9">
            <div class="mui-input-row mui-search">
                <input type="search" class="mui-input-clear" id="searchKey" placeholder="活动名称">
            </div>
        </div>
        <div class="mui-col-xs-3 mui-col-sm-3 mui-text-right">
            <div class="in-row-btn" onclick="addMarketing()"><i class="iconfont icon-add-dark"></i></div>
        </div>
    </form>
</div>
<div class="filter-panel" style="display: none" id="options">
    <div class="input-group-vertical mui-table-view clear-b-border">

        <div class="or-border-fir mui-input-row input-clear or-order-status select-date" id="startTime">
            <label class="or-label-text">开始日期</label>
            <span class="mui-icon mui-icon-arrowright"></span>
            <span class="or-order-status-font selected-text"></span>
        </div>
        <div class="mui-input-row input-clear or-order-status select-date" id="endTime">
            <label class="or-label-text">结束日期</label>
            <span class="mui-icon mui-icon-arrowright"></span>
            <span class="or-order-status-font selected-text"></span>
        </div>
        <div class="mui-input-row filter-panel-btn flexbox">
            <span class="cancel-btn flex">取消</span>
            <span class="ok-btn flex">确定</span>
        </div>
    </div>
</div>

<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="margin-top: 45px;">
    <div class="mui-scroll">
        <!--数据列表-->
        <ul class="group-wrap ">

        </ul>
    </div>
</div>

<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="pswp__bg"></div>
    <div class="pswp__scroll-wrap">
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="关闭"></button>
                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>
            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>
            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="modal">
    <div class="mui-card ">
        <div class="mui-card-header mui-card-media "
             style="height:40vw;"></div>
        <div class="mui-card-content">
            <div class="mui-card-content-inner">
                <div class="title font-b-6 margin-b-5"></div>
                <div class="sub-title font-b"></div>
            </div>
        </div>
        <div class="mui-card-footer">
            <a class="mui-card-link iconfont icon-delete c-red operMarketing deleteMarketing"><span> 删除</span></a>
            <a class="mui-card-link iconfont icon-edit c-blue operMarketing editMarketing"><span> 编辑</span></a>
            <a class="mui-card-link iconfont icon-start c-green operMarketing toggleMarketing"><span> 启动</span></a>
            <a class="mui-card-link iconfont icon-pause c-lgreen operMarketing toggleMarketing"><span> 暂停</span></a>

            <a class="mui-card-link iconfont icon-chart-line c-blue operMarketing chartMarketing"><span> 报表</span></a>
        </div>
    </div>
</script>
<script src="https://cdn.washpayer.com/components/lib/jquery.min.js"></script>
<script src="https://cdn.washpayer.com/components/lib/photoswipe/photoswipe.min.js"></script>
<script src="https://cdn.washpayer.com/components/lib/photoswipe/photoswipe-ui-default.min.js"></script>
<script src="https://cdn.washpayer.com/components/lib/image-compressor.min.js"></script>
<script src="https://cdn.washpayer.com/components/lib/mui.min.js"></script>
<script src="https://cdn.washpayer.com/components/lib/mui.picker.min.js"></script>
<script src="https://cdn.washpayer.com/components/lib/moment.min.js"></script>
<script src="/components/custom/js/common.js"></script>
<script src="js/xyf.login.js"></script>
<script src="js/xyf.common.js"></script>
<script src="js/marketing.js"></script>
<script>
    $(function () {
        //ios返回刷新
        var isPageHide = false;
        window.addEventListener('pageshow', function () {
            if (isPageHide) {
                window.location.reload();
            }
        });
        window.addEventListener('pagehide', function () {
            isPageHide = true;
        });
    });

    var condition = null;
    var startTime = moment().format("YYYY-MM-DD");
    var endTime = moment().format("YYYY-MM-DD");
    var searchKey = null;// 定义为null，如果是undefined，ios8 微信ajax时会崩溃，但是有的接口有 undefined却不会崩溃。。。

    //如果调到子页面，返回后还是保留查询条件
    var orRecordBack = getQueryString('orRecord');
    if (orRecordBack) {
        history.replaceState(null, null, "marketing.html");
    }

    var pageType = 'marketing';
    //获取条件缓存数据
    if (orRecordBack) {
        condition = localStorage.condition ? JSON.parse(localStorage.condition)[pageType] : null;
    } else {
        condition = null;
    }

    function setCondition() {
        var data = {
            startTime: startTime,//开始日期
            endTime: endTime,//结束日期
            searchKey: searchKey,
        };
        var conArr = localStorage.condition ? JSON.parse(localStorage.condition) : {};
        conArr[pageType] = data;
        localStorage.condition = JSON.stringify(conArr);
    }

    /*根据缓存渲染已有条件数据*/
    if (condition) {
        if (condition.startTime) {
            startTime = condition.startTime
        }
        if (condition.endTime) {
            endTime = condition.endTime
        }

        if (condition.searchKey != '') {
            searchKey = condition.searchKey;
        }
    }
    setTimeTitle();

    FilterComponent({
        ok: function () {
            /*合法性验证*/
            //日期校验
            if (true) {
                if (startTime > endTime) {
                    mui.alert('开始日期不能大于结束日期', '温馨提示', '确定');
                    return false;
                }
            }
            setTimeTitle();
            search();
        }
    });

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

    //日期筛选条件
    $(function () {
        //可选日期范围
        var pickerBegin = moment().add(-1, "year").toDate();//控件可选最小时间
        var pickerEnd = new Date();//控件可选最大时间

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

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

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

    });

    mui.init({
        pullRefresh: {
            container: '#pullrefresh',
            up: {
                contentrefresh: '正在加载...',
                contentnomore: '没有更多数据了...',
                callback: pullupRefresh
            }
        }
    });

    //关键字搜索
    document.onkeydown = function (ev) {
        if (ev.keyCode == 13) {
            ev.preventDefault();
            search();
        }
    };


    /**
     * 查询的基本条件
     */
    var pageIndex = 0;
    var pageSize = 10;
    var total = 0;// 记录一次数据总数，用来做刷新判断

    //刷新数据
    function pullupRefresh() {
        pageIndex++;
        var url = "/dealer/getOnsaleList";
        var data = {
            searchKey: searchKey,
            startTime: endTime,
            endTime: startTime,
            pageIndex: pageIndex,
            pageSize: pageSize,
        };

        setCondition();//设置条件到缓存
        sendRequest(url, "GET", data, function (res) {
            if (res.result == 1) {
                if (pageIndex == 1) {
                    total = res.payload.total;
                    if (total == 0) {
                        $('#pullrefresh').addClass('mui-hidden');
                        $("body").append('<div class="nomore"></div>');
                    } else {
                        $('#pullrefresh').removeClass('mui-hidden');
                        $('.nomore').remove();
                    }
                }

                mui('#pullrefresh').pullRefresh().endPullupToRefresh((pageIndex * pageSize >= total));

                var groupWrap = $('.group-wrap');
                var length = res.payload.dataList.length;
                for (var i = 0; i < length; i++) {
                    var obj = res.payload.dataList[i];
                    var html = $($("#modal").html());
                    html.attr('data-json', JSON.stringify(obj));

                    html.attr("status", obj.status || "stop");//默认为暂停状态

                    html.css("background-image", "url(" + obj.img + ")");
                    html.find(".title").text(obj.name + "，" + obj.startTime + " 至 " + obj.endTime);
                    html.find(".sub-title").text(obj.desc);
                    groupWrap.append(html);

                    var backImg = $('<img class="mui-hidden" src="' + obj.img + '">');
                    $("body").append(backImg);

                    initPicPreview(html.find('.mui-card-header'), backImg, obj.img)
                }
            } else {
                mui.toast(res.description);
            }
        });
    }

    function initPicPreview(picDom, backImgDom, picSrc) {
        var pswpConfig = [{w: 0, h: 0, src: picSrc}];
        backImgDom.load(function () {
            pswpConfig[0]['w'] = this.naturalWidth;
            pswpConfig[0]['h'] = this.naturalHeight;

            initPswp(pswpConfig);
        });

        function initPswp() {
            picDom.on("tap", function () {
                var pswpElement = document.querySelectorAll('.pswp')[0];

                //放大功能不要，会导致微信全屏右上角微信菜单点不到。 分享和下载功能微信都没又用，所以不配置；
                var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, pswpConfig,
                    {
                        // 可以长按
                        isClickableElement: function (el) {
                            return true;
                        },
                        index: 0
                    });
                gallery.init();
            })
        }
    }

    // 搜索查询
    function search() {
        pageIndex = 0;
        $('.group-wrap').html("");
        mui('#pullrefresh').pullRefresh().refresh(true);//重置上拉加载
        searchKey = $("#searchKey").val();
        //写入数据
        pullupRefresh();
    }

    // 删除、编辑、启动暂停活动
    $("body").on("tap", ".operMarketing", function (evt) {
        evt.stopPropagation();

        var dom = $(this).closest(".mui-card");
        var objData = dom.attr("data-json");
        objData = JSON.parse(objData);
        var id = objData.id;
        var status = dom.attr("status");// 这里不用json，因为启动暂停会动态切换

        if ($(this).hasClass("deleteMarketing")) {
            mui.confirm('您确定要删除？', '温馨提示', ['取消', '确认'], function (e) {
                if (e.index == 1) {
                    var url = "/dealer/deleteOnsale";
                    var data = {"id": id};
                    sendRequest({
                        url: url,
                        type: "POST",
                        mask: "正在删除...",
                        data: data,
                        contentType: "json",
                        success: function (res) {
                            if (res.result == 1) {
                                dom.remove();
                            } else {
                                mui.alert(res.description, '温馨提示', '我知道了');
                            }
                        }
                    });
                }
            });
        } else if ($(this).hasClass("editMarketing")) {
            setMarketingCache(objData);

            history.replaceState(null, null, "marketing.html?orRecord=true&t=" + new Date().getTime());
            var url = 'marketing-edit.html';
            goPage(url);

        } else if ($(this).hasClass("chartMarketing")) {
            var dom = $(this).closest(".mui-card");
            var objData = dom.attr("data-json");
            objData = JSON.parse(objData);
            var onsaleId = objData.id;
            history.replaceState(null, null, "marketing.html?orRecord=true&t=" + new Date().getTime());
            var url = 'marketing-chart.html';
            goPage(url, {onsaleId: onsaleId});
        } else if ($(this).hasClass("toggleMarketing")) {
            var url = "/dealer/toggleOnsale";
            var data = {"id": id};
            var text = "";
            if (status == "start") {
                data.status = "stop";
                text = "暂停";
            } else {
                data.status = "start";
                text = "启动";
            }

            mui.confirm('您确定要' + text + '？', '温馨提示', ['取消', '确认'], function (e) {
                if (e.index == 1) {
                    sendRequest({
                        url: url,
                        type: "POST",
                        mask: "正在操作...",
                        data: data,
                        contentType: "json",
                        success: function (res) {
                            if (res.result == 1) {
                                mui.toast(text + '成功');
                                dom.attr("status", data.status);
                            } else {
                                mui.alert(res.description, '温馨提示', '我知道了');
                            }
                        }
                    });

                }
            });

        }
    });

    // 增加营销活动
    function addMarketing() {
        history.replaceState(null, null, "marketing.html?orRecord=true&t=" + new Date().getTime());
        var url = 'marketing-type.html';
        goPage(url);
    }

    //初始化刷新一次数据
    if (mui.os.plus) {
        mui.plusReady(function () {
            setTimeout(function () {
                mui('#pullrefresh').pullRefresh().pullupLoading();
            }, 1000);

        });
    } else {
        mui.ready(function () {
            mui('#pullrefresh').pullRefresh().pullupLoading();
        });
    }

</script>
</body>
</html>