#@ucenter_noleft_layout('支付台')

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

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

    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
                    });
                }
            }
        });
    }

</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/payorder/#(order.id)" method="post" 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>
                        </tr>
                        </thead>
                        <tbody>

                        #for(item : orderItems)
                        <tr>
                            <td>
                                #(item.product_title ??)
                                <div style="color: #9c9c9c">
                                    #for(option : item.optionsMap)
                                    #(option.key ??) : #(option.value ??) #if(!(for.last))<br />#end
                                    #end
                                </div>

                            </td>
                            <td>#(item.product_price ??)</td>
                            <td>
                                <div class="input-group input-number">
                                    <input type="hidden" name="cid" value="#(item.id ??)">
                                    #(item.product_count ??)
                                </div>
                            </td>
                            <td>#(item.product_count * item.product_price ??)</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">应支付: <span
                                id="totalPrice">#number(order.orderRealAmount,'0.00')</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>
                                <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
