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

修改:商品详情页面价格布局优化

This commit is contained in:
wuhui_zzw 2023-10-08 14:33:24 +08:00
parent 2f608f6861
commit b35b056803
2 changed files with 67 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/image/trade_term_web.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 273 KiB

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

@ -154,7 +154,28 @@
.num-min-order{
position: absolute;
bottom: 5px;
left: 90px;
left: 85px;
}
.sku-price-wrap{
position: relative;
flex-direction: row;
flex-wrap: wrap;
}
.sku-price-wrap-content{
width: 100%;
font-size: 2rem !important;
line-height: 20px !important;
font-weight: 700 !important;
}
.num-item-content{
white-space: nowrap;
color: #777777;
font-size: 18px;
margin-bottom: 5px;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
</style>
<div class="container {{ request('iframe') ? 'pt-4' : '' }}" id="product-app" v-cloak>
@ -201,50 +222,63 @@
<h1 class="mb-4 product-name">{{ $product['name'] }}</h1>
@endhookwrapper
@hookwrapper('product.detail.price')
<div class="price-wrap d-flex align-items-end" v-if="price_setting === 'sku'" style="position: relative;">
<div class="new-price fs-1 lh-1 fw-bold me-2">{{$product['trade_term'] ?? 'DAP'}}：</div>
<div class="new-price fs-1 lh-1 fw-bold me-2">@{{ product.price_format }}</div>
<div class="new-price fs-1 lh-1 fw-bold me-2">-</div>
<div class="old-price fs-1 lh-1 fw-bold me-2" v-if="product.price != product.origin_price && product.origin_price !== 0">@{{ product.origin_price_format }}</div>
@if($product['unit'])
<div style="font-size: 15px;color: #999999;">/ {{explode('/',$product['unit'])[0]}}&nbsp;|</div>
@endif
<div v-if="minimum_order > 0" style="font-size: 15px;color: #101010;">
@if($product['sales_method'] == 'piece')
&nbsp;{{ $product['minimum_order'] }} {{explode('/',$product['unit'])[1]}}<span style="color: #999999;">({{__('product.minimum_order')}})</span>
@else
&nbsp;{{ ($product['piece_to_batch'] * $product['minimum_order']) }} {{explode('/',$product['unit'])[1]}}<span style="color: #999999;">({{__('product.minimum_order')}})</span>
{{--阶梯价--}}
<div class="price-wrap d-flex align-items-end sku-price-wrap" v-if="price_setting === 'sku'">
<div class="sku-price-wrap-content">
<span style="color: #1a9bff;">
{{$product['trade_term'] ?? 'DAP'}}
<i class="bi bi-question-circle" id="tradeTerm" style="font-size: 15px;"></i>
</span>
@{{ product.price_format }} -
<span v-if="product.price != product.origin_price && product.origin_price !== 0">@{{ product.origin_price_format }}</span>
@if($product['unit'])
<span>/ {{explode('/',$product['unit'])[0]}}</span>
@endif
<span v-if="minimum_order > 0" style="font-size: 15px;color: #484848;">
@if($product['sales_method'] == 'piece')
|&nbsp;{{ $product['minimum_order'] }} {{explode('/',$product['unit'])[1]}}<span style="color: #999999;">({{__('product.minimum_order')}})</span>
@else
|&nbsp;{{ ($product['piece_to_batch'] * $product['minimum_order']) }} {{explode('/',$product['unit'])[1]}}
<span style="color: #999999;">({{__('product.minimum_order')}})</span>
@endif
</span>
</div>
{{--<span class="new-price fs-1 lh-1 fw-bold me-2">{{$product['trade_term'] ?? 'DAP'}}</span>--}}
{{--<span class="new-price fs-1 lh-1 fw-bold me-2">@{{ product.price_format }}</span>--}}
{{--<span class="new-price fs-1 lh-1 fw-bold me-2">-</span>--}}
{{--<span class="old-price fs-1 lh-1 fw-bold me-2" v-if="product.price != product.origin_price && product.origin_price !== 0">@{{ product.origin_price_format }}</span>--}}
{{--@if($product['unit'])--}}
{{-- <span class="new-price fs-1 lh-1 fw-bold me-2">/ {{explode('/',$product['unit'])[0]}}&nbsp;|</span>--}}
{{--@endif--}}
{{--<span v-if="minimum_order > 0" style="font-size: 15px;color: #101010;">--}}
{{-- @if($product['sales_method'] == 'piece')--}}
{{-- &nbsp;{{ $product['minimum_order'] }} {{explode('/',$product['unit'])[1]}}<span style="color: #999999;">({{__('product.minimum_order')}})</span>--}}
{{-- @else--}}
{{-- &nbsp;{{ ($product['piece_to_batch'] * $product['minimum_order']) }} {{explode('/',$product['unit'])[1]}}<span style="color: #999999;">({{__('product.minimum_order')}})</span>--}}
{{-- @endif--}}
{{--</span>--}}
@if($product['sales_method'] == 'batches')
<div class="sku-min-order">
<span class="sku-min-order">
{{__('product.minimum_order')}}：@{{ minimum_order }}
{{ __('product.batches') }}
（1 {{ __('product.batches') }} = {{ $product['piece_to_batch'] }} {{ strpos($product['unit'], '/') !== false ? explode('/',$product['unit'])[0] : $product['unit']}} in total）
</div>
</span>
@endif
</div>
{{--阶梯价--}}
<div class="num-price-content price-wrap d-flex align-items-end" v-if="price_setting === 'num'">
<div class="item" style="color: #1a9bff;font-size: 18px;height: 54px;line-height: 54px;display: inline-flex;">
<div class="item" style="color: #1a9bff;font-size: 18px;height: 54px;line-height: 54px;display: inline-flex;margin-right:10px;">
{{$product['trade_term'] ?? 'DAP'}}
<div style="width: 25px;height: 54px;text-align: center;float: left;font-size: 15px;">
<i class="bi bi-question-circle" id="tradeTerm"></i>
</div>：
</div>
<div class="item" v-for="(item,index) in numPrices" style="flex: 1">
<div class="num" v-if="index < numPrices.length - 1" style="
white-space: nowrap;
color: #777777;
font-size: 18px;
margin-bottom: 5px;
">@{{ item.num }} - @{{ numPrices[index + 1].num - 1 }} {{ strpos($product['unit'], '/') !== false ? explode('/',$product['unit'])[1] : $product['unit']}}
</div>
<div class="num" v-else-if="item.num" style="
white-space: nowrap;
color: #777777;
font-size: 18px;
margin-bottom: 5px;
">>= @{{ item.num }} {{ strpos($product['unit'], '/') !== false ? explode('/',$product['unit'])[1] : $product['unit']}}
</div>
<div class="item" v-for="(item,index) in numPrices" style="flex: 1" :style="{width: 100 / numPrices.length + '%'}">
<div class="num num-item-content" v-if="index < numPrices.length - 1">
@{{ item.num }} - @{{ numPrices[index + 1].num - 1 }} {{ strpos($product['unit'], '/') !== false ? explode('/',$product['unit'])[1] : $product['unit']}}
</div>
<div class="num num-item-content" v-else-if="item.num">
>= @{{ item.num }} {{ strpos($product['unit'], '/') !== false ? explode('/',$product['unit'])[1] : $product['unit']}}
</div>
<div class="price">
<div class="new-price fs-3 lh-1 fw-bold me-2">@{{ item.price_format }}</div>
@ -1189,7 +1223,7 @@
html: true,//开启html 为true的话，data-content里就能放html代码了
placement: 'bottom',
delay: { "show": 0, "hide": 100 },
content:"<img class='trade-term-img' src='image/trade_term.png'>"
content:"<img class='trade-term-img' src='image/trade_term_web.png'>"
});
});