#@ucenter_noleft_layout('支付台')

#define script()
<script src="#(CPATH)/static/components/distpicker/distpicker.min.js"></script>
<script>


    var globalTotalPrice;//总金额
    $(".add").on("click", function () {
        var itemId = $(this).attr("data-value");
        var that = $(this);

        ajaxPost('#(CPATH)/ucenter/cart/addcount', {id: itemId}, function (ret) {
            var input = that.prev();
            var inputVal = input.val();
            if (inputVal && inputVal != "") {
                inputVal = parseInt(inputVal) + 1;
            } else {
                inputVal = 1;
            }
            input.val(inputVal);
            doCompute(inputVal, that , ret.shouldPayPrice);
        });
    });


    $(".subtract").on("click", function () {
        var itemId = $(this).attr("data-value");
        var that = $(this);
        ajaxPost('#(CPATH)/ucenter/cart/subtractcount', {id: itemId}, function (ret) {
            var input = that.next();
            var inputVal = input.val();
            if (inputVal && inputVal != "") {
                inputVal = parseInt(inputVal) - 1;
                if (inputVal < 1) inputVal = 1;
            } else {
                inputVal = 1;
            }
            input.val(inputVal);
            doCompute(inputVal, that , ret.shouldPayPrice);
        });
    });


    function doCompute(val, btn,shouldPayPrice) {

        var row = btn.parent().parent().parent("tr").prevAll().length + 1;
        var col = btn.parent().parent().prevAll().length;

        // var price = parseFloat(getTableContent(row, col - 1));
        // var totalPrice = price * val;

        setTableContent(row, col + 1, shouldPayPrice);
        doComputeTotalPrice();
    }



    function doComputeTotalPrice() {
        var rows = $('#tab').find('tr').length;
        var totalPrice = 0;
        for (var index = 1; index < rows; index++) {
            totalPrice += parseFloat(getTableContent(index, 3));
        }

        var tp = totalPrice.toFixed(2);
        globalTotalPrice = tp;
        $('#totalPrice').text(tp);
        $('#payPrice').text(tp);
    }

    function getTableContent(row, col) {
        var content = null;
        $('#tab tr').each(function (i) {
            $(this).children('td').each(function (j) {
                if (row == i && col == j) {
                    content = $(this).text();
                    return false;
                }
            });
        });
        return content;
    }


    function setTableContent(row, col, content) {
        $('#tab tr').each(function (i) {
            $(this).children('td').each(function (j) {
                if (row == i && col == j) {
                    content = $(this).text(content);
                    return false;
                }
            });
        });
    }


    function doDelCart(id) {
        if (confirm("确定要删除该商品吗？")) {
            ajaxGet('#(CAPTH)/ucenter/cart/doDel?id=' + id, function () {
                location.reload()
            })
        }
    }


    $('#checkout').on('submit', function () {

        var self = this;
        layer.confirm('确认要下单吗？', {
            btn : [ '确定', '取消' ]//按钮
        }, function(index) {

            $(self).ajaxSubmit({
                type: "post",
                success: function (result) {
                    if (result.state == "ok") {
                        location.href = '#(CPATH)/ucenter/checkout/payorder/' + result.orderId + "?paytype=" + result.paytype;
                    }
                    //fail
                    else {
                        showErrorMessage(result.message);
                    }
                },
                error: function () {
                    showErrorMessage('系统错误，请稍后重试。');
                }
            });

            layer.close(index);

        });
        return false;
    });


    $('#select-coupon-code').click(function () {
        selectCouponCode(globalTotalPrice);
    });


    function selectCouponCode(price) {
        layer.data = {}
        layer.open({
            type: 2,
            title: "选择优惠码",
            anim: 2,
            shadeClose: true,
            shade: 0.5,
            area: ['60%', '60%'],
            content: '#(CPATH)/ucenter/coupon/layer?price='+price,
            end: function () {
                if (layer.data.couponCode){
                    var payPrice = parseFloat(globalTotalPrice)-parseFloat(layer.data.couponAmount);
                    $('#payPrice').text(payPrice.toFixed(2));
                    $('#coupon-price-span').text('优惠券:-'+(parseFloat(layer.data.couponAmount)));
                    $('#coupon-code-input').val(layer.data.couponCode);
                    $('#coupon-code-input').attr('readonly',true);
                    $('#select-coupon-code').text('选择优惠券（已选:'+layer.data.couponTitle+'）');
                }
            }
        });
    }

    function seleteAddress() {
        layer.data = {}
        layer.open({
            type: 2,
            title: "选择地址",
            anim: 2,
            shadeClose: true,
            shade: 0.5,
            area: ['60%', '60%'],
            content: '#(CPATH)/ucenter/address/layer',
            end: function () {
                if (layer.data.addrUsername) {
                    $('#addr_username').val(layer.data.addrUsername);
                    $('#addr_mobile').val(layer.data.addrMobile);
                    $('#addr_detail').val(layer.data.addrDetail);
                    $('#addr_zipcode').val(layer.data.addrZipcode);

                    $("#distpicker").distpicker('destroy');
                    $("#distpicker").distpicker({
                        province: layer.data.addrProvince,
                        city: layer.data.addrCity,
                        district: layer.data.addrDistrict
                    });
                }
            }
        });
    }

    $(document).ready(function () {
        doComputeTotalPrice();
        $("[name='paytype']:first").attr("checked", "checked");
    });


