fastadmin_tailored/addons/shop/view/default/checkout.html

{layout name="common/layout" /}
<style>

    .table-cart > thead > tr > th {
        padding: 12px 10px;
        border-bottom: none;
        text-align: center;
        font-weight: 400;
    }

    .table-cart > tbody > tr > td {
        padding: 25px 10px;
        text-align: center;
    }

    .table-cart > thead > tr > th, .table-cart > tbody > tr > td, .table-cart > tfoot > tr > td {
        display: table-cell;
        vertical-align: middle;
        border-top: 1px solid #eee;
    }

    .table-cart .btn-delete i {
        font-size: 1.4em;
    }

    .table-cart .col-sm-2 label {
        margin: 0;
        font-weight: 400;
    }

    .address, .coupon {
        position: relative;
        overflow: hidden;
        line-height: 25px;
        cursor: pointer;
        background: #f8f8f8;
    }

    .coupon {
        display: flex;
        border-radius: 2px;
    }

    .coupon.active {
        background: #eee;
    }

    .coupon.active .left {
        background: #ddd;
    }

    .coupon .left {
        background: #eee;
        color: #444;
    }

    .address .ribbon-wrapper, .coupon .ribbon-wrapper {
        display: none;
    }

    .address.active .ribbon-wrapper, .coupon.active .ribbon-wrapper {
        display: block;
    }

    .address:hover {
        background: #efefef;
    }

    .address.active {
        background: #efefef;
    }

    .address .ribbon-wrapper, .coupon .ribbon-wrapper {
        position: absolute;
        top: 0;
        right: 0;
        overflow: hidden;
        width: 80px;
        height: 85px;
    }

    .ribbon {
        font-size: 10px;
        position: relative;
        top: 17px;
        left: -8px;
        width: 120px;
        padding: 1px;
        color: #fff;
        text-align: center;
        background-color: #ff3100;
        text-transform: uppercase;
        z-index: 2;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
    }

    .coupon .ribbon {
        top: 8px;
        left: 0px;
    }

    .panel-heading h2 {
        font-size: 20px;
        font-weight: normal;
    }

    .table-goods-list {
        font-size: 14px;
    }

    .table-goods-list .row > .col-sm-1 {
    }

    .table-goods-list > thead > tr > th {
        border-bottom: 1px solid #eee;
        font-weight: normal;
        font-size: 14px;
        padding: 15px 0;
    }

    .table-goods-list > tbody > tr > td {
        padding: 15px;
    }

    .checkout-price {
        line-height: 25px;
    }

