wuhui_zzw
/
wyyl
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

购物车页面

This commit is contained in:
pushuo 2022-06-28 18:28:38 +08:00
parent 714f8b5f80
commit f9d86bdaf5
6 changed files with 100 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/build/beike/shop/default/css/app.css vendored
View File

@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale;
}
[v-cloak] {
display: none;
}
.module-title {
font-size: 1.5rem;
text-align: center;

2
public/build/beike/shop/default/js/app.js vendored
View File

@ -26,6 +26,7 @@ $(document).ready(function ($) {
if ($(this).hasClass('bi-chevron-up')) {
input.val(input.val() * 1 + 1);
input.get(0).dispatchEvent(new Event('input'));
return;
}
@ -34,6 +35,7 @@ $(document).ready(function ($) {
}
input.val(input.val() * 1 - 1);
input.get(0).dispatchEvent(new Event('input'));
});
});

4
resources/beike/shop/default/css/global.scss vendored
View File

@ -1,5 +1,9 @@
@charset "UTF-8";
[v-cloak] {
display: none;
}
.module-title {
font-size: 1.5rem;
text-align: center;

2
resources/beike/shop/default/js/app.js vendored
View File

@ -10,6 +10,7 @@ $(document).ready(function ($) {
if ($(this).hasClass('bi-chevron-up')) {
input.val(input.val() * 1 + 1)
input.get(0).dispatchEvent(new Event('input'));
return;
}
@ -18,5 +19,6 @@ $(document).ready(function ($) {
}
input.val(input.val() * 1 - 1)
input.get(0).dispatchEvent(new Event('input'));
});
});

114
themes/default/cart.blade.php
View File

@ -2,8 +2,14 @@
@section('body-class', 'page-cart')
@push('header')
<script src="{{ asset('vendor/vue/2.6.14/vue.js') }}"></script>
<script src="{{ asset('vendor/element-ui/2.15.6/js.js') }}"></script>
<link rel="stylesheet" href="{{ asset('vendor/element-ui/2.15.6/css.css') }}">
@endpush
@section('content')
<div class="container">
<div class="container" id="app-cart" v-cloak>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
@ -22,40 +28,44 @@
<thead>
<tr>
<th width="130">
<input class="form-check-input" type="checkbox" value="" id="check-all">
<input class="form-check-input" type="checkbox" value="" id="check-all" v-model="allSelected">
<label class="form-check-label ms-1" for="check-all">
全选
</label>
</th>
<th>商品</th>
<th width="230">商品</th>
<th>数量</th>
<th>小计</th>
<th class="align-right">操作</th>
<th class="text-end">操作</th>
</tr>
</thead>
<tbody>
@foreach ($carts as $cart)
<tr>
<td>
<div class="d-flex align-items-center p-image">
<input class="form-check-input" type="checkbox" value="">
<img src="http://fpoimg.com/100x100?bg_color=f3f3f3" class="img-fluid">
<tr v-for="product, index in products" :key="index">
<td>
<div class="d-flex align-items-center p-image">
<input class="form-check-input" type="checkbox" v-model="product.selected">
<img :src="product.image" class="img-fluid">
</div>
</td>
<td>
<div class="name mb-1 fw-bold" v-text="product.name"></div>
<div class="price">@{{ product.price }}</div>
</td>
<td>
<div class="quantity-wrap">
<input type="text" class="form-control" onkeyup="this.value=this.value.replace(/\D/g,'')" v-model.number="product.quantity" name="quantity" minimum="1">
<div class="right">
<i class="bi bi-chevron-up"></i>
<i class="bi bi-chevron-down"></i>
</div>
</td>
<td>
<div class="name mb-1 fw-bold">Camera Canon EOS M50 Kit</div>
<div class="price">$1156.00</div>
</td>
<td>
@include('shared.quantity', ['quantity'=>'2'])
</td>
<td>$1156.00</td>
<td>
<button type="button" class="btn btn-link btn-sm">删除</button><br>
<button type="button" class="btn btn-link btn-sm">加入收藏</button>
</td>
</tr>
@endforeach
</div>
</td>
<td>$1156.00</td>
<td class="text-end">
<button type="button" class="btn btn-link btn-sm">删除</button><br>
<button type="button" class="btn btn-link btn-sm">加入收藏</button>
</td>
</tr>
</tbody>
</table>
</div>
@ -65,10 +75,11 @@
<div class="card-header"><h5 class="mb-0">商品总计</h5></div>
<div class="card-body">
<ul class="list-group list-group-flush">
<li class="list-group-item"><span>总数</span><span>20</span></li>
<li class="list-group-item border-bottom-0"><span>总价</span><span class="total-price">¥223.33</span></li>
<li class="list-group-item"><span>总数</span><span>@{{ total_quantity }}</span></li>
<li class="list-group-item border-bottom-0"><span>总价</span><span class="total-price">@{{ amount_format }}</span></li>
<li class="list-group-item d-grid gap-2 mt-3 border-bottom-0">
<a href="{{ shop_route('checkout.index', 'checkout') }}" class="btn btn-primary">去结账</a>
{{-- <a href="{{ shop_route('checkout.index', 'checkout') }}" class="btn btn-primary">去结账</a> --}}
<button type="button" class="btn btn-primary" @click="checkedBtnToCheckout">去结账</button>
</li>
</ul>
</div>
@ -76,4 +87,51 @@
</div>
</div>
</div>
@endsection
@push('add-scripts')
<script>
var app = new Vue({
el: "#app-cart",
// delimiters: ['${', '}'],
components: {},
data: {
products: @json($carts),
total_quantity: @json($quantity),
amount: @json($amount),
amount_format: @json($amount_format),
},
// 计算属性
computed: {
allSelected: {
get() {
return !this.products.length ? false : this.products.every(s => s.selected)
},
set(val) {
return this.products.map(e => e.selected = val)
}
},
},
// 侦听器
watch: {},
// 组件方法
methods: {
checkedBtnToCheckout() {
if (!this.products.some(e => e.selected)) {
layer.msg('请选择至少一个商品', ()=>{})
return
}
}
},
// 实例被挂载后调用
mounted () {
if (this.products.length) {
this.products.forEach((e) => {
this.$set(e, 'selected', false)
})
}
},
})
</script>
@endpush

2
themes/default/layout/master.blade.php
View File

@ -21,5 +21,7 @@
@yield('content')
@include('layout.footer')
@stack('add-scripts')
</body>
</html>