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

列表页优化

This commit is contained in:
pushuo 2022-08-12 19:30:03 +08:00
parent 0303420679
commit d269352143
6 changed files with 55 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -676,42 +676,9 @@ footer .footer-bottom {
display: flex;
justify-content: center;
}
.product-wrap .image .button-wrap button {
position: relative;
}
.product-wrap .image .button-wrap button > span {
font-size: 11px;
text-transform: none;
line-height: 18px;
transition: all 0.2s ease-in-out;
opacity: 0;
background-color: #000;
padding: 0 5px;
white-space: nowrap;
position: absolute;
bottom: calc(100% + 20px);
left: 50%;
transform: translate(-50%);
visibility: hidden;
}
.product-wrap .image .button-wrap button > span::before {
content: "";
border: 5px solid transparent;
border-top-color: #000;
position: absolute;
bottom: -9px;
left: 50%;
margin-left: -5px;
}
.product-wrap .image .button-wrap button:hover {
background-color: rgb(70, 70, 70);
}
.product-wrap .image .button-wrap button:hover span {
opacity: 1;
bottom: calc(100% + 7px);
z-index: 2;
visibility: visible;
}
.product-wrap .image:hover .image-hover {
opacity: 1;
transition: all ease-out 0.4s;

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

@ -2111,14 +2111,23 @@ __webpack_require__.r(__webpack_exports__);
* @param {*} isBuyNow 是否立即购买
* @return {*} 返回Promise
*/
addCart: function addCart(sku_id) {
addCart: function addCart(_ref, event) {
var _this = this;
var quantity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
var isBuyNow = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var sku_id = _ref.sku_id,
_ref$quantity = _ref.quantity,
quantity = _ref$quantity === void 0 ? 1 : _ref$quantity,
_ref$isBuyNow = _ref.isBuyNow,
isBuyNow = _ref$isBuyNow === void 0 ? false : _ref$isBuyNow;
var $btn = $(event);
var btnHtml = $btn.html();
var loadHtml = '<span class="spinner-border spinner-border-sm"></span>';
$btn.html(loadHtml).prop('disabled', true);
$http.post('/carts', {
sku_id: sku_id,
quantity: quantity
}, {
hload: !!event
}).then(function (res) {
_this.getCarts();
@ -2127,13 +2136,15 @@ __webpack_require__.r(__webpack_exports__);
if (isBuyNow) {
location.href = 'checkout';
}
})["finally"](function () {
$btn.html(btnHtml).prop('disabled', false);
});
},
addWishlist: function addWishlist(id, e) {
var $btn = $(e);
var isWishlist = $btn.attr('data-in-wishlist') * 1;
addWishlist: function addWishlist(id, event) {
var $btn = $(event);
var btnHtml = $btn.html();
var loadHtml = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';
var isWishlist = $btn.attr('data-in-wishlist') * 1;
var loadHtml = '<span class="spinner-border spinner-border-sm"></span>';
if (isWishlist) {
$btn.html(loadHtml).prop('disabled', true);
@ -2142,9 +2153,8 @@ __webpack_require__.r(__webpack_exports__);
}).then(function (res) {
layer.msg(res.message);
$btn.attr('data-in-wishlist', '0');
$btn.find('i.bi').prop('class', 'bi bi-heart me-1');
})["finally"](function () {
$btn.html(btnHtml).prop('disabled', false);
$btn.html(btnHtml).prop('disabled', false).find('i.bi').prop('class', 'bi bi-heart');
});
} else {
$btn.html(loadHtml).prop('disabled', true);
@ -2155,9 +2165,8 @@ __webpack_require__.r(__webpack_exports__);
}).then(function (res) {
layer.msg(res.message);
$btn.attr('data-in-wishlist', res.data.id);
$btn.find('i.bi').prop('class', 'bi bi-heart-fill me-1');
})["finally"](function () {
$btn.html(btnHtml).prop('disabled', false);
$btn.html(btnHtml).prop('disabled', false).find('i.bi').prop('class', 'bi bi-heart-fill');
});
}
},

35
resources/beike/shop/default/css/product-style.scss vendored
View File

@ -33,43 +33,8 @@
justify-content: center;
button {
position: relative;
>span {
font-size: 11px;
text-transform: none;
line-height: 18px;
transition: all .2s ease-in-out;
opacity: 0;
background-color: #000;
padding: 0 5px;
white-space: nowrap;
position: absolute;
bottom: calc(100% + 20px);
left: 50%;
transform: translate(-50%);
visibility: hidden;
&::before {
content: "";
border: 5px solid transparent;
border-top-color: #000;
position: absolute;
bottom: -9px;
left: 50%;
margin-left: -5px;
}
}
&:hover {
background-color: rgb(70, 70, 70);
span {
opacity: 1;
bottom: calc(100% + 7px);
z-index: 2;
visibility: visible;
}
}
}
}

