dayuan
/
manyi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475
							<!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="../components/lib/weui.min.css">
    <link rel="stylesheet" href="../components/custom/css/common.css">
    <link rel="stylesheet" href="css/xyf.common.min.css">
    <style>

        .record-type-check {
            margin-right: 4px;
            padding: 6px 8px;
        }
    </style>
</head>
<body class="card-manage">

<div class="mui-input-group mui-reset">
    <form class="mui-row" action="">
        <div class="mui-col-xs-9 mui-col-sm-9">
            <div class="record-type-row">
                <span class="mui-btn mui-btn-outlined record-type-check btn-outlined-check active"
                      type="consume">消费</span>
                <span class="mui-btn mui-btn-outlined record-type-check btn-outlined-check" type="chargeCard">充值</span>
                <span class="mui-btn mui-btn-outlined record-type-check btn-outlined-check" type="order">订单</span>
                <span class="mui-btn mui-btn-outlined record-type-check btn-outlined-check"
                      type="cardConsume">卡消费</span>
            </div>
            <!--<span class="font-b-14-6 filter-blank" id="time"></span>-->
        </div>
        <div class="mui-col-xs-3 mui-col-sm-3 mui-text-right">
            <div class="filter-btn"><span>筛选</span><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="custom-border-fir mui-input-row input-clear  select-date" id="start-date">
            <label class="or-label-text">开始日期</label>
            <span class="mui-icon mui-icon-arrowright"></span>
            <span class="l-h-38 font-b-6 selected-text" id="beginDate"></span>
        </div>
        <div class="custom-border-fir mui-input-row input-clear  select-date" id="end-date">
            <label class="or-label-text">结束日期</label>
            <span class="mui-icon mui-icon-arrowright"></span>
            <span class="l-h-38 font-b-6 selected-text" id="endDate"></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>

<script type="text/html" id="modal">
    <ul class="mui-table-view card-detail split interval custom-bottom">
        <li class="mui-table-view-cell">
            <p class=""><span class="font-b time"></span><span class="mui-pull-right amount font-b-8"></span></p>
            <div class="expand-info">
                <p class=""><i class="iconfont icon-grid c-success"></i> 类型<span
                        class="mui-pull-right font-b-8 type"></span></p>
                <p class="mui-hidden"><i class="iconfont icon-location-b c-lgreen"></i> 场地<span
                        class="mui-pull-right font-b-8 address"></span></p>
                <p class="mui-hidden"><i class="iconfont icon-device c-primary"></i> 设备<span
                        class="mui-pull-right font-b-8 devInfo"></span></p>
                <p class="mui-hidden"><i class="iconfont icon-ceshi c-orange"></i> 状态<span
                        class="mui-pull-right font-b-8 status"></span></p>
                <p class="mui-hidden"><i class="iconfont icon-form c-orange"></i> 订单号<span
                        class="mui-pull-right font-b-8 orderNo"></span></p>
                <p class="mui-hidden"><i class="iconfont icon-bi c-blue"></i> <span class="rechargeTypeLabel">订单类型</span><span
                        class="mui-pull-right font-b-8 rechargeType"></span></p>

                <p class="mui-hidden"><i class="iconfont icon-purse c-success"></i> 余额<span
                        class="mui-pull-right font-b-8"><em class="balance"></em><i>元</i></span></p>
                <p class="mui-hidden"><i class="iconfont icon-purse c-lgreen"></i> 充值前余额<span
                        class="mui-pull-right font-b-8"><em class="preBalance"></em><i>元</i></span></p>

                <p class="mui-hidden"><i class="iconfont icon-bi c-success"></i> 充值<span
                        class="mui-pull-right font-b-8"><em class="coins"></em><i>元</i></span></p>
                <p class="mui-hidden"><i class="iconfont icon-bi c-red"></i> 实际花费<span
                        class="mui-pull-right font-b-8"><em class="spendMoney"></em><i>元</i></span></p>
                <p class="mui-hidden"><i class="iconfont icon-refund c-orange"></i> 退费金额<span
                        class="mui-pull-right font-b-8 refundedMoney"></span></p>
                <p class="mui-hidden"><i class="iconfont icon-purse c-orange"></i> 收费标准<span
                        class="mui-pull-right font-b-8 feeType"></span></p>

                <p class="mui-hidden"><i class="iconfont icon-clock-bold c-primary"></i> 结束时间<span
                        class="mui-pull-right font-b-8 finishedTime"></span></p>
                <p class="mui-hidden"><i class="iconfont icon-clock c-lgreen"></i> 充电时间<span
                        class="mui-pull-right font-b-8 "><em class="duration"></em><i>分钟</i></span></p>
                <p class="mui-hidden"><i class="iconfont icon-clock c-success"></i> 剩余时间<span
                        class="mui-pull-right font-b-8 "><em class="leftTime"></em><i>分钟</i></span></p>
                <p class="mui-hidden"><i class="iconfont icon-clock c-primary"></i> 订购时间<span
                        class="mui-pull-right font-b-8 needTime"></span></p>
                <p class="mui-hidden"><i class="iconfont icon-clock c-primary-new"></i> 实际预定<span
                        class="mui-pull-right font-b-8 actualNeedTime"></span></p>

                <p class="mui-hidden"><i class="iconfont icon-elec c-blue"></i> 需要电量<span
                        class="mui-pull-right font-b-8 "><em class="needElec"></em><i>度</i></span></p>
                <p class="mui-hidden"><i class="iconfont icon-elec c-success"></i> 实际消耗<span
                        class="mui-pull-right font-b-8 "><em class="elec"></em><i>度</i></span></p>
                <p class="mui-hidden"><i class="iconfont icon-success c-primary"></i> 结束方式<span
                        class="mui-pull-right font-b-8 reason"></span></p>

                <p class="mui-hidden"><i class="iconfont icon-power2 c-lgreen"></i> 功率<span
                        class="mui-pull-right font-b-8 "><em class="power"></em><i>瓦</i></span></p>
                <p class="mui-hidden"><i class="iconfont icon-chazuo c-success"></i> 端口<span
                        class="mui-pull-right font-b-8 chargeIndex"></span></p>
                <p class="mui-hidden"><i class="iconfont icon-battery c-primary"></i> 电池类型<span
                        class="mui-pull-right font-b-8 batteryType"></span></p>
                <p class="mui-hidden"><i class="iconfont icon-voltage c-red"></i> 电池电压<span
                        class="mui-pull-right font-b-8 "><em class="voltage"></em><i>V</i></span></p>

                <p class="mui-hidden"><i class="iconfont icon-form c-primary"></i> 备注<span
                        class="mui-pull-right font-b-8 remarks"></span></p>
                <p class="mui-hidden"><i class="iconfont icon-more c-primary"></i> 详情<span
                        class="mui-pull-right font-b-8 desc"></span></p>

            </div>
        </li>
    </ul>
