|
|
@extends('layouts.shop')
|
|
|
|
|
|
|
|
|
@section('main')
|
|
|
<main id="mainContent" class="main-content">
|
|
|
<div class="page-container">
|
|
|
<div class="container">
|
|
|
<div class="cart-area ptb-60">
|
|
|
<div class="container">
|
|
|
|
|
|
<form action="/user/comment/orders/create" class="mb-30" method="get" id="create_form">
|
|
|
|
|
|
<div class="cart-wrapper">
|
|
|
<div class="cart-price">
|
|
|
<div class="t-right">
|
|
|
<!-- Checkout Area -->
|
|
|
<section class="section checkout-area panel prl-30 pt-20 pb-40">
|
|
|
<h2 class="h3 mb-20 h-title">支付信息</h2>
|
|
|
@include('hint.status')
|
|
|
@include('hint.fail')
|
|
|
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
|
|
|
|
</div>
|
|
|
@auth
|
|
|
<button type="submit" class="btn btn-lg btn-rounded mr-10">下单</button>
|
|
|
@endauth
|
|
|
@guest
|
|
|
<a href="/login" class="btn btn-lg btn-rounded mr-10">下单</a>
|
|
|
@endguest
|
|
|
</section>
|
|
|
</div>
|
|
|
</div>
|
|
|
<h3 class="h-title mb-30 t-uppercase">我的购物车</h3>
|
|
|
<table id="cart_list" class="cart-list mb-30">
|
|
|
<thead class="panel t-uppercase">
|
|
|
<tr>
|
|
|
<th>
|
|
|
<div class="custom-checkbox mb-20">
|
|
|
<input type="checkbox" id="all_check">
|
|
|
<label class="color-mid" for="all_check"></label>
|
|
|
</div>
|
|
|
</th>
|
|
|
<th>商品名字</th>
|
|
|
<th>商品图片</th>
|
|
|
<th>商品价格</th>
|
|
|
<th>数量</th>
|
|
|
<th>删除</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody id="cars_data">
|
|
|
@foreach ($cars as $car)
|
|
|
<tr class="panel alert cars_td">
|
|
|
<input type="hidden" name="cars[]" value="{{ $car->id }}">
|
|
|
<td>
|
|
|
<div class="custom-checkbox mb-20">
|
|
|
<input value="{{ $car->product->uuid }}" class="product_ids" type="checkbox" name="ids[]" id="cars_{{ $car->id }}">
|
|
|
<label class="color-mid" for="cars_{{ $car->id }}"></label>
|
|
|
</div>
|
|
|
</td>
|
|
|
<td>
|
|
|
<div class="media-body valign-middle">
|
|
|
<h6 class="title mb-15 t-uppercase">
|
|
|
<a href="/products/{{ $car->product->uuid }}">
|
|
|
{{ $car->product->name }}
|
|
|
</a>
|
|
|
</h6>
|
|
|
</div>
|
|
|
</td>
|
|
|
<td>
|
|
|
<img src="{{ $car->product->thumb }}" alt="">
|
|
|
</td>
|
|
|
<td class="prices">{{ $car->product->price }}</td>
|
|
|
<td>
|
|
|
<input
|
|
|
style="border-bottom: 1px solid #ddd;"
|
|
|
data-id="{{ $car->product->uuid }}"
|
|
|
class="quantity-label car_number"
|
|
|
type="number"
|
|
|
name="numbers[]"
|
|
|
value="{{ $car->number }}" id="{{ $car->product->uuid }}">
|
|
|
</td>
|
|
|
|
|
|
<td>
|
|
|
<button data-number="{{ $car->number }}"
|
|
|
data-car="{{ $car->id }}"
|
|
|
data-id="{{ $car->product->uuid }}" class="close delete_car"
|
|
|
type="button">
|
|
|
<i class="fa fa-trash-o"></i>
|
|
|
</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
@endforeach
|
|
|
</tbody>
|
|
|
</table>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</form>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
</main>
|
|
|
@endsection
|
|
|
|
|
|
@section('script')
|
|
|
<script src="/assets/user/layer/2.4/layer.js"></script>
|
|
|
<script>
|
|
|
let token = "{{ csrf_token() }}";
|
|
|
|
|
|
|
|
|
@auth
|
|
|
syncCarsToDatabase();
|
|
|
|
|
|
function syncCarsToDatabase() {
|
|
|
if (LocalCar.number() > 0) {
|
|
|
layer.confirm('是否同步本地购物车到本账户下', {
|
|
|
btn: ['是', '放弃本地购物车']
|
|
|
}, function () {
|
|
|
layer.closeAll();
|
|
|
|
|
|
let cars = LocalCar.all();
|
|
|
for (let i in cars) {
|
|
|
|
|
|
let product = cars[i];
|
|
|
|
|
|
let data = {product_id: product.id, number: product.number, _token: token};
|
|
|
let url = "/cars";
|
|
|
|
|
|
$.post(url, data, function (res) {
|
|
|
|
|
|
if (res.code != 200) {
|
|
|
|
|
|
layer.msg(res.msg, {icon: 2});
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 更新 DOM，如果已经有了这个元素，那么加数量，
|
|
|
// 如果是没有的，新增加 DOM
|
|
|
let dom = $('#' + product.id);
|
|
|
if (dom.length > 0) {
|
|
|
dom.val(parseInt(dom.val()) + product.number);
|
|
|
} else {
|
|
|
// 增加 DOM
|
|
|
let html = buildCarDom(product.id, product.name, product.thumb, product.number, product.price);
|
|
|
$('#cars_data').append(html);
|
|
|
}
|
|
|
|
|
|
layer.msg('同步 [' + product.name + '] 商品到购物车成功');
|
|
|
});
|
|
|
}
|
|
|
|
|
|
localDom.text(0);
|
|
|
LocalCar.flush();
|
|
|
|
|
|
}, function () {
|
|
|
|
|
|
LocalCar.flush();
|
|
|
localDom.text(0);
|
|
|
layer.msg('清除本地购物车成功');
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@endauth
|
|
|
|
|
|
@guest
|
|
|
let localCars = LocalCar.all();
|
|
|
let dom = '';
|
|
|
|
|
|
for (let i in localCars) {
|
|
|
|
|
|
let product = localCars[i];
|
|
|
dom += buildCarDom(product.id, product.name, product.thumb, product.number, product.price);
|
|
|
}
|
|
|
|
|
|
$('#cars_data').append(dom);
|
|
|
getTotal();
|
|
|
|
|
|
@endguest
|
|
|
|
|
|
|
|
|
// 删除购物车
|
|
|
$("#cart_list").on('click', '.delete_car', function () {
|
|
|
|
|
|
let that = $(this);
|
|
|
let id = that.data('id');
|
|
|
let carId = that.data('car');
|
|
|
|
|
|
@auth
|
|
|
let _url = "/cars/" + carId;
|
|
|
$.post(_url, {_token: token, _method: 'DELETE'}, function (res) {
|
|
|
|
|
|
if (res.code != 302 && res.code != 200) {
|
|
|
|
|
|
layer.msg(res.msg, {icon: 2});
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
that.parent().parent().remove();
|
|
|
getTotal();
|
|
|
renderIncrementCar(-that.data('number'), false);
|
|
|
});
|
|
|
@endauth
|
|
|
@guest
|
|
|
LocalCar.delete(id);
|
|
|
that.parent().parent().remove();
|
|
|
getTotal();
|
|
|
renderIncrementCar(-that.data('number'), true);
|
|
|
@endguest
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
// 更改购物车数量
|
|
|
$('#cart_list').on('change', '.car_number', function () {
|
|
|
|
|
|
let id = $(this).data('id');
|
|
|
let number = $(this).val();
|
|
|
|
|
|
|
|
|
@auth
|
|
|
let data = {product_id: id, _token: "{{ csrf_token() }}", number: number, action: "sync"};
|
|
|
$.post("/cars", data, function (res) {
|
|
|
|
|
|
|
|
|
if (res.code != 200) {
|
|
|
|
|
|
layer.msg(res.msg, {icon: 2});
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
layer.msg(res.msg, {icon: 1});
|
|
|
renderIncrementCar(res.data.change, false);
|
|
|
getTotal();
|
|
|
});
|
|
|
@endauth
|
|
|
@guest
|
|
|
let change = LocalCar.syncNumber(id, number);
|
|
|
layer.msg('本地修改成功', {icon: 1});
|
|
|
renderIncrementCar(change, true);
|
|
|
getTotal();
|
|
|
@endguest
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
// 更新总价
|
|
|
getTotal();
|
|
|
|
|
|
function getTotal() {
|
|
|
let total = 0;
|
|
|
let total_number = 0;
|
|
|
$('.prices').each(function () {
|
|
|
let price = $(this).text();
|
|
|
let number = $(this).next().find('input').val();
|
|
|
number = parseInt(number);
|
|
|
|
|
|
total_number += number;
|
|
|
total += price * number;
|
|
|
});
|
|
|
|
|
|
$('#cars_price').text(total);
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 构建购物车的 dom
|
|
|
*/
|
|
|
function buildCarDom(id, name, thumb, number, price) {
|
|
|
return '<tr class="panel alert local-car">\
|
|
|
<td>\
|
|
|
<div class="custom-checkbox mb-20">\
|
|
|
<input type="checkbox" name="ids" id="cars_'+ id +'">\
|
|
|
<label class="color-mid" for="cars_'+ id +'"></label>\
|
|
|
</div>\
|
|
|
</td>\
|
|
|
<td>\
|
|
|
<div class="media-body valign-middle">\
|
|
|
<h6 class="title mb-15 t-uppercase">\
|
|
|
<a href="/products/' + id + '">\
|
|
|
' + name + '\
|
|
|
</a>\
|
|
|
</h6>\
|
|
|
</div>\
|
|
|
</td>\
|
|
|
<td>\
|
|
|
<img src="' + thumb + '" alt="">\
|
|
|
</td>\
|
|
|
<td class="prices">' + price + '</td>\
|
|
|
<td>\
|
|
|
<input data-id="' + id + '" class="quantity-label car_number" type="number" value="' + number + '">\
|
|
|
</td>\
|
|
|
<td>\
|
|
|
<button type="button" class="close delete_car" data-number="' + price + '" data-id="' + id + '" >\
|
|
|
<i class="fa fa-trash-o"></i>\
|
|
|
</button>\
|
|
|
</td>\
|
|
|
</tr>';
|
|
|
}
|
|
|
</script>
|
|
|
<script>
|
|
|
// 全选按钮
|
|
|
$('#all_check').change(function () {
|
|
|
|
|
|
var checked = $(this).prop('checked');
|
|
|
|
|
|
$('.product_ids').prop('checked', checked);
|
|
|
});
|
|
|
|
|
|
// 商品的选择
|
|
|
$('.product_ids').change(function () {
|
|
|
|
|
|
var checked = $(this).prop('checked');
|
|
|
// 只要不是选中，那么就把全选去掉
|
|
|
if (! checked) {
|
|
|
$('#all_check').prop('checked', false);
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
var carsCount = $('.product_ids').length;
|
|
|
var selectCount = $('.product_ids:checked').length;
|
|
|
if (carsCount === selectCount) {
|
|
|
|
|
|
$('#all_check').prop('checked', true);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 提交做处理
|
|
|
$('#create_form').submit(function () {
|
|
|
|
|
|
if ($('.product_ids:checked').length == 0) {
|
|
|
|
|
|
layer.alert('请至少选中一个购物车', {icon: 2})
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
// 移除掉没有选中的td提交
|
|
|
$('.product_ids:not(:checked)').parents('.cars_td').remove();
|
|
|
|
|
|
return true;
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
@endsection
|
