dayuan
/
manyi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598
							<!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>
        .top-oper-bar {
            position: relative;
            height: 38px;
            line-height: 38px;
            margin: 0;
            padding: 0 10px;
            background: #f4f4f4;
        }

        .top-oper-bar .right-link {
            margin-top: -10px;
            margin-right: -10px;
            padding: 10px;
        }
    </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="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"><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="or-border-fir mui-input-row input-clear" id="showPickerAddress">
            <label class="or-label-text">地址</label>
            <span class="mui-icon mui-icon-arrowright"></span>
            <span class="l-h-38 font-b-6 selected-text">全部</span>
        </div>
        <div class=" mui-input-row input-clear " id="frozenStatus">
            <label class="or-label-text">状态</label>
            <span class="mui-icon mui-icon-arrowright"></span>
            <span class="l-h-38 font-b-6 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>


<h5 class="flexbox top-oper-bar">
    <span class="text-right c-blue right-link" onclick="checkSendCoinsRecord()">派币记录</span>
    <span class="text-right c-blue right-link" onclick="goAddCard()">去录卡</span>
</h5>

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

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

<!--生成二维码-->
<div class="common-mask" id="codePanel">
    <div class="common-model">
        <div class="common-model-tit">长按二维码保存</a>
        </div>

        <img id="previewImg" style="margin: auto;display: block">
        <div class="common-model-close" onclick="closeQRCode()">关闭</div>
    </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">
            <i class="iconfont icon-card c-primary iconCard"></i>
            <p class="card-dashed-line"><i class="iconfont icon-card c-primary "></i> <span
                    class="cardNo font-b"></span><span
                    class="balance font-b mui-pull-right"></span></p>
            <div class="expand-info ">
                <p class="mui-hidden">别名<span class="mui-pull-right font-b-8 alias"></span></p>
                <p class="mui-hidden">电话<span class="mui-pull-right font-b-8 phone"></span></p>
                <p class="mui-hidden">状态<span class="mui-pull-right font-b-8 status"></span></p>
                <p class="mui-hidden">挂失状态<span class="mui-pull-right font-b-8 frozen"></span></p>
                <p class="mui-hidden">卡主<span class="mui-pull-right font-b-8 cardName"></span></p>
                <p class="mui-hidden">绑定状态<span class="mui-pull-right font-b-8 bindStatus"></span></p>

                <div class="split-line margin-t-b-5"></div>

                <p class="operBtn qrcodeBtn margin-t-10">二维码<span class="mui-navigate-right"></span></p>
                <p class="operBtn operRecordBtn">使用记录<span class="mui-navigate-right"></span></p>
                <p class="operBtn cardDetail">卡详情<span class="mui-navigate-right"></span></p>
            </div>
        </li>
    </ul>
