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

wip

This commit is contained in:
pushuo 2022-07-20 14:19:36 +08:00
parent b88035c68c
commit 24b29207ca
5 changed files with 120 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
beike/Models/Product.php
View File

@ -50,11 +50,6 @@ class Product extends Model
return '$' . $this->price;
}
public function getVariablesDecodedAttribute()
{
return json_decode($this->variables, true);
}
public function getUrlAttribute()
{
return shop_route('products.show', ['product' => $this]);

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

@ -381,6 +381,23 @@ body.page-product .product-image .left {
body.page-product .product-image .left > div {
margin-bottom: 1rem;
}
body.page-product .variables-wrap .variable-info > div {
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
border: 1px solid #ddd;
margin-left: 0;
min-width: 3rem;
padding: 0.5rem;
cursor: pointer;
text-align: center;
transition: all 0.1s ease-in-out;
}
body.page-product .variables-wrap .variable-info > div:hover, body.page-product .variables-wrap .variable-info > div.active {
border-color: #222;
}
body.page-product .peoduct-info .rating-wrap {
margin-bottom: 2rem;
}

4
resources/beike/admin/views/pages/products/form/form.blade.php
View File

@ -140,11 +140,11 @@
el: '#app',
data: {
form: {
variables: @json($product->variables_decoded ?? []),
variables: @json($product->variables ?? []),
skus: @json($product->skus ?? []),
},
source: {
variables: @json($product->variables_decoded ?? []),
variables: @json($product->variables ?? []),
},
editing: {
isVariable: @json(($product->variables ?? null) != null),

22
resources/beike/shop/default/css/product.scss vendored
View File

@ -11,6 +11,28 @@ body.page-product {
}
}
.variables-wrap {
.variable-info {
> div {
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
border: 1px solid #ddd;
margin-left: 0;
min-width: 3rem;
padding: 0.5rem;
cursor: pointer;
text-align: center;
transition: all .1s ease-in-out;
&:hover, &.active {
border-color: #222;
}
}
}
}
.peoduct-info {
.rating-wrap {
margin-bottom: 2rem;

97
themes/default/product.blade.php
View File

@ -2,9 +2,15 @@
@section('body-class', 'page-product')
@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" id="checkout-app">
<div class="container" id="product-app" v-cloak>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
@ -12,7 +18,7 @@
</ol>
</nav>
<div class="row mb-5">
<div class="row mb-5" id="product-top">
<div class="col-12 col-md-6">
<div class="product-image d-flex">
<div class="left">
@ -20,13 +26,13 @@
<div class=""><img src="http://fpoimg.com/100x100?bg_color=f3f3f3" class="img-fluid"></div>
@endfor
</div>
<div class="right"><img src="{{ $product->image }}" class="img-fluid"></div>
<div class="right"><img src="{{ $product['image'] }}" class="img-fluid"></div>
</div>
</div>
<div class="ps-lg-5 col-xl-5 col-lg-6 order-lg-2">
<div class="peoduct-info">
<h1>{{ $product->description->name }}</h1>
<h1>{{ $product['name'] }}</h1>
<div class="rating-wrap d-flex">
<div class="rating">
@for ($i = 0; $i < 5; $i++)
@ -36,19 +42,35 @@
<span class="text-muted">132 reviews</span>
</div>
<div class="price-wrap d-flex align-items-end">
<div class="new-price">{{ $product->master_sku->price }}</div>
<div class="old-price text-muted text-decoration-line-through">{{ $product->master_sku->origin_price }}</div>
<div class="new-price"></div>
<div class="old-price text-muted text-decoration-line-through"></div>
</div>
<div class="variables-wrap">
<div class="variable-group mb-3" v-for="variable, index in source.variables" :key="index">
<p class=""><strong>@{{ variable.name }}</strong></p>
<div class="variable-info">
<div
v-for="value, v in variable.values"
@click="checkedVariableValue(index, v, value)"
:key="v"
:class="value.selected ? 'active' : ''">
@{{ value.name }}
</div>
</div>
</div>
</div>
<div class="attribute-wrap">
<table class="table table-striped table-borderless">
<tbody>
<tr>
<td>型号</td>
<td>{{ $product->master_sku->model }}</td>
<td></td>
</tr>
<tr>
<td>Sku</td>
<td>{{ $product->master_sku->sku }}</td>
<td></td>
</tr>
</tbody>
</table>
@ -87,17 +109,56 @@
</div>
<script>
$('.add-cart').on('click', function(event) {
const data = {
sku_id: '{{ $product->master_sku->id }}',
quantity: $('input[name="quantity"]').val()
};
$http.post('/carts', data).then((res) => {
layer.msg(res.message)
})
});
</script>
@endsection
@push('add-scripts')
<script>
new Vue({
el: '#product-app',
data: {
selectedVariantsIndex: [], // 选中的变量索引
source: {
skus: @json($product['skus']),
variables: @json($product['variables']),
}
},
computed: {
},
beforeMount () {
const skuDefault = this.source.skus.find(e => e.is_default)
this.selectedVariantsIndex = skuDefault.variants
// 为 variables 里面每一个 values 的值添加一个 selected 字段
this.source.variables.forEach(variable => {
variable.values.forEach(value => {
this.$set(value, 'selected', false)
})
})
// console.log(this.selectedVariantsIndex)
this.checkedVariants()
},
methods: {
checkedVariableValue(variable_idnex, value_index,value) {
this.source.variables[variable_idnex].values[value_index].selected = !value.selected
},
// 把对应 selectedVariantsIndex 下标选中 variables -> values 的 selected 字段为 true
checkedVariants() {
this.source.variables.forEach((variable, index) => {
variable.values.forEach(value => {
value.selected = false
})
variable.values[this.selectedVariantsIndex[index]].selected = true
})
},
}
})
</script>
@endpush