dayuan
/
manyi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628
							<!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="../components/lib/weui.min.css">
    <link rel="stylesheet" href="../components/custom/css/common.css">
    <link rel="stylesheet" href="css/xyf.common.min.css">
    <style>
        .watermark {
            font-size: 60px;
            width: 60px;
            height: 60px;
            position: absolute;
            left: 20%;
            top: 0;
        }

        .checkbox-btn {
            height: 80px !important;
        }

        .mui-checkbox-wear {
            display: none;
        }

        .batch-model .fade-node {
            display: none;
        }

        .batch-model .mui-checkbox-wear {
            display: block;
            width: 42px;
            float: left;
        }

        .batch-model .text-part {
            width: calc(100% - 42px);
            float: right;
            position: relative;
        }

    </style>
</head>
<body>

<div class="mui-input-group mui-reset">
    <form class="mui-row" action="">
        <div class="mui-col-xs-7 mui-col-sm-7">
            <div class="mui-input-row mui-search">
                <input type="search" class="mui-input-clear" id="searchKey" placeholder=" 用户昵称、反馈内容">
            </div>
        </div>
        <div class="mui-col-xs-5 mui-col-sm-5 mui-text-right">
            <div class="filter-btn"><span>筛选</span><i class="iconfont icon-triangle-up"></i></div>
            <div class="in-row-btn" onclick="batchOper()">多选<i class="iconfont icon-triangle-up"></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" id="feedbackType">
            <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="or-border-fir mui-input-row input-clear or-order-status" id="status">
            <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="or-border-fir mui-input-row input-clear or-order-status select-date" id="start-date">
            <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="end-date">
            <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;padding-top: 10px">
    <div class="mui-scroll">
        <!--数据列表-->
        <ul class="group-wrap ">

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

<div class="c-handle-panel mui-hidden">
    <div class="handle-btn">
        <div class="mui-checkbox ">
            <input id="checkbox-all" class="checkbox-all" type="checkbox">
            <label for="checkbox-all">全选</label>
        </div>
    </div>

    <div class="handle-btn-list mui-text-right">
        <button type="button" class="mui-btn mui-btn-outlined mui-btn-danger "
                onclick="goBatch()">批量关闭
        </button>
    </div>
</div>

