order.hbs 20.8 KB
{{> sign-header}}
<div class="shopping-order-page blk-page">
    {{# content}}
        <div class="center-content">
            {{> bc-nav}}

            <div class="address-info order-block">
                <p class="title">
                    收货信息
                    <span class="right new-address">
                        新增收货地址
                        <i class="iconfont">&#xe61f;</i>
                    </span>
                </p>
                <div class="content">
                    <ul id="address-list" class="clearfix address-list shrink"></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>
                    {{#with shopping_cart_data}}
                        {{#isY is_multi_package}}
                            <div class="multi-package-row">
                                温馨提示:您购买的商品<em class="blue">分属不同仓库</em>,需要调拨,将被拆分成多个包裹送达
                                <span class="iconfont show-package">&#xe643;</span>
                                <div class="package-list hide">
                                    <div class="package-up-icon"></div>
                                    {{#each package_list}}
                                        <div class="package-item">
                                            <p class="package-title bold">包裹{{math @index '+' 1}}:{{#if @first}}总仓发货{{^}}异地调拨{{/if}}</p>
                                            <ul class="package-goods clearfix">
                                                {{#each goods_list}}
                                                    <li class="left">
                                                        <img class="lazy package-goods-img" data-original="{{image goods_images 100 134}}">
                                                    </li>
                                                {{/each}}
                                            </ul>
                                            <p class="package-shipping">运费:¥{{shopping_cost}}元(原价{{shopping_orig_cost}}元,优惠{{shopping_cut_cost}}元)</p>
                                        </div>
                                    {{/each}}
                                </div>
                            </div>
                        {{/isY}}
                    {{/with}}
                    <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_list}}
                                <li class="order-goods clearfix">
                                    <a class="goods-img inline-block" href="{{link}}">
                                        <img class="lazy" data-original="{{image goods_images 100 148}}">

                                        {{#if isGift}}
                                            <span class="gift-tag">赠品</span>
                                        {{/if}}
                                    </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_name}}</span>
                                        <span class="size">尺码:{{size_name}}</span>
                                    </p>
                                    <p class="price">
                                        ¥{{last_price}}
                                    </p>
                                    <p class="number">
                                        <span class="iconfont">&#xe61d;</span>
                                        {{buy_number}}
                                    </p>
                                </li>
                            {{/each}}
                        </ul>
                    </div>
                </div>
            </div>
            <div class="invoice-info order-block">
                <p class="title">发票信息</p>
                <div id="invoice-content" class="content">
                    <div class="invoice-radio">
                        {{> icon/radio}}
                        <label>发票开具</label>
                    </div>
                </div>
            </div>
            <div class="coin-and-remark">
                <div class="coin">
                    <p class="title">
                        <span class="iconfont coin-ctrl">&#xe639;</span>
                        <span class="coin-ctrl">使用有货币</span>
                    </p>
                    <div class="content hide">
                        <div class="using-coin">
                            本次使用有货币
                            <input id="input-coin" class="input coin-input" type="text" data-max="{{yoho_coin}}">

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

                            <span id="coin-tip" class="coin-tip block blue vhide">抵扣¥<em class="balance-coin"></em></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"></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">添加备注信息</span>
                    </p>
                    <div class="content hide">
                        <textarea id="remark-content" class="remark-content" placeholder="声明:备注中有关收货人信息、支付方式、配送方式、发票信息等购买要求一律以上面的选择为准,备注无效"></textarea>
                        <div id="print-price" 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">
                {{# shopping_cart_data}}
                    <div class="balance-info left">
                        <p>
                            收货信息:<em id="receiver"></em>
                            <span class="right">{{goods_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">{{str_order_amount}}</span>
                        </li>
                        <li>
                            <span class="balance-title">有货币:</span>
                            <span class="balance-cost"><em id="balance-coin" class="balance-coin">{{balanceCoin}}</em></span>
                        </li>
                        <li>
                            <span class="balance-title">运费:
                                {{#isY is_multi_package}}
                                    <em class="package-shipping-tip">(原价{{shippingOrigin}}元,优惠{{shippingDiscount}}元)</em>
                                {{/isY}}
                            </span>
                            <span class="balance-cost">¥{{shipping_cost}}</span>
                        </li>
                        <li class="need-pay">
                            <span class="balance-title">应付金额(不含运费):</span>
                            <span id="balance-cost" class="balance-cost" data-cost="{{last_order_amount}}">¥<em>{{last_order_amount}}</em></span>
                        </li>
                        <li>
                            <span id="submit-order" class="btn submit-order">提交订单</span>
                        </li>
                    </ul>
                {{/ shopping_cart_data}}
            </div>

            <script id="address-list-tpl" type="text/html">
                \{{#each address}}
                    <li class="address\{{#isY is_default}} default\{{/isY}}\{{#if focus}} focus\{{/if}}"
                        data-id="\{{address_id}}" data-name="\{{consignee}}" data-mobile="\{{mobile}}"
                        data-phone="\{{phone}}" data-areacode="\{{area_code}}" data-area="\{{area}}"" data-address="\{{address}}">
                        <div class="address-header"></div>
                        <div class="address-content">
                            <p class="default-or-not">
                                <span class="default-tag">默认地址</span>
                                <span class="set-default">设为默认</span>
                            </p>

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

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

                            <p class="address-opration">
                                <span class="modify">修改</span>
                                <span class="delete">删除</span>
                            </p>
                        </div>
                        <span class="address-chosed iconfont">&#xe63b;</span>
                    </li>
                \{{/each}}
            </script>

            <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 invoices.invoiceTitle}}
                                    <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 invoice-title-tip blue hide">
                                    <span class="iconfont">&#xe60c;</span>
                                    请填写发票抬头
                                </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 invoices.invoices_type_list}}
                                    <div class="invoice-content-radio" data-value="{{invoices_type_id}}">
                                        {{> icon/radio}}
                                        <label>{{invoices_type_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 receiver-phone" type="text">
                            <span class="input-tip invoice-phone-tip blue hide">
                                <span class="iconfont">&#xe60c;</span>
                                <em></em>
                            </span>
                        </div>
                    </div>
                </div>
            </script>

            <script id="address-dialog-tpl" type="text/html">
                <p class="dialog-title">
                    \{{#if updateAddress}}
                        修改地址
                    \{{^}}
                        新增地址
                    \{{/if}}
                </p>
                <form id="address-form" name="address-form">
                    <div class="address-page">
                        <span class="tip">
                            <em class="blue">
                                \{{#if updateAddress}}
                                    修改地址
                                \{{^}}
                                    新增地址
                                \{{/if}}
                            </em>
                            电话为选填项,其他均为必填项
                        </span>
                        <div class="add-address-detail" data-id="\{{id}}">
                            <div class="form-group">
                                <label class="label-name">
                                    <em class="required-mark">*</em>
                                    收货人:
                                </label>
                                <input class="input address-name" type="text" placeholder="请输入您的姓名" maxlength="10" value="\{{name}}">
                                <span class="blue error-tips hide">
                                    {{> icon/error-round}}
                                    <em></em>
                                </span>
                            </div>
                            <div class="form-group">
                                <label class="label-name">
                                    <em class="required-mark">*</em>
                                    所在区域:
                                </label>
                                <div id="address" class="clearfix"></div>
                                <span class="blue error-tips hide">
                                    {{> icon/error-round}}
                                    所在区域不能为空
                                </span>
                            </div>
                            <div class="form-group">
                                <label class="label-name">
                                    <em class="required-mark">*</em>
                                    详细地址:
                                </label>
                                <input class="input address-detail" type="text" placeholder="街道名称或小区名称" maxlength="60" value="\{{detail}}">
                                <span class="blue error-tips hide">
                                    {{> icon/error-round}}
                                    <em></em>
                                </span>
                            </div>
                            <div class="form-group">
                                <label class="label-name">
                                    <em class="required-mark">*</em>
                                    手机号码:
                                </label>
                                <input class="input address-mobile" type="text" placeholder="请输入手机号码(重要必填)" maxlength="11" value="\{{mobile}}">
                                <span class="blue error-tips hide">
                                    {{> icon/error-round}}
                                    <em></em>
                                </span>
                            </div>
                            <div class="form-group">
                                <label class="label-name">电话号码:</label>
                                <input class="input address-phone" type="text" placeholder="请输入电话号码(选填)" value="\{{phone}}">
                                <span class="blue error-tips hide">
                                    {{> icon/error-round}}
                                    <em></em>
                                </span>
                            </div>
                        </div>
                    </div>
                </form>
            </script>

            <script id="checked-invoice-show-tpl" type="text/html">
                <div class="invoice-radio">
                    \{{#if checked}}
                        <span class="iconfont radio checked">&#xe603;</span>
                    \{{^}}
                        <span class="iconfont radio">&#xe604;</span>
                    \{{/if}}
                    <label>发票开具</label>
                </div>
                \{{#if type}}
                    <p class="invoice-detail"
                        data-type="\{{type}}" data-title="\{{invoiceTitle}}" data-content="\{{content}}" data-phone="\{{phone}}">
                        <em>\{{invoiceTypeText}}</em><em>\{{invoiceTitle}}</em><em>\{{invoiceContent}}</em>
                        <span class="modify-invoice btn white">修改</span>
                    </p>
                \{{/if}}
            </script>
        </div>
    {{/ content}}
</div>