diff --git a/custom-tab-bar/index.js b/custom-tab-bar/index.js index f312d0b..7eb2926 100644 --- a/custom-tab-bar/index.js +++ b/custom-tab-bar/index.js @@ -10,12 +10,11 @@ Component({ */ data: { selected: 'index', - show: true, // 控制tab-bar显示状态 - badges: {}, // 存储各tab的未读标记 - // 记录tabBar数据，用于匹配 + show: true, + badges: {}, tabBarItems: [ { key: 'index', route: 'pages/index/index' }, - { key: 'chat', route: 'pages/chat/index', badgeKey: 'chat' }, // 消息中心 + { key: 'chat', route: 'pages/chat/index', badgeKey: 'chat' }, { key: 'settlement', route: 'pages/settlement/index' }, { key: 'profile', route: 'pages/profile/index' } ] @@ -261,31 +260,17 @@ Component({ } }, - // 开始监听全局tab-bar显示状态变化 startTabBarStatusListener() { - // 使用定时器定期检查全局状态 this.tabBarStatusTimer = setInterval(() => { try { const app = getApp() if (app && app.globalData) { - // 检查显示状态 - if (typeof app.globalData.showTabBar !== 'undefined') { - const showTabBar = app.globalData.showTabBar - if (this.data.show !== showTabBar) { - this.setData({ - show: showTabBar - }) - console.log('tab-bar显示状态更新:', showTabBar) - } - } - - // 更新未读标记 this.updateBadges() } } catch (e) { console.error('监听tab-bar状态失败:', e) } - }, 100) // 每100ms检查一次，确保响应迅速 + }, 100) } }, diff --git a/images/轮播图1.jpg b/images/轮播图1.jpg new file mode 100644 index 0000000..92bf382 Binary files /dev/null and b/images/轮播图1.jpg differ diff --git a/images/轮播图2.jpg b/images/轮播图2.jpg new file mode 100644 index 0000000..92bf382 Binary files /dev/null and b/images/轮播图2.jpg differ diff --git a/pages/index/index.js b/pages/index/index.js index 7db2595..c07bc87 100644 --- a/pages/index/index.js +++ b/pages/index/index.js @@ -308,6 +308,10 @@ Page({ newGoods = newGoods.filter(item => (item.status || '').toLowerCase() !== 'hidden') + if (!isLoadMore && newGoods.length > 0) { + newGoods = this.insertAdSlots(newGoods) + } + let updatedGoods = [] if (isLoadMore) { const existingIds = new Set(this.data.goods.map(item => item.id)); @@ -318,7 +322,15 @@ Page({ } const filteredGoods = this.applyFilters(updatedGoods) + console.log('filteredGoods 数量:', filteredGoods.length) + console.log('filteredGoods[0]:', filteredGoods[0]) + console.log('filteredGoods[1]:', filteredGoods[1]) + const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods) + console.log('leftColumnGoods 数量:', leftColumnGoods.length) + console.log('rightColumnGoods 数量:', rightColumnGoods.length) + console.log('leftColumnGoods[0]:', leftColumnGoods[0]) + console.log('rightColumnGoods[0]:', rightColumnGoods[0]) this.setData({ goods: updatedGoods, @@ -331,24 +343,62 @@ Page({ }) }, - // 瀑布流布局：将商品分配到左右两列实现真正的高度自适应 - distributeToColumns: function(goods) { - if (!goods || goods.length === 0) { - return { leftColumnGoods: [], rightColumnGoods: [] } + // 插入广告位数据 + insertAdSlots: function(goods) { + if (!goods || goods.length === 0) return goods + + console.log('insertAdSlots 被调用，商品数量:', goods.length) + + const adSlot1 = { + id: 'ad_slot_1', + name: '广告位1', + imageUrls: ['/images/轮播图1.jpg'], + price: 0, + adType: 'full_card', + isAd: true } - const leftColumn = [] - const rightColumn = [] + const adSlot2 = { + id: 'ad_slot_2', + name: '广告位2', + imageUrls: ['/images/轮播图1.jpg'], + price: 0, + adType: 'half_image', + isAd: true + } - for (let i = 0; i < goods.length; i++) { - if (i % 2 === 0) { - leftColumn.push(goods[i]) - } else { - rightColumn.push(goods[i]) + const result = [adSlot1, adSlot2, ...goods] + console.log('插入广告后的商品数量:', result.length) + console.log('第一个商品:', result[0]) + console.log('第二个商品:', result[1]) + + return result + }, + + // 广告点击事件处理 + onAdClick: function(e) { + const adData = e.currentTarget.dataset.ad + console.log('广告被点击, 广告ID:', adData ? adData.id : 'unknown') + + if (adData && adData.adType) { + wx.showToast({ + title: '广告位: ' + adData.adType, + icon: 'none', + duration: 2000 + }) + + if (adData.adType === 'full_card') { + console.log('完整卡片广告被点击') + } else if (adData.adType === 'half_image') { + console.log('半高图片广告被点击') } + } else { + wx.showToast({ + title: '广告加载中', + icon: 'loading', + duration: 1500 + }) } - - return { leftColumnGoods: leftColumn, rightColumnGoods: rightColumn } }, // 加载商品数据 - 淘宝风格优化 @@ -419,19 +469,20 @@ Page({ else if (category === '红壳') keyword = '红' else if (category === '白壳') keyword = '白' - filtered = filtered.filter(item => (item.name || '').includes(keyword)) + filtered = filtered.filter(item => item.isAd || (item.name || '').includes(keyword)) } if (this.data.searchKeyword) { const keyword = this.data.searchKeyword.toLowerCase() filtered = filtered.filter(item => + item.isAd || (item.name || '').toLowerCase().includes(keyword) || (item.region || '').toLowerCase().includes(keyword) ) } if (this.data.selectedRegion !== '全国') { - filtered = filtered.filter(item => item.region === this.data.selectedRegion) + filtered = filtered.filter(item => item.isAd || item.region === this.data.selectedRegion) } filtered.sort((a, b) => { @@ -475,10 +526,6 @@ Page({ return { leftColumnGoods: leftColumn, rightColumnGoods: rightColumn } }, - }) - - return filtered - }, // 分组商品用于交错布局（左长右短，左短右长交替） groupGoodsForStaggeredLayout: function(goods) { @@ -725,36 +772,21 @@ Page({ // 滚动事件处理 onScroll: function(e) { - // 获取滚动信息 const { scrollTop, scrollHeight, clientHeight } = e.detail; const distanceToBottom = scrollHeight - scrollTop - clientHeight; - // 获取全局状态 const app = getApp(); if (!app || !app.globalData) { return; } - // 当滚动到底部且没有更多数据时，隐藏tabBar - if (distanceToBottom < 100 && !this.data.hasMoreData) { - app.globalData.showTabBar = false; - } - // 当往上滚动不在底部时，立即重新显示tabBar - else { - app.globalData.showTabBar = true; - } + app.globalData.showTabBar = true; }, // 上拉加载更多 onReachBottom: function() { if (this.data.hasMoreData && !this.data.loadingMore) { this.loadGoods(true) - } else if (!this.data.hasMoreData) { - // 没有更多数据时，隐藏tabBar - const app = getApp(); - if (app && app.globalData) { - app.globalData.showTabBar = false; - } } }, diff --git a/pages/index/index.wxml b/pages/index/index.wxml index 6180858..83fca64 100644 --- a/pages/index/index.wxml +++ b/pages/index/index.wxml @@ -170,12 +170,28 @@ + + + + + 广告 + + + + @@ -215,12 +231,28 @@ + + + + + 广告 + + + + diff --git a/pages/index/index.wxss b/pages/index/index.wxss index 8ebc967..7fb770c 100644 --- a/pages/index/index.wxss +++ b/pages/index/index.wxss @@ -1228,6 +1228,54 @@ page { right: 25%; } +/* 广告位样式 */ +.ad-card { + position: relative; + border-radius: 16rpx; + overflow: hidden; + background: #fff; + box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08); +} + +/* 完整卡片广告 */ +.ad-full-card { + width: 100%; + height: 400rpx; +} + +.ad-image { + width: 100%; + height: 400rpx; +} + +/* 半高图片广告 */ +.ad-half-image { + width: 100%; + height: 200rpx; +} + +.ad-image-half { + width: 100%; + height: 200rpx; +} + +/* 广告标签 */ +.ad-badge { + position: absolute; + top: 16rpx; + right: 16rpx; + background: rgba(0, 0, 0, 0.5); + color: #fff; + font-size: 20rpx; + padding: 4rpx 12rpx; + border-radius: 6rpx; +} + +/* 广告点击效果 */ +.ad-card:active { + opacity: 0.85; +} + /* 空商品状态 */ .empty-goods { display: flex; diff --git a/utils/ad-config.js b/utils/ad-config.js new file mode 100644 index 0000000..c436f75 --- /dev/null +++ b/utils/ad-config.js @@ -0,0 +1,38 @@ +const adConfig = { + ads: [ + { + id: 'ad_slot_1', + name: '广告位1', + type: 'full_card', + imageUrl: '/images/轮播图1.jpg', + link: '', + show: true + }, + { + id: 'ad_slot_2', + name: '广告位2', + type: 'half_image', + imageUrl: '/images/轮播图1.jpg', + link: '', + show: true + } + ], + + getAdById(id) { + return this.ads.find(ad => ad.id === id && ad.show) + }, + + getFullCardAd() { + return this.ads.find(ad => ad.type === 'full_card' && ad.show) + }, + + getHalfImageAd() { + return this.ads.find(ad => ad.type === 'half_image' && ad.show) + }, + + getAllAds() { + return this.ads.filter(ad => ad.show) + } +} + +module.exports = adConfig