小电商项目实战 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

商品结算


关于结算功能,这里就做简单介绍,当用户点击结算按钮时,计算出被选商品的总金额,给予alert出总金额,数据库则更新相应商品的结算状态和数量,当然你也可以在购物车集合中添加一个用户消费金额的属性来保存所消费的金额总数更好,这里就简单处理了。

具体功能实现这里简单介绍如下:

    1. 定义公共方法,用于用户不同加、减、全选等操作时皆可调用。
    1. 循环列表内所有被选中的checkbox(假设name为chkItem)。
    1. 使用checkbox的相应属性值,来获取价格和数量。
    1. 定义全局变量(假设为sum)存储总金额并赋值显示。

这里贴出部分实现代码,如下:

//结算方法内容
$('input[name="chkItem"]:checked').each(function(){
     var self = $(this),
         //通过data-index属性,获取索引值
         index = self.attr('data-index'),
        //通过data-id属性,获取对应ID
         ID= self.attr('data-id');
     var 数量= $('#Q'+index).val();
     var data = { "cid": ID, "cnum":数量};
     //发送数据请求
     ...   
});
alert('所付金额为:¥'+sum);
location.href = "cart";

cart.js文件添加对应路由处理如下:

app.post("路径",function(req,res){
   var Cart = global.dbHelper.getModel('cart');
   Cart.update({"_id":req.body.ID},{$set : { cQuantity : req.body.数量,cStatus:true }},function(error,doc){ 
...