</style>
<div class="container" id="content-container">

    <div class="row">
        <div class="col-xs-12">
            <form id="checkout-form" action="{:addon_url('shop/checkout/submit')}" method="post">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h2>收货地址
                            <div class="pull-right">
                                <a href="{:url('index/shop.address/add')}" class="btn-addaddress"><small><i class="fa fa-pencil"></i> 添加地址</small></a>
                            </div>
                        </h2>
                    </div>
                    <div class="panel-body">
                        {:token()}
                        <input type="hidden" name="ids" value="{$cartIds|implode=',',###}">
                        <input type="hidden" name="address_id" value="{$addressInfo.id|default=0}">
                        <section class="section">
                            <div class="row">
                                {if $addressList}
                                {foreach name="addressList" id="item"}
                                <div class="col-xs-12 col-md-4">
                                    <address class="address p-3 mb-3 {if $addressInfo.id==$item.id}active{/if}" data-type="address" data-id="{$item.id|htmlentities}">
                                        <div class="ribbon-wrapper">
                                            <div class="ribbon">已选择</div>
                                        </div>
                                        <strong>{$item.receiver|htmlentities}</strong><br>
                                        {$item.address|htmlentities}<br>
                                        <abbr title="Phone"></abbr> {$item.mobile|htmlentities}
                                    </address>
                                </div>
                                {/foreach}
                                {else/}
                                <div class="col-xs-12 py-2">
                                    暂未添加收货地址，请<a href="{:url('index/shop.address/add')}" target="_blank">添加收货地址</a>后再刷新页面
                                </div>
                                {/if}
                            </div>
                        </section>

                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h2>使用优惠券</h2>
                    </div>
                    <div class="panel-body">
                        {if !empty($couponList)}
                        <input type="hidden" name="user_coupon_id" value="">
                        <section class="section">
                            <div class="row">
                                {foreach name="couponList" id="item"}
                                <div class="col-xs-12 col-md-4 mb-2">
                                    <div class="coupon" data-type="coupon" data-id="{$item.user_coupon_id|htmlentities}">
                                        <div class="ribbon-wrapper">
                                            <div class="ribbon">已选择</div>
                                        </div>
                                        <div class="left p-3">
                                            {eq name="item.result" value="1"}满减券{else/}折扣券{/eq}
                                        </div>
                                        <div class="right p-3">
                                            订单满 {$item['result_data']['money']} 元
                                            {eq name="item.result" value="1"} 减 {else/} 打 {/eq}
                                            {$item['result_data']['number']}
                                            {eq name="item.result" value="1"} 元 {else/} 折 {/eq}
                                        </div>
                                    </div>
                                </div>
                                {/foreach}
                            </div>
                        </section>
                        {else/}
                        暂无可用优惠券
                        {/if}
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h2>商品信息</h2>
                    </div>
                    <div class="panel-body">
                        <section class="">
                            <div class="cart-wrapper">
                                <table class="table table-responsive table-goods-list">
                                    <thead>
                                    <tr>
                                        <th class="pl-3">名称</th>
                                        <th class="text-center">价格</th>
                                        <th class="text-center">數量</th>
                                        <th class="text-center hidden-xs">总计</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {foreach name="orderItem" id="item"}
                                    <tr class="">
                                        <td class="text-left" width="70%">
                                            <div class="row goods-title">
                                                <div class="col-sm-1 hidden-xs">
                                                    <a href="{$item.url|htmlentities}">
                                                        <div class="embed-responsive embed-responsive-square img-zoom">
                                                            <img src="{$item.image|cdnurl|htmlentities}" style="width:32px;height:32px;">
                                                        </div>
                                                    </a>
                                                </div>
                                                <div class="col-sm-11 text-left">
                                                    <div class="my-1"><a href="{$item.url|htmlentities}" target="_blank">{$item.title|htmlentities}</a></div>
                                                    <div class="text-muted small">{$item.attrdata|htmlentities}</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-center">￥{:$item.price}</td>
                                        <td class="text-center">× {$item.nums|htmlentities}</td>
                                        <td class="text-center text-danger hidden-xs">￥<span class="cart-item-subtotal">{:$item.amount}</span></td>
                                    </tr>
                                    {/foreach}
                                    </tbody>
                                </table>
                                <hr>
                                <div class="checkout-price">
                                    <div class="row">
                                        <div class="col-xs-12 col-sm-5">
                                            <textarea name="memo" id="memo" cols="30" rows="4" class="form-control" placeholder="如有备注请在此输入"></textarea>
                                        </div>
                                        <div class="col-xs-12 col-sm-7">
                                            <div class="row">
                                                <div class="col-xs-8 text-right">商品费用:</div>
                                                <div class="col-xs-4 text-right">￥<span id="goodsprice">{$orderInfo.goodsprice|htmlentities}</span></div>
                                            </div>
                                            <div class="row">
                                                <div class="col-xs-8 text-right">物流费用:</div>
                                                <div class="col-xs-4 text-right">￥<span id="shippingfee">{$orderInfo.shippingfee|htmlentities}</span></div>
                                            </div>
                                            <div class="row">
                                                <div class="col-xs-8 text-right">优惠金额:</div>
                                                <div class="col-xs-4 text-right">-￥<span id="discount">{$orderInfo.discount|htmlentities}</span></div>
                                            </div>
                                            <div class="row">
                                                <div class="col-xs-8 text-right">订单总计:</div>
                                                <div class="col-xs-4 text-right">￥<span id="saleamount">{$orderInfo.saleamount|htmlentities}</span></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>

                        <hr>
                        <!--@formatter:off-->
                        <section class="text-right mb-4">
                            {if !$addressList}
                            <span class="text-danger mr-2">请先添加收货地址</span>
                            {/if}
                            {if input('post.sceneval')==2}
                            <a href="javascript:" onclick="history.go(-1);" class="btn btn-lg btn-warning btn-rounded"><i class="fa fa-reply"></i> 返回</a>
                            {else/}
                            <a href="{:addon_url('shop/cart/index')}" class="btn btn-lg btn-warning btn-rounded"><i class="fa fa-reply"></i> 返回购物车修改</a>
                            {/if}
                            <button type="submit" class="btn btn-lg btn-primary btn-rounded mr-10" {if !$addressList} style="background-color:#2c3e50;border-color:#2c3e50;" title="请先添加收货地址" disabled{/if}><i class="fa fa-check"></i> 提交并支付</button>
                        </section>
                        <!--@formatter:on-->
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script data-render="script" src="__CDN__/assets/libs/fastadmin-cxselect/js/jquery.cxselect.js"></script>

