jQuery购物车商品结算功能实现详解1 、从控制器将数据渲染到HTML页⾯
namespace app\home\controller;
use app\home\model\CarModel;
use think\Controller;
class Car  extends Controller
{
function car()
{
$data  = CarModel::with('user,goods,specGoods')->where('user_id',1) ->select();
$data = collection($data)->toArray();
return view('cart',['data'=>$data]);
}
//    移除购物车商品
function  del()
{
$id = request()->get('ids');
$res = CarModel::del($id);
if($res)
{
return json(['code'=>200,'msg'=>'删除成功']);
}
}
}
2 HTML页⾯jquery代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
<style>
button{border:none;
background-color: #006666;color: white}
</style>
</head>
<body>
<div class="box" >
<button class="delMany">批量删除</button>
<table class="table">
<tr>
<td><button id="btn">全选</button></td>
<td>商品信息</td>
<td>单价</td>
<td>数量</td>
<td>⾦额</td>
<td>操作</td>
</tr>
{foreach($data as $v)}
<tr>
<td><input type="checkbox" class="check" {if($v.is_selected)}checked="checked"{/if}></td>
<td>{$v.spec_goods.price}</td>
<td>
<button class="add_btn">+</button>
<input type="text" value="{$v.number}" class="num">
<button class="minus">-</button>
<!-- 商品数量-->
</td>
<td><font color="red">￥</font><span class="price">{$v.number*$v.spec_goods.price}</span></td>
<td><button ids="{$v.id}" class="del">删除</button></td>
</tr>
{/foreach}
</table>
<p>
<font >￥<span class="totalprice money">0</span></font>
<button class="go_pay">去结算</button></p
</div>
</body>
</html>
<script src="apps.bdimg/libs/jquery/2.1.4/jquery.min.js">
</script>
<script>
$(function () {
$('.totalprice').html(getSum());
})
// 全选、全不选
var totalprice = $('.totalprice').text();
var sum= 0;
$('#btn').click(function () {
$('.check').prop('checked',!$('.check').prop('checked'));//全选、全不选
if($('.check').prop('checked'))
{
$(this).text('取消全选');
$('.totalprice').text(getSum());//全选中，总价格
}else{
$(this).text('全选');
$('.totalprice').text(sum);//取消全选后，总价格
}
})
/
/ 数量增加
$('.add_btn').click(function () {
var num = $(this).parent('td').find('input').val();//获取该条数据当前商品数量
num ++;
$(this).parent('td').find('input').val(num);//点击商品数量增加 1/次
var price = $(this).parents('tr').find('td').eq(2).text();//获取该条数据商品单价
var money = num * price; //求该条数据商品总价格；
$(this).parents('tr').find('.price').text(money);//改变页⾯该条数据商品⾦额
// 该⾏选中状态下
var status =  $(this).parents('tr').find('.check').prop('checked');
if(status)
{
$('.totalprice').text(getSum());//数量改变，商品结算总计价格改变
}
})
// 数量减少
$('.minus').click(function () {
var num = $(this).parent('td').find('input').val();//获取该⾏数据商品数量
if(num>1)
{
num--;
var price = $(this).parents('tr').find('td').eq(2).text();//获取该条数据当前商品单价            var money = num * price;//求该⾏，当前商品总价
$(this).parents('tr').find('.price').text(money);//改变页⾯该⾏当前数据商品⾦额            // 该⾏选中状态下
var status =  $(this).parents('tr').find('.check').prop('checked');
if(status)
{
$('.totalprice').text(getSum());//数量改变，商品结算总计价格改变
}
}
})
//商品选中是否点击事件
$('.check').click(function () {
// 该⾏选中状态下
var status =  $(this).parents('tr').find('.check').prop('checked');
if(status)
{
$('.totalprice').text(getSum());//数量改变，商品结算总计价格改变
}else{
$('.totalprice').text(getSum());
}
})
// 总价
function getSum() {
// 总数量
var num = 0;
// 总价
var money = 0;
// 遍历
$('.price').each(function(i, ele) {
if ($(this).parents('tr').find('.check').prop('checked')) {
money += parseInt($(ele).text());
}
});
return money;
}
/
/ 删除
$('.del').click(function () {
var ids = $(this).attr('ids');
var this_ = $(this);
$.ajax({
url:'/del',
data:{
ids:ids,
},
dataType:'json',
success:function (res) {
alert(res.msg);
if(res.msg=='删除成功')
{
this_.parents('tr').remove();//在页⾯移除该⾏
$('.totalprice').text(getSum());//改变商品结算总价
}
}
})
})
// 批量删除
$('.delMany').click(function () {
网页购物车代码var ids='';
$(':checked').each(function (i,v) {
ids+=','+$(v).attr('ids');
})
ids = ids.slice(1)//去除开头的逗号
url:'/delMany',
data:{
ids:ids,
},
dataType:'json',
success:function (res) {
alert(res.msg);
if(res.msg=='删除成功')
{
$('.check:checked').each(function (i,v) {
$(v).parents('tr').remove();//在页⾯移除该⾏
})
$('.totalprice').text(getSum());//改变商品结算总价
}
}
})
})
/
/ $('.goods_number').change(function () {
//    var ids = $(this).parents('tr').find('td').eq(0).find('input').attr('ids');    //    var num = $(this).val();//获取该条数据当前商品数量
//    // 判断是否超过限购数量
//    var goodsLimit = $(this).parents('td').find('input').attr('goods_limit');    //    if(parseInt(num) >= parseInt(goodsLimit) )
//    {
//        alert('该商品每⼈限购'+goodsLimit+"件");
//        $(this).val(goodsLimit);
//        return;
//    }
//    // 判断是否超过限购数量
//    var stock = $(this).parents('td').find('input').attr('stock');
//    if(parseInt(num)>parseInt(stock))
//    {
//        alert('没有更多库存啦亲！');
//        return;
//    }
//    var intReg= /^\d+$/;
//    if(!st(num))
//    {
//        alert('购买数量必须是整数');
//        $.ajax({
/
/            url:"/GoodsNumber",
//            data:{
//                ids:ids,
//            },
//            dataType:"json",
//            method:"post",
//            success:(res)=>{
//                // console.log(res.data);
//                $(this).val(res.data);
//            }
//        })
/
/        return;
//    }
//    $.ajax({
//        url:"/changeGoodsNumber",
//        data:{
//            num:num,
//            ids:ids,
//        },
//        dataType:"json",
//        method:"post",
//        success:(res)=>{
/
/            console.log(res);
//    })
// })
// 去结算
$('.go_pay').click(function () {
//判断是否有选中的购物记录
if($('.check:checked').length == 0){
alert('请选择要结算的商品');
return;
}
//跳转到结算页
location.href = "{:url('home/order/create')}";
})
</script>
3 模型层代码
<?php
namespace app\home\model;
use think\Model;
use traits\model\SoftDelete;
class CarModel  extends Model
{
use SoftDelete;
protected $table = 'pyg_cart';
protected $pk = 'id';
protected $deleteTime = 'delete_time';
//  关联商品表
function goods()
{
return $this->belongsTo('Goods')->bind('goods_name');    }
//  关联商品规格表
function specGoods()
{
return $this->belongsTo('SpecGoods');
}
//    关联⽤户表
function user()
{
return $this->belongsTo('User');
}
//    软删除
static function del($id)
{
return self::destroy($id);
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。