function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } } function _async_to_generator(fn) { return function() { var self = this, args = arguments; return new Promise(function(resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; } function _ts_generator(thisArg, body) { var f, y, t, g, _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }; return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; function verb(n) { return function(v) { return step([ n, v ]); }; } function step(op) { if (f) throw new TypeError("Generator is already executing."); while(_)try { if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; if (y = 0, t) op = [ op[0] & 2, t.value ]; switch(op[0]){ case 0: case 1: t = op; break; case 4: _.label++; return { value: op[1], done: false }; case 5: _.label++; y = op[1]; op = [ 0 ]; continue; case 7: op = _.ops.pop(); _.trys.pop(); continue; default: if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) { _.label = op[1]; break; } if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } if (t[2]) _.ops.pop(); _.trys.pop(); continue; } op = body.call(thisArg, _); } catch (e) { op = [ 6, e ]; y = 0; } finally{ f = t = 0; } if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; } } _async_to_generator(function() { var goodsId, groupDataJson, goodsAttrSelected, groupDataMap, updateGoodsPrice, res, switchSmallImgAndBigImg, res2, slidesPerView, goodsSmallImgsSwiper, zoomer, zoomImageDragging; return _ts_generator(this, function(_state) { switch(_state.label){ case 0: goodsId = window.goodsPageData.goodsId; groupDataJson = window.goodsPageData.groupDataJson; // 商品选中的属性 goodsAttrSelected = window.goodsPageData.goodsAttrSelected; groupDataMap = {}; Object.keys(groupDataJson).forEach(function(key) { var data = key.split('_'); var item = groupDataMap[data[0]] || []; item.push(data[1]); groupDataMap[data[0]] = item; var item2 = groupDataMap[data[1]] || []; item2.push(data[0]); groupDataMap[data[1]] = item2; }); updateGoodsPrice = function(selectBigImg) { var skuId = goodsAttrSelected.join('_'); var data = groupDataJson[skuId]; if (data) { $('#goods_price').text('$' + data['price']); $('#goods_price_ori').text('$' + data['price_ori']); if (selectBigImg) { $('#goods-big-img').attr('src', data.img_src); $('#goods-imgs-wrap img').addClass('border-transparent').removeClass('border-red-800'); } if (data['price_off'] != 0) { $('#goods_price_off').text(data['price_off']); } else { $('#goods_price_off').text(''); } } }; updateGoodsPrice(false); return [ 4, Request.getBindForGoods({ gid: goodsId }) ]; case 1: res = _state.sent(); $('#goods-unbeatable').html(res); if ($('#bind_data_box').children().length > 0) { $('#goods-unbeatable').show(); } else { $('#goods-unbeatable').hide(); } // 获取捆绑销售的商品 switchSmallImgAndBigImg = function(target) { // 在父元素上捕获子元素的点击事件 target.addClass('border-red-800').addClass('selected').removeClass('border-transparent').siblings().removeClass('border-red-800').removeClass('selected').addClass('border-transparent'); var img = target.attr('src'); $('#goods-big-img').attr('src', img); }; $(document).ready(function() { // ----- 图片预览 ----- // $('#goods-imgs-wrap').on('click', 'img', function () { // // 在父元素上捕获子元素的点击事件 // const img = $(this).attr('src'); // $('#goods-big-img').attr('src', img); // }); $('#goods-imgs-wrap').on('mouseenter', 'img', function() { switchSmallImgAndBigImg($(this)); }); // ------- 商品属性选择 ----- var selectedItem = []; $('.goods-attr').on('click', 'li', function() { if ($(this).hasClass('disabled')) { return; } var id = $(this).data('id'); var type = $(this).data('type'); selectedItem = []; if ($(this).hasClass('selected')) { if (type === 'Color') { $(this).removeClass('selected').css({ boxShadow: 'none' }).find('.tip').addClass('hidden').removeClass('block'); } else { $(this).removeClass('border-black selected').addClass('border-gray-100'); } $('.goods-attr li[data-type!="' + type + '"]').removeClass('disabled'); } else { if (type === 'Color') { var color = $(this).data('color'); // 十六进制颜色转rgba var rgba = color + '33'; var boxShadow = "0px 3px 6px 1px ".concat(rgba); $(this).addClass('selected').css({ boxShadow: boxShadow }).siblings().removeClass('selected').css({ boxShadow: 'none' }).find('.tip').addClass('hidden').removeClass('block'); $(this).find('.tip').addClass('block').removeClass('hidden'); } else { $(this).addClass('border-black selected').removeClass('border-gray-100').siblings().removeClass('border-black selected').addClass('border-gray-100'); } $('.goods-attr .selected').each(function() { var id = $(this).data('id'); selectedItem.push(id); }); // 没有选中的情况,则所有属性都是可选的 if (selectedItem.length === 0) { $('.goods-attr li').removeClass('disabled'); } else if (selectedItem.length > 1) { $('.goods-attr li[data-type!="' + type + '"]').addClass('disabled'); groupDataMap[id].forEach(function(item) { $('.goods-attr li[data-id="' + item + '"]').removeClass('disabled'); }); $('.goods-attr li.disabled').removeClass('selected'); } } selectedItem = []; $('.goods-attr .selected').each(function() { var id = $(this).data('id'); selectedItem.push(id); }); // console.log('selectedItem:', selectedItem); var sortData = selectedItem.sort(); goodsAttrSelected = sortData; updateGoodsPrice(true); }); // ------- 商品属性选择 ----- // ------- 加入购物车 ----- $('#goods_addtocart').on('click', /*#__PURE__*/ _async_to_generator(function() { var groupId, count, dialogHtml; return _ts_generator(this, function(_state) { switch(_state.label){ case 0: if (goodsAttrSelected.length < document.querySelectorAll('.goods-attr').length) { Toastify({ text: 'Please select product attributes first', duration: 3000, position: 'center' }).showToast(); return [ 2 ]; } groupId = goodsAttrSelected.join('_'); count = $('#goods_count').val(); if (isNaN(count)) { count = 1; } return [ 4, Request.addToCart({ gid: goodsId, num: count, groupId: groupDataJson[groupId]['id'] }) ]; case 1: _state.sent(); return [ 4, Request.getCartDialog() ]; case 2: dialogHtml = _state.sent(); $('#cart-pop-window').html(dialogHtml); setTimeout(function() { $('#cart-dialog').css({ left: 0 }); }, 10); return [ 2 ]; } }); // 显示购物车弹窗结束 })); // ------- 加入购物车 ----- }); return [ 4, Request.getReviewList({ gid: goodsId }) ]; case 2: res2 = _state.sent(); $('#goods-review-box').html(res2); // ------------ 获取商品评论 ------------ // 更多评论开始 $('#more-reviews').on('click', /*#__PURE__*/ _async_to_generator(function() { var res; return _ts_generator(this, function(_state) { switch(_state.label){ case 0: return [ 4, Request.getReviewList({ gid: goodsId }) ]; case 1: res = _state.sent(); $('#goods-review-box').append(res); return [ 2 ]; } }); })); // 更多评论结束 // 商品选购数量加减开始 $('#goods_minus').on('click', function() { var number = parseInt($('#goods_count').val()); if (number > 1) { $('#goods_count').val(number - 1); } }); $('#goods_plus').on('click', function() { var number = parseInt($('#goods_count').val()); $('#goods_count').val(number + 1); }); // 商品选购数量加减结束 window.goodsPopCancelCallback = function() { $('#bind-goods-window').html(''); }; window.goodsPopOkCallback = function(bindGoodsId, bindGoodsAttrSelected, bindGroupDataJson) { $('#bind-goods-window').html(''); if (!bindGoodsAttrSelected.length) { return; } var groupId = bindGoodsAttrSelected.join('_'); window.bindGoodsSelected[bindGoodsId + ''] = +bindGroupDataJson[groupId]['id']; $('#bind_data_box .box-check[data-id="' + bindGoodsId + '"]').addClass('icon-duigou bg-light ring-light'); var totalPrice = 0; var totalCount = 0; $('#bind_data_box .box-check.icon-duigou').each(function() { totalCount++; totalPrice += +$(this).data().price; }); $('#bind-goods-selected-price').html(totalPrice); $('#bind-goods-selected-count').html(totalCount); }; slidesPerView = isMobile() ? 1 : 7.5; goodsSmallImgsSwiper = new Swiper('.goods-imgs-swiper', Object.assign({ direction: 'horizontal', slidesPerView: slidesPerView, spaceBetween: 1, slidesPerGroup: 1, loop: false, // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' } }, isMobile() ? { pagination: { el: '.swiper-pagination', dynamicBullets: isMobile() } } : {})); // 选修卡切换逻辑 $('.goods_tabs').on('click', 'li', function() { $(this).addClass('font-medium text-light').siblings().removeClass('font-medium text-light'); var index = $(this).index(); var tabType = $(this).parent().data('type'); $('.goods_tabs_content[data-type="' + tabType + '"]').children().eq(index).addClass('block').removeClass('hidden').siblings().removeClass('block').addClass('hidden'); if ($(this).hasClass('anchor')) { var anchorId = $(this).data('anchor'); var targetOffset = $('#' + anchorId).offset().top - 40; // 滚动页面到目标元素的位置 $('html, body').animate({ scrollTop: targetOffset }, 1000); // 可以调整滚动速度,单位为毫秒 } }); // const toggleCursorStyle = (event, target) => { // // 以当前元素中心为标准,如果鼠标在当前元素的左侧,则鼠标显示左箭头,如果在右边,则鼠标显示右箭头 // if (event.pageX > target.offset().left + target.width() / 2) { // target.css( // 'cursor', // 'url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzI1OTU1NjcyNDE4IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjEzNDg2IiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjQ4Ij48cGF0aCBkPSJNODUuMzMzMzMzIDUxMmE0MjYuNjY2NjY3IDQyNi42NjY2NjcgMCAxIDAgODUzLjMzMzMzNCAwIDQyNi42NjY2NjcgNDI2LjY2NjY2NyAwIDEgMC04NTMuMzMzMzM0IDBaIiBmaWxsPSIjMDAwMDAwIiBwLWlkPSIxMzQ4NyI+PC9wYXRoPjxwYXRoIGQ9Ik01NTIuMTA2NjY3IDUxMmwtMTA1LjM4NjY2NyAxMDUuMzg2NjY3YTMyIDMyIDAgMSAwIDQ1LjIyNjY2NyA0NS4yMjY2NjZsMTI4LTEyOGEzMiAzMiAwIDAgMCAwLTQ1LjIyNjY2NkM1MzIuMDUzMzMzIDQwMS40MDggNDc3Ljg2NjY2NyAzNTIgNDY5LjMzMzMzMyAzNTJhMzIgMzIgMCAwIDAtMjIuNjEzMzMzIDU0LjYxMzMzM0w1NTIuMTA2NjY3IDUxMnoiIGZpbGw9IiNGRkZGRkYiIHAtaWQ9IjEzNDg4Ij48L3BhdGg+PC9zdmc+") 24 24, e-resize' // ); // } else { // target.css( // 'cursor', // 'url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzI1OTU1NjY2MzM0IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjEzMzIxIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjQ4Ij48cGF0aCBkPSJNODUuMzMzMzMzIDUxMmE0MjYuNjY2NjY3IDQyNi42NjY2NjcgMCAxIDAgODUzLjMzMzMzNCAwIDQyNi42NjY2NjcgNDI2LjY2NjY2NyAwIDEgMC04NTMuMzMzMzM0IDBaIiBmaWxsPSIjMDAwMDAwIiBwLWlkPSIxMzMyMiI+PC9wYXRoPjxwYXRoIGQ9Ik00NzEuODkzMzMzIDUxMmwxMDUuMzg2NjY3LTEwNS4zODY2NjdhMzIgMzIgMCAxIDAtNDUuMjI2NjY3LTQ1LjIyNjY2NmwtMTI4IDEyOGEzMiAzMiAwIDAgMCAwIDQ1LjIyNjY2NmM4Ny45MzYgODcuOTc4NjY3IDE0Mi4xMjI2NjcgMTM3LjM4NjY2NyAxNTAuNjEzMzM0IDEzNy4zODY2NjdhMzIgMzIgMCAwIDAgMjIuNjEzMzMzLTU0LjYxMzMzM0w0NzEuODkzMzMzIDUxMnoiIGZpbGw9IiNGRkZGRkYiIHAtaWQ9IjEzMzIzIj48L3BhdGg+PC9zdmc+") 24 24, w-resize' // ); // } // }; // $('#goods-big-img').on('mouseenter', function (event) { // toggleCursorStyle(event, $(this)); // }); // $('#goods-big-img').on('mouseleave', function () { // // 设置#goods-big-img元素的鼠标样式为指针 // $(this).css('cursor', 'default'); // }); // $('#goods-big-img').on('mousemove', function (event) { // toggleCursorStyle(event, $(this)); // }); // $('#goods-big-img').on('click', function (event) { // const selectEl = $('#goods-imgs-wrap img.selected'); // // 判断selectEl处于父元素中的第几个子元素 // const index = $('#goods-imgs-wrap img').index(selectEl); // if (event.pageX > $(this).offset().left + $(this).width() / 2) { // if (index === $('#goods-imgs-wrap img').length - 1) { // return; // } // switchSmallImgAndBigImg(selectEl.next()); // goodsSmallImgsSwiper.slideNext(); // } else { // if (index === 0) { // return; // } // switchSmallImgAndBigImg(selectEl.prev()); // goodsSmallImgsSwiper.slidePrev(); // } // }); // ----------------- 商品大图预览逻辑 ------------------------ zoomer = null; zoomImageDragging = false; $('#goods-imgs-pop-window .close-pop-window').on('click', function(event) { $('#goods-imgs-pop-window').hide(); $('#goods-imgs-pop-loading').hide(); $('#goods-imgs-pop-img').hide(); $('#goods-imgs-pop-img').attr('src', '').off('click').off('dragstart').off('dragend'); zoomer && zoomer.destroy(true); zoomer = null; zoomImageDragging = false; }); $('#goods-imgs-pop-window #goods-imgs-pop-left').on('click', function(event) { var currentIndex = +$('#goods-imgs-pop-index').text(); if (currentIndex === 1) { return; } currentIndex--; $('#goods-imgs-pop-index').text(currentIndex); var img = goodsSmallImgsSwiper.slides[currentIndex - 1].src; $('#goods-imgs-pop-img').hide(); $('#goods-imgs-pop-loading').show(); $('#goods-imgs-pop-img').attr('src', img.replace('gallery/800x', 'gallery/2000x')); $('#goods-imgs-pop-img').on('load', function() { $('#goods-imgs-pop-loading').hide(); $('#goods-imgs-pop-img').show(); }); zoomer && zoomer.zoomTo(1); }); $('#goods-imgs-pop-window #goods-imgs-pop-right').on('click', function(event) { var total = goodsSmallImgsSwiper.slides.length; var currentIndex = +$('#goods-imgs-pop-index').text(); if (currentIndex === total) { return; } currentIndex++; $('#goods-imgs-pop-index').text(currentIndex); var img = goodsSmallImgsSwiper.slides[currentIndex - 1].src; $('#goods-imgs-pop-img').hide(); $('#goods-imgs-pop-loading').show(); $('#goods-imgs-pop-img').attr('src', img.replace('gallery/800x', 'gallery/2000x')); $('#goods-imgs-pop-img').on('load', function() { $('#goods-imgs-pop-loading').hide(); $('#goods-imgs-pop-img').show(); }); zoomer && zoomer.zoomTo(1); }); // 点击商品大图 $('#goods-big-img').on('click', function(event) { var img = $(this).attr('src'); $('#goods-imgs-pop-index').text(goodsSmallImgsSwiper.activeIndex + 1); $('#goods-imgs-pop-count').text(goodsSmallImgsSwiper.slides.length); $('#goods-imgs-pop-window').show(); $('#goods-imgs-pop-loading').show(); $('#goods-imgs-pop-img').attr('src', img.replace('gallery/800x', 'gallery/2000x')); $('#goods-imgs-pop-img').on('load', function() { $('#goods-imgs-pop-loading').hide(); $('#goods-imgs-pop-img').show(); }); $('#goods-imgs-pop-img').css({ cursor: 'zoom-in' }).on('click', function(event) { if (zoomImageDragging) { return; } zoomer && zoomer.zoom(1.1); }); zoomer = new Zoomist('.zoomist-container', { maxScale: 3, slider: false, zoomer: false }); zoomer.on('zoom', function(zoomist, scale) { if (scale <= 1) { $('#goods-imgs-pop-img').css({ cursor: 'zoom-in' }); } else { $('#goods-imgs-pop-img').css({ cursor: 'pointer' }); } }); zoomer.on('drag', function(zoomist, transform, event) { zoomImageDragging = true; }); zoomer.on('dragEnd', function(zoomist, transform, event) { setTimeout(function() { zoomImageDragging = false; }, 10); }); }); return [ 2 ]; } }); // ----------------- 商品大图预览逻辑 ------------------------ })();