<script src="https://cdn.washpayer.com/components/lib/jquery.min.js"></script>
<script src="../components/lib/weui.min.js"></script>
<script src="https://cdn.washpayer.com/components/lib/mui.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>
    $(function () {
        //ios返回刷新
        var isPageHide = false;
        window.addEventListener('pageshow', function () {
            if (isPageHide) {
                window.location.reload();
            }
        });
        window.addEventListener('pagehide', function () {
            isPageHide = true;
        });
    });

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

    /**
     * 向localStorage写入条件数据
     */
    var startDate;//开始日期
    var endDate;//结束日期
    var searchKey = null;// 定义为null，如果是undefined，ios8 微信ajax时会崩溃，但是有的接口有 undefined却不会崩溃。。。
    var feedbackType = null;//问题类型
    var status = '';//处理状态

    var condition;
    var pageType = 'userFeedback';

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

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

    /**
     * 计算日期范围
     */
    function computeDateRange(range) {
        endDate = moment().format("YYYY-MM-DD");

        if (range == "today") {
            startDate = endDate;
        } else if (range == "week") {
            startDate = moment().add("day", -7).format("YYYY-MM-DD");
        } else if (range == "month") {
            startDate = moment().add("month", -1).format("YYYY-MM-DD");
        } else if (range == "year") {
            startDate = moment().add("year", -1).format("YYYY-MM-DD");
        }

        $('#start-date .selected-text').html(startDate);
        $('#end-date .selected-text').html(endDate);

        //写入数据
        setCondition();
    }

    var typeList = [
        {
            label: '全部',
            value: null
        },
        {
            label: '故障',
            value: 'fault'
        },
        {
            label: '订单投诉(扫码)',
            value: 'netpay'
        },
        {
            label: '订单投诉(IC卡)',
            value: 'ic'
        },
        {
            label: '订单投诉(投币)',
            value: 'putCoin'
        },
        {
            label: '其他',
            value: 'other'
        },
    ];

    var types = {'putCoin': '订单投诉(投币)', 'ic': '订单投诉(IC卡)', 'netpay': '订单投诉(扫码)', 'fault': '故障', 'other': '其他'};

    var statusList = [
        {
            label: '全部',
            value: null
        },
        {
            label: '待处理',
            value: 0
        },
        {
            label: '已处理',
            value: 1
        },
        {
            label: '驳回',
            value: 2
        }
    ];
    var statusMap = {0: '待处理', 1: '已处理', 2: '驳回'};

    /*根据缓存渲染已有条件数据*/
    if (condition) {
        if (condition.startDate) {
            startDate = condition.startDate;
            endDate = condition.endDate;
            $('#start-date .selected-text').html(condition.startDate);
            $('#end-date .selected-text').html(condition.endDate);

            if (condition.feedType) {
                feedbackType = condition.feedType;
                $("#feedbackType .selected-text").html(types[condition.feedType]);
            }
            if (condition.status != null) {
                status = condition.status;
                $("#status .selected-text").html(statusMap[condition.status]);
            }
        }

        if (condition.searchKey != '') {
            searchKey = condition.searchKey;
            $("#searchKey").val(searchKey);
        }

    } else {
        //设置默认选中为：待处理、日期为一年
        status = 0;
        $("#status .selected-text").html(statusMap[0]);

        computeDateRange('year');//设置日期范围
    }

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

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

    //刷新数据
    function pullupRefresh() {
        pageIndex++;
        var url = "/dealer/userFeedbackRecords";
        var data = {
            searchKey: searchKey,
            feedType: feedbackType,
            status: status || '',
            dateEnd: endDate,
            dateStart: startDate,
            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.para.items.length;
                for (var i = 0; i < length; i++) {
                    var obj = res.para.items[i];
                    var ul = document.createElement('ul');
                    ul.className = 'mui-table-view split interval ';
                    var typeText = types[obj.feedType];

                    var html = '<li class="mui-table-view-cell  or-jump-html" id="' + obj.id + '">' +
                        '<div class="mui-checkbox-wear">' +
                        '<div class="mui-checkbox">' +
                        '      <input class="checkbox-btn" value="" type="checkbox"  id="input-' + obj.id + '">' +
                        '</div>' +
                        '</div>' +
                        '<div class="text-part">' +
                        '<p>用户昵称<span class="mui-pull-right font-b">' + obj.nickname + '</span></p>' +
                        '<p>问题类型<span class="mui-pull-right font-b"><i class="iconfont c-red icon-' + obj.feedType + '"></i> ' + typeText + '</span></p>' +
                        '<p>问题描述<span class="mui-pull-right font-b mui-col-xs-8 mui-col-sm-8 mui-text-right mui-ellipsis">' + obj.description + '</span></p>' +
                        '<p>提交时间<span class="mui-pull-right font-b">' + obj.createTime + '</span></p>' +
                        '<p class="mui-hidden">设备场地<span class="mui-pull-right font-b">' + obj.detailInfo.groupName + '</span></p>' +
                        '<p class="mui-hidden">设备名称<span class="mui-pull-right font-b">' + obj.detailInfo.devTypeName + "-" + obj.detailInfo.groupNumber + " （" + obj.detailInfo.logicalCode + '）</span></p>' +
                        '</div>' +
                        '</li>';
                    ul.innerHTML = html;

                    var tp = $(ul).find('.text-part')
                    //待处理
                    if (obj.status == 0) {
                        tp.append("<i class='watermark iconfont c-blue icon-pending'></i>");
                    } else if (obj.status == 1) {
                        tp.append("<i class='watermark iconfont c-success icon-handled'></i>");
                        $(ul).addClass("fade-node");
                    } else if (obj.status == 2) {
                        tp.append("<i class='watermark iconfont c-orange icon-reject'></i>");
                        $(ul).addClass("fade-node");
                    }

                    groupWrap.append(ul);
                }
            } else {
                mui.toast(res.description);
            }
        });
    }

    /*当前时间*/
    var curDate = new Date();

    /*对比时间*/
    var compareTime = function (smaller, larger) {
        var genDate = function (value) {
            var type = typeof value;
            var date = null;
            if (type == 'string' || type == 'number') {
                date = new Date(value);
            } else if (type == 'object') {
                date = value;
            }
            return date;
        };
        return genDate(smaller).getTime() <= genDate(larger).getTime();
    };

    /**
     * 选择日期弹窗函数
     * @param options
     */
    var showDatePicker = function (options) {
        var defaultDate = options.default ? new Date(options.default) : curDate;
        options = $.extend({
            start: moment().add(-1, "year").toDate(),
            end: moment().add(1, "second").toDate(),//注意！！可能是多次打开后渲染延迟，必须把end往后推至少一秒，才能渲染出当天为结束日期，否则无法选择今天
            defaultValue: [defaultDate.getFullYear(), defaultDate.getMonth() + 1, defaultDate.getDate()]
        }, options);
        if (!options.id) {
            return;
        }
        weui.datePicker({
            start: options.start,
            end: options.end,
            defaultValue: options.defaultValue,
            onChange: function (result) {
                options.onChange && options.onChange(result);
            },
            onConfirm: function (result) {
                options.onConfirm && options.onConfirm(result);
            },
            id: options.id
        });
    };

    //开始、结束时间选择器
    $('.select-date').click(function (e) {
        var $ele = $(e.currentTarget);
        var $eleId = $ele.attr('id');
        showDatePicker({
            id: $eleId,
            default: $eleId == 'start-date' ? startDate : endDate,//默认选择的时间
            onChange: function (data) {
            },
            onConfirm: function (data) {
                var year = data[0];
                var month = data[1];
                var date = data[2];
                var flag = true;
                var dateStr = year + '-' + (month > 9 ? month : '0' + month) + '-' + (date > 9 ? date : '0' + date);
                //校验输入合法性
                if ($eleId == 'start-date') {
                    if (endDate && !compareTime(dateStr, endDate)) {
                        /* dialog('温馨提示','开始日期不能大于结束日期','确定');*/
                        flag = false;
                    }
                    startDate = dateStr;
                } else {
                    if (startDate && !compareTime(startDate, dateStr)) {
                        /* dialog('温馨提示','开始日期不能大于结束日期','确定');*/
                        flag = false;
                    }
                    endDate = dateStr;
                }
                //修改页面
                $ele.find('.selected-text').html(dateStr);

                //写入数据
                if (flag) {
                    setCondition();
                }
            }
        });
    });

    //通用选择器
    var showTypePicker = function (list, options) {
        weui.picker(list, {
            className: options.className,
            defaultValue: [options.default],
            onChange: function (result) {
                options.onChange && options.onChange(result);
            },
            onConfirm: function (result) {
                options.onConfirm && options.onConfirm(result);
            },
            id: options.id
        })
    };

    FilterComponent({
        ok: function () {
            /*合法性验证*/
            //日期校验
            if (true) {
                if (!startDate) {
                    mui.alert('请选择开始日期', '温馨提示', '确定');
                }
                if (!endDate) {
                    mui.alert('请选择结束日期', '温馨提示', '确定');
                }
                if (!compareTime(startDate, endDate)) {
                    mui.alert('开始日期不能大于结束日期', '温馨提示', '确定');
                    return false;
                }
            }
            pageIndex = 0;
            search();
        }
    });


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

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

    //问题类型
    $("#feedbackType").click(function (e) {
        var $ele = $(e.currentTarget);
        showTypePicker(typeList, {
            id: $ele.attr('id'),
            default: feedbackType || typeList[0].value,
            onChange: function (data) {

            },
            onConfirm: function (data) {
                $ele.find(".selected-text").html(data[0].label);
                feedbackType = data[0].value;
                //写入数据
                setCondition();
            }
        });
    });

    //处理状态，待处理0，成功1，不处理2
    $("#status").click(function (e) {
        var $ele = $(e.currentTarget);
        showTypePicker(statusList, {
            id: $ele.attr('id'),
            default: status,//如果没有 null则表示全部
            onConfirm: function (data) {
                $ele.find(".selected-text").html(data[0].label);
                status = data[0].value;
                //写入数据
                setCondition();
            }
        });
    });

    //查看反馈详情跳转
    $('body').on('tap', '.or-jump-html', function (evt) {
        if ($("body").hasClass("batch-model")) {
            return
        }

        history.replaceState(null, null, "user-feedback.html?orRecord=true&t=" + new Date().getTime());
        var url = '/dealer/index.html#/feedback/detail?id=' + $(this).attr('id');
        goPage(url);
    });

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

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

    //全选
    $("#checkbox-all").on("change", function () {
        if ($(this).is(":checked")) {
            $(".checkbox-btn").prop("checked", true);
        } else {
            $(".checkbox-btn").prop("checked", false);
        }
    });

    //激活批量操作
    function batchOper() {
        if ($("body").hasClass("batch-model")) {
            $(".in-row-btn").removeClass('active');
            $("body").removeClass("batch-model");
            $(".c-handle-panel").addClass('mui-hidden')
        } else {
            $(".in-row-btn").addClass('active');
            $("body").addClass("batch-model");
            $(".c-handle-panel").removeClass('mui-hidden')
        }
    }

    function getSelectIdInfo() {
        var ids = []
        $(".or-jump-html").each(function () {
            var checked = $(this).find("input").is(":checked");
            if (checked) {
                var fade = $(this).closest("ul").hasClass('fade-node')
                var id = $(this).closest(".or-jump-html").attr('id')
                if (!fade) {
                    ids.push(id)
                }
            }
        });

        return ids
    }

    function goBatch() {
        var ids = getSelectIdInfo()
        if (ids.length == 0) {
            mui.toast('请选择数据');
            return
        }

        var url = 'user-feedback-multiple.html?ids=' + JSON.stringify(ids)
        goPage(url);
    }
</script>
</body>
</html>