</script>
<script src="https://cdn.washpayer.com/components/lib/jquery.min.js"></script>
<script src="../components/lib/jquery.qrcode.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 equipmentGroupId = "";
    var groupName = "";

    //地址 选择器
    var addressPicker = new mui.PopPicker({
        layer: 1
    });

    var YuChuan = false
    var deleteInitIcCard = false;//可以删除卡
    getFeatureList("dealer", {list: ['deleteInitIcCard', 'YuChuan']}, function (payload) {
        YuChuan = payload.YuChuan
        deleteInitIcCard = payload.deleteInitIcCard
        mui.init({
            pullRefresh: {
                container: '#pullrefresh',
                up: {
                    contentrefresh: '正在加载...',
                    contentnomore: '没有更多数据了...',
                    callback: pullupRefresh
                }
            }
        });

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

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


    });

    var addressPickerOper = {
        getEquipmentNumAndAdressList: function (callback) {
            var $scope = this;
            sendRequest('/device/getEquipmentNumAndAddressList', 'post', {}, function (res) {
                if (res.result == 1) {
                    var pickerDatas = []
                    pickerDatas.push({
                        value: null,
                        text: '全部投放地址',
                    });
                    var datas = res.para.groups

                    for (var i = 0, length = datas.length; i < length; i++) {
                        var item = {
                            value: datas[i].groupId,
                            text: datas[i].name,
                        };
                        pickerDatas.push(item);
                    }
                    addressPicker.setData(pickerDatas);
                    if (callback) {
                        callback()
                    }
                } else {
                    mui.toast(res.description);
                }
            })
        },
        setEquipmentNumAndAddressNum: function (AddressNum, equipmentNum) {
            $('.putOnAddress').text(AddressNum);
            $('.equipmentNum').text(equipmentNum);
        },
    };

    // 需要等待地址加载出来，然后才初始化所有的参数
    addressPickerOper.getEquipmentNumAndAdressList(function () {
        if (equipmentGroupId) {
            addressPicker.pickers[0].setSelectedValue(equipmentGroupId);
            $('#showPickerAddress .selected-text').html(groupName);
        }
    });


    //地址选择器展示
    $("#showPickerAddress").on("tap", function () {
        addressPicker.show(function (rs) {
            equipmentGroupId = rs[0].value;
            groupName = rs[0].text;
            $('#showPickerAddress .selected-text').html(rs[0].text);
        });
        return false;
    })

    function goAddCard() {
        goPage('/dealer/index.html#/card/edit')
    }

    function checkSendCoinsRecord() {
        goPage('/dealer/index.html#/card/sendCoinsRecord')
    }

    //如果调到子页面，返回后还是保留查询条件
    var orRecordBack = getQueryString('orRecord');

    // 由外部传入的条件，主要是某个用户下级的实体卡查询
    var userId = getQueryString('userId');
    var groupId = getQueryString('groupId');

    /**
     * 向localStorage写入条件数据
     */
    var searchKey = null;// 定义为null，如果是undefined，ios8 微信ajax时会崩溃，但是有的接口有 undefined却不会崩溃。。。
    var frozenStatus = '';//状态
    var pageIndex = 0;
    var pageSize = 10;
    var total = 0;

    var condition;
    var pageType = 'cardManage';

    //获取条件缓存数据
    if (orRecordBack) {
        history.replaceState(null, null, "card-manage.html");
        condition = localStorage.condition ? JSON.parse(localStorage.condition)[pageType] : null;

        if (condition.equipmentGroupId) {
            equipmentGroupId = condition.equipmentGroupId
            groupName = condition.groupName
        }
    } else {
        condition = null;
    }

    function setCondition() {
        var data = {
            searchKey: searchKey,
            equipmentGroupId: equipmentGroupId,
            groupName: groupName,
            frozen: frozenStatus,
        };
        var conArr = localStorage.condition ? JSON.parse(localStorage.condition) : {};
        conArr[pageType] = data;
        localStorage.condition = JSON.stringify(conArr);
    }

    var frozenStatusList = [
        {
            label: '全部',
            value: ''
        },
        {
            label: '正常',
            value: 0
        },
        {
            label: '已挂失',
            value: 1
        }
    ];
    var frozenStatusMap = {0: '正常', 1: '已挂失'};
    var bindStatusMap = {false: '未绑定', true: '已绑定'};
    var statusMap = {active: '正常'};

    /*根据缓存渲染已有条件数据*/
    if (condition) {
        if (condition.frozen != null) {
            frozenStatus = condition.frozen;
            $("#frozenStatus .selected-text").html(frozenStatusMap[condition.frozen]);
        }

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

    } else {

    }

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

    var agentId;

    //刷新数据
    function pullupRefresh(callback) {
        pageIndex++;
        var url = "/dealer/getUserCardList";
        var data = {
            searchKey: searchKey,
            equipmentGroupId: equipmentGroupId,
            frozen: frozenStatus,
            pageIndex: pageIndex,
            pageSize: pageSize,
        };

        if (userId) {
            data.userId = userId
        }
        if (groupId) {
            data.groupId = groupId
        }

        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.dataList.length;
                for (var i = 0; i < length; i++) {
                    var obj = res.para.dataList[i];
                    var html = $($("#modal").html());
                    html.find(".expand-info").attr("data-id", obj.cardId)
                    html.find(".expand-info").attr("cardNo", obj.cardNo)
                    html.find(".expand-info").attr("cardName", obj.cardName)
                    html.find(".expand-info").attr("phone", obj.phone)
                    html.find(".expand-info").attr("groupId", obj.groupId)
                    html.find(".expand-info").attr("groupName", obj.groupName)
                    html.find(".expand-info").attr("balance", obj.balance)
                    html.find(".cardNo").text(obj.cardNo)
                    html.find(".balance").text(obj.balance + "元")

                    //附加信息
                    setValue(obj, html, "frozen", frozenStatusMap[obj.frozen], (obj.frozen === 1 ? "c-red" : "c-success"))
                    setValue(obj, html, "alias")
                    setValue(obj, html, "phone")
                    setValue(obj, html, "nickname")
                    setValue(obj, html, "cardName")
                    setValue(obj, html, "bindStatus", bindStatusMap[obj.bindStatus])
                    setValue(obj, html, "status", statusMap[obj.status])

                    if (obj.frozen === false) {
                        html.find(".freezeCard").addClass("isFreeze").find('.btn-label').text("挂失")
                    } else {
                        html.find(".freezeCard .btn-label").text("解除挂失")
                    }

                    if (!deleteInitIcCard) {
                        html.find(".deleteCard").remove()
                    }

                    groupWrap.append(html);
                    agentId = res.payload.agentId;
                    if (callback) {
                        callback()
                    }
                }

                if (YuChuan) {
                    $('.qrcodeBtn').remove()
                    $('.cardDetail').remove()
                    $('.balance').remove()
                    $('#sumBalance').remove()
                }
            } else {
                mui.toast(res.description);
            }
        });
    }

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

        if (styleClass) {
            html.find("." + key).addClass(styleClass)
        }
    }

    //通用选择器
    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 () {
            /*合法性验证*/
            pageIndex = 0;
            search();
        }
    })

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

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

    //添加充值卡
    function addCard() {
        goPage('card-manage-edit.html');
    }

    $('body').on('tap', '.card-detail', function () {
        if ($(this).hasClass("active")) {
            $(this).removeClass("active")
        } else {
            $(this).addClass("active")
        }
    }).on('tap', '.operBtn', function (evt) {
        evt.stopPropagation();
        var cardId = $(this).closest('.expand-info').attr("data-id");
        var cardNo = $(this).closest('.expand-info').attr("cardNo");
        var phone = $(this).closest('.expand-info').attr("phone");
        var cardName = $(this).closest('.expand-info').attr("cardName");
        var groupName = $(this).closest('.expand-info').attr("groupName");
        var groupId = $(this).closest('.expand-info').attr("groupId");
        var balance = $(this).closest('.expand-info').attr("balance");
        if (cardId) {

            if ($(this).hasClass("freezeCard")) {
                var frozen;
                var tit = ""
                if ($(this).hasClass("isFreeze")) {
                    frozen = true;
                    tit = "您确定冻结使用该卡吗？"
                } else {
                    frozen = false;
                    tit = "卡片将恢复使用，您确定要解除挂失状态吗？"
                }

                var btnArray = ['取消', '确定'];
                mui.confirm(tit, '温馨提示', btnArray, function (e) {
                    if (e.index == 1) {
                        var data = {"id": cardId, frozen: frozen};

                        sendRequest({
                                url: "/dealer/freezeCard",
                                data: data,
                                type: 'POST',
                                contentType: "json",
                                success: function (res) {
                                    if (res.result == 1) {
                                        mui.toast("操作成功");
                                        search();//刷新列表
                                    }
                                }
                            }
                        );

                    }
                });

            } else if ($(this).hasClass("operRecordBtn")) {
                history.replaceState(null, null, "card-manage.html?orRecord=true&t=" + new Date().getTime());
                var url = '/user/index.html#balanceChange?cardId=' + cardId;
                goPage(url);

            } else if ($(this).hasClass("cardDetail")) {
                history.replaceState(null, null, "card-manage.html?orRecord=true&t=" + new Date().getTime());
                var url = '/dealer/index.html#/card/detail?cardId=' + cardId;
                goPage(url);

            } else if ($(this).hasClass("operSendCoins")) {
                history.replaceState(null, null, "card-manage.html?orRecord=true&t=" + new Date().getTime());
                var url = '/dealer/index.html#/card/sendCoins?cardId=' + cardId;
                goPage(url);

            } else if ($(this).hasClass("deleteCard")) {
                var btnArray = ['取消', '确定'];
                mui.confirm('确定删除？', '温馨提示', btnArray, function (e) {
                    if (e.index === 1) {
                        sendRequest({
                                url: "/dealer/deleteCard",
                                data: {cardId: cardId},
                                type: 'POST',
                                contentType: "json",
                                success: function (res) {
                                    if (res.result === 1) {
                                        mui.toast("操作成功");
                                        search();//刷新列表
                                    } else {
                                        mui.toast(res.description);
                                    }
                                }
                            }
                        );
                    }
                });
            } else if ($(this).hasClass("swapCardNo")) {
                goPage('/dealer/index.html#/card/swapCardNo?cardId=' + cardId + '&cardNo=' + cardNo + '&balance=' + balance)
            } else if ($(this).hasClass("editCard")) {
                goPage('/dealer/index.html#/card/edit?editCard=1&groupId=' + groupId + '&cardName=' + cardName + '&phone=' + phone + '&cardId=' + cardId + '&cardNo=' + cardNo)
            } else if ($(this).hasClass("qrcodeBtn")) {
                $("#codePanel").show();
                var label = cardNo
                var protocol = location.protocol;
                var currentDomain = protocol + "//" + location.host;
                var userUrl;

                userUrl = currentDomain + "/userLogin?agentId=" + agentId + "&redirect=" +
                    encodeURIComponent("/user/index.html" + "#/user/checkCard?" +
                        "cardId=" + cardId +
                        "&cardNo=" + cardNo +
                        "&cardName=" + cardName +
                        "&phone=" + phone +
                        "&groupName=" + groupName +
                        "&groupId=" + groupId +
                        "&dealerEdit=true"
                    );
                var dataURL = getQRCodeImageData(userUrl, label);
                $("#previewImg").attr({
                    "width": 200,
                    "height": 230,
                    "src": dataURL
                });
            }

        }
    });

    function closeQRCode() {
        $("#codePanel").hide();
    }

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