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="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
<style>
button{border:none;
background-color: #006666;color: white}
</style>
</head>
<body>
<div class="box" >
<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"></td>
<td>{$v['goods_name']} {$v.spec_goods.value_names}</td>
<td>{$v.spec_goods.price}</td>
<td>
<button class="add_btn">+</button>
<input type="text" style="width: 50px"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 style="color: red;font-size:20px;">￥<span class="totalprice money">0</span></font>
<button style="color: white;background-color:red;border: none;width: 120px;height: 35px;float: right;margin-right: 50px;" class="go_pay">去结算</button></p>
</div>
</body>
</html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script>
// 全选、全不选
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--;
$(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());//数量改变，商品结算总计价格改变
}
}
})
//商品选中是否 点击事件
$('.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());//改变商品结算总价
}
}
})
})
// 去结算
$('.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);
}
}
|