购物车页面的实现(逻辑)1

来自CloudWiki
跳转至： 导航， 搜索

把页面内容移植模板

剪切购物车页面内容

（文件名称）cart.html

把相应内容，剪切到粘贴板，以便用js渲染出来

粘贴到模板中

（文件名称）cart/index.string

把原先网页中内容粘贴到此文件中，

代码：(把err-tips放到后面) 

<div class="cart-header">
			    <table class="cart-table">
			        <tr>
			            <th class="cart-cell cell-check">
			                <label class="cart-label">
			                   
			                <input type="checkbox" class="cart-select-all" />               
			                <span>全选</span>
			                </label>
			            </th>
			            <th class="cart-cell cell-info">商品信息</th>
			            <th class="cart-cell cell-price">单价</th>
			            <th class="cart-cell cell-count">数量</th>
			            <th class="cart-cell cell-total">合计</th>
			            <th class="cart-cell cell-opera">操作</th>
			        </tr>
			    </table>
			</div>
			<div class="cart-list">
			    <table class="cart-table" >
			        <tr>
			            <td class="cart-cell cell-check">
			                <label class="cart-label">        
			                    <input type="checkbox" class="cart-select" />
			                    
			                </label>
			            </td>
			            <td class="cart-cell cell-img">
			                <a class="link" href="">
			                    <img class="p-img" src="http://img.happymmall.com/0093f5d3-bdb4-4fb0-bec5-5465dfd26363.jpeg" alt="" />
			                </a>
			            </td>
			            <td class="cart-cell cell-info">
			                <a class="link" href="">222</a>
			            </td>
			            <td class="cart-cell cell-price">￥111</td>
			            <td class="cart-cell cell-count">
			                <span class="count-btn minus">-</span>
                			<input class="count-input" value="111" />  
                            <span class="count-btn plus">+</span>
			            </td>
			            <td class="cart-cell cell-total">￥111</td>
			            <td class="cart-cell cell-opera">
			                <span class="link cart-delete">删除</span>
			            </td>
			        </tr>
			    </table>

			</div>
			<div class="cart-footer">
			    <div class="select-con">
			        <label>
			           
			            <input type="checkbox" class="cart-select-all" />       
			            <span>全选</span>
			        </label>
			    </div>
			    <div class="delete-con">
			        <span class="link delete-selected">
			            <i class="fa fa-trash-o"></i>
			            <span>删除选中</span>
			        </span>
			    </div>
			    <div class="submit-con">
			        <span>总价：</span>
			        <span class="submit-total">￥111</span>
			        <span class="btn btn-submit">去结算</span>
			    </div>
			</div>
			<p class="err-tip">
<span>您的购物车空空如也，</span>
    <a href="./index.html">立即去购物</a>
</p>

加载购物车函数

编写函数loadCart

文件cart/index.js: 

// 加载商品详情的数据
    loadCart : function(){
       
        var _this       = this;
        // 获取购物车列表
        _cart.getCartList(function(res){
            _this.renderCart(res);
        }, function(errMsg){
            $('.page-wrap').html('<p class="err-tip">哪里不对了，刷新下试试吧。</p>');
        })
       
    },

编写服务端函数getCartList

文件cart-service.js 

// 获取购物车列表
    getCartList : function(resolve, reject){
        _mm.request({
            url     : _mm.getServerUrl('/cart/list.do'),
            success : resolve,
            error   : reject
        });
    },

渲染购物车函数renderCart

文件cart/index.js: 

// 渲染购物车
    renderCart : function(data){
        this.filter(data);
        // 缓存购物车信息
        this.data.cartInfo = data;
        // 生成HTML
        var cartHtml = _mm.renderHtml(templateIndex, data);
        $('.page-wrap').html(cartHtml);
       
    },

数据匹配函数

文件cart/index.js:

判断是否为空 

filter : function(data){
        data.notEmpty = !!data.cartProductVoList.length;
    },


填写模板数据

Cart/index.string 

{{#notEmpty}}
<div class="cart-header">
    <table class="cart-table">
        <tr>
            <th class="cart-cell cell-check">
                <label class="cart-label">
                    {{#allChecked}}
                    <input type="checkbox" class="cart-select-all" checked/>
                    {{/allChecked}}
                    {{^allChecked}}
                    <input type="checkbox" class="cart-select-all" />
                    {{/allChecked}}
                    <span>全选</span>
                </label>
            </th>
            <th class="cart-cell cell-info">商品信息</th>
            <th class="cart-cell cell-price">单价</th>
            <th class="cart-cell cell-count">数量</th>
            <th class="cart-cell cell-total">合计</th>
            <th class="cart-cell cell-opera">操作</th>
        </tr>
    </table>
</div>
<div class="cart-list">
    {{#cartProductVoList}}
    <table class="cart-table" data-product-id="{{productId}}">
        <tr>
            <td class="cart-cell cell-check">
                <label class="cart-label">
                    {{#productChecked}}
                    <input type="checkbox" class="cart-select" checked/>
                    {{/productChecked}}
                    {{^productChecked}}
                    <input type="checkbox" class="cart-select" />
                    {{/productChecked}}
                </label>
            </td>
            <td class="cart-cell cell-img">
                <a class="link" href="./detail.html?productId={{productId}}">
                    <img class="p-img" src="{{imageHost}}{{productMainImage}}" alt="{{productName}}" />
                </a>
            </td>
            <td class="cart-cell cell-info">
                <a class="link" href="./detail.html?productId={{productId}}">{{productName}}</a>
            </td>
            <td class="cart-cell cell-price">￥{{productPrice}}</td>
            <td class="cart-cell cell-count">
                <span class="count-btn minus">-</span>
                <input class="count-input" value="{{quantity}}" data-max="{{productStock}}"/>  
                <span class="count-btn plus">+</span>
            </td>
            <td class="cart-cell cell-total">￥{{productTotalPrice}}</td>
            <td class="cart-cell cell-opera">
                <span class="link cart-delete">删除</span>
            </td>
        </tr>
    </table>
    {{/cartProductVoList}}
</div>
<div class="cart-footer">
    <div class="select-con">
        <label>
            {{#allChecked}}
            <input type="checkbox" class="cart-select-all" checked/>
            {{/allChecked}}
            {{^allChecked}}
            <input type="checkbox" class="cart-select-all" />
            {{/allChecked}}
            <span>全选</span>
        </label>
    </div>
    <div class="delete-con">
        <span class="link delete-selected">
            <i class="fa fa-trash-o"></i>
            <span>删除选中</span>
        </span>
    </div>
    <div class="submit-con">
        <span>总价：</span>
        <span class="submit-total">￥{{cartTotalPrice}}</span>
        <span class="btn btn-submit">去结算</span>
    </div>
</div>
{{/notEmpty}}
{{^notEmpty}}
<p class="err-tip">
    <span>您的购物车空空如也，</span>
    <a href="./index.html">立即去购物</a>
</p>
{{/notEmpty}}


效果：

Web7-7.png

取自“http://www.openbrains.net/mediawiki/index.php?title=购物车页面的实现(逻辑)1&oldid=11186”