order.hbs 13.3 KB
<div class="shopping-order-page blk-page">
    {{# content}}
        <div class="center-content">
            <div class="address-info order-block">
                <p class="title">
                    收货信息
                    <span id="new-address" class="right new-address">
                        新增收货地址
                        <i class="iconfont">&#xe61f;</i>
                    </span>
                </p>
                <div class="content">
                    <ul class="clearfix address-list shrink">
                        {{#each address}}
                            <li class="address{{#if focus}} focus{{/if}}" data-id="{{id}}">
                                <div class="address-header"></div>
                                <div class="address-content">
                                    <p class="default-or-not{{#unless default}} not-default{{/unless}}">
                                        {{#if default}}
                                            <span class="default-tag">默认地址</span>
                                        {{^}}
                                            <span class="set-default">设为默认</span>
                                        {{/if}}
                                    </p>

                                    <p class="name-and-phone bold">
                                        {{name}}
                                        <span class="phone">{{phone}}</span>
                                    </p>

                                    <p class="address-area bold">{{area}}</p>
                                    <p class="address-detail">{{detail}}</p>

                                    <p class="address-opration">
                                        <span class="modify">修改</span>
                                        <span class="delete">删除</span>
                                    </p>
                                </div>
                                <span class="address-chosed iconfont">&#xe63b;</span>
                            </li>
                        {{/each}}
                    </ul>
                    <p class="address-all">
                        显示全部地址
                        <span class="iconfont">&#xe616;</span>
                    </p>
                </div>
            </div>
            <div class="payment-type order-block">
                <p class="title">支付方式</p>
                <ul class="content">
                    <li class="chose-row clearfix focus">
                        <span class="chose-block">在线支付</span>
                        <span class="tip-text">支持主流银行卡、微信、支付宝、银联等平台付款,方便快捷</span>
                    </li>
                </ul>
            </div>
            <div class="dispatch-type order-block">
                <p class="title">配送方式</p>
                <ul class="content">
                    <li class="chose-row clearfix focus">
                        <span class="chose-block">普通快递:运费¥10.00</span>
                    </li>
                </ul>
            </div>
            <div class="order-info order-block">
                <div class="order-inner">
                    <p class="title">
                        订单信息
                        <a class="right go-cart-link" href="{{goCartLink}}">
                            返回购物车修改
                            <span class="iconfont">&#xe61e;</span>
                        </a>
                    </p>
                    <div class="content">
                        <p class="order-table-head clearfix">
                            <span class="info">商品信息</span>
                            <span class="color-size">颜色尺码</span>
                            <span class="price">单价</span>
                            <span class="number">数量</span>
                        </p>
                        <ul class="order-table-body">
                            {{#each goods}}
                                <li class="order-goods clearfix">
                                    <a class="goods-img inline-block" href="{{link}}">
                                        <img class="lazy" data-original="{{img}}">
                                    </a>
                                    <p class="brand-and-name inline-block">
                                        <a class="brand-name" href="{{brandUrl}}">{{brandName}}</a>
                                        <a class="name" href="{{link}}">{{name}}</a>
                                    </p>
                                    <p class="color-size">
                                        <span class="color">颜色:{{color}}</span>
                                        <span class="size">尺码:{{size}}</span>
                                    </p>
                                    <p class="price">
{{price}}
                                    </p>
                                    <p class="number">
                                        <span class="iconfont">&#xe61d;</span>
                                        {{number}}
                                    </p>
                                </li>
                            {{/each}}
                        </ul>
                    </div>
                </div>
            </div>
            <div class="invoice-info order-block">
                <p class="title">发票信息</p>
                <div class="content">
                    <div class="invoice-radio">
                        {{> icon/radio}}
                        <label>发票开具</label>
                    </p>
                </div>
            </div>
            <div class="coin-and-remark">
                <div class="coin">
                    <p class="title">
                        <span class="iconfont coin-ctrl">&#xe639;</span>
                        <span class="coin-ctrl bold">使用有货币</span>
                    </p>
                    <div class="content hide">
                        <div class="using-coin">
                            本次使用有货币
                            <input id="input-coin" class="input coin-input" type="text" data-max="{{coinCount}}">

                            您当前共有有货币<em class="blue">{{coinCount}}</em>

                            <span id="coin-tip" class="coin-tip block blue vhide">抵扣¥2.22</span>
                            <span id="coin-sure" class="btn disable">确定</span>
                        </div>
                        <div class="used-coin hide">
                            本次使用有货币<em id="coin-used" class="blue"></em>,本次抵扣<span class="blue"><em id="coin-deduction">3.21</em></span>

                            <span class="btn white modify">修改</span>
                            <span class="btn white cancel">取消使用</span>
                        </div>
                    </div>
                </div>
                <div class="remark">
                    <p class="title">
                        <span class="iconfont remark-ctrl">&#xe639;</span>
                        <span class="remark-ctrl bold">添加备注信息</span>
                    </p>
                    <div class="content hide">
                        <textarea id="remark-content" class="remark-content" placeholder="声明:备注中有关收货人信息、支付方式、配送方式、发票信息等购买要求一律以上面的选择为准,备注无效"></textarea>
                        <div class="print-price">
                            是否打印价格:
                            <div class="print-price-radio-group">
                                {{#each printPriceRadio}}
                                    <div class="print-price-radio" data-value="{{value}}">
                                        <label>{{name}}</label>
                                        {{> icon/radio}}
                                    </div>
                                {{/each}}
                                <span class="remark-tip">(如:送朋友的商品可不打印价格哦!)</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="balance clearfix">
                <div class="balance-info left">
                    <p>
                        收货信息:{{receiver}}
                        <span class="right">{{count}}件商品</span>
                    </p>
                    <p>
                        支付方式:<em id="balance-pay-type">在线支付</em>
                    </p>
                </div>
                <ul class="balance-list right">
                    <li>
                        <span class="balance-title">商品金额:</span>
                        <span class="balance-cost">{{sumCost}}</span>
                    </li>
                    <li>
                        <span class="balance-title">有货币:</span>
                        <span class="balance-cost">-¥<em id="balance-coin">{{balanceCoin}}</em></span>
                    </li>
                    <li>
                        <span class="balance-title">运费:</span>
                        <span class="balance-cost"><em id="balance-freight">{{freight}}</em></span>
                    </li>
                    <li class="need-pay">
                        <span class="balance-title">应付金额(不含运费):</span>
                        <span id="balance-cost" class="balance-cost" data-cost="{{needPay}}">{{needPay}}</span>
                    </li>
                    <li>
                        <span class="btn submit-order">提交订单</span>
                    </li>
                </ul>
            </div>

            <script id="invoice-dialog-tpl" type="text/html">
                <p class="dialog-title">发票信息</p>
                <ul class="invoice-tab">
                    <li class="btn el-invoice">电子发票</li>
                    <li class="btn paper-invoice no-focus">纸质发票</li>
                </ul>

                <div class="invoice-entity el">
                    <p class="tip">
                        ※ 电子发票是税务局认可的有效凭证,其法律效力、基本用途及使用规定同纸质发票,如需纸质发票可自行下载。
                        <a class="what-is-el-invoice" href="" target="_blank">什么是电子发票</a>
                    </p>
                    <div class="row clearfix">
                        <span class="label">
                            <em class="required-mark">*</em>
                            发票抬头:
                        </span>
                        <div class="row-content">
                            <div class="invoice-title-radio-group">
                                {{#each invoiceTitleRadio}}
                                    <div class="invoice-title-radio{{#if myClass}} {{myClass}}{{/if}}" data-value="{{value}}">
                                        {{> icon/radio}}
                                        <label>{{name}}</label>
                                    </div>
                                {{/each}}
                            </div>
                            <div>
                                <input class="input invoice-title-input hide" type="text" maxlength="30" placeholder="请填写单位名称">
                                <span class="input-tip hide">
                                    <span class="iconfont">&#xe60c;</span>
                                    <em id="invoice-title-tip">请填写发票抬头</em>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="row clearfix">
                        <span class="label">
                            <em class="required-mark">*</em>
                            发票内容:
                        </span>
                        <div class="row-content">
                            <div class="invoice-content-radio-group">
                                {{# each invoiceContentRadio}}
                                    <div class="invoice-content-radio" data-value="{{value}}">
                                        {{> icon/radio}}
                                        <label>{{name}}</label>
                                    </div>
                                {{/each}}
                            </div>
                        </div>
                    </div>
                    <div class="row phone-row clearfix">
                        <span class="label">
                            <em class="required-mark">*</em>
                            收票人手机:
                        </span>
                        <div class="row-content">
                            <input class="input" type="text">
                            <span class="input-tip hide">
                                <span class="iconfont">&#xe60c;</span>
                                <em id="invoice-phone-tip">请填写手机号码</em>
                            </span>
                        </div>
                    </div>
                </div>
            </script>
        </div>
    {{/ content}}
</div>