dayuan
/
manyi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
							<!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/custom/css/common.css"/>
    <link rel="stylesheet" href="/app/css/xyf.common.min.css">
    <style>


    </style>
</head>
<body>

<div class="charge-list">
    <div class="mui-row ">
        <div class="mui-col-sm-12 mui-col-xs-12 mui-input-group mui-reset clear-before">
            <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="filter-btn" onclick="showChargeRecord()"><i class="iconfont icon-order c-primary"></i>
                        订单
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div id="pullrefresh" class="pullrefresh ">
        <div class="scrollloadContainer">
            <ul class="mui-table-view scrollload-content group-card-list">
            </ul>
        </div>
    </div>

    <div class="handle-panel custom-border-top">
        <div class="handle-btn detail-btn" onclick="selectDetail()">
            <div class="mui-checkbox checkbox-all-wear" style="display: inline-block">
                <input class="checkbox-all" value="" id="checkbox-all" type="checkbox">
            </div>
            <label class="checkbox-all-lb" for="checkbox-all">全选</label>
            <div class="checked-detail c-orange">
                <i class="checked-num"></i>
                ￥<span class="checked-price">0</span>
            </div>
        </div>
        <div class="handle-btn charge-btn" onclick="charge()">续费</div>
    </div>

</div>

<script type="text/html" id="model">
    <li class="mui-table-view-cell charge-card">
        <div class="card-item">
            <div class="card-cb mui-checkbox">
                <input class="checkbox-btn" value="" type="checkbox">
            </div>
            <div class="card-detail">
                <div class="card-img">
                    <div class="iconfont devIcon c-blue"></div>
                </div>
                <div class="card-info">
                    <p class="title"></p>
                    <p class="">
                        <span class="expire-date"></span>
                        <span class="price-box c-orange">￥<span class="price"></span></span>
                    </p>
                </div>
            </div>
        </div>
    </li>
</script>

<script src="https://cdn.washpayer.com/components/lib/jquery.min.js"></script>
<script src="https://cdn.washpayer.com/components/lib/moment.min.js"></script>
<script src="https://cdn.washpayer.com/components/lib/mui.min.js"></script>
<script src="https://cdn.washpayer.com/components/lib/Scrollload.js"></script>
<script src="/components/custom/js/common.js"></script>
<script src="/app/js/xyf.common.js"></script>
<script>
    var selectList = [];
    //事件绑定
    $(function () {
        //checkbox change触发事件
        $("body").on("change", ".checkbox-btn", function () {
            //计算所有选中的价格总和
            selectList = [];
            var sum = 0;
            var count = 0;
            var checkboxList = $(".checkbox-btn:checked");
            for (var index = 0; index < checkboxList.length; index++) {
                var checkbox = $(checkboxList[index]);

                if (checkbox.is(":checked")) {
                    var li = checkbox.closest("li");
                    var price = li.attr("price");
                    var devNo = li.attr("devNo");
                    selectList.push(devNo);
                    sum = sum + parseFloat(price);
                    count++;
                }
            }

            $(".checked-price").text(sum);
            if (count > 0) {
                $(".checked-num").show().text(count + "件合计：");
            } else {
                $(".checked-num").hide();
            }
        });

        $("body").on("click", ".card-detail", function (evt) {
            console.log($(this).closest('.card-item'))
            var cDom = $(this).closest('.card-item').find('.checkbox-btn')[0]
            cDom.checked = !cDom.checked
            $(cDom).trigger('change')
        });

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

            $(".checkbox-btn:first-child").trigger("change");

        });

        $(window).on("resize", function () {
            if (scrollload1) {
                scrollload1.unLock();
            }
        });
    });

    var dataPageIndex = 0;
    var total = 0;
    var pageSize = 100;
    var searchKey = "";

    localStorage.setItem("simOpenId", getQueryString("openId"))

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

    function search() {
        lastGroupId = '';
        dataPageIndex = 0;
        $('.scrollload-content').html("");
        searchKey = $("#searchKey").val();
        console.log('searchKey', searchKey)
        scrollload1.refreshData();//重载数据
    }

    //初始化数据加载组件
    var scrollload1 = new Scrollload({
        container: $(".scrollloadContainer")[0],
        window: $("#pullrefresh")[0],
        enablePullRefresh: true,
        loadMore: function (slEntity) {
            if (dataPageIndex > 0 && dataPageIndex * pageSize >= total) {
                slEntity.noMoreData();
                return;
            }
            dataPageIndex++;
            pullupRefresh(slEntity, dataPageIndex);//加载更多
        },
        pullRefresh: function (slEntity) {
            slEntity.refreshComplete();//设备数据不会有很快的更新频率，不用下拉刷新
        }
    });

    var lastGroupId = '';
    var groupPanel = '';
    function pullupRefresh(slEntity, pageIndex) {
        var url = "/dealer/getDeviceCardList?random=" + Math.random() * 1000;
        var data = {"pageIndex": pageIndex, "pageSize": pageSize, searchKey: searchKey};
        sendRequest(url, "GET", data, function (res) {
            var panel = $('.scrollload-content');
            if (res.result == 1) {

                total = res.para.total;

                if (total === 0) {
                    $('.scrollload-content').hide();
                }

                var length = res.para.items.length;
                for (var i = 0; i < length; i++) {
                    var obj = res.para.items[i];

                    var html = $("#model").html();
                    html = $(html).attr({"price": obj.price, "devNo": obj.devNo});

                    var devIcon = getDevIconName(obj.devTypeName);
                    html.find(".devIcon").addClass(devIcon);
                    html.find(".title").text(obj.devTypeName + "-" + obj.logicalCode + " " + (obj.channelType || ''));
                    html.find(".price").text(obj.price);
                    if (obj.simExpireDate) {

                        var text = obj.simExpireDate + "到期"
                        if (moment(obj.simExpireDate).format('YYYY-MM') === moment().format('YYYY-MM')) {
                          text = text + ' <strong class="c-red ">本月到期</strong>'
                        }
                      html.find(".expire-date").html(text);
                    }

                    if (lastGroupId !== obj.groupId) {
                        groupPanel = $("<div class='group-split'><div class='group-name'>" + obj.groupName + "</div></div>");
                        panel.append(groupPanel)
                    }
                    lastGroupId = obj.groupId

                    groupPanel.append(html);
                }
            } else {
                mui.toast(res.description);
            }

            if (slEntity) {
                slEntity.unLock();//每次滚动到底部都会锁定，所以你在loadMoreFn方法中需要解锁，下次滚动到底部才能继续调用loadMoreFn
            }
        });
    }

    //查看选中详情 todo
    function selectDetail() {
    }

    //调用充值
    function charge() {
        if (selectList.length == 0) {
            mui.toast("请选择设备进行续费");
            return;
        }
        sendRequest("/dealer/sim/order/create", "post", {"list": selectList}, function (res) {
            if (res.result == 1) {
                var url = "payOrderDetail.html?orderNo=" + res.para;
                goPage(url);
            } else {
                mui.toast(res.description);
            }
        });
    }

    //展示充值记录：订单
    function showChargeRecord() {
        var url = "payOrderList.html";
        goPage(url);
    }
</script>
</body>
</html>