</script>
<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/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>
    var cardId = getQueryString('cardId') || "";
    var cardNo = getQueryString('cardNo') || "";

    var startTime = moment().add("month", -1).format("YYYY-MM-DD");//默认展示最近30天，否则记录太少
    var endTime = moment().format("YYYY-MM-DD");
    var type = 'consume';
    var pageIndex = 0;
    var pageSize = 10;
    var total = 0;

    var typeList = [
        {
            label: '全部',
            value: ''
        },
        {
            label: '充值',
            value: 'chargeCard'
        },
        {
            label: '退费',
            value: 'refund'
        },
        {
            label: '消费',
            value: 'consume'
        },
        {
            label: '订单',
            value: 'order'
        },
        {
            label: '派送',
            value: 'sendCoin'
        }
    ];
    var typeMap = {
        'chargeCard': '充值',
        'refund': '退费',
        'consume': '消费',
        'sendCoin': '派送',
        'order': '订单',
    };

    setTimeTitle();

    var YuChuan = null

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

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

        var startTimeBtn = $('#start-date');
        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 + '';
                $('#beginDate').text(startTime);
            });
        }, false);

        var endTimeBtn = $('#end-date');
        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 + '';
                $('#endDate').text(endTime);
            });
        }, false);

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

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

        function setDateTime(range) {
            endTime = moment().format("YYYY-MM-DD");

            if (range && range > 0) {
                startTime = moment().add(-(range - 1), "day").format("YYYY-MM-DD");
            }

            $('#beginDate').text(startTime);
            $('#endDate').text(endTime);
        }
    });

    //新的类型选择器
    $('.record-type-check').click(function (e) {
        type = $(this).attr('type');
        $('.record-type-check').removeClass('active')
        $(this).addClass('active');
        search()
    });

    mui.init({
        pullRefresh: {
            container: '#pullrefresh',
            up: {
                contentrefresh: '正在加载...',
                contentnomore: '没有更多数据了...',
                callback: function () {
                    if (YuChuan === null) {
                        getFeatureList("dealer", {list: ['YuChuan']}, function (payload) {
                            YuChuan = payload.YuChuan
                            if (YuChuan) {
                                $("[type='consume']").remove()
                                $("[type='chargeCard']").remove()
                                $("[type='order']").remove()
                                $("[type='cardConsume']").addClass('active')
                                type = "cardConsume"
                            } else {
                                $("[type='cardConsume']").remove()

                            }
                            pullupRefresh()
                        });
                    } else {
                        pullupRefresh()
                    }
                }
            }
        }
    });

    var rechargeTypeMap = {
        netpay: "网络支付",
        device: "线下充值",
        sendCoin: "派币赠送"
    }

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

        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.dataList.length;
                for (var i = 0; i < length; i++) {
                    var obj = res.para.dataList[i];
                    var html = $($("#modal").html());

                    html.find(".amount").text((obj.via == 'chargeCard' ? '' : (obj.via == 'consume' ? '' : '')) + obj.amount)
                    html.find(".time").text(obj.createdTime)

                    obj.status != null && html.find(".status").text(obj.status).parent().removeClass('mui-hidden')
                    //判断订单状态，展示为不同的的颜色
                    if (obj.status != null && obj.status.indexOf('成功') > -1) {
                        html.find(".status").addClass('c-success')
                    }
                    if (obj.status != null && (obj.status.indexOf('失败') > -1 || obj.status.indexOf('取消') > -1)) {
                        html.find(".status").addClass('c-red')
                    }

                    obj.address != null && html.find(".address").text(obj.address).parent().removeClass('mui-hidden')
                    obj.devType != null && html.find(".devInfo").text(obj.devType + "-" + obj.logicalCode).parent().removeClass('mui-hidden')
                    obj.via != null && html.find(".type").text(typeMap[obj.via]).parent().removeClass('mui-hidden')

                    //其他附加信息
                    if (obj.via == 'chargeCard' || obj.via == 'order') {
                        setValue(obj, html, "coins")
                    }

                    if (obj.rechargeType) {
                        var typeText = '充值方式'
                        if (type == 'order') {
                            typeText = '订单类型'
                        }
                        if (type == 'chargeCard') {
                            typeText = '充值方式'
                        }
                        html.find(".rechargeType").text(rechargeTypeMap[obj['rechargeType']]).closest('p').removeClass('mui-hidden').find('.rechargeTypeLabel').text(typeText)
                    }

                    setValue(obj, html, "orderNo")
                    setValue(obj, html, "balance")
                    setValue(obj, html, "preBalance")
                    setValue(obj, html, "spendMoney")
                    setValue(obj, html, "finishedTime")
                    setValue(obj, html, "leftTime")
                    setValue(obj, html, "needTime")
                    setValue(obj, html, "actualNeedTime")
                    setValue(obj, html, "feeType")
                    setValue(obj, html, "refundedMoney")
                    setValue(obj, html, "duration")
                    setValue(obj, html, "reason")
                    setValue(obj, html, "needElec")
                    setValue(obj, html, "elec")
                    setValue(obj, html, "power")
                    setValue(obj, html, "chargeIndex")
                    setValue(obj, html, "batteryType")
                    setValue(obj, html, "voltage")
                    setValue(obj, html, "remarks")
                    setValue(obj, html, "desc")

                    groupWrap.append(html);

                }

            } else {
                mui.toast(res.description);
            }
        });
    }

    function setValue(obj, html, key) {
        obj[key] != null && html.find("." + key).text(obj[key]).closest('p').removeClass('mui-hidden')
    }

    //通用选择器
    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 () {
            search()
        }
    })

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

        setTimeTitle()

        pageIndex = 0;

        $(".group-wrap").empty(); // 清空数据
        mui('#pullrefresh').pullRefresh().refresh(true);//重置上拉加载
        pullupRefresh();
    }

    function setTimeTitle() {
        if (startTime == endTime) {
            $("#time").html("卡号" + cardNo + "，" + startTime + "的记录");
        } else {
            $("#time").html("卡号" + cardNo + "，" + startTime + "至" + endTime + "的记录");
        }

        $('#beginDate').text(startTime);
        $('#endDate').text(endTime);
    }


    $('body').on('tap', '.card-detail', function () {
        if ($(this).hasClass("active")) {
            $(this).removeClass("active")
        } else {
            $(this).addClass("active")
        }
    });


    //初始化刷新一次数据
    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>