From c3f38d9a84b015d0b2e41890a2a73abcf100b980 Mon Sep 17 00:00:00 2001 From: pushuo <229102104@qq.com> Date: Thu, 4 Aug 2022 17:52:30 +0800 Subject: [PATCH] wip --- public/build/beike/shop/default/js/app.js | 258 +++++++++++---------- resources/beike/shop/default/js/app.js | 111 +-------- resources/beike/shop/default/js/global.js | 71 ++++++ resources/beike/shop/default/js/header.js | 11 + resources/beike/shop/default/js/product.js | 17 ++ themes/default/product.blade.php | 8 +- 6 files changed, 244 insertions(+), 232 deletions(-) create mode 100644 resources/beike/shop/default/js/global.js create mode 100644 resources/beike/shop/default/js/header.js create mode 100644 resources/beike/shop/default/js/product.js diff --git a/public/build/beike/shop/default/js/app.js b/public/build/beike/shop/default/js/app.js index da464239..0469a502 100644 --- a/public/build/beike/shop/default/js/app.js +++ b/public/build/beike/shop/default/js/app.js @@ -2052,6 +2052,127 @@ module.exports = { }; +/***/ }), + +/***/ "./resources/beike/shop/default/js/global.js": +/*!***************************************************!*\ + !*** ./resources/beike/shop/default/js/global.js ***! + \***************************************************/ +/***/ (() => { + +// 创建 bk 对象 +window.bk = window.bk || {}; // 获取购物车数据 + +bk.getCarts = function () { + $http.get('carts/mini', null, { + hload: true + }).then(function (res) { + $('.offcanvas-right-cart-amount').html(res.data.amount_format); + + if (res.data.carts.length) { + $('.navbar-icon-link-badge').html(res.data.carts.length > 99 ? '99+' : res.data.carts.length).show(); + $('.offcanvas-right-cart-count').html(res.data.quantity); + var html = ''; + res.data.carts.forEach(function (e) { + html += '
'; + html += "
"); + html += '
'; + html += "
".concat(e.name, "
"); + html += '
'; + html += "
".concat(e.price_format, " x ").concat(e.quantity, "
"); + html += " \u5220\u9664"); + html += '
'; + html += '
'; + html += '
'; + }); + $('.offcanvas-right-products').html(html); + } + }); +}; // 加入购物车 + + +bk.addCart = function (sku_id) { + var quantity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1; + var isBuyNow = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; + $http.post('/carts', { + sku_id: sku_id, + quantity: quantity + }).then(function (res) { + bk.getCarts(); + layer.msg(res.message); + + if (isBuyNow) { + location.href = 'checkout'; + } + }); +}; // 滑动固定顶部 + + +bk.slidingFixed = function () { + $(document).ready(function () { + if (!$('.fixed-top-line').length) return; + if ($(window).width() < 768) return; + var totalWrapTop = $('.fixed-top-line').offset().top; + var totalWrapWidth = $('.fixed-top-line').outerWidth(); + var totalWrapHeight = $('.fixed-top-line').outerHeight(); + var totalWrapLeft = $('.fixed-top-line').offset().left; + var footerTop = $('footer').offset().top; + var footerMarginTop = Math.abs(parseInt($('footer').css("marginTop"))); + $(window).scroll(function () { + if ($(this).scrollTop() > totalWrapTop) { + $('.fixed-top-line').css({ + position: 'fixed', + top: 0, + bottom: 'auto', + 'width': totalWrapWidth + }); + + if (!$('.total-old').length) { + $('.fixed-top-line').before('
'); + } + + if ($(this).scrollTop() + totalWrapHeight > footerTop - footerMarginTop) { + $('.fixed-top-line').css({ + position: 'absolute', + top: 'auto', + bottom: '0', + 'width': totalWrapWidth + }); + } + } else { + $('.total-old').remove(); + $('.fixed-top-line').removeAttr('style'); + } + }); + }); +}; + +/***/ }), + +/***/ "./resources/beike/shop/default/js/product.js": +/*!****************************************************!*\ + !*** ./resources/beike/shop/default/js/product.js ***! + \****************************************************/ +/***/ (() => { + +$(document).on('click', '.quantity-wrap .right i', function (event) { + event.stopPropagation(); + var input = $(this).parent().siblings('input'); + + if ($(this).hasClass('bi-chevron-up')) { + input.val(input.val() * 1 + 1); + input.get(0).dispatchEvent(new Event('input')); + return; + } + + if (input.val() * 1 <= input.attr('minimum') * 1) { + return; + } + + input.val(input.val() * 1 - 1); + input.get(0).dispatchEvent(new Event('input')); +}); + /***/ }), /***/ "./resources/js/http.js": @@ -2430,6 +2551,18 @@ module.exports = JSON.parse('{"name":"axios","version":"0.21.4","description":"P /******/ } /******/ /************************************************************************/ +/******/ /* webpack/runtime/compat get default export */ +/******/ (() => { +/******/ // getDefaultExport function for compatibility with non-harmony modules +/******/ __webpack_require__.n = (module) => { +/******/ var getter = module && module.__esModule ? +/******/ () => (module['default']) : +/******/ () => (module); +/******/ __webpack_require__.d(getter, { a: getter }); +/******/ return getter; +/******/ }; +/******/ })(); +/******/ /******/ /* webpack/runtime/define property getters */ /******/ (() => { /******/ // define getter functions for harmony exports @@ -2468,128 +2601,17 @@ var __webpack_exports__ = {}; \************************************************/ __webpack_require__.r(__webpack_exports__); /* harmony import */ var _js_http__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../js/http */ "./resources/js/http.js"); +/* harmony import */ var _global__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./global */ "./resources/beike/shop/default/js/global.js"); +/* harmony import */ var _global__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_global__WEBPACK_IMPORTED_MODULE_1__); +/* harmony import */ var _product__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./product */ "./resources/beike/shop/default/js/product.js"); +/* harmony import */ var _product__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_product__WEBPACK_IMPORTED_MODULE_2__); -window.$http = _js_http__WEBPACK_IMPORTED_MODULE_0__["default"]; // 创建 bk 对象 - -window.bk = window.bk || {}; -$(document).ready(function ($) { - $.ajaxSetup({ - headers: { - 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') - }, - beforeSend: function beforeSend() { - layer.load(2, { - shade: [0.3, '#fff'] - }); - }, - complete: function complete() { - layer.closeAll('loading'); - } - }); - bk.getCarts(); - $(document).on('click', '.offcanvas-products-delete', function (event) { - var $this = $(this); - var cartId = $(this).data('id'); - $http["delete"]("/carts/".concat(cartId)).then(function (res) { - $this.parents('.product-list').remove(); - $('.offcanvas-right-cart-count').html(res.data.quantity); - $('.offcanvas-right-cart-amount').html(res.data.amount_format); - }); - }); - $(document).on('click', '.quantity-wrap .right i', function (event) { - event.stopPropagation(); - var input = $(this).parent().siblings('input'); - - if ($(this).hasClass('bi-chevron-up')) { - input.val(input.val() * 1 + 1); - input.get(0).dispatchEvent(new Event('input')); - return; - } - - if (input.val() * 1 <= input.attr('minimum') * 1) { - return; - } - - input.val(input.val() * 1 - 1); - input.get(0).dispatchEvent(new Event('input')); - }); // 滑动固定顶部 - - (function ($) { - if (!$('.fixed-top-line').length) return; - if ($(window).width() < 768) return; - var totalWrapTop = $('.fixed-top-line').offset().top; - var totalWrapWidth = $('.fixed-top-line').outerWidth(); - var totalWrapHeight = $('.fixed-top-line').outerHeight(); - var totalWrapLeft = $('.fixed-top-line').offset().left; - var footerTop = $('footer').offset().top; - var footerMarginTop = Math.abs(parseInt($('footer').css("marginTop"))); - $(window).scroll(function () { - if ($(this).scrollTop() > totalWrapTop) { - $('.fixed-top-line').css({ - position: 'fixed', - top: 0, - bottom: 'auto', - 'width': totalWrapWidth - }); - - if (!$('.total-old').length) { - $('.fixed-top-line').before('
'); - } - - if ($(this).scrollTop() + totalWrapHeight > footerTop - footerMarginTop) { - $('.fixed-top-line').css({ - position: 'absolute', - top: 'auto', - bottom: '0', - 'width': totalWrapWidth - }); - } - } else { - $('.total-old').remove(); - $('.fixed-top-line').removeAttr('style'); - } - }); - })(window.jQuery); // offcanvas-search-top +window.$http = _js_http__WEBPACK_IMPORTED_MODULE_0__["default"]; - var myOffcanvas = document.getElementById('offcanvas-search-top'); - myOffcanvas.addEventListener('shown.bs.offcanvas', function () { - $('#offcanvas-search-top input').focus(); - $('#offcanvas-search-top input').keydown(function (e) { - if (e.keyCode == 13) { - console.log('enter'); - $('#offcanvas-search-top .btn-search').click(); - } - }); - }); -}); +bk.getCarts(); // 页面初始加载购物车数据 -bk.getCarts = function () { - $http.get('carts/mini', null, { - hload: true - }).then(function (res) { - $('.offcanvas-right-cart-amount').html(res.data.amount_format); - - if (res.data.carts.length) { - $('.navbar-icon-link-badge').html(res.data.carts.length > 99 ? '99+' : res.data.carts.length).show(); - $('.offcanvas-right-cart-count').html(res.data.quantity); - var html = ''; - res.data.carts.forEach(function (e) { - html += '
'; - html += "
"); - html += '
'; - html += "
".concat(e.name, "
"); - html += '
'; - html += "
".concat(e.price_format, " x ").concat(e.quantity, "
"); - html += " \u5220\u9664"); - html += '
'; - html += '
'; - html += '
'; - }); - $('.offcanvas-right-products').html(html); - } - }); -}; +bk.slidingFixed(); })(); /******/ })() diff --git a/resources/beike/shop/default/js/app.js b/resources/beike/shop/default/js/app.js index 32602bc0..6a35abb5 100644 --- a/resources/beike/shop/default/js/app.js +++ b/resources/beike/shop/default/js/app.js @@ -1,111 +1,8 @@ import http from "../../../../js/http"; window.$http = http; -// 创建 bk 对象 -window.bk = window.bk || {}; +import './global'; +import './product'; -$(document).ready(function ($) { - $.ajaxSetup({ - headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}, - beforeSend: function() { layer.load(2, {shade: [0.3,'#fff'] }); }, - complete: function() { layer.closeAll('loading'); }, - }); - - bk.getCarts(); - - $(document).on('click', '.offcanvas-products-delete', function(event) { - const $this = $(this) - const cartId = $(this).data('id') - - $http.delete(`/carts/${cartId}`).then((res) => { - $this.parents('.product-list').remove() - $('.offcanvas-right-cart-count').html(res.data.quantity); - $('.offcanvas-right-cart-amount').html(res.data.amount_format); - }) - }) - - $(document).on('click', '.quantity-wrap .right i', function(event) { - event.stopPropagation(); - let input = $(this).parent().siblings('input') - - if ($(this).hasClass('bi-chevron-up')) { - input.val(input.val() * 1 + 1) - input.get(0).dispatchEvent(new Event('input')); - return; - } - - if (input.val() * 1 <= input.attr('minimum') * 1) { - return; - } - - input.val(input.val() * 1 - 1) - input.get(0).dispatchEvent(new Event('input')); - }); - - // 滑动固定顶部 - (function ($) { - if (!$('.fixed-top-line').length) return; - if ($(window).width() < 768) return; - const totalWrapTop = $('.fixed-top-line').offset().top; - const totalWrapWidth = $('.fixed-top-line').outerWidth(); - const totalWrapHeight = $('.fixed-top-line').outerHeight(); - const totalWrapLeft = $('.fixed-top-line').offset().left; - const footerTop = $('footer').offset().top; - const footerMarginTop = Math.abs(parseInt($('footer').css("marginTop"))); - - $(window).scroll(function () { - if ($(this).scrollTop() > totalWrapTop) { - $('.fixed-top-line').css({position: 'fixed', top: 0, bottom: 'auto', 'width': totalWrapWidth}) - if (!$('.total-old').length) { - $('.fixed-top-line').before('
'); - } - - if ($(this).scrollTop() + totalWrapHeight > footerTop - footerMarginTop) { - $('.fixed-top-line').css({position: 'absolute', top: 'auto', bottom: '0', 'width': totalWrapWidth}) - } - } else { - $('.total-old').remove(); - $('.fixed-top-line').removeAttr('style') - } - }) - })(window.jQuery); - - // offcanvas-search-top - var myOffcanvas = document.getElementById('offcanvas-search-top') - myOffcanvas.addEventListener('shown.bs.offcanvas', function () { - $('#offcanvas-search-top input').focus(); - $('#offcanvas-search-top input').keydown(function (e) { - if (e.keyCode == 13) { - console.log('enter'); - $('#offcanvas-search-top .btn-search').click(); - } - }) - }) -}); - -bk.getCarts = function () { - $http.get('carts/mini', null, {hload: true}).then((res) => { - $('.offcanvas-right-cart-amount').html(res.data.amount_format); - - if (res.data.carts.length) { - $('.navbar-icon-link-badge').html(res.data.carts.length > 99 ? '99+' : res.data.carts.length).show(); - $('.offcanvas-right-cart-count').html(res.data.quantity); - - let html = ''; - res.data.carts.forEach(e => { - html += '
'; - html += `
`; - html += '
'; - html += `
${e.name}
`; - html += '
'; - html += `
${e.price_format} x ${e.quantity}
`; - html += ` 删除`; - html += '
'; - html += '
'; - html += '
'; - }) - - $('.offcanvas-right-products').html(html) - } - }) -} \ No newline at end of file +bk.getCarts(); // 页面初始加载购物车数据 +bk.slidingFixed(); \ No newline at end of file diff --git a/resources/beike/shop/default/js/global.js b/resources/beike/shop/default/js/global.js new file mode 100644 index 00000000..21e30d54 --- /dev/null +++ b/resources/beike/shop/default/js/global.js @@ -0,0 +1,71 @@ +// 创建 bk 对象 +window.bk = window.bk || {}; + +// 获取购物车数据 +bk.getCarts = () => { + $http.get('carts/mini', null, {hload: true}).then((res) => { + $('.offcanvas-right-cart-amount').html(res.data.amount_format); + + if (res.data.carts.length) { + $('.navbar-icon-link-badge').html(res.data.carts.length > 99 ? '99+' : res.data.carts.length).show(); + $('.offcanvas-right-cart-count').html(res.data.quantity); + + let html = ''; + res.data.carts.forEach(e => { + html += '
'; + html += `
`; + html += '
'; + html += `
${e.name}
`; + html += '
'; + html += `
${e.price_format} x ${e.quantity}
`; + html += ` 删除`; + html += '
'; + html += '
'; + html += '
'; + }) + + $('.offcanvas-right-products').html(html) + } + }) +} + +// 加入购物车 +bk.addCart = (sku_id, quantity = 1, isBuyNow = false) => { + $http.post('/carts', {sku_id, quantity}).then((res) => { + bk.getCarts(); + layer.msg(res.message) + if (isBuyNow) { + location.href = 'checkout' + } + }) +} + +// 滑动固定顶部 +bk.slidingFixed = () => { + $(document).ready(() => { + if (!$('.fixed-top-line').length) return; + if ($(window).width() < 768) return; + const totalWrapTop = $('.fixed-top-line').offset().top; + const totalWrapWidth = $('.fixed-top-line').outerWidth(); + const totalWrapHeight = $('.fixed-top-line').outerHeight(); + const totalWrapLeft = $('.fixed-top-line').offset().left; + const footerTop = $('footer').offset().top; + const footerMarginTop = Math.abs(parseInt($('footer').css("marginTop"))); + + $(window).scroll(function () { + if ($(this).scrollTop() > totalWrapTop) { + $('.fixed-top-line').css({position: 'fixed', top: 0, bottom: 'auto', 'width': totalWrapWidth}) + if (!$('.total-old').length) { + $('.fixed-top-line').before('
'); + } + + if ($(this).scrollTop() + totalWrapHeight > footerTop - footerMarginTop) { + $('.fixed-top-line').css({position: 'absolute', top: 'auto', bottom: '0', 'width': totalWrapWidth}) + } + } else { + $('.total-old').remove(); + $('.fixed-top-line').removeAttr('style') + } + }) + }) +}; \ No newline at end of file diff --git a/resources/beike/shop/default/js/header.js b/resources/beike/shop/default/js/header.js new file mode 100644 index 00000000..8ff85728 --- /dev/null +++ b/resources/beike/shop/default/js/header.js @@ -0,0 +1,11 @@ +// offcanvas-search-top +var myOffcanvas = document.getElementById('offcanvas-search-top') +myOffcanvas.addEventListener('shown.bs.offcanvas', function () { + $('#offcanvas-search-top input').focus(); + $('#offcanvas-search-top input').keydown(function (e) { + if (e.keyCode == 13) { + console.log('enter'); + $('#offcanvas-search-top .btn-search').click(); + } + }) +}) \ No newline at end of file diff --git a/resources/beike/shop/default/js/product.js b/resources/beike/shop/default/js/product.js new file mode 100644 index 00000000..050d9e11 --- /dev/null +++ b/resources/beike/shop/default/js/product.js @@ -0,0 +1,17 @@ +$(document).on('click', '.quantity-wrap .right i', function(event) { + event.stopPropagation(); + let input = $(this).parent().siblings('input') + + if ($(this).hasClass('bi-chevron-up')) { + input.val(input.val() * 1 + 1) + input.get(0).dispatchEvent(new Event('input')); + return; + } + + if (input.val() * 1 <= input.attr('minimum') * 1) { + return; + } + + input.val(input.val() * 1 - 1) + input.get(0).dispatchEvent(new Event('input')); +}); \ No newline at end of file diff --git a/themes/default/product.blade.php b/themes/default/product.blade.php index 0d6caaa6..a1d8e24c 100644 --- a/themes/default/product.blade.php +++ b/themes/default/product.blade.php @@ -226,13 +226,7 @@ }, addCart(isBuyNow = false) { - $http.post('/carts', {sku_id: this.product.id, quantity: this.quantity}).then((res) => { - bk.getCarts(); - layer.msg(res.message) - if (isBuyNow) { - location.href = '{{ shop_route("checkout.index") }}' - } - }) + bk.addCart(this.product.id, this.quantity, isBuyNow); }, updateSelectedVariantsIndex() {