优化：商品详情页面下单优化，支持多规格下单
This commit is contained in:
parent
d1c5514682
commit
8d7c37509f
|
|
@ -56,21 +56,30 @@ class CartController extends Controller
|
|||
{
|
||||
try {
|
||||
$skuId = $request->sku_id;
|
||||
$quantity = $request->quantity ?? 1;
|
||||
$quantity = $request->quantity ?? 1;
|
||||
$buyNow = (bool) $request->buy_now ?? false;
|
||||
$customer = current_customer();
|
||||
|
||||
$sku = ProductSku::query()
|
||||
// ->whereRelation('product', 'active', '=', true)
|
||||
->findOrFail($skuId);
|
||||
|
||||
$cart = CartService::add($sku, $quantity, $customer);
|
||||
if ($buyNow) {
|
||||
CartService::select($customer, [$cart->id]);
|
||||
// 多规格批量加入购物车处理
|
||||
if(is_int($skuId)){
|
||||
// 非多规格下单
|
||||
$sku = ProductSku::query()->findOrFail($skuId);
|
||||
$cart = CartService::add($sku, $quantity, $customer);
|
||||
$cartIds = [$cart->id];
|
||||
}else{
|
||||
// 多规格下单
|
||||
$skuList = array_values(json_decode($skuId,TRUE));
|
||||
foreach($skuList as $item){
|
||||
if((int)$item['quantity'] > 0){
|
||||
$sku = ProductSku::query()->findOrFail($item['id']);
|
||||
$cart = CartService::add($sku, $item['quantity'], $customer);
|
||||
$cartIds[] = $cart->id;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$cart = hook_filter('cart.store.data', $cart);
|
||||
|
||||
if ($buyNow) CartService::select($customer, $cartIds);
|
||||
$cart = hook_filter('cart.store.data', $cart);
|
||||
return json_success(trans('shop/carts.added_to_cart'), $cart);
|
||||
} catch (\Exception $e) {
|
||||
return json_fail($e->getMessage());
|
||||
|
|
|
|||
|
|
@ -36,8 +36,8 @@ class CartRequest extends FormRequest
|
|||
$skuId = (int) $this->get('sku_id');
|
||||
|
||||
return [
|
||||
'sku_id' => 'required|int',
|
||||
'quantity' => ['required', 'int', function ($attribute, $value, $fail) use ($skuId) {
|
||||
'sku_id' => 'required',
|
||||
'quantity' => ['required', 'int', /*function ($attribute, $value, $fail) use ($skuId) {
|
||||
$sku = ProductSku::query()->where('id', $skuId)->first();
|
||||
$skuQuantity = $sku->quantity;
|
||||
if ($value > $skuQuantity) {
|
||||
|
|
@ -46,7 +46,7 @@ class CartRequest extends FormRequest
|
|||
if($sku->product->price_setting == 'num' && $value < $sku->product->numprices[0]->num){
|
||||
$fail(trans('shop/products.quantity_error'));
|
||||
}
|
||||
}],
|
||||
}*/],
|
||||
'buy_now' => 'bool',
|
||||
];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +1,30 @@
|
|||
<?php
|
||||
/**
|
||||
* products.php
|
||||
*
|
||||
* @copyright 2022 beikeshop.com - All Rights Reserved
|
||||
* @link https://beikeshop.com
|
||||
* @author Edward Yang <yangjin@guangda.work>
|
||||
* @created 2022-08-18 08:31:03
|
||||
* @modified 2022-08-18 08:31:03
|
||||
*/
|
||||
|
||||
return [
|
||||
'search' => 'Search',
|
||||
'add_to_favorites' => 'Add To Favorites',
|
||||
'add_to_cart' => 'Add To Cart',
|
||||
'buy_now' => 'Buy Now',
|
||||
'product_details' => 'Product Details',
|
||||
'in_stock' => 'In Stock',
|
||||
'out_stock' => 'Out Stock',
|
||||
'model' => 'Model',
|
||||
'quantity_error' => 'Quantity Error',
|
||||
'inquiry' => 'Inquiry',
|
||||
'enter_contacts' => 'Please enter contacts',
|
||||
'enter_email' => 'Please enter email',
|
||||
'enter_content' => 'Please enter content',
|
||||
'search' => 'Search',
|
||||
'add_to_favorites' => 'Add To Favorites',
|
||||
'cancel_to_favorites' => 'Cancel To Favorites',
|
||||
'add_to_cart' => 'Add To Cart',
|
||||
'buy_now' => 'Buy Now',
|
||||
'product_details' => 'Product Details',
|
||||
'in_stock' => 'In Stock',
|
||||
'out_stock' => 'Out Stock',
|
||||
'model' => 'Model',
|
||||
'quantity_error' => 'Quantity Error',
|
||||
'buy_sku_error' => 'Specification information error',
|
||||
'inquiry' => 'Inquiry',
|
||||
'enter_contacts' => 'Please enter contacts',
|
||||
'enter_email' => 'Please enter email',
|
||||
'enter_content' => 'Please enter content',
|
||||
'add_buy_sku' => 'Add Buy Sku',
|
||||
'product_total' => 'Product Total',
|
||||
'shipping_fee' => 'Shipping Fee',
|
||||
'order_total' => 'Order Total',
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,26 +1,30 @@
|
|||
<?php
|
||||
/**
|
||||
* products.php
|
||||
*
|
||||
* @copyright 2022 beikeshop.com - All Rights Reserved
|
||||
* @link https://beikeshop.com
|
||||
* @author Edward Yang <yangjin@guangda.work>
|
||||
* @created 2022-08-18 08:31:03
|
||||
* @modified 2022-08-18 08:31:03
|
||||
*/
|
||||
|
||||
return [
|
||||
'search' => '搜索',
|
||||
'add_to_favorites' => '加入收藏夹',
|
||||
'add_to_cart' => '加入购物车',
|
||||
'buy_now' => '立即购买',
|
||||
'product_details' => '商品详情',
|
||||
'in_stock' => '有货',
|
||||
'out_stock' => '缺货',
|
||||
'model' => '型号',
|
||||
'quantity_error' => '数量错误',
|
||||
'inquiry' => '咨询',
|
||||
'enter_contacts' => '请输入联系人',
|
||||
'enter_email' => '请输入邮件',
|
||||
'enter_content' => '请输入内容',
|
||||
'search' => '搜索',
|
||||
'add_to_favorites' => '加入收藏夹',
|
||||
'cancel_to_favorites' => '取消收藏',
|
||||
'add_to_cart' => '加入购物车',
|
||||
'buy_now' => '立即购买',
|
||||
'product_details' => '商品详情',
|
||||
'in_stock' => '有货',
|
||||
'out_stock' => '缺货',
|
||||
'model' => '型号',
|
||||
'quantity_error' => '数量错误',
|
||||
'buy_sku_error' => '规格信息错误',
|
||||
'inquiry' => '咨询',
|
||||
'enter_contacts' => '请输入联系人',
|
||||
'enter_email' => '请输入邮件',
|
||||
'enter_content' => '请输入内容',
|
||||
'add_buy_sku' => '添加购买规格',
|
||||
'product_total' => '产品总计',
|
||||
'shipping_fee' => '运费',
|
||||
'order_total' => '订单总额',
|
||||
];
|
||||
|
|
|
|||
|
|
@ -26,7 +26,58 @@
|
|||
@if (!request('iframe'))
|
||||
<x-shop-breadcrumb type="product" :value="$product['id']"/>
|
||||
@endif
|
||||
|
||||
<style>
|
||||
.quantity-btns{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.quantity-btns .add-wishlist{
|
||||
margin-left: 10px;
|
||||
}
|
||||
.quantity-btns .add-wishlist .text-secondary{
|
||||
height: 100% !important;
|
||||
}
|
||||
.quantity-btns .buy-num-list{
|
||||
width: 100%;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.quantity-btns .list-box{
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.quantity-btns .list-box .sku-info{
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
height: 42px;
|
||||
width: 50%;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.quantity-btns .list-box .sku-info span{
|
||||
margin-right: 20px!important;
|
||||
}
|
||||
.quantity-btns .operating-content {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
.quantity-btns .operating-content button:first-child{
|
||||
margin-left: 0!important;
|
||||
}
|
||||
</style>
|
||||
<div class="container {{ request('iframe') ? 'pt-4' : '' }}" id="product-app" v-cloak>
|
||||
<div class="row mb-5 mt-3 mt-md-0" id="product-top">
|
||||
<div class="col-12 col-lg-6 mb-3">
|
||||
|
|
@ -108,8 +159,8 @@
|
|||
<div class="d-flex">
|
||||
<span class="title text-muted">{{ __('product.quantity') }}:</span>
|
||||
<div :class="product.quantity > 0 ? 'text-success' : 'text-secondary'">
|
||||
<template v-if="product.quantity > 0">{{ __('shop/products.in_stock') }}</template>
|
||||
<template v-else>{{ __('shop/products.out_stock') }}</template>
|
||||
<template v-if="product.quantity > 0">@{{ product.quantity }}</template>
|
||||
<template v-else>@{{ product.quantity }}</template>
|
||||
</div>
|
||||
</div>
|
||||
@endhookwrapper
|
||||
|
|
@ -142,7 +193,7 @@
|
|||
</div>
|
||||
@endif
|
||||
|
||||
|
||||
{{--商品规格--}}
|
||||
<div class="variables-wrap mb-4" v-if="source.variables.length">
|
||||
<div class="variable-group mb-2" v-for="variable, variable_index in source.variables" :key="variable_index">
|
||||
<p class="mb-2">@{{ variable.name }}</p>
|
||||
|
|
@ -186,80 +237,89 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if ($product['active'])
|
||||
<div class="quantity-btns">
|
||||
@hook('product.detail.buy.before')
|
||||
{{-- 购买数量 - 单规格 --}}
|
||||
<div class="quantity-wrap mb-4" v-if="Object.keys(source.skus).length <= 1">
|
||||
<input type="text" class="form-control" :disabled="!product.quantity" onkeyup="this.value=this.value.replace(/\D/g,'')" v-model="quantity" name="quantity">
|
||||
<div class="right" v-if="!isNumSelect">
|
||||
<i class="bi bi-chevron-up"></i>
|
||||
<i class="bi bi-chevron-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
{{--购买&进入购物车按钮--}}
|
||||
<div class="quantity-btns">
|
||||
@hook('product.detail.buy.before')
|
||||
{{--添加购买规格--}}
|
||||
<button v-if="product.quantity > 0 && !add_buy_sku[product.id] && Object.keys(source.skus).length > 1" class="btn btn-outline-info btn-sm mb-4" @click="clickAddBuySku">
|
||||
<i class="bi bi-plus me-1"></i>{{ __('shop/products.add_buy_sku') }}
|
||||
</button>
|
||||
{{-- 购买数量 - 多规格 --}}
|
||||
<div class="buy-num-list mb-4" v-if="Object.keys(add_buy_sku).length > 0">
|
||||
@hookwrapper('product.detail.quantity.input')
|
||||
<div class="quantity-wrap">
|
||||
<input type="text" readonly class="form-control" :disabled="!product.quantity" onkeyup="this.value=this.value.replace(/\D/g,'')" v-model="quantity" name="quantity">
|
||||
<div class="right" v-if="!isNumSelect">
|
||||
<i class="bi bi-chevron-up"></i>
|
||||
<i class="bi bi-chevron-down"></i>
|
||||
<div class="list-box" v-for="skuValue, skuIndex in add_buy_sku">
|
||||
<div class="sku-info">
|
||||
<span v-for="skuInfoValue, skuInfoIndex in skuValue.sku_info">@{{ skuInfoValue.name }}：@{{ skuInfoValue.value }}</span>
|
||||
</div>
|
||||
<div class="quantity-wrap">
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
:disabled="skuValue.stock <= skuValue.quantity"
|
||||
onkeyup="this.value=this.value.replace(/\D/g,'')"
|
||||
v-model="add_buy_sku[skuIndex].quantity"
|
||||
@input="skuQuantityChange($event,skuIndex)"
|
||||
name="quantity">
|
||||
<div class="right" v-if="!isNumSelect">
|
||||
<i class="bi bi-chevron-up"></i>
|
||||
<i class="bi bi-chevron-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endhookwrapper
|
||||
@hookwrapper('product.detail.add_to_cart')
|
||||
<button
|
||||
class="btn btn-outline-dark ms-md-3 add-cart fw-bold"
|
||||
:product-id="product.id"
|
||||
:product-price="product.price"
|
||||
:disabled="!product.quantity"
|
||||
@click="addCart(false, this)"
|
||||
><i class="bi bi-cart-fill me-1"></i>{{ __('shop/products.add_to_cart') }}
|
||||
</button>
|
||||
@endhookwrapper
|
||||
@hookwrapper('product.detail.buy_now')
|
||||
<button
|
||||
class="btn btn-dark ms-3 fw-bold"
|
||||
:disabled="!product.quantity"
|
||||
:product-id="product.id"
|
||||
:product-price="product.price"
|
||||
@click="addCart(true, this)"
|
||||
><i class="bi bi-bag-fill me-1"></i>{{ __('shop/products.buy_now') }}
|
||||
</button>
|
||||
@endhookwrapper
|
||||
@hook('product.detail.buy.after')
|
||||
</div>
|
||||
|
||||
@if (current_customer() || !request('iframe'))
|
||||
@hookwrapper('product.detail.wishlist')
|
||||
<div class="add-wishlist">
|
||||
<button class="btn btn-link ps-0 text-secondary" data-in-wishlist="{{ $product['in_wishlist'] }}" onclick="bk.addWishlist('{{ $product['id'] }}', this)">
|
||||
<i class="bi bi-heart{{ $product['in_wishlist'] ? '-fill' : '' }} me-1"></i> {{ __('shop/products.add_to_favorites') }}
|
||||
{{--操作内容--}}
|
||||
<div class="operating-content mb-4">
|
||||
{{--点击加入购物车--}}
|
||||
@hookwrapper('product.detail.add_to_cart')
|
||||
<button class="btn btn-outline-dark ms-md-3 add-cart fw-bold" :product-id="product.id" :product-price="product.price" :disabled="!product.quantity" @click="addCart(false, this)">
|
||||
<i class="bi bi-cart-fill me-1"></i>{{ __('shop/products.add_to_cart') }}
|
||||
</button>
|
||||
@endhookwrapper
|
||||
{{-- 直接下单产品 - 显示立即购买按钮 --}}
|
||||
@if ($product['active'])
|
||||
@hookwrapper('product.detail.buy_now')
|
||||
<button class="btn btn-dark ms-3 fw-bold" :disabled="!product.quantity" :product-id="product.id" :product-price="product.price" @click="addCart(true, this)">
|
||||
<i class="bi bi-bag-fill me-1"></i>{{ __('shop/products.buy_now') }}
|
||||
</button>
|
||||
</div>
|
||||
@endhookwrapper
|
||||
@endif
|
||||
@else
|
||||
{{-- <div class="text-danger"><i class="bi bi-exclamation-circle-fill"></i> {{ __('product.has_been_inactive') }}</div>--}}
|
||||
<div class="quantity-btns">
|
||||
@hook('product.detail.buy.before')
|
||||
@hookwrapper('product.detail.quantity.input')
|
||||
<div class="quantity-wrap">
|
||||
<input type="text" class="form-control" :disabled="!product.quantity" onkeyup="this.value=this.value.replace(/\D/g,'')" v-model="quantity" name="quantity">
|
||||
<div class="right" v-if="!isNumSelect">
|
||||
<i class="bi bi-chevron-up"></i>
|
||||
<i class="bi bi-chevron-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
@endhookwrapper
|
||||
@hookwrapper('product.detail.add_to_cart')
|
||||
<button
|
||||
class="btn btn-outline-dark ms-md-3 add-cart fw-bold"
|
||||
:product-id="product.id"
|
||||
:product-price="product.price"
|
||||
:disabled="!product.quantity"
|
||||
@click="addCart(false, this)"
|
||||
><i class="bi bi-cart-fill me-1"></i>{{ __('shop/products.add_to_cart') }}
|
||||
</button>
|
||||
@endhookwrapper
|
||||
@endhookwrapper
|
||||
@endif
|
||||
@hook('product.detail.buy.after')
|
||||
{{-- 加入收藏 --}}
|
||||
@if ((current_customer() || !request('iframe')))
|
||||
@hookwrapper('product.detail.wishlist')
|
||||
<button class="btn btn-link ms-3 text-secondary" data-in-wishlist="{{ $product['in_wishlist'] }}" onclick="bk.addWishlist('{{ $product['id'] }}', this)">
|
||||
@if ($product['in_wishlist'])
|
||||
<i class="bi bi-heart-fill me-1"></i> {{ __('shop/products.cancel_to_favorites') }}
|
||||
@else
|
||||
<i class="bi bi-heart me-1"></i> {{ __('shop/products.add_to_favorites') }}
|
||||
@endif
|
||||
</button>
|
||||
@endhookwrapper
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
{{--价格实时计算--}}
|
||||
<ul class="totals">
|
||||
<li><span>Product Total</span><span>@{{ product_total }}</span></li>
|
||||
<li><span>Shipping Fee</span><span>@{{ shipping_fee }}</span></li>
|
||||
<li><span>Order Total</span><span>@{{ order_tota }}</span></li>
|
||||
<li>
|
||||
<span>{{ __('shop/products.product_total') }}</span>
|
||||
<span>@{{ product_total }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>{{ __('shop/products.shipping_fee') }}</span>
|
||||
<span>@{{ shipping_fee }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>{{ __('shop/products.order_total') }}</span>
|
||||
<span>@{{ order_tota }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<button
|
||||
style="width: 16em;"
|
||||
|
|
@ -457,13 +517,12 @@
|
|||
trigger: 'blur'
|
||||
},],
|
||||
},
|
||||
},
|
||||
// 多规格批量购买
|
||||
add_buy_sku:{},
|
||||
|
||||
},
|
||||
watch: {
|
||||
quantity: function (newval, oldval) {
|
||||
|
||||
console.log("数量改变");
|
||||
|
||||
let price = 0;
|
||||
if (this.numPrices.light == 0) {
|
||||
price = this.product.price
|
||||
|
|
@ -479,9 +538,8 @@
|
|||
this.product_total = (price * this.quantity).toFixed(2)
|
||||
this.shipping_fee = (this.product_total * 0.1).toFixed(2)
|
||||
this.order_tota = (this.product_total * 1 + this.shipping_fee * 1).toFixed(2)
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
if (this.price_setting === 'num') {
|
||||
// this.quantity = this.numPrices[0].num;
|
||||
|
|
@ -495,7 +553,6 @@
|
|||
})
|
||||
})
|
||||
},
|
||||
|
||||
beforeMount() {
|
||||
const skus = JSON.parse(JSON.stringify(this.source.skus));
|
||||
const skuDefault = skus.find(e => e.is_default)
|
||||
|
|
@ -519,7 +576,6 @@
|
|||
this.images = @json($product['images'] ?? []);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
quantityChange() {
|
||||
setTimeout(() => {
|
||||
|
|
@ -565,14 +621,12 @@
|
|||
this.getSelectedSku();
|
||||
this.updateSelectedVariantsStatus()
|
||||
},
|
||||
|
||||
// 把对应 selectedVariantsIndex 下标选中 variables -> values 的 selected 字段为 true
|
||||
checkedVariants() {
|
||||
this.source.variables.forEach((variable, index) => {
|
||||
variable.values[this.selectedVariantsIndex[index]].selected = true
|
||||
})
|
||||
},
|
||||
|
||||
getSelectedSku(reload = true) {
|
||||
// 通过 selectedVariantsIndex 的值比对 skus 的 variables
|
||||
const sku = this.source.skus.find(sku => sku.variants.toString() == this.selectedVariantsIndex.toString())
|
||||
|
|
@ -597,14 +651,75 @@
|
|||
|
||||
closeVideo()
|
||||
},
|
||||
updateSelectedVariantsIndex() {
|
||||
// 获取选中的 variables 内 value的 下标 index 填充到 selectedVariantsIndex 中
|
||||
this.source.variables.forEach((variable, index) => {
|
||||
variable.values.forEach((value, value_index) => {
|
||||
if (value.selected) {
|
||||
this.selectedVariantsIndex[index] = value_index
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
updateSelectedVariantsStatus() {
|
||||
// skus 里面 quantity 不为 0 的 sku.variants
|
||||
const skus = this.source.skus.filter(sku => sku.quantity > 0).map(sku => sku.variants);
|
||||
this.source.variables.forEach((variable, index) => {
|
||||
variable.values.forEach((value, value_index) => {
|
||||
const selectedVariantsIndex = this.selectedVariantsIndex.slice(0);
|
||||
|
||||
selectedVariantsIndex[index] = value_index;
|
||||
const selectedSku = skus.find(sku => sku.toString() == selectedVariantsIndex.toString());
|
||||
if (selectedSku) {
|
||||
value.disabled = false;
|
||||
} else {
|
||||
value.disabled = true;
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
|
||||
// 提交购物车
|
||||
addCart(isBuyNow = false) {
|
||||
if (this.price_setting === 'num' && this.quantity < this.numPrices[0].num) {
|
||||
layer.msg('{{ __('shop/products.quantity_error') }}');
|
||||
return;
|
||||
let _this = this;
|
||||
let params = {};
|
||||
// 判断：当前商品如果是单规格则使用旧版本下单流程 为多规格则使用新版本下单流程
|
||||
if(Object.keys(_this.source.skus).length > 1){
|
||||
// 多规格
|
||||
if (Object.keys(_this.add_buy_sku).length <= 0) {
|
||||
layer.msg('{{ __('shop/products.buy_sku_error') }}');
|
||||
return;
|
||||
}
|
||||
// 购买数量判断
|
||||
let total = 0;
|
||||
Object.values(_this.add_buy_sku).forEach((item,index) =>{
|
||||
total += parseInt(item.quantity);
|
||||
})
|
||||
if(total <= 0){
|
||||
layer.msg('{{ __('shop/products.quantity_error') }}');
|
||||
return;
|
||||
}
|
||||
// 请求参数
|
||||
params = {
|
||||
isBuyNow,
|
||||
sku_id: JSON.stringify(_this.add_buy_sku) || {},
|
||||
quantity: 1,
|
||||
};
|
||||
}else{
|
||||
// 单规格
|
||||
if (_this.quantity <= 0 || _this.quantity > _this.product.quantity) {
|
||||
layer.msg('{{ __('shop/products.quantity_error') }}');
|
||||
return;
|
||||
}
|
||||
// 请求参数
|
||||
params = {
|
||||
sku_id: _this.product.id,
|
||||
quantity: _this.quantity,
|
||||
isBuyNow
|
||||
};
|
||||
}
|
||||
|
||||
bk.addCart({sku_id: this.product.id, quantity: this.quantity, isBuyNow}, null, () => {
|
||||
// 提交内容
|
||||
bk.addCart(params, null, () => {
|
||||
if (isIframe) {
|
||||
let index = parent.layer.getFrameIndex(window.name); //当前iframe层的索引
|
||||
parent.bk.getCarts();
|
||||
|
|
@ -625,35 +740,55 @@
|
|||
}
|
||||
});
|
||||
},
|
||||
|
||||
updateSelectedVariantsIndex() {
|
||||
// 获取选中的 variables 内 value的 下标 index 填充到 selectedVariantsIndex 中
|
||||
this.source.variables.forEach((variable, index) => {
|
||||
variable.values.forEach((value, value_index) => {
|
||||
if (value.selected) {
|
||||
this.selectedVariantsIndex[index] = value_index
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
updateSelectedVariantsStatus() {
|
||||
// skus 里面 quantity 不为 0 的 sku.variants
|
||||
const skus = this.source.skus.filter(sku => sku.quantity > 0).map(sku => sku.variants);
|
||||
this.source.variables.forEach((variable, index) => {
|
||||
variable.values.forEach((value, value_index) => {
|
||||
const selectedVariantsIndex = this.selectedVariantsIndex.slice(0);
|
||||
|
||||
selectedVariantsIndex[index] = value_index;
|
||||
const selectedSku = skus.find(sku => sku.toString() == selectedVariantsIndex.toString());
|
||||
if (selectedSku) {
|
||||
value.disabled = false;
|
||||
} else {
|
||||
value.disabled = true;
|
||||
}
|
||||
})
|
||||
// 点击添加公共
|
||||
clickAddBuySku(){
|
||||
let _this = this;
|
||||
let product = {
|
||||
id: _this.product.id,
|
||||
model: _this.product.model,
|
||||
sku: _this.product.sku,
|
||||
origin_price: _this.product.origin_price,
|
||||
price: _this.product.price,
|
||||
total_price: 0,
|
||||
quantity: 0,// 当前购买数量
|
||||
stock: _this.product.quantity,// 当前商品库存
|
||||
sku_info: {},
|
||||
};
|
||||
// 获取规格信息
|
||||
let variables = _this.source.variables;
|
||||
let variants = _this.product.variants;
|
||||
variants.forEach((index,key) => {
|
||||
let variablesInfo = variables[key];
|
||||
product.sku_info[key] = {
|
||||
name: variablesInfo.name,
|
||||
value: variablesInfo.values[index].name,
|
||||
};
|
||||
});
|
||||
_this.add_buy_sku[product.id] = product;
|
||||
_this.$forceUpdate();
|
||||
},
|
||||
// 多规格 - 某个规格的购买数量改变
|
||||
skuQuantityChange(event,skuIndex){
|
||||
let _this = this;
|
||||
_this.add_buy_sku[skuIndex].quantity = event.target.value || 0;
|
||||
// // 计算金额
|
||||
// let addBuySku = Object.values(_this.add_buy_sku);
|
||||
// let product_total = parseInt(0),
|
||||
// shipping_fee = parseInt(0),
|
||||
// order_tota = parseInt(0);
|
||||
// addBuySku.forEach((item,index) =>{
|
||||
// product_total += parseFloat((parseFloat(item.price) * parseInt(item.quantity)).toFixed(2))
|
||||
// shipping_fee += parseFloat((parseFloat(product_total) * 0.1).toFixed(2))
|
||||
// order_tota += parseFloat((parseFloat(product_total) + parseFloat(shipping_fee)).toFixed(2))
|
||||
// })
|
||||
// _this.product_total = product_total;
|
||||
// _this.shipping_fee = shipping_fee;
|
||||
// _this.order_tota = order_tota;
|
||||
|
||||
_this.$forceUpdate();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue