cart.hbs 19.3 KB
{{> sign-header}}
<div class="blk-page blk-cart-page center-content">
    {{> bc-nav}}
    {{> cart/info}}
    <div id="cart_content">
        {{#if hasGoods}}
            {{> cart-list}}
        {{^}}
            {{> cart/empty-cart}}
        {{/if}}
    </div>
    <div id="removed_products"></div>
</div>

<script id="edit-color-size-tpl" type="text/html">
    <div class="edit-color-size">
        <div class="indicator"><i></i></div>
        <div class="content">
            <div class="left">
                <div class="default-color mb20">
                    <span class="color-label mr10">Color: </span><span class="selected-color">\{{defaultColor}}</span>
                </div>

                <div class="colors-list mb20">
                    \{{#each colors}}
                        \{{#if active}}
                            <span class="color-item current-color \{{#unless selectable}}disabled\{{/unless}}" 
                                  style="background: \{{rgb}}" 
                                  data-imageurl="\{{image pic 100 134}}"
                                  data-target="\{{proId}}-color-\{{@index}}"
                                  data-title="\{{color}}">
                                <span class="inner"></span>
                            </span>
                        \{{^}}
                            <span class="color-item \{{#unless selectable}}disabled\{{/unless}}" 
                                  style="background: \{{rgb}}" 
                                  data-imageurl="\{{image pic 100 134}}"
                                  data-target="\{{proId}}-color-\{{@index}}"
                                  data-title="\{{color}}">
                                  <span class="inner"></span>
                            </span>
                        \{{/if}}
                    \{{/each}}
                </div>

                \{{#each colors}}
                    <div class="sizes-list \{{#if active}}current-sizes\{{/if}}" id="\{{proId}}-color-\{{@index}}" style="display: \{{#if active}}block\{{^}}none\{{/if}};">
                        <div class="default-size mb20">
                            <span class="size-label mr10">Size: </span><span>\{{../defaultSize}}</span>
                        </div>

                        <div class="sizes-list mb10">
                            \{{#each sizes}}
                                \{{#isEqual ../../defaultSize name}}
                                    <span class="size-item mr10 mb10 current \{{#isEqual num 0}}disabled\{{/isEqual}}"
                                          data-sku="\{{sku}}">\{{name}}</span> 
                                \{{^}}
                                    <span class="size-item mr10 mb10 \{{#isEqual num 0}}disabled\{{/isEqual}}"
                                          data-sku="\{{sku}}">\{{name}}</span> 
                                \{{/isEqual}}
                            \{{/each}}
                        </div>
                    </div>
                \{{/each}}

                <div class="actions">
                    <span class="btn mr20" id="confirm">确定</span>
                    <span class="btn disable" id="cancel">取消</span>
                </div>
            </div>
            <div class="right">
                <img src="\{{image defaultImg 100 134}}" class="img-preview" title="\{{defaultColor}}"/>
            </div>
        </div>
    </div>
</script>

<script id="cart-content-tpl" type="text/html">
    <div class="cart-header">
        <div class="titles">
            <div class="item">
                <label id="toggle_check" class="toggle-chk chk-all \{{#if checkAll}}chk-group\{{/if}}">
                    <span class="iconfont checkbox not-checked">&#xe601;</span>
                    <span class="iconfont checkbox checked">&#xe602;</span>
                    全选
                </label>
            </div>
            <div class="item product">货品</div>
            <div class="item price">价格</div>
            <div class="item num">数量</div>
            <div class="item pro-total-price">总价</div>
            <div class="item actions">操作</div>
        </div>
    </div>
    \{{# if preSalePros}}
        <div class="cart-pro-list pre-pros">
            <div class="title">
                <span class="main">预售商品</span>
                <span class="note">不同上市期的商品我们将为您先到先发</span>
            </div>
            <div class="pro-list">
                \{{#each preSalePros}}
                    <div class="pros-group">
                        \{{# each this}}
                            <ul>
                                <li class="chk" data-product_info='{"goods_type": "advance", "buy_number": \{{buy_number}}, "selected": "\{{selected}}", "product_sku": "\{{product_sku}}", "promotion_id": 0}'>
                                    <label class="toggle-chk-item \{{#isEqual selected 'Y'}}chk-group\{{/isEqual}}">
                                        <span class="iconfont checkbox not-checked">&#xe601;</span>
                                        <span class="iconfont checkbox checked">&#xe602;</span>
                                    </label>
                                    <input type="hidden" name="product_ids[]"/>
                                </li>
                                <li>
                                    <a href="/product/pro_\{{product_id}}_\{{goods_id}}/\{{cn_alphabet}}.html" target="_blank">
                                        <img src="\{{image goods_images 100 134}}" alt="\{{product_name}}">
                                    </a>
                                </li>
                                <li class="pro-info">
                                   \{{!--  <div class="brand-name">\{{brand_name}}</div> --}}
                                    <div class="pro-name"><a href="/product/pro_\{{product_id}}_\{{goods_id}}/\{{cn_alphabet}}.html" target="_blank">\{{product_name}}</a></div>
                                    <div class="color-size editable" data-product_id=\{{product_id}} id="edit_\{{product_id}}">
                                        \{{#if color_name}}
                                            <span class="mr20">颜色: \{{color_name}}</span>
                                        \{{/if}}
                                        \{{#if size_name}}
                                            <span>尺寸: \{{size_name}}</span>
                                        \{{/if}}
                                        <span class="iconfont">&#xe63c;</span>
                                    </div>
                                    \{{#expect_arrival_time}}
                                        <div class="published-at">上市期: \{{expect_arrival_time}}</div>
                                    \{{/expect_arrival_time}}
                                </li>
                                <li class="price-num">
                                    <span class="price sale-price">¥ \{{round sales_price 2}}</span>
                                    <div class="stepper" data-productType=\{{goods_type}}>
                                        <div class="minus action \{{#isEqual buy_number 1}}disable\{{/isEqual}}">
                                            <span class="iconfont">&#xe621;</span>
                                        </div>
                                        <div class="num">
                                            <input type="text" class="input" value=\{{buy_number}} />
                                        </div>
                                        <div class="plus action \{{#isEqual left_number 0}}disable\{{/isEqual}}">
                                            <span class="iconfont">&#xe61f;</span>
                                        </div>
                                        <div class="warning">
                                            \{{showStorage left_number}}
                                        </div>
                                    </div>
                                </li>
                                <li class="total-price-action">
                                    <span class="price item-total-price">¥ \{{round (multiple sales_price buy_number) 2}}</span>
                                    <div class="actions">
                                        <div class="remove-item action" data-product_id=\{{product_id}}><span class="iconfont">&#xe614;</span> &nbsp;删&nbsp;&nbsp;&nbsp;&nbsp;除</div>
                                        <div class="send-to-favorite action" data-product_id=\{{product_id}}>移入收藏夹</div>
                                    </div>
                                </li>
                            </ul>
                        \{{/each}}
                    </div>
                \{{/each}}
            </div>
        </div>
    \{{/ if}}

    \{{# if commonPros }}
        <div class="cart-pro-list cart-pros">
            <div class="title">
                <span class="main">普通商品</span>
            </div>
            <div class="pro-list">
                \{{#each commonPros}}
                    <div class="pros-group">
                        \{{# each this}}
                            <ul>
                                <li class="chk" data-product_info='{"goods_type": "ordinary", "buy_number": \{{buy_number}}, "selected": "\{{selected}}", "product_sku": "\{{product_sku}}", "promotion_id": 0}'>
                                    <label class="toggle-chk-item \{{#isEqual selected 'Y'}}chk-group\{{/isEqual}}">
                                        <span class="iconfont checkbox not-checked">&#xe601;</span>
                                        <span class="iconfont checkbox checked">&#xe602;</span>
                                    </label>
                                    <input type="hidden" name="product_ids[]"/>
                                </li>
                                <li>
                                    <a href="/product/pro_\{{product_id}}_\{{goods_id}}/\{{cn_alphabet}}.html" target="_blank">
                                        <img src="\{{image goods_images 100 134}}" alt="\{{product_name}}">
                                    </a>
                                </li>
                                <li class="pro-info">
                                    \{{!-- <div class="brand-name">\{{brandName}}</div> --}}
                                    <div class="pro-name"><a href="/product/pro_\{{product_id}}_\{{goods_id}}/\{{cn_alphabet}}.html" target="_blank">\{{product_name}}</a></div>
                                    <div class="color-size editable" data-product_id=\{{product_id}} id="edit_\{{product_id}}">
                                        \{{#if color_name}}
                                            <span class="mr20">颜色: \{{color_name}}</span>
                                        \{{/if}}
                                        \{{#if size_name}}
                                            <span>尺寸: \{{size_name}}</span>
                                        \{{/if}}
                                        <span class="iconfont">&#xe63c;</span>
                                    </div>
                                </li>
                                <li class="price-num">
                                    <span class="price sale-price">¥ \{{round sales_price 2}}</span>
                                    <div class="stepper" data-productType=\{{goods_type}}>
                                        <div class="minus action \{{#isEqual buy_number 1}}disable\{{/isEqual}}">
                                            <span class="iconfont">&#xe621;</span>
                                        </div>
                                        <div class="num">
                                            <input type="text" class="input" value=\{{buy_number}} />
                                        </div>
                                        <div class="plus action \{{#isEqual left_number 0}}disable\{{/isEqual}}">
                                            <span class="iconfont">&#xe61f;</span>
                                        </div>
                                        <div class="warning">
                                            \{{showStorage left_number}}
                                        </div>
                                    </div>
                                </li>
                                <li class="total-price-action">
                                    <span class="price item-total-price">¥ \{{round (multiple sales_price buy_number) 2}}</span>
                                    <div class="actions">
                                        <div class="remove-item action" data-product_id=\{{product_id}}><span class="iconfont">&#xe614;</span> &nbsp;删&nbsp;&nbsp;&nbsp;&nbsp;除</div>
                                        <div class="send-to-favorite action" data-product_id=\{{product_id}}>移入收藏夹</div>
                                    </div>
                                </li>
                            </ul>
                        \{{/each}}
                    </div>
                \{{/each}}
            </div>
        </div>
    \{{/ if}}

    \{{# if invalidPros}}
        <div class="cart-pro-list invalid-pros">
            <div class="pro-list">
                \{{#each invalidPros}}
                    <ul>
                        <li class="chk" data-product_info='{"goods_type": "invalid", "buy_number": \{{buy_number}}, "selected": "\{{selected}}", "product_sku": "\{{product_sku}}", "promotion_id": 0}'>
                            <span class="iconfont warning">&#xe625;</span>
                        </li>
                                <li>
                                    <a href="javascript:void(0)">
                                        <img src="\{{image goods_images 100 134}}" alt="\{{product_name}}">
                                    </a>
                                </li>
                                <li class="pro-info">
                                    <div class="pro-name"><a href="javascript:void(0)">\{{product_name}}</a></div>
                                    <div>
                                        \{{#if color_name}}
                                                <span class="mr20">颜色: \{{color_name}}</span>
                                        \{{/if}}
                                        \{{#if size_name}}
                                            <span>尺寸: \{{size_name}}</span>
                                        \{{/if}}
                                    </div>
                                </li>
                                <li class="price-num">
                                    <span class="price sale-price">¥ \{{round sales_price 2}}</span>
                                    <div class="stepper" data-productType=\{{goods_type}}>
                                        <div class="minus action \{{#isEqual buy_number 1}}disable\{{/isEqual}}">
                                            <span class="iconfont">&#xe621;</span>
                                        </div>
                                        <div class="num">
                                            <input type="text" class="input" value=\{{buy_number}} />
                                        </div>
                                        <div class="plus action \{{#isEqual left_number 0}}disable\{{/isEqual}}">
                                            <span class="iconfont">&#xe61f;</span>
                                        </div>
                                        <div class="warning">
                                            \{{showStorage left_number}}
                                        </div>
                                    </div>
                                </li>
                                <li class="total-price-action">
                                    <span class="price item-total-price">¥ \{{round (multiple sales_price buy_number) 2}}</span>
                                    <div class="actions">
                                        <div class="remove-item action" data-product_id=\{{product_id}}><span class="iconfont">&#xe614;</span> &nbsp;删&nbsp;&nbsp;&nbsp;&nbsp;除</div>
                                        <div class="send-to-favorite action" data-product_id=\{{product_id}}>移入收藏夹</div>
                                    </div>
                                </li>
                    </ul>
                \{{/each}}
            </div>
        </div>
    \{{/ if}}

    <div class="cart-statement">
        <div class="actions">
            <div class="action">
                <label id="toggle_check" class="toggle-chk chk-all \{{#if checkAll}}chk-group\{{/if}}">
                    <span class="iconfont checkbox not-checked">&#xe601;</span>
                    <span class="iconfont checkbox checked">&#xe602;</span>
                    <span>全选</span>
                </label>
            </div>
            <div id="remove_selected" class="action hoverable">删除选中的商品</div>
            <div id="send_favorite" class="action hoverable">移入收藏夹</div>
            <div class="selected-num">已选<span>\{{selectedNum}}</span>件</div>
            <div class="checkout-total">
                <div class="total-title">商品金额:</div>
                <div class="total-money">¥ <span>\{{round totalMoney 2}}</span></div>
            </div>
        </div>
        <div class="calculate">
            <div class="checkout-total pay-total">
                <div class="pay-title">应付金额(不含运费):</div>
                <div class="total-money">¥ <span>\{{round totalMoney 2}}</span></div>
            </div>
        </div>
        <div class="checkout">
            <span class="btn \{{#unless selectedNum}}disable\{{/unless}}" id="checkout_btn">去结算</span>
        </div>
    </div>
</script>

<script id="empty-cart-tpl" type="text/html">
    <div class="empty-cart">
        <div class="empty-cart-bg">
        </div>
        <p class="empty-cart-info">购物袋空空的哦,去看看心仪的商品吧~</p>
        <a href="/" class="go-to-shop">
            <span class="btn white">去购物</span>
        </a>
    </div>
</script>

<script id="removed-products" type="text/html">
    <div class="cart-removed-list">
        <div class="info-bar">
            <p class="info-text">已删除商品,您可以重新购买或移入收藏:</p>
        </div>
        <div class="removed-products">
            <ul>
                \{{#each removedProducts}}
                <li class="removed-product">
                    <div class="product-name">
                    <a href="/product/pro_\{{productId}}_\{{goodsId}}/\{{cnAlphabet}}.html" target="_blank">\{{productName}}</a>
                    </div>
                    <div class="product-price">¥ \{{salesPrice}}</div>
                    <div class="bought-num">\{{buyNumber}}</div>
                    <div class="actions">
                        <span class="buy-again">重新购买</span>
                        <span class="send-to-favorite" data-product_info='{"goods_type": "\{{goodType}}", "buy_number": \{{buyNumber}}, "selected": "\{{selected}}", "product_sku": "\{{productSku}}", "promotion_id": 0}'>移入收藏夹</span>
                    </div>
                </li>
                \{{/each}}
            </ul>
        </div>    
    </div>
</script>