// 处于页面配置时,绑定方法 start
if ($isDecorateMode) {
document.addEventListener("diy_header/1", (event) => {
const { field, value } = event.detail;
console.log(field, value)
if (field === 'hots') {
let html = ''
value.forEach(e => {
html += `${e.name}`
})
$('.' + field).html(html)
}
});
}
// 处于页面配置时,绑定方法 end
$(function () {
$("#logout").click(function () {
$request
.post("/api/user/logout")
.then((res) => {
// 跳转页面
location.href = "/";
});
})
// 防止一开始进入页面在底部不显示
setHeaderSticky()
$(window).scroll(setHeaderSticky)
function setHeaderSticky(){
let offset = $("html,body").scrollTop()
if (offset) {
$('.ys-header').addClass('is-sticky')
} else {
$('.ys-header').removeClass('is-sticky')
}
}
// 导航栏悬停
$('.ys-header__nav .nav-item').hover(function () {
$(this).find('.ys-header__card').addClass('show')
$('.ys-header__cover').removeClass('display-none')
}, function () {
$(this).find('.ys-header__card').removeClass('show')
$('.ys-header__cover').addClass('display-none')
})
// 搜索框悬停事件
$('.ys-header__search').focus(function () {
$('.ys-header__nav').addClass('display-none')
$('.ys-header__right').addClass('open')
}, function() {
if (!$('.ys-header__search-card').hasClass('show')) {
$('.ys-header__nav').removeClass('display-none')
$('.ys-header__right').removeClass('open')
}
})
// 搜索框聚焦事件
$('.ys-header__search input').focus(function () {
openSearchCard()
})
$('.ys-header__search-card .icon-close').click(function () {
closeSearchCard()
})
$(document).on('click', function (e) {
if (
$(".ys-header__search-card")[0].contains(e.target) ||
$(".ys-header__search input").is(":focus") ||
$(".ys-header .ys-header__menu")[0].contains(e.target) ||
$(".ys-header .ys-header-menu")[0].contains(e.target) ||
$(".ys-header .ys-header-search--mobile")[0].contains(e.target)
) return
closeSearchCard();
})
// 搜索
$('.ys-header__search input').keyup(function (e) {
if (e.keyCode === 13) {
search()
}
})
$('.ys-header__search .search-btn').click(function () {
search()
})
// 清空历史记录
$('.ys-header__search-card .search-history span').click(function () {
localStorage.removeItem('searchHistory')
setHistory()
})
// 展开搜索卡片
function openSearchCard() {
$('.ys-header__nav').addClass('display-none')
$('.ys-header__search-card').addClass('show')
$('.ys-header__cover').removeClass('display-none')
$('.ys-header__right').addClass('open')
}
// 收起搜索卡片
function closeSearchCard() {
$('.ys-header__nav').removeClass('display-none')
$('.ys-header__search-card').removeClass('show')
$('.ys-header__cover').addClass('display-none')
$('.ys-header__right').removeClass('open')
$('.ys-header').removeClass('is-show-mobile-search')
}
// 搜索事件
function search() {
let val = $('.ys-header__search input').val()
if (!val) return $message.warning('请输入搜索关键词')
let history = JSON.parse(localStorage.getItem('searchHistory')) || []
history.unshift(val)
history = [...new Set(history)]
localStorage.setItem('searchHistory', JSON.stringify(history.slice(0, 10)))
window.open('/search_result.html?keyword=' + val)
closeSearchCard()
setHistory()
}
// 设置搜索历史
function setHistory() {
let history = JSON.parse(localStorage.getItem('searchHistory')) || []
let html = ''
history.forEach(e => {
html += `${e}`
})
$('.ys-header__search-card .search-history .search-words').html(html)
}
setHistory()
// 移动端搜索
$('.ys-header .ys-header-search--mobile .icon-search').click(function(){
$('.ys-header').addClass('is-show-mobile-search')
openSearchCard()
})
// 熊猫体育官网首页入口
tabs切换
const moreTypeList = ['information', 'catalog'] // 存在 more 的类型
$('.service-cate li').hover(function () {
let type = $(this).attr('data-type')
if (type) {
$('.service-cate li').removeClass('active')
$(this).addClass('active')
$('.ys-header__service .content-item').addClass('display-none')
$('.ys-header__service .content-item[data-type='+type+']').removeClass('display-none')
if(moreTypeList.includes(type)){
$('.service-content-more').not('.' + type).addClass('display-none')
$('.service-content-slide').removeClass('display-none')
$('.service-content-more.' + type).removeClass('display-none')
} else {
$('.service-content-more').addClass('display-none')
$('.service-content-slide').addClass('display-none')
}
}
})
// 关于我们tabs切换
$('.about-cate-item').hover(function () {
let type = $(this).attr('data-type')
if (type) {
$('.about-cate-item').removeClass('active')
$(this).addClass('active')
$('.about-content .about-item').addClass('display-none')
$('.about-content .about-item[data-type='+type+']').removeClass('display-none')
// 用于切换底部更多链接跳转,现在没有更多,如果需要参考上方取消注释
/* $('.about-content-slide').addClass('display-none')
$('.about-content-more').addClass('display-none') */
}
})
// 点击遮罩
$('.ys-header__cover').click(function(){
closeMenuFold()
})
// 抽屉
function openMenuFold() {
$('.ys-header .ys-header-menu').addClass('show')
$('.ys-header__cover').removeClass('display-none')
}
function closeMenuFold() {
$('.ys-header__cover').addClass('display-none')
$('.ys-header .ys-header-menu').removeClass('show')
}
$('.ys-header .ys-header__menu .icon-menu').click(openMenuFold)
$('.ys-header .ys-header-menu .icon-close').click(closeMenuFold)
})
$(document).ready(function() {
$('.selection-item input[type=checkbox]').each(function(){
$(this).prop('checked', false)
})
})
// 更多筛选的展开/收起
$(".ys-product-filter").on("click", ".ys-product-filter__more", function (e) {
if ($(this).hasClass('expand')) {
$(this).removeClass('expand')
$('.ys-product-filter__box .filter-item').each(function() {
if (+$(this).attr('data-index') >= 6) {
$(this).addClass('display-none')
}
})
} else {
$(this).addClass('expand')
$('.ys-product-filter__box .filter-item').removeClass('display-none')
showExpand()
}
e.preventDefault();
});
// 条件过滤项的展开/收起
$(".ys-product-filter__box").on("click", ".filter-item .filter-item-expand", function (e) {
if ($(this).hasClass('expand')) {
$(this).removeClass('expand')
$(this).parent().find('.filter-item-selection').removeClass('expand')
$(this).find('span').html('展开')
$(this).find('i').removeClass('expand')
} else {
$(this).addClass('expand')
$(this).parent().find('.filter-item-selection').addClass('expand')
$(this).find('span').html('收起')
$(this).find('i').addClass('expand')
}
e.preventDefault();
});
// 点击筛选项
let filters = []
$(".ys-product-filter__box").on("click", ".filter-item input[type=checkbox]", function (e) {
let id = $(this).attr('id')
// 如果第一个就是勾选了分类,则直接跳转分类
if(filters.length === 0 && id.startsWith('c')) {
location.href = `/category/${$(this).data('title')}.html`
return
}
let checked = $(this).is(":checked")
let type = $(this).parents('.filter-item').attr('data-filter_target')
let pid = $(this).parents('.filter-item').attr('data-filter_id')
if (checked) {
let i = filters.findIndex(i => i.pid === 'category_id')
if (i > -1 && pid === 'category_id') {
filters[i] = {
id,
pid,
type,
title: $(this).attr('data-title')
}
} else {
filters.push({
id,
pid,
type,
title: $(this).attr('data-title')
})
}
} else {
filters.splice(filters.findIndex(i => i.id === id), 1)
}
filterEvent()
});
$(".ys-product-filter").on("click", ".ys-product-filter-checked .icon-close", function () {
let id = $(this).parent().data('id')
let pid = $(this).parent().data('pid')
filters.splice(filters.findIndex(e => e.id == id && e.pid == pid), 1)
filterEvent()
});
$(".ys-product-filter").on("click", ".ys-product-filter-checked button", function () {
filters = []
filterEvent()
});
// 筛选事件
function filterEvent() {
let params = {
filters
}
if ($('.ys-product-filter').attr('data-category_id')) {
params.category_id = $('.ys-product-filter').attr('data-category_id')
}
window.dispatchEvent(
new CustomEvent('product_filter', {
detail: params
})
)
showFiltered()
}
// 显示已选筛选项
function showFiltered() {
$('.ys-product-filter-checked').remove()
let html = ''
filters.forEach(e => {
html += `
${e.title}
`
})
if (filters.length) {
$('.ys-product-filter__box').before(`
${html}
`)
}
}
$(function () {
window.addEventListener('product_options', setOptions) // 监听筛选项变化事件
showExpand()
// 设置筛选项options
function setOptions(event) {
if (!event.detail || !event.detail.options || !event.detail.options.length) {
$('.ys-product-filter__more').addClass('display-none')
$('.ys-product-filter__box').addClass('display-none')
return
}
$('.ys-product-filter__box').removeClass('display-none')
let html = ''
if (event.detail.categorys) {
let c_html = ''
event.detail.categorys.forEach(e => {
c_html += `
i.pid === 'category_id' && i.id === 'c' + e.id) ? 'checked' : ''} />
`
})
html += `
`
}
event.detail.options.forEach((e, i) => {
let c_html = ''
e.value.forEach(child => {
c_html += `
i.pid !== 'category_id' && +i.id === child.id) ? 'checked' : ''} />
`
})
html += `
`
})
$('.ys-product-filter__box').html(html)
showExpand()
if (event.detail.length > 6) {
$('.ys-product-filter__more').removeClass('display-none')
}
}
})
// 是否显示展开收起
let filterHeight = 135 // 过滤器高度,超过折叠
function showExpand() {
$('.ys-product-filter__box .filter-item').each(function() {
let height = $(this).find('.selection-box').height()
if (height < filterHeight) {
$(this).find('.filter-item-expand').addClass('display-none')
} else {
$(this).find('.filter-item-expand').removeClass('display-none')
}
})
}
/* 抽屉 start */
function openMobileFilter() {
$('.ys-product-filter').addClass('mobile-show')
$('.ys-product-filter-cover--mobile').addClass('show')
$('body').addClass('overflow-hidden')
}
function closeMobileFilter() {
$('.ys-product-filter').removeClass('mobile-show')
$('.ys-product-filter-cover--mobile').removeClass('show')
$('body').removeClass('overflow-hidden')
}
function initMobileFilter () {
$('.ys-product-filter-switch').on('click', function() {
openMobileFilter()
})
$('.filter-mobile-close .icon-close').on('click', function() {
closeMobileFilter()
})
$('.ys-product-filter-cover--mobile').on('click', function() {
closeMobileFilter()
})
showExpand()
}
$(function(){
initMobileFilter()
})
/* 抽屉 end */
$(function () {
window.addEventListener('product_filter', filter) // 监听筛选结果
window.addEventListener('pager_change', pagerChange) // 监听分页条数变化
window.addEventListener('current_page', currentPage) // 监听页码变化
const params = {
page: 1,
pageSize: 8,
attributes: {},
keyword: '',
category_id: ''
}
const result = {
type: -1,
total: 0,
list: []
}
let filters = []
function filter(e) {
filters = e.detail.filters
if (e.detail.category_id) params.category_id = e.detail.category_id
params.attributes = {}
filters.forEach(e => {
params.attributes[e.pid] = +e.id
})
params.page = 1
result.list = []
request()
}
function pagerChange(e) {
params.pageSize = +e.detail
params.page = 1
result.list = []
request()
}
function currentPage(e) {
if (e.detail == params.page) return
params.page = +e.detail
request()
}
function request() {
if ($('.ys-product__spu').data('category_id')) params.category_id = $('.ys-product__spu').data('category_id')
result.type = filters.find(e => e.type == 1) ? 1 : 0
$loading.start()
$request
.post("/api/goods/filter-products", params)
.then((res) => {
if(res.data && res.data.redirect_url) {
window.location.href = res.data.redirect_url
return;
}
window.dispatchEvent(
new CustomEvent('product_options', {
detail: {
options: res.data.options
}
})
)
$('.ys-product__cate').remove()
if ((result.type === 0 && res.data.spus.total > 1) || !res.data.skus.list.length) {
$('.ys-product__sku').css('display', 'none')
$('.ys-product__spu .ys-product__search').removeClass('display-none')
$('.ys-product__spu .ys-product__search .ys-product__total span').html(res.data.spus.total)
$('.ys-product__spu .ys-product__search input').val(params.keyword)
$('.ys-product__list').removeClass('display-none')
result.list = params.page === 1 ? res.data.spus.list : result.list.concat(res.data.spus.list)
result.total = res.data.spus.total
let spu_html = ''
if (result.list.length) {
result.list.forEach(e => {
spu_html += `
`
})
} else {
spu_html += `
抱歉,没有找到相关的内容
抱歉,没有找到相关的内容
`
}
$('.ys-product__list').html(spu_html)
} else {
result.type = 1
result.list = res.data.skus.list
result.total = res.data.skus.total
$('.ys-product__list').addClass('display-none')
$('.ys-product__spu .ys-product__search').addClass('display-none')
$('.ys-product__sku').css('display', 'block')
$('.ys-product__sku .ys-product__total span').html(result.total)
$('.ys-product__sku .ys-product__search input').val(params.keyword)
$('.ys-product__sku .ys-product__search button span').html(0 + '/' + result.list.length)
let sku_html = ''
if (result.list.length) {
result.list.forEach(e => {
sku_html += `
${!Array.isArray(e.attribute) || !e.attribute.length
? `- 如需了解产品详情,请点击联系在线客服
客服电话:15016918160
`
: e.attribute.slice(0, 9).map(
(s) => `
- ${s.key_name || ''}: ${s.value_name || ''}
`
)
.join('')}
`
})
$('.ys-product__sku .ys-product__table').html(`
`+ sku_html + `
`)
} else {
sku_html += `
抱歉,没有找到相关的内容
抱歉,没有找到相关的内容
`
$('.c-pagination-nav').remove()
$('.ys-product__sku .ys-product__table').html(sku_html)
}
$(".c-pagination").html('')
$(".c-pagination").zPager({
totalData: result.total,
pageStep: 5,
current: params.page,
pageData: params.pageSize
})
}
}).finally(() => {
$loading.end()
})
}
// 滚动到底部
$(window).scroll(function () {
if (result.type === 0) {
if ($(document).scrollTop() + 400 >= $(document).height() - $(window).height()) {
if (result.total > params.page * params.pageSize && !$loading.status) {
params.page++
request()
}
}
}
})
// spu搜索框事件
$("body").on("click", ".ys-product__input--spu i", function (e) {
let val = $(this).parent().find('input').val()
search(val)
});
$("body").on("keyup", ".ys-product__input--spu input", function (e) {
let val = $(this).val()
if (e.keyCode === 13) {
search(val)
}
});
// sku搜索事件
$("body").on("click", ".ys-product__sku .ys-product__input i", function (e) {
let val = $(this).parent().find('input').val()
search(val)
});
$("body").on("keyup", ".ys-product__sku .ys-product__input input", function (e) {
let val = $(this).val()
if (e.keyCode === 13) {
search(val)
}
});
function search(val) {
params.keyword = val
params.page = 1
result.list = []
request()
}
// 分页
$("body").on("click", ".c-page-item", function (e) {
if ($(this).hasClass('disabled')) return
params.page = +$(this).attr('data-page')
request()
});
})
// 点击表格行(选中/取消选中)
let compare_skus = []
$('.ys-product__table').on('click', '.product-table-item input', function (e) {
let checked = $(this).is(':checked')
if (checked) {
compare_skus.push($(this).attr('id'))
} else {
compare_skus.splice(
compare_skus.findIndex((e) => e === $(this).attr('id')),
1
)
}
$('.ys-product__search button span').html(
compare_skus.length + '/' + ($('.product-table-item').length - $('.product-table-item.display-none').length)
)
$('.ys-product__action .batch-action-num i').text(compare_skus.length)
if (compare_skus.length) {
$('.ys-product__search button').removeClass('disabled')
$('.ys-product__action').addClass('active')
} else {
$('.ys-product__search button').addClass('disabled')
$('.ys-product__action').removeClass('active')
}
})
// 开始对比按钮
$('.ys-product__sku').on('click', '.ys-product__search button', function (e) {
if (!compare_skus.length) return
if (compare_skus.length < 2) return $message.info("请至少选择两种物料")
window.open('/compare.html?sku_code=' + compare_skus.join(','))
})
$(".ys-product__sku").on("click", ".ys-product__search button div", function (e) {
compare_skus = []
$('.product-table-item').each(function() {
$(this).find('input').prop('checked', false)
})
$('.ys-product__search button span').html(compare_skus.length + '/' + ($('.product-table-item').length - $('.product-table-item.display-none').length))
$('.ys-product__search button').addClass('disabled')
$('.ys-product__action .batch-action-num i').text(compare_skus.length)
$('.ys-product__action').removeClass('active')
e.preventDefault();
});
// 保存至清单
$('.ys-product__sku').on('click', '.save-sku', function (e) {
if (!$isLogin) {
$message.info('请先登录')
return
}
let sku_id = $(this).attr('data-id')
$request.post('/api/user/collect', { sku_id }).then((res) => {
$message.success('保存成功')
})
})
// 批量保存至清单
$('.ys-product__action .batch-action-save').on('click', function (e) {
if (!$isLogin) {
$message.info('请先登录')
return
}
$request
.post('/api/user/collect', {
sku_id: $('.product-table-item:has(input:checked) .save-sku')
.map(function () {
return $(this).data('id')
})
.toArray(),
})
.then((res) => {
$message.success('保存成功')
// 取消选择
$('.ys-product__search button div').click()
})
})
// 分页
function currentPage(currentPage) {
window.dispatchEvent(
new CustomEvent('current_page', {
detail: currentPage,
})
)
}
function changePager(sizes) {
window.dispatchEvent(
new CustomEvent('pager_change', {
detail: sizes,
})
)
}
// 清除选中
window.addEventListener('clearSku', clearSku)
function clearSku() {
compare_skus = []
}
// empty 联系客服
$('.ys-product__table').on('click', '.product-table-service', function (e) {
window.dispatchEvent(
new CustomEvent('openService')
)
})
// 处于页面配置时,绑定方法
if ($isDecorateMode) {
document.addEventListener('diy_footer/1', (event) => {
const { field, value } = event.detail
console.log(field, value)
if (field === 'footer_ad') {
const nodes = $(
value
.map((item) => `
`)
.join('')
)
$('.ys-footer__ad').empty()
$('.ys-footer__ad').append(nodes)
} else if (field === 'contact_phone') {
$('.footer_phone').text(value)
} else if (field === 'work_time') {
$('.footer_work_time').text(value)
} else if (field === 'contact_email') {
$('.footer_email').text(value)
} else if (field === 'footer_nav') {
const nodes = $(
value
.map(
(c) => `
`
)
.join('')
)
$('.ys-footer__content .center-part').empty()
$('.ys-footer__content .center-part').append(nodes)
} else if (field === 'right_part') {
const nodes = $(
value
.map((item) => `
`)
.join('')
)
$('.ys-footer__content .right-part').empty()
$('.ys-footer__content .right-part').append(nodes)
} else if (field === 'friendly_links') {
const nodes = $(
value
.map(
(e) => `
${e.title}
`
)
.join('')
)
$('.ys-footer__friendly ul').empty()
$('.ys-footer__friendly ul').append(nodes)
} else if (field === 'copyright') {
$('.copyright-wrap span').text(value)
} else if (field === 'beian') {
$('.copyright-wrap a').text(value)
} else if (field === 'footer_logo') {
$('.footer-logo').attr('alt', value.alt)
$('.footer-logo').attr('src', value.src)
} else if (field === 'map_links') {
const nodes = $(
value
.map(
(e) => `
${e.title}
`
)
.join('')
)
$('.ys-footer__end .end-link').empty()
$('.ys-footer__end .end-link').append(nodes)
}
})
}
// 底部导航折叠面板
$('.ys-footer__content .center-part').on('click','.content-link__title',function(){
const item = $(this)
item.parent().toggleClass('show')
item.next().stop().slideToggle()
})
window.addEventListener('openService', openService) // 监听全局客服点击事件
// 打开客服弹窗
function openService() {
if ($('#aff-im-root .embed-toolbar-btn').length > 0) {
$('#aff-im-root .embed-toolbar-btn').eq(0).click()
} else {
window.open('https://affimvip.baidu.com/cps5/chat?siteToken=a7ba6ebbc2c4e8d66bd2f203b94d6c07&siteId=16910226', '_blank')
}
}
$('.ys-tabbar__service').click(function(){
openService()
})