购物车页面实现，修改商品数量同步数据库内容

<div class="cart py-container">
   <div class="allgoods">
      <h4>全部商品<span>11</span></h4>
      <div class="cart-main">
         <div class="yui3-g cart-th">
            <div class="yui3-u-1-4"><input type="checkbox" name="" value="" /> 全部</div>
            <div class="yui3-u-1-4">商品</div>
            <div class="yui3-u-1-8">单价（元）</div>
            <div class="yui3-u-1-8">数量</div>
            <div class="yui3-u-1-8">小计（元）</div>
            <div class="yui3-u-1-8">操作</div>
         </div>
         <div class="cart-item-list">
            <div class="cart-body">
{foreach $data as $k=>$v}
               <div class="cart-list" >
                  <ul class="goods-list yui3-g" cart_id="{$v.id}" number="{$v.number}">
                     <li class="yui3-u-1-24"><input type="checkbox" class="row_check" name="" id="" value=""/></li>
                     <li class="yui3-u-6-24">
                        <div class="good-item">
                           <div class="item-img"><img src="{$v.goods.goods_logo}" /></div>
                           <div class="item-msg">{$v.goods.goods_name}</div>
                        </div></li>
                     <li class="yui3-u-5-24"><div class="item-txt">{$v.goods.value_names}</div></li>
                     <li class="yui3-u-1-8"><span class="price">{$v.goods.goods_price}</span></li>          
                     <li class="yui3-u-1-8" goods_id="{$v.goods_id}" spec_goods_id="{$v.spec_goods_id}">
      <a href="javascript:void(0)" class="increment mins" tag='mins'>-</a>
                     <input autocomplete="off" type="text" value="{$v.number}" minnum="1" class="itxt current_number" />
      <a href="javascript:void(0)" class="increment plus" tag='plus'>+</a></li>
                     <li class="yui3-u-1-8"><span class="sum">{$v.goods.goods_price * $v.number}</span></li>
                     <li class="yui3-u-1-8"><a href="del" class="delete">删除</a><br /><a href="#none">移到我的关注</a></li>
                  </ul> </div>{/foreach}</div></div></div>
<div class="cart-tool">
   <div class="select-all"><input type="checkbox" class="check_all" name="" value="" /><span>全选</span></div>
   <div class="money-box">
      <div class="chosed">已选择<span id="total_number">0</span>件商品</div>
      <div class="sumprice"><span><em>总价（不含运费） ：</em><i id="total_price" class="summoney">¥0</i></span></div>
      <div class="sumbtn"><a class="sum-btn" href="javascript:;" target="_blank">结算</a></div></div></div>

获取修改后的商品数量和价格替换到下方的商品个数和商品价格
var change_total=function(){
   var total_number = 0;
   var total_price = 0;
   $('.row_check:checked').each(function (i,v) {
               total_number += parseInt($(v).closest('ul').find('.current_number').val());
               total_price += parseInt($(v).closest('ul').find('.sum').html());
   });
   $('#total_number').html(total_number);
   $('#total_price').html('￥' + total_price);}

修改购物车中的商品数量
$('.plus').click(function () {
      var number = parseInt($(this).closest('ul').find('.current_number').val());
      number+=1;
      change_num(number,this);
});
$('.mins').click(function () {
      var number = parseInt($(this).closest('ul').find('.current_number').val());
      if(number == 1) return;
      number -= 1;
     change_num(number,this);
})

发送ajax请求修改购买数量
var change_num = function (number,element) {
            var data = {
               'id':$(element).closest('ul').attr('cart_id'),
        'number':number
     };
        $.ajax({
        url:"{:url('home/cart/changenum')}",
        type:'post',
        data:data,
        dataType:"json",
        success:function (res) {
                   if(res.code != 200){
                       alert(res.msg);return;
          }
              $(element).closest('ul').find('.current_number').val(number);//将新的数量展示到页面
              $(element).closest('ul').attr('number',number);//将新的数量修改到当前行的number属性上，用于出错后恢复数据
                  var price = parseFloat($(element).closest('ul').find('.price').html());
                  var sum = price * number;
                  $(element).closest('ul').find('.sum').html(sum);
                  change_total();//修改数量后，重新计算小计金额
       }
     })
}

