web_pos(jquery实现)总结

最新推荐文章于 2022-02-10 09:22:06 发布

原创最新推荐文章于 2022-02-10 09:22:06 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #web_pos #页面刷新 #bootstrap #购物车

学习笔记专栏收录该内容

17 篇文章

订阅专栏

pos机是模拟了超市或者购物网站对购物车中商品进行结算，并且加入了对部分商品的打折活动，在折中情况下打印出结算清单。而web_pos就是将这部分业务逻辑搬到web上，再加入了一个首页和商品列表页，可以加入购物车，省略掉真实的付款部分业务。因为这部分我们将商品信息，购物车信息等都是临时数据，只是考虑付款逻辑以及一些页面跳转的交互，所以我们利用这个练习首先要学习使用jquery方便我们对前端页面的操作。

1、页面样式

所有的页面风格都采用bootstrap库来让我们的页面看起来不错一些。对于bootstrap的使用可以访问bootstrap官方网站bootstrap。在其中的components和css两个下面会有很多你可能用到的样式的示例代码，包括一些button，table，nav等。当然还有一些地方bootstrap可能不会让你满意，就可以自己写一个css文件来覆盖bootstrap中原来的样式，相当于在一个已经很不错的框架上面进行了一些必要的个性化修改，这显然会很大程度提高我们的工作效率。

2、控制层

上面说了页面样式，虽然说view层并不只是由css构成，再加上html才能基本完成view层需要的功能，这就不得不自然来到了控制层，这里用jquery来作为页面控制的实现，针对每一个页面我们需要一个对应的js文件，并且文件名也与页面一样，便于分辨。jquery肯定也不是你想用就能用的，需要在工程项目中使用jquery组件，好在在yo 创建web-app的时候会在工程项目中的bower-components目录下引入jquery，可以使用

bower install & npm install

来安装需要的依赖。最后就是在页面引入jquery就可以了。

3、model层

在这里我们的数据都是定义在类里边，通过new出对象来产生商品信息。然后对数据的读取处理得到处理结果的业务逻辑也都应该放在model层。

4、商品列表页面

因为商品列表所列出的商品会发生变动，所以我们不能在页面将商品内容写死，而是要通过javascript来加载商品数据然后显示在页面，因此在写页面的时候需要留出会因为数据变动而显示变动的列表body部分，只需要把表头等不会变动的页面元素写死在页面。点击添加按钮购物车右上角数量会增加，这个就在加入购物车按钮上面绑定一个事件监听器，当有click的时候就找到购物车，并使器数量加一。同时在购物车中加入对应的商品信息。

绑定监听器以及将对应的商品信息存入localstorage中的购物车：

$(".add_button").on("click", function(){
        var barcode = $(this).closest(".product_item").data("barcode");
        var cart_items = JSON.parse(localStorage.cart_items);
        cart_items.push(barcode);
        localStorage.cart_items = JSON.stringify(cart_items);

        refresh();
    });

上面的刷新函数的实现：

function refresh() {
        var cart_items = JSON.parse(localStorage.cart_items);
        $("#cart_count").text(cart_items.length);
    }

5、购物车页面

同样的将不需要改变的布局和表头等信息写死在html里边，预留出显示购物车中选购商品的信息的标签。通过javascript读出localstorage中的购物车信息然后动态的显示在购物车页面。

读出数据并写入页面的代码：

var cart_items = JSON.parse(localStorage.cart_items);
    if (cart_items.length != 0){
        var item_list = printInventory(cart_items);
        var item_string = '';

        _.each(item_list, function(item) {
            if(item.promotion_number == 0){
                item_string =
                    '<tr class="cart_item" data-barcode="'+item.barcode+'">\
                <td>'+item.type+'</td>\
                <td>'+item.name+'</td>\
                <td>'+item.price+'</td>\
                <td>'+item.unit+'</td>\
                <td>\
                    <div class="btn-group">\
                    <button class="btn btn-default count_minus">-</button>\
                    <button class="btn btn-default count_value" disabled="disabled">'+item.count+'</button>\
                    <button class="btn btn-default count_add">+</button>\
                    </div>\
                </td>\
                <td class="item_price">'+item.total_price+'</td>\
            </tr>';
            }
            else{
                item_string =
                    '<tr class="cart_item" data-barcode="'+item.barcode+'">\
                <td>'+item.type+'</td>\
                <td>'+item.name+'</td>\
                <td>'+item.price+'</td>\
                <td>'+item.unit+'</td>\
                <td>\
                    <div class="btn-group">\
                    <button class="btn btn-default count_minus">-</button>\
                    <button class="btn btn-default count_value" disabled="disabled">'+item.count+'</button>\
                    <button class="btn btn-default count_add">+</button>\
                    </div>\
                </td>\
                <td class="item_price">'+item.total_price+'元(原价：'+item.price*item.count+'元)'+'</td>\
            </tr>';
            }

            $("#cart_item_body").append(item_string);

        });
        var panel_tail =
            '<div class="my_panel_tail">\
                <span>总计：<span id="total_payments">0.00</span>元</span>\
                <p><a id="pay_button" class="btn btn-primary btn-lg" href="pay_page.html">付款</a></p>\
            </div>';
        $("#cart_panel").append(panel_tail);
        $("#cart_count").text(cart_items.length);
        $("#total_payments").text(calculate_total_payments(item_list));
    }
    else {
        var empty_message =
            '<div class="my_empty_message">\
                <p>购物车为空</p>\
            </div>';
        $("#main_cart_panel").append(empty_message);
    }

