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

全部商品11

全部
商品
单价(元)
数量
小计(元)
操作
{foreach $data as $k=>$v}
    {$v.id}" number="{$v.number}">
  • {$v.goods.goods_name}
  • {$v.goods.value_names}
  • {$v.goods.goods_price}
  • - value="{$v.number}" minnum="1" class="itxt current_number" /> +
  • {$v.goods.goods_price * $v.number}
  • 删除
    移到我的关注
{/foreach}
全选
已选择total_number">0件商品
总价(不含运费) :total_price" class="summoney">¥0
获取修改后的商品数量和价格替换到下方的商品个数和商品价格
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')}";
})

你可能感兴趣的:(购物车页面实现,修改商品数量同步数据库内容)