<script data-render="script">
    //切换地址
    $(document).on("click", ".address[data-id],.coupon[data-id]", function () {
        let that = this;
        let type = $(this).data('type');
        let value = $(this).data('id');
        let backupvalue = $("." + type + ".active[data-id]").data("id");
        let name = type == 'coupon' ? 'user_coupon_id' : 'address_id';

        value = $(that).hasClass("active") && type == 'coupon' ? 0 : value;
        $('input[name=' + name + ']').val(value);

        SHOP.api.ajax({
            url: "{:addon_url('shop/checkout/recount')}",
            data: $("#checkout-form").serialize()
        }, function (data, ret) {
            $("." + type + "[data-id]").removeClass("active");
            $("." + type + "[data-id='" + value + "']").addClass("active");

            $("#goodsprice").text(data.orderInfo.goodsprice);
            $("#shippingfee").text(data.orderInfo.shippingfee);
            $("#discount").text(data.orderInfo.discount);
            $("#saleamount").text(data.orderInfo.saleamount);
            return false;
        }, function (err) {
            $('input[name=' + name + ']').val(backupvalue);
            $("." + type + "[data-id]").removeClass("active");
            $("." + type + "[data-id='" + backupvalue + "']").addClass("active");
        });
    });

    $.cxSelect.defaults.jsonName = 'name';
    $.cxSelect.defaults.jsonValue = 'value';
    $.cxSelect.defaults.jsonSpace = 'data';

    $(document).on("click", ".btn-saveaddress", function () {
        SHOP.api.ajax({
            url: "{:url('index/shop.address/save')}",
            data: $("form[name='addressform']").serialize()
        }, function (data, ret) {
            layer.closeAll();
            setTimeout(function () {
                location.reload();
            }, 1500);
        });
        return false;
    });
    $(document).on("click", ".btn-addaddress", function () {
        layer.open({
            title: "添加地址",
            type: 1,
            area: [$(window).width() > 800 ? '600px' : '95%', $(window).height() > 600 ? '470px' : '95%'],
            content: template("addresstpl", {}),
            success: function (layero) {
                $("[data-toggle='cxselect']", layero).cxSelect();
            }
        });
        return false;
    });
    $(document).on('change', '[data-toggle="cxselect"] select', function (a, b) {
        var arr = [];
        $('[data-toggle="cxselect"] select').each(function () {
            arr.push($.trim($("option:selected", this).text()));
        });
        var address = arr.join('');
        if ($.trim($("input[name='address']").val()).indexOf(address) !== 0) {
            $("input[name='address']").val(address);
        }
    });

    $("#checkout-form").on("submit", function () {
        if ($("input[name='address_id']").val() == '' || parseInt($("input[name='address_id']").val()) == 0) {
            layer.msg("请选择地址");
            return false;
        }
    });
</script>

<script type="text/html" id="addresstpl">
    <div class="p-4">
        <form name="addressform" action="{:url('shop.address/save')}" method="post">
            <input type="hidden" name="id" value=""/>
            <div class="row">
                <div class="col-xs-12">
                    <div>
                        <div class="form-group">
                            <label>收货人姓名</label>
                            <input type="text" class="form-control" name="receiver" placeholder="" value="">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group" id="cityselect">
                        <label>省市区</label>
                        <div class="row" data-toggle="cxselect" data-selects="province_id,city_id,area_id">
                            <div class="col-xs-12 col-sm-4">
                                <select class="province_id form-control" name="province_id" data-url="{:url('index/shop.address/area')}">
                                </select>
                            </div>
                            <div class="col-xs-12 col-sm-4">
                                <select class="city_id form-control" name="city_id" data-url="{:url('index/shop.address/area')}">
                                </select>
                            </div>
                            <div class="col-xs-12 col-sm-4">
                                <select class="area_id form-control" name="area_id" data-url="{:url('index/shop.address/area')}">
                                </select>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <label>详细地址</label>
                        <input type="text" class="form-control" name="address" placeholder="请输入详细的地址" value="">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <label>手机号</label>
                        <input type="text" class="form-control" name="mobile" value="" placeholder="">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" value="1" id="isdefault" name="isdefault" checked> 设为默认地址
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <a href="javascript:;" class="btn btn-primary btn-saveaddress">保存</a>
                    </div>
                </div>
            </div>
        </form>
    </div>
</script>