商品数量增加或者减少1：

$(".count_minus").on("click", function() {
        var barcode = $(this).closest(".cart_item").data("barcode");
        var stored_items = JSON.parse(localStorage.cart_items);
        stored_items.splice(stored_items.indexOf(barcode), 1);
        localStorage.cart_items = JSON.stringify(stored_items);

        refresh(this);
    });

    $(".count_add").on("click", function() {
        var barcode = $(this).closest(".cart_item").data("barcode");
        var stored_items = JSON.parse(localStorage.cart_items);
        stored_items.push(barcode);
        localStorage.cart_items = JSON.stringify(stored_items);

        refresh(this);
    });

刷新页面的函数refresh：

function refresh(location_string){
        var cart_items = JSON.parse(localStorage.cart_items);
        if (cart_items != 0) {
            var bought_item_list = printInventory(cart_items);
            var total_price_text;
            var clicked_barcode = $(location_string).closest(".cart_item").data("barcode");
            var clicked_item = _.find(bought_item_list, function(item) {
                return item.barcode == clicked_barcode;
            });
            if(clicked_item != undefined) {
                $(location_string).closest(".cart_item").find(".count_value").text(clicked_item.count);
                if(clicked_item.promotion_number != 0) {
                    total_price_text = clicked_item.total_price + '(原价：'+clicked_item.price*clicked_item.count+')';
                }
                else {
                    total_price_text = clicked_item.total_price;
                }
                $(location_string).closest(".cart_item").find(".item_price").text(total_price_text);
            }
            else {
                $(location_string).closest(".cart_item").remove();
            }



            $("#cart_count").text(cart_items.length);
            $("#total_payments").text(calculate_total_payments(bought_item_list));
        }
        else {
            window.location.href='../views/product_list.html';
        }

付款确认页面

就是在循环将购物车的信息写入付款页面的时候，需要判断是否要写入的商品是打折商品，如果是就需要将它同时列到赠送商品里边。

var cart_items = JSON.parse(localStorage.cart_items);
    var bought_item_list = printInventory(cart_items);
    var bought_item = '';
    var promotion_item = '';

    _.each(bought_item_list, function(item){
        if (item.promotion_number == 0) {
            bought_item =
                '<tr>\
                    <td>'+item.type+'</td>\
                    <td>'+item.name+'</td>\
                    <td>'+item.price+'</td>\
                    <td>'+item.unit+'</td>\
                    <td>'+item.count+'</td>\
                    <td>'+item.total_price+'元</td>\
                </tr>'
        }
        else {
            bought_item =
                '<tr>\
                    <td>'+item.type+'</td>\
                    <td>'+item.name+'</td>\
                    <td>'+item.price+'</td>\
                    <td>'+item.unit+'</td>\
                    <td>'+item.count+'</td>\
                    <td>'+item.total_price+'元(原价：'+item.count*item.price+'元)</td>\
                </tr>';

            promotion_item =
                '<tr>\
                    <td>'+item.type+'</td>\
                    <td>'+item.name+'</td>\
                    <td>'+item.promotion_number+'</td>\
                </tr>';
        }

        $("#bought_list_body").append(bought_item);
        if (promotion_item.length != 0) {
            $("#promotion_body").append(promotion_item);
        }

        bought_item = '';
        promotion_item = '';
    });

    $("#pay_panel_body").prepend(current_time());
    $("#cart_count").text(cart_items.length);
    $("#total_payments").text(calculate_total_payments(bought_item_list));
    $("#saved_money").text(calculate_saved_money(bought_item_list));

    $("#total_pay_button").on("click", function() {
        var stored_items = JSON.parse(localStorage.cart_items);
        stored_items = [];
        localStorage.cart_items = JSON.stringify(stored_items);
    })

最后一段代码在付款按钮上面绑定一个监听器，点击付款之后就将购物车的信息清空。