接受ajax请求

public function changenum(){
    $params= input();
    $validate = $this->validate($params,[
       'id'=>'require',
       'number'=>'require|integer|gt:0',
    ]);
    if($validate !== true){
        $res =['code'=>400,'msg'=>'参数错误'];
        echo json_encode($res);die();
    }
    CartLogic::changeNum($params['id'],$params['number']);
    $res = ['code'=>200,'msg'=>'success'];
    echo  json_encode($res);die();
}

调用方法changeNum

public static function changeNum($id,$number){
    if(session('?info')){
        $user_id=session('info');
        Cart::update(['number'=>$number],['id'=>$id,'user_id'=>$user_id]);
    }else{
        $data=cookie('cart') ?: [];
        $data[$id]['number'] = $number;
        cookie('cart',$data,86400*7);
    }
}

发送ajax删除购物车商品

$('.delete').click(function () {
            var data = {
               "id":$(this).closest('ul').attr('cart_id')
     };
            var that =this;
            $.ajax({
        url:"{:url('home/cart/delcart')}",
        type:'post',
        data:data,
        dataType:'json',
        success:function (res) {
                  if(res.code!=200){
                   alert(res.msg);return;
         }
                  $(that).closest('.cart-list').remove();
                  change_total();
        }
     })
})

接受ajax删除请求
public function delcart(){
    $params = input();
    if(!isset($params['id'])||empty($params['id'])){
        $res = ['code'=>400,'msg'=>'参数错误'];
        echo json_encode($res);die();
    }
    CartLogic::delCart($params['id']);
    $res = ['code'=>200,'nsg'=>'success'];
    echo json_encode($res);die();
}

调用delCart方法
public static function delCart($id){
    if(session('?info')){
        $user_id=session('info');
        Cart::where(['id'=>$id,'user_id'=>$user_id])->delete();
    }else{
        $data = cookie('cart')?:[];
        unset($data[$id]);
        cookie('cart',$data,86400*7);
    }
}

修改选中状态

$('.row_check').change(function () {
   check_all();
   change_total();
   var data = {
      'id':$(this).closest('ul').attr('cart_id'),
      'status':$(this).prop('checked') ? 1 : 0 ,
   };
   $.ajax({
      url:"{:url('home/cart/changestatus')}",
      type:'post',
      data:data,
      dataType:'json',
      success:function (res) {
                  if(res.code!=200){
                   alert(res.msg);return;
         }
      }
   })
})

全选选中
$('.check_all').change(function () {
   var status = $(this).prop('checked');
   $('.row_check').prop('checked', status);
   change_total();
   var data = {
      'id':'all',
      'status':$(this).prop('checked')?1:0
   };
   $.ajax({
      url:"{:url('home/cart/changestatus')}",
      type:'post',
      data:data,
      dataType:'json',
      success:function (res) {
                if(res.code!=200){
                   alert(res.msg);return;
        }
      }
   })
});

接受参数

public function changestatus(){
    $params=input();
    $validate = $this->validate($params,[
       'id'=>'require',
       'status'=>'require|in:0,1'
    ]);
    if($validate !== true){
        $res =['code'=>400,'msg'=>$validate];
        echo json_encode($res);die();
    }
    CartLogic::changeStatus($params['id'],$params['status']);
    $res=['code'=>200,'msg'=>'success'];
    echo json_encode($res);die();
}

调用封装逻辑方法changeStatus
public static function changeStatus($id,$is_selected){
    if(session('?info')){
        $user_id = session('info');
        $where['user_id']= $user_id;
        if($id != 'all'){
            $where['id'] = $id;
        }
        Cart::where($where)->update(['is_selected'=>$is_selected]);
    }else{
        $data = cookie('cart') ? :[];
        if($id == 'all'){
            foreach ($data as &$v){
                $v['is_selected']=$is_selected;
            }
            unset($v);
        }else{
            $data[$id]['is_selected']=$is_selected;
        }
        cookie('cart',$data,86400*7);
    }
}

点击结算跳转页面
$('.sum-btn').click(function () {
           if($('.row_check:checked').length == 0){
               alert('请选择要结算的商品');
               return;
    }
           location.href = "{:url('home/order/create')}";
})