TG.WXCRM.V4/WEB/Views/WeiXin/JZOrder/CommonPayInfo3.cshtml

@using WX.CRM.WebHelper;
@using System.Web;
@using WX.CRM.WEB.Controllers;
<style>
    .sdRgt {
        margin-left: 20px;
        margin-right: 20px;
        overflow-y: auto;
        height: 100%;
    }

    .noindent {
        margin-top: 20px;
        padding-left: 50px;
        font-size: 12px;
    }

        .noindent h4 {
            font-weight: normal;
            margin-top: 15px;
        }

        .noindent p {
            margin-left: 10px;
            line-height: 25px;
        }

    .mode {
        font-size: 14px;
        font-weight: normal;
    }

    .company {
        margin-top: 40px;
        font-size: 16px;
    }
    .ch{
        font-size:20px;
        font-weight:bold;
        color:red;
    }

    .paytab {
        display: inline-block;
        padding: 5px 10px;
        border: 1px solid #ccc;
        color: #888;
        margin-right: 5px;
        margin-bottom: 5px;
        border-radius: 5px;
    }

    .paytab_active {
        background-color: #00a2e8;
        color: #fff;
    }
</style>
@{
    ViewBag.Title = "通用二维码";
    Layout = "~/Views/Shared/_Index_LayoutEdit.cshtml";

}


<div class="sdRgt">
    <table width="100%">
        <tr>
            <td colspan="2">
                <h4 style="font-size:16px; margin-top:10px;">开户行：招商银行股份有限公司北京东四环支行</h4>
                <p style="font-size:16px;line-height:30px;">
                    户　名：东高（广东）科技发展有限公司  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;账　号：110905783010611
                </p>
            </td>
        </tr>
    </table>
    <div id="_div_payimgs">
    </div>
</div>

<script>
    function copyToClipboard(txt, id) {
        var clip = new ZeroClipboard.Client();
        clip.setHandCursor(true);
        var text = document.getElementById(txt).value;
        clip.setText(text);
        clip.glue(id);
        clip.addEventListener("complete", function () {
            alert("复制成功,你可以使用Ctrl+V 粘贴！");
        });
    }

    function init() {
        $.ajax({
            url: '/JZOrder/CommonPayInfo3',
            type: 'POST',
            data: {},
            success: function (rsp) {
                var sb = '';
                if (rsp.PayInfo) {
                    sb += '<div>';
                    var i = 0;
                    for (var p in rsp.PayInfo) {
                        i++;
                        var active = '';
                        if (i == 1) {
                            active = ' paytab_active';
                        }
                        sb += '<span class="paytab' + active + '" onclick="change_pay_tab(this)" data-tab="' + i + '">' + p + '</span>';
                    }
                    sb += '</div>';
                    var j = 0;
                    for (var p in rsp.PayInfo) {
                        j++;
                        var display = '';
                        if (j > 1) {
                            display = 'display:none;';
                        }
                        var items = rsp.PayInfo[p];
                        sb += '<div class="payitem" id="_div_payitem_' + j + '" style="' + display + '">';
                        for (var k = 0; k < items.length; k++) {
                            var item = items[k];
                            sb += '<div class="ch">' + item.CH + '</div>';
                            sb += '<table width="100%">';
                            sb += '    <tr>';
                            sb += '        <td width="50%">';
                            sb += '            <div class="bank">';
                            sb += '                <img src="' + item.ZFBUrl +'" style="max-width:100%;" />';
                            sb += '            </div>';
                            sb += '        </td>';
                            sb += '        <td width="50%" valign="top">';
                            sb += '            <div class="bank">';
                            sb += '                <img src="' + item.WXUrl + '" style="max-width:100%;" />';
                            sb += '            </div>';
                            sb += '        </td>';
                            sb += '    </tr>';
                            sb += '</table>';
                        }
                        sb += '</div>';
                    }
                }

                $('#_div_payimgs').html(sb);
            },
            fail: function (e) {
                console.log(e);
            }
        });
    }

    function change_pay_tab(sender) {
        var tab = $(sender).attr('data-tab');
        console.log(tab);
        $(sender).siblings().removeClass('paytab_active');
        $(sender).addClass('paytab_active');

        $('.payitem').hide();
        $('#_div_payitem_' + tab).show();
    }

    $(function () {
        init();
    })
</script>