29
resources/beike/shop/default/js/common.js vendored
View File

@ -44,36 +44,43 @@ export default {
* @param {*} isBuyNow 是否立即购买
* @return {*} 返回Promise
*/
addCart(sku_id, quantity = 1, isBuyNow = false) {
$http.post('/carts', {sku_id, quantity}).then((res) => {
addCart({sku_id, quantity = 1, isBuyNow = false}, event) {
const $btn = $(event);
const btnHtml = $btn.html();
const loadHtml = '<span class="spinner-border spinner-border-sm"></span>';
$btn.html(loadHtml).prop('disabled', true);
$http.post('/carts', {sku_id, quantity}, {hload: !!event}).then((res) => {
this.getCarts();
layer.msg(res.message)
if (isBuyNow) {
location.href = 'checkout'
}
})
}).finally(() => {$btn.html(btnHtml).prop('disabled', false)})
},
addWishlist(id, e) {
const $btn = $(e);
let isWishlist = $btn.attr('data-in-wishlist') * 1;
addWishlist(id, event) {
const $btn = $(event);
const btnHtml = $btn.html();
const loadHtml = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';
const isWishlist = $btn.attr('data-in-wishlist') * 1;
const loadHtml = '<span class="spinner-border spinner-border-sm"></span>';
if (isWishlist) {
$btn.html(loadHtml).prop('disabled', true);
$http.delete(`account/wishlist/${isWishlist}`, null, {hload: true}).then((res) => {
layer.msg(res.message)
$btn.attr('data-in-wishlist', '0');
$btn.find('i.bi').prop('class', 'bi bi-heart me-1')
}).finally(() => {$btn.html(btnHtml).prop('disabled', false)})
}).finally(() => {
$btn.html(btnHtml).prop('disabled', false).find('i.bi').prop('class', 'bi bi-heart')
})
} else {
$btn.html(loadHtml).prop('disabled', true);
$http.post('account/wishlist', {product_id: id}, {hload: true}).then((res) => {
layer.msg(res.message)
$btn.attr('data-in-wishlist', res.data.id);
$btn.find('i.bi').prop('class', 'bi bi-heart-fill me-1')
}).finally(() => {$btn.html(btnHtml).prop('disabled', false)})
}).finally(() => {
$btn.html(btnHtml).prop('disabled', false).find('i.bi').prop('class', 'bi bi-heart-fill')
})
}
},

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

@ -96,13 +96,13 @@
<button
class="btn btn-outline-dark ms-3 add-cart"
:disabled="!product.quantity"
@click="addCart(false)"
@click="addCart(false, this)"
><i class="bi bi-cart-fill me-1"></i>加入购物车
</button>
<button
class="btn btn-dark ms-3"
:disabled="!product.quantity"
@click="addCart(true)"
@click="addCart(true, this)"
><i class="bi bi-bag-fill me-1"></i>立即购买
</button>
</div>
@ -215,7 +215,7 @@
},
addCart(isBuyNow = false) {
bk.addCart(this.product.id, this.quantity, isBuyNow);
bk.addCart({sku_id: this.product.id, quantity: this.quantity, isBuyNow});
},
updateSelectedVariantsIndex() {

20
themes/default/shared/product.blade.php
View File

@ -9,14 +9,22 @@
</div>
</a>
<div class="button-wrap">
<button class="btn btn-dark text-light mx-1 rounded-3" data-in-wishlist="{{ $product['in_wishlist'] }}" onclick="bk.addWishlist('{{ $product['id'] }}', this)">
{{-- <i class="iconfont">&#xe77f;</i> --}}
<button
class="btn btn-dark text-light mx-1 rounded-3"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="加入收藏"
data-in-wishlist="{{ $product['in_wishlist'] }}"
onclick="bk.addWishlist('{{ $product['id'] }}', this)">
<i class="bi bi-heart{{ $product['in_wishlist'] ? '-fill' : '' }}"></i>
<span>加入收藏</span>
</button>
<button class="btn btn-dark text-light mx-1 rounded-3" onclick="bk.addCart({{ $product['sku_id'] }})">
<i class="iconfont">&#xf13a;</i>
<span>加入购物车</span>
<button
class="btn btn-dark text-light mx-1 rounded-3"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="加入购物车"
onclick="bk.addCart({sku_id: '{{ $product['sku_id'] }}'}, this)">
<i class="bi bi-cart"></i>
</button>
</div>
</div>