</script>

#end


#define css()
<style>
    .page-header {
        margin: 10px 0 20px;
    }

    .input-number {
        width: 120px;
    }

    .input-group-addon {
        cursor: pointer;
    }

    .add, .subtract {

    }

    .bottom-bar {
        left: 0;
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 60px;
        background-color: #fff;
        border-top: solid 1px #ccc;
        box-shadow: -15px 10px 10px 10px #ccc;;
    }

    .bottom-content {
        background-color: #ccc;
        width: 100%;
        height: 60px;
        padding: 0 230px 0 230px;
    }

    .bottom-content div {
        height: 60px;
    }

    .table > tbody > tr > td {
        vertical-align: middle;
    }

</style>
#end

#define content()
<div class="content-wrapper" style="min-height: 1126px;">

    <form action="#(CPATH)/ucenter/checkout/genorder" method="post" target="_blank" id="checkout">

        <!-- Main content -->
        <section class="invoice">
            <!-- title row -->
            <div class="row">
                <div class="col-xs-12">
                    <h2 class="page-header">
                        <i class="fa fa-globe"></i> 产品信息.
                    </h2>
                </div>
            </div>


            <!-- Table row -->
            <div class="row">
                <div class="col-xs-12 table-responsive">
                    <table class="table table-striped" id="tab">
                        <thead>
                        <tr>
                            <th style="width: 40%">商品</th>
                            <th>单价 #</th>
                            <th>数量</th>
                            <th>总价</th>
                            <th style="width: 50px">操作</th>
                        </tr>
                        </thead>
                        <tbody>

                        #for(userCart : userCarts )
                        <tr>
                            <td>
                                #(userCart.product_title ??)
                                <div style="color: #9c9c9c">
                                    #for(option : userCart.optionsMap)
                                    #(option.key ??) : #(option.value ??) #if(!(for.last))<br />#end
                                    #end
                                </div>
                            </td>
                            <td>
                                #if(userCart.memberPrice && userCart.memberPrice < userCart.newProductPrice)
                                <s>原价：#(userCart.newProductPrice ??)</s>
                                会员：#(userCart.memberPrice)
                                #else
                                #(userCart.newProductPrice ??)
                                #end
                            </td>
                            <td>
                                <div class="input-group input-number">
                                    <input type="hidden" name="cid" value="#(userCart.id ??)">
                                    <span class="input-group-addon subtract" data-value="#(userCart.id ??)">-</span>
                                    <input type="text" class="form-control" value="#(userCart.product_count ??)">
                                    <span class="input-group-addon add" data-value="#(userCart.id ??)">+</span>
                                </div>
                            </td>
                            <td>#(userCart.shouldPayPrice ??)</td>
                            <td>
                                <a href="javascript:;" onclick="doDelCart('#(userCart.id)')">删除</a>
                            </td>
                        </tr>
                        #end

                        </tbody>
                    </table>
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->

            <div class="row">
                <div class="col-xs-12">
                    <h2 class="page-footer">
                        <small class="pull-right" style="font-size: 16px"> <span id="coupon-price-span" class="text-primary"></span> </small>
                        <br>
                        <small class="pull-right">总价格: <span id="totalPrice">#.##</span> ￥</small>
                        <br>
                        <small class="pull-right">需支付: <span id="payPrice">#.##</span> ￥</small>

                    </h2>
                </div>
            </div>

        </section>

        <!-- Main content -->
        <section class="invoice">
            <!-- title row -->
            <div class="row">
                <div class="col-xs-12">
                    <h2 class="page-header">
                        <i class="fa fa-globe"></i> 订单信息.
                    </h2>
                </div>
                <!-- /.col -->
            </div>


            <div class="row">
                <!-- accepted payments column -->
                <div class="col-lg-6">
                    <div class="box box-dashboard">
                        <div class="box-header with-border">
                            <h3 class="box-title">收件人信息</h3>
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body">
                            <!-- text input -->
                            <div class="form-group">
                                <label>联系人</label>
                                <input type="text" class="form-control" name="order.delivery_addr_username"
                                       id="addr_username"
                                       placeholder="收件人的姓名..." value="#(defaultAddress.username ??)">
                            </div>

                            <div class="form-group">
                                <label>联系电话</label>
                                <input type="text" class="form-control" name="order.delivery_addr_mobile"
                                       id="addr_mobile"
                                       placeholder="收件人的电话..." value="#(defaultAddress.mobile ??)">
                            </div>

                            <div class="form-group">
                                <label>地址</label>
                                <div data-toggle="distpicker" class="form-inline" data-autoselect="3" id="distpicker">
                                    <select class="form-control" name="order.delivery_addr_province" id="addr_province"
                                            data-province="#(defaultAddress.province ?? '---- 选择省 ----')"></select>
                                    <select class="form-control" name="order.delivery_addr_city" id="addr_city"
                                            data-city="#(defaultAddress.city ?? '---- 选择市 ----')"></select>
                                    <select class="form-control" name="order.delivery_addr_district" id="addr_district"
                                            data-district="#(defaultAddress.district ?? '---- 选择区 ----')"></select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label>详细地址</label>
                                <textarea class="form-control" name="order.delivery_addr_detail" id="addr_detail"
                                          placeholder="请输入详细地址信息，如道路、门牌号、小区、楼栋号、单元等信息"
                                          rows="2">#(defaultAddress.detail ??)</textarea>
                            </div>

                            <div class="form-group">
                                <label>邮政编码</label>
                                <input type="text" class="form-control" name="order.delivery_addr_zipcode"
                                       id="addr_zipcode"
                                       placeholder="邮政编码..." value="#(defaultAddress.zipcode ??)">
                            </div>


                            <div class="col-xs-12">
                                <button type="button" class="btn btn-primary pull-right" onclick="seleteAddress()">
                                    <i class="fa fa-fw fa-street-view"></i>
                                    选择其他地址
                                </button>
                            </div>

                        </div>


                    </div>

                </div>
                <!-- /.col -->
                <div class="col-lg-6">
                    <div class="box box-dashboard">
                        <div class="box-header with-border">
                            <h3 class="box-title">支付信息</h3>
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body">
                            <div class="form-group">
                                <label>支付方式</label>

                                #if(wechatxConfig.isEnable())
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="paytype" value="wechatx">
                                        微信转账支付
                                    </label>
                                </div>
                                #end

                                #if(alipayxConfig.isEnable())
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="paytype" value="alipayx">
                                        支付宝转账支付
                                    </label>
                                </div>
                                #end

                                #if(wechatConfig.isEnable())
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="paytype" value="wechat">
                                        微信支付
                                    </label>
                                </div>
                                #end

                                #if(alipayConfig.isEnable())
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="paytype" value="alipay">
                                        支付宝支付
                                    </label>
                                </div>
                                #end

                                #if(paypalConfig.isEnable())
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="paytype" value="paypal">
                                        Paypal支付
                                    </label>
                                </div>
                                #end

                                <div class="radio">
                                    <label>
                                        <input type="radio" name="paytype" value="amount">
                                        使用账户余额支付
                                    </label>
                                </div>

                            </div>


                            <div class="form-group">
                                <label>优惠码（券）</label>
                                <input type="text" class="form-control" id="coupon-code-input" name="coupon_code" placeholder="请输入优惠码...">
                                <p class="help-block"><a href="javascript:;" id="select-coupon-code">选择优惠券</a></p>
                            </div>


                            <div class="form-group">
                                <label>买家留言</label>
                                <textarea class="form-control" rows="3" name="payer_msg"
                                          placeholder="给卖家的留言信息"></textarea>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- /.col -->
            </div>

            <div class="row no-print">
                <div class="col-xs-12">
                    <button type="submit" id="submit" class="btn btn-success pull-right"><i
                            class="fa fa-credit-card"></i>
                        提交订单
                    </button>
                </div>
            </div>
        </section>
        <!-- /.content -->

        <div class="clearfix"></div>
    </form>
</div>
#end
